From a2a85c3095e8702fbd4348da7486eab6d3379491 Mon Sep 17 00:00:00 2001 From: 3Shain Date: Wed, 15 Dec 2021 21:09:42 +0800 Subject: [PATCH 1/7] feat: a ton of updates --- angular.json | 24 +- apps/core/src/app/addon/addon.service.ts | 1 + apps/core/src/app/addon/lookup.service.ts | 16 +- .../app/addon/overlay-container.component.ts | 1 + apps/core/src/app/app.module.ts | 4 +- apps/core/src/app/pages/edit/edit.page.html | 67 +-- apps/core/src/app/pages/edit/edit.page.scss | 52 +- apps/core/src/app/pages/edit/edit.page.ts | 495 ++++++++---------- .../src/app/pages/edit/in-memory.storage.ts | 2 +- apps/core/src/app/redirect.guard.ts | 23 + apps/core/src/styles.less | 1 - apps/core/src/workers/css.worker.ts | 1 + apps/core/src/workers/editor.worker.ts | 1 + apps/core/src/workers/html.worker.ts | 1 + apps/core/src/workers/init-monaco.ts | 20 + apps/core/src/workers/json.worker.ts | 1 + apps/core/src/workers/typescript.worker.ts | 1 + apps/core/tsconfig.json | 3 + apps/core/tsconfig.worker.json | 15 + libs/common/src/lib/comen.ts | 1 + libs/common/src/lib/message.ts | 2 +- libs/delta/src/index.ts | 11 +- libs/delta/src/lib/delta.tsx | 21 +- libs/delta/src/lib/styles.scss | 4 - libs/delta/src/lib/text.tsx | 43 +- libs/delta/src/lib/view.tsx | 252 ++++----- libs/dogfood/.eslintrc.json | 22 - libs/dogfood/README.md | 7 - libs/dogfood/jest.config.js | 12 - libs/dogfood/src/index.ts | 1 - libs/dogfood/src/lib/dogfood.ts | 1 - libs/dogfood/src/lib/fastdom.ts | 21 - libs/dogfood/tsconfig.json | 13 - libs/dogfood/tsconfig.lib.json | 11 - libs/dogfood/tsconfig.spec.json | 15 - .../add-property-popover.component.html | 8 - .../add-property-popover.component.scss | 0 .../add-property-popover.component.ts | 20 - .../condition-popover.component.html | 34 -- .../condition-popover.component.scss | 7 - .../condition-popover.component.ts | 70 --- .../condition-popover.directive.ts | 102 ---- .../config-block/config-block.component.html | 23 +- .../config-block/config-block.component.ts | 1 - .../config-condition.component.html | 10 - .../config-condition.component.scss | 14 - .../config-condition.component.ts | 59 --- .../config-plane/config-plane.component.html | 25 +- .../config-plane/config-plane.component.scss | 4 +- .../color-control/color-control.component.ts | 12 +- .../src/lib/controls/controls.module.ts | 7 +- .../monaco-control.component.ts | 60 +++ libs/editor/src/lib/editor.component.html | 107 ++-- libs/editor/src/lib/editor.component.scss | 126 +++-- libs/editor/src/lib/editor.component.ts | 169 +----- libs/editor/src/lib/editor.module.ts | 44 +- .../element-tree-node.directive.ts | 20 - .../element-tree-plane.component.html | 16 - .../element-tree-plane.component.scss | 68 --- .../element-tree-plane.component.ts | 37 -- libs/editor/src/lib/providers.ts | 7 +- libs/gamma/src/lib/gamma.module.ts | 5 +- libs/gamma/src/lib/metadata.ts | 15 +- nx.json | 3 - package-lock.json | 62 ++- package.json | 5 +- tsconfig.base.json | 1 - 67 files changed, 861 insertions(+), 1446 deletions(-) create mode 100644 apps/core/src/app/redirect.guard.ts create mode 100644 apps/core/src/workers/css.worker.ts create mode 100644 apps/core/src/workers/editor.worker.ts create mode 100644 apps/core/src/workers/html.worker.ts create mode 100644 apps/core/src/workers/init-monaco.ts create mode 100644 apps/core/src/workers/json.worker.ts create mode 100644 apps/core/src/workers/typescript.worker.ts create mode 100644 apps/core/tsconfig.worker.json delete mode 100644 libs/dogfood/.eslintrc.json delete mode 100644 libs/dogfood/README.md delete mode 100644 libs/dogfood/jest.config.js delete mode 100644 libs/dogfood/src/index.ts delete mode 100644 libs/dogfood/src/lib/dogfood.ts delete mode 100644 libs/dogfood/src/lib/fastdom.ts delete mode 100644 libs/dogfood/tsconfig.json delete mode 100644 libs/dogfood/tsconfig.lib.json delete mode 100644 libs/dogfood/tsconfig.spec.json delete mode 100644 libs/editor/src/lib/config-plane/add-property-popover/add-property-popover.component.html delete mode 100644 libs/editor/src/lib/config-plane/add-property-popover/add-property-popover.component.scss delete mode 100644 libs/editor/src/lib/config-plane/add-property-popover/add-property-popover.component.ts delete mode 100644 libs/editor/src/lib/config-plane/condition-popover/condition-popover.component.html delete mode 100644 libs/editor/src/lib/config-plane/condition-popover/condition-popover.component.scss delete mode 100644 libs/editor/src/lib/config-plane/condition-popover/condition-popover.component.ts delete mode 100644 libs/editor/src/lib/config-plane/condition-popover/condition-popover.directive.ts delete mode 100644 libs/editor/src/lib/config-plane/config-condition/config-condition.component.html delete mode 100644 libs/editor/src/lib/config-plane/config-condition/config-condition.component.scss delete mode 100644 libs/editor/src/lib/config-plane/config-condition/config-condition.component.ts create mode 100644 libs/editor/src/lib/controls/monaco-control/monaco-control.component.ts delete mode 100644 libs/editor/src/lib/element-tree-plane/element-tree-node.directive.ts delete mode 100644 libs/editor/src/lib/element-tree-plane/element-tree-plane.component.html delete mode 100644 libs/editor/src/lib/element-tree-plane/element-tree-plane.component.scss delete mode 100644 libs/editor/src/lib/element-tree-plane/element-tree-plane.component.ts diff --git a/angular.json b/angular.json index bb37b84..45c5152 100644 --- a/angular.json +++ b/angular.json @@ -39,7 +39,8 @@ "date-fns", "react", "react-dom" - ] + ], + "webWorkerTsConfig": "apps/core/tsconfig.worker.json" }, "configurations": { "production": { @@ -476,27 +477,6 @@ } } }, - "dogfood": { - "root": "libs/dogfood", - "sourceRoot": "libs/dogfood/src", - "projectType": "library", - "architect": { - "lint": { - "builder": "@nrwl/linter:eslint", - "options": { - "lintFilePatterns": ["libs/dogfood/**/*.ts"] - } - }, - "test": { - "builder": "@nrwl/jest:jest", - "outputs": ["coverage/libs/dogfood"], - "options": { - "jestConfig": "libs/dogfood/jest.config.js", - "passWithNoTests": true - } - } - } - }, "delta": { "root": "libs/delta", "sourceRoot": "libs/delta/src", diff --git a/apps/core/src/app/addon/addon.service.ts b/apps/core/src/app/addon/addon.service.ts index a1104ff..d0b595d 100644 --- a/apps/core/src/app/addon/addon.service.ts +++ b/apps/core/src/app/addon/addon.service.ts @@ -32,6 +32,7 @@ export class AddonService { { name: 'null', displayName: 'N/A', + description: '似乎有什么出错了🤔', editable: false, configuration: { displayName: 'N/A', diff --git a/apps/core/src/app/addon/lookup.service.ts b/apps/core/src/app/addon/lookup.service.ts index f0f1904..03ace4f 100644 --- a/apps/core/src/app/addon/lookup.service.ts +++ b/apps/core/src/app/addon/lookup.service.ts @@ -15,7 +15,7 @@ import { OverlayInfo, SourceInfo, } from './definations'; -// import { preloadDelta } from '@comen/delta'; +import { preloadDelta } from '@comen/delta'; type LazyLoadStaticCallback = () => Promise | Type>; @@ -38,13 +38,13 @@ export class LookupService { ); }, }, - // { - // name: 'delta', - // displayName: '评论栏 v2', - // icon: '/assets/icon_gamma.png', - // version: '0.0.0', - // preload: preloadDelta - // }, + { + name: 'delta', + displayName: '评论栏 v2', + icon: '/assets/icon_gamma.png', + version: '0.0.0', + preload: preloadDelta + }, ]; readonly BUILT_IN_SOURCE: SourceInfo[] = [ diff --git a/apps/core/src/app/addon/overlay-container.component.ts b/apps/core/src/app/addon/overlay-container.component.ts index ce10181..9f00a27 100644 --- a/apps/core/src/app/addon/overlay-container.component.ts +++ b/apps/core/src/app/addon/overlay-container.component.ts @@ -38,6 +38,7 @@ export class OverlayContainerComponent { const htmlElement = root.appendChild(document.createElement('html')); htmlElement.style.height = '100%'; htmlElement.style.overflow = 'hidden'; + htmlElement.lang = 'en'; // TODO htmlElement.appendChild( document.createElement('head') ); diff --git a/apps/core/src/app/app.module.ts b/apps/core/src/app/app.module.ts index bd3875e..4bf9bb7 100644 --- a/apps/core/src/app/app.module.ts +++ b/apps/core/src/app/app.module.ts @@ -8,6 +8,7 @@ import { DebugGuard } from './addon/debug.guard'; import { AppComponent } from './app.component'; import { CompatibleRoutes } from './compatible.guard'; import { FileModule } from './file'; +import { RedirectGuard } from './redirect.guard'; @NgModule({ declarations: [ @@ -21,6 +22,7 @@ import { FileModule } from './file'; RouterModule.forRoot([ { path: '', + canActivate: [RedirectGuard], pathMatch: 'full', loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule) }, @@ -61,7 +63,7 @@ import { FileModule } from './file'; } ]) ], - providers: [CompatibleRoutes], + providers: [CompatibleRoutes, RedirectGuard], bootstrap: [AppComponent] }) export class AppModule { diff --git a/apps/core/src/app/pages/edit/edit.page.html b/apps/core/src/app/pages/edit/edit.page.html index 1035ac8..19b79cd 100644 --- a/apps/core/src/app/pages/edit/edit.page.html +++ b/apps/core/src/app/pages/edit/edit.page.html @@ -1,32 +1,7 @@ - - +
@@ -39,42 +14,4 @@

一切已就绪！

- - - -
-
-
-
-
-
-
- -
- -
- -
- -
-
-
- - -
-
-
-
-
-
\ No newline at end of file diff --git a/apps/core/src/app/pages/edit/edit.page.scss b/apps/core/src/app/pages/edit/edit.page.scss index d43bfd6..094bb2c 100644 --- a/apps/core/src/app/pages/edit/edit.page.scss +++ b/apps/core/src/app/pages/edit/edit.page.scss @@ -4,57 +4,7 @@ height: 100vh; /* weird */ flex-direction: column; - & > header { - display: flex; - height: 50px; - align-items: center; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), - 0 1px 2px 0 rgba(0, 0, 0, 0.06); - - & > #logo { - display: inline-block; - padding: 12px 16px; - height: 50px; - color: #a16ba1; - &:hover { - cursor: pointer; - } - & > svg { - fill: currentColor; - height: 100%; - } - } - - & > .workspace { - } - - & > .fill { - flex: 1; - } - - & > .assets-info { - #assets-indicator { - display: inline-block; - height: 26px; - width: 26px; - border-radius: 50%; - border: solid 1px #ddd; - background: conic-gradient( - #ddd 0%, - #ddd 70%, - white 70%, - white 100% - ); - } - } - - & > .action-group { - } - - [nz-button] { - margin-left: 8px; - } - } + background-color: #fafbfc; & > comen-editor { flex: auto; diff --git a/apps/core/src/app/pages/edit/edit.page.ts b/apps/core/src/app/pages/edit/edit.page.ts index 48843aa..d0f80c0 100644 --- a/apps/core/src/app/pages/edit/edit.page.ts +++ b/apps/core/src/app/pages/edit/edit.page.ts @@ -1,24 +1,25 @@ import { Overlay } from '@angular/cdk/overlay'; import { TemplatePortal } from '@angular/cdk/portal'; import { - ChangeDetectionStrategy, - Component, - ElementRef, - OnDestroy, - OnInit, - TemplateRef, - ViewChild, - ViewContainerRef, + ChangeDetectionStrategy, + Component, + ElementRef, + OnDestroy, + OnInit, + TemplateRef, + ViewChild, + ViewContainerRef, + ɵɵdirectiveInject as directiveInject, } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { ComenAddonConfiguration, Message, SafeAny } from '@comen/common'; import { - EditorComponent, - EditorRealtimeMessageProvider, - EDITOR_ASSET_STORAGE, - EDITOR_REALTIME_MESSAGE_PROVIDER, + EditorComponent, + EditorRealtimeMessageProvider, + EDITOR_ASSET_STORAGE, + EDITOR_REALTIME_MESSAGE_PROVIDER, } from '@comen/editor'; -import { zoomBigMotion } from '@comen/editor'; +import { zoomBigMotion, COMEN_ADDON_METADATA } from '@comen/editor'; import { defer, merge, Observable, of, Subject } from 'rxjs'; import { shareReplay, switchMap, take, takeUntil } from 'rxjs/operators'; import { AddonService } from '../../addon/addon.service'; @@ -26,277 +27,221 @@ import { OverlayInfo, SourceInfo } from '../../addon/definations'; import { LookupService } from '../../addon/lookup.service'; import { ComenFile } from '../../file'; import { InMemoryStorage } from './in-memory.storage'; -import { faCog } from '@fortawesome/free-solid-svg-icons'; import { OverlayContainerComponent } from '../../addon/overlay-container.component'; import { - serializeObjectToBase64, - serializeObjectToBuffer, + serializeObjectToBase64, + serializeObjectToBuffer, } from '../../common/base64'; - +import { ngSetup, WithKairo } from '@kairo/angular'; +import { injected } from 'kairo'; +import { Title } from '@angular/platform-browser'; + +@WithKairo(() => { + const addon = directiveInject(AddonService); + const rr = directiveInject(ActivatedRoute); + const inject = addon.getOverlayAddonMetadata( + rr.snapshot.queryParams.o ?? 'null' + ); // TODO: reasonable default selection + + return { + [COMEN_ADDON_METADATA]: inject + }; +}) @Component({ - selector: 'comen-edit', - templateUrl: './edit.page.html', - styleUrls: ['./edit.page.scss'], - animations: [zoomBigMotion], - changeDetection: ChangeDetectionStrategy.OnPush, - providers: [ - { - provide: EDITOR_REALTIME_MESSAGE_PROVIDER, - useExisting: EditPage, - }, - InMemoryStorage, - { - provide: EDITOR_ASSET_STORAGE, - useExisting: InMemoryStorage, - }, - ], + selector: 'comen-edit', + templateUrl: './edit.page.html', + styleUrls: ['./edit.page.scss'], + animations: [zoomBigMotion], + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ + { + provide: EDITOR_REALTIME_MESSAGE_PROVIDER, + useExisting: EditPage, + }, + InMemoryStorage, + { + provide: EDITOR_ASSET_STORAGE, + useExisting: InMemoryStorage, + }, + ], }) // eslint-disable-next-line -export class EditPage implements OnDestroy, EditorRealtimeMessageProvider { - configuration: ComenAddonConfiguration; - overlayContainerElement: HTMLElement = undefined; - - @ViewChild('container', { static: true }) - container: OverlayContainerComponent; - @ViewChild('editor', { static: true }) editor: EditorComponent; - - destroy$ = new Subject(); - - /* generate dialog props */ - - @ViewChild('dialogTpl', { static: true }) dialogTpl: TemplateRef; - @ViewChild('mark', { static: false }) mark: ElementRef; - closeDialog$ = new Subject(); - - /* connect dialog props */ - @ViewChild('connectDialogTpl', { static: true }) - connectDialogTpl: TemplateRef; - confirmDialog$ = new Subject(); - source$ = defer(() => this.lookup.getSources()).pipe( - shareReplay(1) - ) as Observable; - - get addonTarget() { - return this.addon.getOverlayAddonMetadata( - this.activatedRoute.snapshot.queryParams.o ?? 'null' - ); - } - - constructor( - private activatedRoute: ActivatedRoute, - private overlay: Overlay, - private vcr: ViewContainerRef, - private addon: AddonService, - private lookup: LookupService, - private storage: InMemoryStorage, - private router: Router - ) { - const inject = this.addonTarget.configuration; // TODO: reasonable default selection - this.configuration = { - displayName: inject.displayName, - preset: inject.preset, - sections: { - '@@global': { - displayName: '基本设置', - level: 0, - 'x-icon': faCog, - properties: { - disableSmoother: { - displayName: '消息平滑', - type: 'switch', - defaultValue: false, - extra: { - description: '关闭消息平滑', - }, - }, - disableAvatarPreload: { - displayName: '头像加载', - type: 'switch', - defaultValue: false, - extra: { - description: '关闭头像预加载', - }, - }, - showGiftAutoDanmaku: { - displayName: '显示礼物自动触发弹幕', - type: 'switch', - defaultValue: false, - extra: { - description: '', - }, - }, - maxDanmakuNumber: { - displayName: '最大渲染数量', - type: 'number', - defaultValue: 50, - }, - levelFilter: { - displayName: '用户等级过滤', - type: 'number', - defaultValue: 0, - }, - minGiftValue: { - displayName: '付费消息', - type: 'number', - defaultValue: 5, - }, - wordBlacklist: { - displayName: '屏蔽词', - type: 'list', - defaultValue: [], - }, - userBlacklist: { - displayName: '屏蔽用户', - type: 'list', - defaultValue: [], - }, - }, - defaultValue: {}, - }, - ...inject.sections, - }, - }; - } - - session: { - file: ComenFile; - data: SafeAny; - } = this.activatedRoute.snapshot.data.session; - overlayInfo: OverlayInfo = this.activatedRoute.snapshot.data.addonInfo - .overlay!; - - ngOnDestroy() { - this.closeDialog$.complete(); - this.destroy$.next(); - this.destroy$.complete(); - } - - async returnDashboard() { - // save all shit - this.router.navigate(['/']); - } - - returnSession() {} - - /* generate dialog methods */ - generate() { - const overlay = this.overlay.create({ - backdropClass: 'cdk-overlay-dark-backdrop', - hasBackdrop: true, - positionStrategy: this.overlay - .position() - .global() - .centerHorizontally() - .centerVertically(), - }); - const tplPortal = new TemplatePortal(this.dialogTpl, this.vcr, { - css: this.generateCss({ - config: this.editor.generateWorkspace(), - data: {}, - }), - url: '', - size: [ - this.editor.adjustments.value.width, - this.editor.adjustments.value.height, - ], - }); - overlay.attach(tplPortal); - const parent = this.overlayContainerElement.parentElement; - setTimeout(() => { - this.mark.nativeElement.parentNode.appendChild( - this.overlayContainerElement - ); - }, 0); - merge(overlay.backdropClick(), this.closeDialog$) - .pipe(take(1)) - .subscribe(() => { - parent.appendChild(this.overlayContainerElement); - overlay.detach(); - overlay.dispose(); - }); - } - - generateCss(object) { - return `#comen-configuration-data:after { +export class EditPage extends ngSetup(()=>{ + return { + addonMetadata: injected(COMEN_ADDON_METADATA) + }; +}) implements OnDestroy, EditorRealtimeMessageProvider { + overlayContainerElement: HTMLElement = undefined; + + @ViewChild('container', { static: true }) + container: OverlayContainerComponent; + @ViewChild('editor', { static: true }) editor: EditorComponent; + + destroy$ = new Subject(); + + /* generate dialog props */ + + @ViewChild('dialogTpl', { static: true }) dialogTpl: TemplateRef; + @ViewChild('mark', { static: false }) mark: ElementRef; + closeDialog$ = new Subject(); + + source$ = defer(() => this.lookup.getSources()).pipe( + shareReplay(1) + ) as Observable; + + constructor( + private activatedRoute: ActivatedRoute, + private overlay: Overlay, + private vcr: ViewContainerRef, + private addon: AddonService, + private lookup: LookupService, + private storage: InMemoryStorage, + private router: Router, + private title: Title + ) { + super(); + title.setTitle('编辑器 - 活动 - Comen') + } + + session: { + file: ComenFile; + data: SafeAny; + } = this.activatedRoute.snapshot.data.session; + overlayInfo: OverlayInfo = this.activatedRoute.snapshot.data.addonInfo + .overlay!; + + ngOnInit() { + if (this.session) { + // load the file! + + } else { + // window.location.pathname = '/'; // TODO this may cause panic? + // return; + } + console.log(this.session); + const bootstraped = this.container.bootstrap(this.addonMetadata.name); + this.overlayContainerElement = bootstraped.element; + this.destroy$.subscribe(() => bootstraped.destroy()); + // setTimeout(() => { + // if (this.session.data != null) { + // this.editor.importWorkspace(this.session.data.workspace); + // } + // }, 0); + } + + ngAfterViewInit() { + return this.editor + .workspaceChange(1 * 1000) + .pipe(takeUntil(this.destroy$)) + .subscribe((workspaceData) => { + console.log(workspaceData); + this.session.file.storeData( + { + workspace: workspaceData, + }, + { + name: this.overlayInfo.name, + version: this.overlayInfo.version, + } + ); + sessionStorage.setItem('modifying', this.session.file.id); + }); + } + + ngOnDestroy() { + this.closeDialog$.complete(); + this.destroy$.next(); + this.destroy$.complete(); + } + + async returnDashboard() { + // save all shit + this.router.navigate(['/']); + } + + returnSession() {} + + /* generate dialog methods */ + generate() { + const overlay = this.overlay.create({ + backdropClass: 'cdk-overlay-dark-backdrop', + hasBackdrop: true, + positionStrategy: this.overlay + .position() + .global() + .centerHorizontally() + .centerVertically(), + }); + const tplPortal = new TemplatePortal(this.dialogTpl, this.vcr, { + css: this.generateCss({ + config: this.editor.generateWorkspace(), + data: {}, + }), + url: '', + size: [ + this.editor.adjustments.value.width, + this.editor.adjustments.value.height, + ], + }); + overlay.attach(tplPortal); + const parent = this.overlayContainerElement.parentElement; + setTimeout(() => { + this.mark.nativeElement.parentNode.appendChild( + this.overlayContainerElement + ); + }, 0); + merge(overlay.backdropClick(), this.closeDialog$) + .pipe(take(1)) + .subscribe(() => { + parent.appendChild(this.overlayContainerElement); + overlay.detach(); + overlay.dispose(); + }); + } + + generateCss(object) { + return `#comen-configuration-data:after { content: "${serializeObjectToBase64(object)}"; }`; - } + } - /* connect dialog methods */ + /* connect dialog methods */ - connect(options: { target: Element }): any { - const overlay = this.overlay.create({ - backdropClass: 'cdk-overlay-transparent-backdrop', - hasBackdrop: true, - positionStrategy: this.overlay - .position() - .flexibleConnectedTo(options.target) - .withPositions([ - { - originX: 'center', - originY: 'top', - overlayX: 'center', - overlayY: 'bottom', - offsetY: 0, - }, - ]), + connect(s: any): any { + console.log('doing something'); + return defer(() => this.lookup.ensureSourceLoaded(s.source)).pipe( + switchMap(() => { + return this.addon.connectSource(s.source, { + roomId: s.channel, }); - const tplPortal = new TemplatePortal( - this.connectDialogTpl, - this.vcr, - {} - ); - const ref = overlay.attach(tplPortal); - return this.confirmDialog$.pipe( - take(1), - switchMap((s) => { - ref.detach(); - ref.destroy(); - overlay.detach(); - overlay.dispose(); - if (s == null) { - return of(); - } - console.log(s); - return defer(() => - this.lookup.ensureSourceLoaded(s.source) - ).pipe( - switchMap(() => { - return this.addon.connectSource(s.source, { - roomId: s.channel, - }); - }) - ); - }) - ); - } - - /* some */ - async export() { - const exportObject = { - workspace: this.editor.exportWorkspace(), - assets: Object.fromEntries( - await Promise.all( - Object.entries(this.storage.storage).map( - async ([key, value]) => { - return [ - key, - { - data: await value.blob?.arrayBuffer(), - type: value.blob?.type, - url: value.url, - }, - ]; - } - ) - ) - ), - }; - const file = new Blob([serializeObjectToBuffer(exportObject)]); - const a = document.createElement('a'); - a.href = URL.createObjectURL(file); - a.download = 'export.cmproj'; - a.click(); - URL.revokeObjectURL(a.href); - } + }) + ); + } + + /* some */ + async export() { + const exportObject = { + workspace: this.editor.exportWorkspace(), + assets: Object.fromEntries( + await Promise.all( + Object.entries(this.storage.storage).map(async ([key, value]) => { + return [ + key, + { + data: await value.blob?.arrayBuffer(), + type: value.blob?.type, + url: value.url, + }, + ]; + }) + ) + ), + }; + const file = new Blob([serializeObjectToBuffer(exportObject)]); + const a = document.createElement('a'); + a.href = URL.createObjectURL(file); + a.download = 'export.cmproj'; + a.click(); + URL.revokeObjectURL(a.href); + } } diff --git a/apps/core/src/app/pages/edit/in-memory.storage.ts b/apps/core/src/app/pages/edit/in-memory.storage.ts index 0588b7c..aeb616b 100644 --- a/apps/core/src/app/pages/edit/in-memory.storage.ts +++ b/apps/core/src/app/pages/edit/in-memory.storage.ts @@ -1,7 +1,7 @@ import { EditorAssetStorage } from "@comen/editor"; import { nanoid } from 'nanoid'; -const MAX_STORAGE_SIZE = 2 * 1024 * 1024; +const MAX_STORAGE_SIZE = 20 * 1024 * 1024; export class InMemoryStorage implements EditorAssetStorage { diff --git a/apps/core/src/app/redirect.guard.ts b/apps/core/src/app/redirect.guard.ts new file mode 100644 index 0000000..1aef039 --- /dev/null +++ b/apps/core/src/app/redirect.guard.ts @@ -0,0 +1,23 @@ +import { Injectable } from '@angular/core'; +import { + ActivatedRouteSnapshot, + CanActivate, + Router, + UrlTree, +} from '@angular/router'; +import { environment } from '../environments/environment'; + +@Injectable() +export class RedirectGuard implements CanActivate { + constructor(private router: Router) {} + async canActivate(route: ActivatedRouteSnapshot): Promise { + if (COMEN_ENVIRONMENT === 'vercel'||!environment.production) { + return true; + } + return this.router.createUrlTree(['/', 'edit'], { + queryParams: { + o: 'gamma', // FIXME: + }, + }); + } +} diff --git a/apps/core/src/styles.less b/apps/core/src/styles.less index 363e8df..711dc19 100644 --- a/apps/core/src/styles.less +++ b/apps/core/src/styles.less @@ -39,7 +39,6 @@ body { margin: 0; - font-size: 14px; } button.transparent { diff --git a/apps/core/src/workers/css.worker.ts b/apps/core/src/workers/css.worker.ts new file mode 100644 index 0000000..523922b --- /dev/null +++ b/apps/core/src/workers/css.worker.ts @@ -0,0 +1 @@ +import 'monaco-editor/esm/vs/language/css/css.worker.js' \ No newline at end of file diff --git a/apps/core/src/workers/editor.worker.ts b/apps/core/src/workers/editor.worker.ts new file mode 100644 index 0000000..3108aa3 --- /dev/null +++ b/apps/core/src/workers/editor.worker.ts @@ -0,0 +1 @@ +import 'monaco-editor/esm/vs/editor/editor.worker.js' \ No newline at end of file diff --git a/apps/core/src/workers/html.worker.ts b/apps/core/src/workers/html.worker.ts new file mode 100644 index 0000000..02d259e --- /dev/null +++ b/apps/core/src/workers/html.worker.ts @@ -0,0 +1 @@ +import 'monaco-editor/esm/vs/language/html/html.worker.js' \ No newline at end of file diff --git a/apps/core/src/workers/init-monaco.ts b/apps/core/src/workers/init-monaco.ts new file mode 100644 index 0000000..0451bf4 --- /dev/null +++ b/apps/core/src/workers/init-monaco.ts @@ -0,0 +1,20 @@ +export function initMonaco() { + // @ts-ignore + self.MonacoEnvironment = { + getWorker(id, label) { + if (label === 'json') { + return new Worker(new URL('./json.worker', import.meta.url)); + } + if (label === 'css' || label === 'scss' || label === 'less') { + return new Worker(new URL('./css.worker', import.meta.url)); + } + if (label === 'html' || label === 'handlebars' || label === 'razor') { + return new Worker(new URL('./html.worker', import.meta.url)); + } + if (label === 'typescript' || label === 'javascript') { + return new Worker(new URL('./typescript.worker', import.meta.url)); + } + return new Worker(new URL('./editor.worker', import.meta.url)); + }, + }; +} diff --git a/apps/core/src/workers/json.worker.ts b/apps/core/src/workers/json.worker.ts new file mode 100644 index 0000000..a8c64fb --- /dev/null +++ b/apps/core/src/workers/json.worker.ts @@ -0,0 +1 @@ +import 'monaco-editor/esm/vs/language/json/json.worker.js' \ No newline at end of file diff --git a/apps/core/src/workers/typescript.worker.ts b/apps/core/src/workers/typescript.worker.ts new file mode 100644 index 0000000..a9cd8b8 --- /dev/null +++ b/apps/core/src/workers/typescript.worker.ts @@ -0,0 +1 @@ +import 'monaco-editor/esm/vs/language/typescript/ts.worker.js' \ No newline at end of file diff --git a/apps/core/tsconfig.json b/apps/core/tsconfig.json index ddcdb6b..d1bd998 100644 --- a/apps/core/tsconfig.json +++ b/apps/core/tsconfig.json @@ -11,6 +11,9 @@ }, { "path": "./tsconfig.editor.json" + }, + { + "path": "./tsconfig.worker.json" } ], "angularCompilerOptions": { diff --git a/apps/core/tsconfig.worker.json b/apps/core/tsconfig.worker.json new file mode 100644 index 0000000..8f513e4 --- /dev/null +++ b/apps/core/tsconfig.worker.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/worker", + "lib": [ + "es2018", + "webworker" + ], + "types": [] + }, + "include": [ + "src/**/*.worker.ts" + ] +} diff --git a/libs/common/src/lib/comen.ts b/libs/common/src/lib/comen.ts index f0b2655..32d60dd 100644 --- a/libs/common/src/lib/comen.ts +++ b/libs/common/src/lib/comen.ts @@ -9,6 +9,7 @@ export type ComenAddonMetadata = { name: string; displayName: string; editable: boolean; + description: string; configuration: ComenAddonConfiguration; }; diff --git a/libs/common/src/lib/message.ts b/libs/common/src/lib/message.ts index d359337..bc0da7a 100644 --- a/libs/common/src/lib/message.ts +++ b/libs/common/src/lib/message.ts @@ -30,7 +30,7 @@ type PlatformBase = { } type BaseTextMessage = { - avatar: string | Blob; + avatar: string; username: string; // extensions diff --git a/libs/delta/src/index.ts b/libs/delta/src/index.ts index a5adfb3..1d9de48 100644 --- a/libs/delta/src/index.ts +++ b/libs/delta/src/index.ts @@ -4,7 +4,8 @@ import { EVENT_MESSAGE } from './lib/tokens'; const DELTA_METADATA: ComenAddonMetadata = { name: 'delta', - displayName: 'delta', + displayName: '评论栏-δ型', + description: '高度自定义评论栏', editable: true, configuration: { displayName: 'delta', @@ -16,11 +17,15 @@ export async function preloadDelta() { const setup = await import('./lib/delta').then((x) => x.setupDelta); registerOverlay(DELTA_METADATA, (instance) => { const [messages, emitMessage] = stream(); - instance.message().subscribe(emitMessage); - return setup(instance.rootElement, () => { + const subscription = instance.message().subscribe(emitMessage); + const dispose = setup(instance.rootElement, () => { return { [EVENT_MESSAGE]: messages, }; }); + return () => { + subscription.unsubscribe(); + dispose(); + } }); } diff --git a/libs/delta/src/lib/delta.tsx b/libs/delta/src/lib/delta.tsx index 3fb903b..86eab05 100644 --- a/libs/delta/src/lib/delta.tsx +++ b/libs/delta/src/lib/delta.tsx @@ -2,18 +2,19 @@ import React from 'react'; import ReactDom from 'react-dom'; import { withConcern } from '@kairo/react'; import DeltaView from './view'; +// @ts-ignore import css from '!!to-string-loader!css-loader?esModule=false!sass-loader!./styles.scss'; import { Concern } from 'kairo'; -export function setupDelta(root: ShadowRoot, diInit: Concern) { - const container = root - .querySelector('body') - .appendChild(document.createElement('delta-root')); - const styleElement = document.createElement('style'); - styleElement.textContent = css; - root.querySelector('head').appendChild(styleElement); - const DIRoot = withConcern(diInit)(DeltaView); - ReactDom.render(, container); +export function setupDelta(root: ShadowRoot, concern: Concern) { + const container = root + .querySelector('body') + .appendChild(document.createElement('delta-root')); + const styleElement = document.createElement('style'); + styleElement.textContent = css; + root.querySelector('head').appendChild(styleElement); + const DIDeltaView = withConcern(concern)(DeltaView); + ReactDom.render(, container); - return () => ReactDom.unmountComponentAtNode(container); + return () => ReactDom.unmountComponentAtNode(container); } diff --git a/libs/delta/src/lib/styles.scss b/libs/delta/src/lib/styles.scss index eb574e9..0f10fca 100644 --- a/libs/delta/src/lib/styles.scss +++ b/libs/delta/src/lib/styles.scss @@ -1,8 +1,4 @@ delta-root { - background-color: wheat; - - height: 100%; - width: 100%; & > #scroller { height: 100%; diff --git a/libs/delta/src/lib/text.tsx b/libs/delta/src/lib/text.tsx index 6dfdf00..f7294a6 100644 --- a/libs/delta/src/lib/text.tsx +++ b/libs/delta/src/lib/text.tsx @@ -1,30 +1,21 @@ -import { RichText } from '@comen/common'; -import { withKairo } from '@kairo/react'; +import { RichText, TextMessage } from '@comen/common'; import React from 'react'; -interface TextProps { - content: string | RichText; - username: string; - avatar: string; -} - -export default withKairo(({ avatar, username, content }) => { - return () => ( -
-
-
- -
+export default ({avatar,username,content}:TextMessage) => ( +
+
+
+
-
{username}
-
-
{content}
- ); -}); +
{username}
+
+
{content}
+
+) \ No newline at end of file diff --git a/libs/delta/src/lib/view.tsx b/libs/delta/src/lib/view.tsx index 4566a88..7123e5c 100644 --- a/libs/delta/src/lib/view.tsx +++ b/libs/delta/src/lib/view.tsx @@ -1,138 +1,154 @@ import { withKairo } from '@kairo/react'; -import { effect, mut } from 'kairo'; +import { effect, mut, ref } from 'kairo'; import React from 'react'; import { Message } from '@comen/common'; -import { useFastdom } from '@comen/dogfood'; import Text from './text'; import Member from './membership'; import Sticker from './sticker'; import Superchat from './superchat'; import { readMessages } from './tokens'; -import { AbortablePromise, task, TaskSuspended } from '@kairo/concurrency'; +import { AbortablePromise, task, stream } from '@kairo/concurrency'; -export default withKairo(() => { - let key = 0; +export default withKairo<{}>(() => { + let key = 0; - const [scroller, setScroller] = mut(null); - const [items, setItems] = mut(null); + const [scroller, bindScroller] = ref(null); + const [items, bindItems] = ref(null); - const fastdom = useFastdom(); + const fastdom = useFastdom(); - const bufferQueue: (Message & { id: number })[] = []; - const messages = readMessages(); - effect(() => - messages.listen((next) => { - if (next.type === 'text') { - bufferQueue.push({ - ...next, - id: key++, - }); - } - }) - ); + const bufferQueue: (Message & { id: number })[] = []; + const messages = readMessages(); + effect(() => + messages.listen((next) => { + if (next.type === 'text') { + bufferQueue.push({ + ...next, + id: key++, + }); + } + }) + ); - const [renderList, setRenderlist] = mut<(Message & { id: number })[]>([]); + const [renderList, setRenderlist] = mut<(Message & { id: number })[]>([]); - const startCoroutine = task(function* () { - const itemsElement = items.current; - const scrollerElement = scroller.current; - let lastAnimated = 0; - while (true) { - if (bufferQueue.length === 0) { - yield* fastdom.mutate; - continue; - } - yield* fastdom.measure; - const insertedMessage = bufferQueue.pop(); - setRenderlist([...renderList.current.slice(-50), insertedMessage]); - yield* fastdom.mutate; - yield* fastdom.measure; //wait next frame - const inserted = itemsElement.lastElementChild as HTMLElement; - const insertedHeight = inserted.offsetHeight; - const itemsHeight = itemsElement.offsetHeight; - const scrollerHeight = scrollerElement.offsetHeight; - yield* fastdom.mutate; - if (scrollerHeight < itemsHeight) { - scrollerElement.scrollTop = itemsHeight - scrollerHeight; - if (performance.now() - lastAnimated < 500) { - lastAnimated = performance.now(); - continue; - } - const animationOffset = Math.min( - itemsHeight - scrollerHeight, - insertedHeight + const startCoroutine = task(function* () { + const itemsElement = items.current; + const scrollerElement = scroller.current; + let lastAnimated = 0; + while (true) { + if (bufferQueue.length === 0) { + yield* fastdom.mutate; + continue; + } + yield* fastdom.measure; + const insertedMessage = bufferQueue.pop(); + setRenderlist([...renderList.current.slice(-50), insertedMessage]); + yield* fastdom.mutate; + yield* fastdom.measure; //wait next frame + const inserted = itemsElement.lastElementChild as HTMLElement; + const insertedHeight = inserted.offsetHeight; + const itemsHeight = itemsElement.offsetHeight; + const scrollerHeight = scrollerElement.offsetHeight; + yield* fastdom.mutate; + if (scrollerHeight < itemsHeight) { + scrollerElement.scrollTop = itemsHeight - scrollerHeight; + if (performance.now() - lastAnimated < 500) { + lastAnimated = performance.now(); + continue; + } + const animationOffset = Math.min( + itemsHeight - scrollerHeight, + insertedHeight + ); + const animation = itemsElement.animate( + [ + { transform: `translate3d(0,${animationOffset}px,0)` }, + { transform: `translate3d(0,0px,0)` }, + ], + { + duration: 100, + easing: 'cubic-bezier(0.42, 0, 0.58, 1)', + } + ); + lastAnimated = performance.now(); + yield* new AbortablePromise((resolve) => { + animation.onfinish = resolve; + }); + } + } + }); + + effect(() => startCoroutine()); + + return ($) => { + return ( +
+ {/*
*/} +
+ {$(renderList).map((message) => { + switch (message.type) { + case 'text': + return ( + + ); + case 'member': + return ( + ); - const animation = itemsElement.animate( - [ - { transform: `translate3d(0,${animationOffset}px,0)` }, - { transform: `translate3d(0,0px,0)` }, - ], - { - duration: 100, - easing: 'cubic-bezier(0.42, 0, 0.58, 1)', - } + case 'paid': + return ( + ); - lastAnimated = performance.now(); - yield* new AbortablePromise((resolve) => { - animation.onfinish = resolve; - }); + case 'richtext': + return; + case 'sticker': + return ( + + ); + return; } - } - }); + })} +
+ {/*
*/} +
+ ); + }; +}); - effect(() => startCoroutine()); +function useFastdom() { + const [measure, doMeasure] = stream(); + const [mutate, doMutate] = stream(); - return ($) => { - return ( -
- {/*
*/} -
- {$(renderList).map((message) => { - switch (message.type) { - case 'text': - return ( - - ); - case 'member': - return ( - - ); - case 'paid': - return ( - - ); - case 'richtext': - return; - case 'sticker': - return ( - - ); - return; - } - })} -
- {/*
*/} -
- ); + effect(() => { + const rafCallback = () => { + doMeasure(); + doMutate(); + id = requestAnimationFrame(rafCallback); + }; + let id = requestAnimationFrame(rafCallback); + return () => cancelAnimationFrame(id); + }); + return { + measure, + mutate, }; -}); +} diff --git a/libs/dogfood/.eslintrc.json b/libs/dogfood/.eslintrc.json deleted file mode 100644 index 29339cb..0000000 --- a/libs/dogfood/.eslintrc.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "extends": ["../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "rules": {}, - "overrides": [ - { - "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], - "parserOptions": { - "project": ["libs/dogfood/tsconfig.*?.json"] - }, - "rules": {} - }, - { - "files": ["*.ts", "*.tsx"], - "rules": {} - }, - { - "files": ["*.js", "*.jsx"], - "rules": {} - } - ] -} diff --git a/libs/dogfood/README.md b/libs/dogfood/README.md deleted file mode 100644 index 8b7b349..0000000 --- a/libs/dogfood/README.md +++ /dev/null @@ -1,7 +0,0 @@ -# dogfood - -This library was generated with [Nx](https://nx.dev). - -## Running unit tests - -Run `nx test dogfood` to execute the unit tests via [Jest](https://jestjs.io). diff --git a/libs/dogfood/jest.config.js b/libs/dogfood/jest.config.js deleted file mode 100644 index 282bfa1..0000000 --- a/libs/dogfood/jest.config.js +++ /dev/null @@ -1,12 +0,0 @@ -module.exports = { - displayName: 'dogfood', - preset: '../../jest.preset.js', - globals: { - 'ts-jest': { tsconfig: '/tsconfig.spec.json' }, - }, - transform: { - '^.+\\.[tj]sx?$': 'ts-jest', - }, - moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'], - coverageDirectory: '../../coverage/libs/dogfood', -}; diff --git a/libs/dogfood/src/index.ts b/libs/dogfood/src/index.ts deleted file mode 100644 index be9a14e..0000000 --- a/libs/dogfood/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './lib/dogfood'; diff --git a/libs/dogfood/src/lib/dogfood.ts b/libs/dogfood/src/lib/dogfood.ts deleted file mode 100644 index a8cc28b..0000000 --- a/libs/dogfood/src/lib/dogfood.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './fastdom'; \ No newline at end of file diff --git a/libs/dogfood/src/lib/fastdom.ts b/libs/dogfood/src/lib/fastdom.ts deleted file mode 100644 index c06a1f3..0000000 --- a/libs/dogfood/src/lib/fastdom.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { effect } from 'kairo'; -import { stream } from '@kairo/concurrency'; - -export function useFastdom() { - const [measure, doMeasure] = stream(); - const [mutate, doMutate] = stream(); - - effect(() => { - const rafCallback = () => { - doMeasure(); - doMutate(); - id = requestAnimationFrame(rafCallback); - }; - let id = requestAnimationFrame(rafCallback); - return () => cancelAnimationFrame(id); - }); - return { - measure, - mutate, - }; -} diff --git a/libs/dogfood/tsconfig.json b/libs/dogfood/tsconfig.json deleted file mode 100644 index 62ebbd9..0000000 --- a/libs/dogfood/tsconfig.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ] -} diff --git a/libs/dogfood/tsconfig.lib.json b/libs/dogfood/tsconfig.lib.json deleted file mode 100644 index 037d796..0000000 --- a/libs/dogfood/tsconfig.lib.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "module": "commonjs", - "outDir": "../../dist/out-tsc", - "declaration": true, - "types": ["node"] - }, - "exclude": ["**/*.spec.ts"], - "include": ["**/*.ts"] -} diff --git a/libs/dogfood/tsconfig.spec.json b/libs/dogfood/tsconfig.spec.json deleted file mode 100644 index 559410b..0000000 --- a/libs/dogfood/tsconfig.spec.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../dist/out-tsc", - "module": "commonjs", - "types": ["jest", "node"] - }, - "include": [ - "**/*.spec.ts", - "**/*.spec.tsx", - "**/*.spec.js", - "**/*.spec.jsx", - "**/*.d.ts" - ] -} diff --git a/libs/editor/src/lib/config-plane/add-property-popover/add-property-popover.component.html b/libs/editor/src/lib/config-plane/add-property-popover/add-property-popover.component.html deleted file mode 100644 index 96837bf..0000000 --- a/libs/editor/src/lib/config-plane/add-property-popover/add-property-popover.component.html +++ /dev/null @@ -1,8 +0,0 @@ -
-
- -
-
- -
-
\ No newline at end of file diff --git a/libs/editor/src/lib/config-plane/add-property-popover/add-property-popover.component.scss b/libs/editor/src/lib/config-plane/add-property-popover/add-property-popover.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/libs/editor/src/lib/config-plane/add-property-popover/add-property-popover.component.ts b/libs/editor/src/lib/config-plane/add-property-popover/add-property-popover.component.ts deleted file mode 100644 index 0a65694..0000000 --- a/libs/editor/src/lib/config-plane/add-property-popover/add-property-popover.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { Component, Inject, InjectionToken } from '@angular/core'; -import { FormBuilder } from '@angular/forms'; -import { COMPARE_METHOD_DEFAULT_VALUE, COMPARE_METHOD_MAP, VariantCondition, VariantProperty } from '@comen/common'; -import { zoomBigMotion } from '../../animations'; - -@Component({ - selector: 'comen-add-property-popover', - templateUrl: './add-property-popover.component.html', - styleUrls: ['./add-property-popover.component.scss'], - animations: [zoomBigMotion], -}) -export class AddPropertyPopoverComponent { - - constructor( - private fb: FormBuilder - ) { - - } - -} \ No newline at end of file diff --git a/libs/editor/src/lib/config-plane/condition-popover/condition-popover.component.html b/libs/editor/src/lib/config-plane/condition-popover/condition-popover.component.html deleted file mode 100644 index 9d0adea..0000000 --- a/libs/editor/src/lib/config-plane/condition-popover/condition-popover.component.html +++ /dev/null @@ -1,34 +0,0 @@ -
-
-
-
-
-
-
- -
- -
- -
-
- -
- -
-
- -
-
-
-
-
-
\ No newline at end of file diff --git a/libs/editor/src/lib/config-plane/condition-popover/condition-popover.component.scss b/libs/editor/src/lib/config-plane/condition-popover/condition-popover.component.scss deleted file mode 100644 index 75ac1ff..0000000 --- a/libs/editor/src/lib/config-plane/condition-popover/condition-popover.component.scss +++ /dev/null @@ -1,7 +0,0 @@ -:host { - width: 100%; -} - -i[nz-icon] { - margin-right: 4px; -} \ No newline at end of file diff --git a/libs/editor/src/lib/config-plane/condition-popover/condition-popover.component.ts b/libs/editor/src/lib/config-plane/condition-popover/condition-popover.component.ts deleted file mode 100644 index b2743d2..0000000 --- a/libs/editor/src/lib/config-plane/condition-popover/condition-popover.component.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { Component, Inject, InjectionToken } from '@angular/core'; -import { FormBuilder } from '@angular/forms'; -import { COMPARE_METHOD_DEFAULT_VALUE, COMPARE_METHOD_MAP, VariantCondition, VariantProperty } from '@comen/common'; -import { zoomBigMotion } from '../../animations'; -import { defer, merge, of, Subject } from 'rxjs'; -import { map } from 'rxjs/operators'; - -export const VARIANT_PROPERTIES = new InjectionToken('variant properties'); -export const VARIANT_CURRENT_VALUE = new InjectionToken('variant current value'); - -@Component({ - selector: 'comen-condition-popover', - templateUrl: './condition-popover.component.html', - styleUrls: ['./condition-popover.component.scss'], - animations: [zoomBigMotion], -}) -export class ConditionPopoverComponent { - - constructor( - @Inject(VARIANT_PROPERTIES) public conditionSchema: VariantProperty[], - @Inject(VARIANT_CURRENT_VALUE) currentValue: VariantCondition, - private fb: FormBuilder - ) { - if (currentValue) { - const prop = conditionSchema.find(x => x.name == currentValue.property); - this.formGroup.setValue({ - property: prop, - method: COMPARE_METHOD_MAP[prop.type].find(x => x.name == currentValue.method), - target: currentValue.target - }); - console.log(currentValue.target); - } - } - - formGroup = this.fb.group({ - property: [], - method: [], - target: [] - }); - - compareOptions$ = merge( - defer(()=>of(this.formGroup.value.property)), - this.formGroup.get('property').valueChanges - ).pipe( - map((x:VariantProperty) => { - if (x == null) { - return []; - } - const typeList = COMPARE_METHOD_MAP[x.type]; - if(!typeList.find(x=>x.name==this.formGroup.value.method?.name)){ - this.formGroup.patchValue({ - method: typeList[0], - target: x.defaultValue?? COMPARE_METHOD_DEFAULT_VALUE[x.type] - }); - } - return typeList; - }) - ); - - result$ = new Subject(); - - clickConfirm() { - this.result$.next({ - property: this.formGroup.value.property.name, - method: this.formGroup.value.method.name, - target: this.formGroup.value.target - }); - this.result$.complete(); - } -} \ No newline at end of file diff --git a/libs/editor/src/lib/config-plane/condition-popover/condition-popover.directive.ts b/libs/editor/src/lib/config-plane/condition-popover/condition-popover.directive.ts deleted file mode 100644 index 46927c8..0000000 --- a/libs/editor/src/lib/config-plane/condition-popover/condition-popover.directive.ts +++ /dev/null @@ -1,102 +0,0 @@ -import { Overlay } from '@angular/cdk/overlay'; -import { ComponentPortal } from '@angular/cdk/portal'; -import { - Directive, ElementRef, EventEmitter, HostListener, - Injector, Input, Output, ViewContainerRef -} from '@angular/core'; -import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { formatConditionString, SafeAny, VariantCondition, VariantProperty } from '@comen/common'; -import { merge } from 'rxjs'; -import { map } from 'rxjs/operators'; -import { ConditionPopoverComponent, VARIANT_CURRENT_VALUE, VARIANT_PROPERTIES } from './condition-popover.component'; - -@Directive({ - selector: '*[conditionPopover]', - providers: [{ - provide: NG_VALUE_ACCESSOR, - useExisting: ConditionPopoverDirective, - multi: true - }] -}) -export class ConditionPopoverDirective implements ControlValueAccessor { - constructor(private overlay: Overlay, - private element: ElementRef, - private vcr: ViewContainerRef, - private inj: Injector) { } - - @Input() variantProperties: VariantProperty[] = [{ - type: 'text', - displayName: '测试属性1', - 'x-icon': 'user', - name: 'test1' - }, { - type: 'number', - displayName: '测试属性2', - 'x-icon': 'user', - name: 'test2' - }]; - - @Output() input = new EventEmitter(); - - @HostListener('click') - click() { - const ref = this.overlay.create({ - width: '340px', - hasBackdrop: true, - backdropClass: 'cdk-transparent-overlay', - positionStrategy: this.overlay.position().flexibleConnectedTo(this.element).withPositions( - [{ - offsetX: -10, - offsetY: 6, - originX: 'center', - originY: 'bottom', - overlayX: 'start', - overlayY: 'top' - }] - ), - }); - - const injector = Injector.create({ - parent: this.inj, - providers: [ - { - provide: VARIANT_PROPERTIES, useValue: this.variantProperties - }, - { - provide: VARIANT_CURRENT_VALUE, useValue: this.currentValue - } - ] - }); - const instance = ref.attach( - new ComponentPortal(ConditionPopoverComponent, this.vcr, injector) - ); - - merge(ref.backdropClick().pipe(map(x => null)), instance.instance.result$).subscribe(_ => { - ref.detach(); - if (_ != null) { - this.input.next(_); - if (this.changeCallback) { // this is a formControl - this.currentValue = _; - this.changeCallback?.(_); - this.element.nativeElement.textContent = formatConditionString(_, this.variantProperties) - } - } - }); - } - - currentValue: VariantCondition = null; - - writeValue(value: VariantCondition) { - this.currentValue = value; - this.element.nativeElement.textContent = formatConditionString(value, this.variantProperties) - } - - changeCallback?: SafeAny; - registerOnChange(change: SafeAny) { - this.changeCallback = change; - } - - registerOnTouched() { - - } -} \ No newline at end of file diff --git a/libs/editor/src/lib/config-plane/config-block/config-block.component.html b/libs/editor/src/lib/config-plane/config-block/config-block.component.html index 0b75407..323905f 100644 --- a/libs/editor/src/lib/config-plane/config-block/config-block.component.html +++ b/libs/editor/src/lib/config-plane/config-block/config-block.component.html @@ -7,10 +7,12 @@
- + - + + + @@ -22,7 +24,7 @@ - + {{prop.value['extra'].description}} @@ -37,7 +39,10 @@ - + + + + @@ -45,7 +50,15 @@
- + + + + +
\ No newline at end of file diff --git a/libs/editor/src/lib/config-plane/config-block/config-block.component.ts b/libs/editor/src/lib/config-plane/config-block/config-block.component.ts index 742057f..707888a 100644 --- a/libs/editor/src/lib/config-plane/config-block/config-block.component.ts +++ b/libs/editor/src/lib/config-plane/config-block/config-block.component.ts @@ -2,7 +2,6 @@ import { KeyValue } from '@angular/common'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'; import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms'; import { ConfigurationSection, PropertySchema, SafeAny } from '@comen/common'; -import { faRemoveFormat } from '@fortawesome/free-solid-svg-icons'; @Component({ selector: 'comen-config-block', diff --git a/libs/editor/src/lib/config-plane/config-condition/config-condition.component.html b/libs/editor/src/lib/config-plane/config-condition/config-condition.component.html deleted file mode 100644 index c356e05..0000000 --- a/libs/editor/src/lib/config-plane/config-condition/config-condition.component.html +++ /dev/null @@ -1,10 +0,0 @@ -
- - -
- \ No newline at end of file diff --git a/libs/editor/src/lib/config-plane/config-condition/config-condition.component.scss b/libs/editor/src/lib/config-plane/config-condition/config-condition.component.scss deleted file mode 100644 index f7455ea..0000000 --- a/libs/editor/src/lib/config-plane/config-condition/config-condition.component.scss +++ /dev/null @@ -1,14 +0,0 @@ -:host { - display: block; - - &>.cell { - display: inline-block; - margin-right: 4px; - margin-bottom: 4px; - &>i { - margin-left: 2px; - color: #999; - cursor: pointer; - } - } -} \ No newline at end of file diff --git a/libs/editor/src/lib/config-plane/config-condition/config-condition.component.ts b/libs/editor/src/lib/config-plane/config-condition/config-condition.component.ts deleted file mode 100644 index e14ed75..0000000 --- a/libs/editor/src/lib/config-plane/config-condition/config-condition.component.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; -import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { SafeAny, VariantCondition } from '@comen/common'; - -@Component({ - selector: 'comen-config-condition', - templateUrl: './config-condition.component.html', - styleUrls: ['./config-condition.component.scss'], - providers: [ - { - provide: NG_VALUE_ACCESSOR, - useExisting: ConfigConditionComponent, - multi: true - } - ], - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class ConfigConditionComponent implements ControlValueAccessor { - - constructor(private fb: FormBuilder, - private cdr: ChangeDetectorRef) { } - - formArray = this.fb.array([]); - - @Input() variantProperties: SafeAny; - - @Output() removeVariant = new EventEmitter(); - - writeValue(conditions: VariantCondition[]) { - conditions?.forEach(x => { - this.formArray.push(this.fb.control(x)); - }); - this.cdr.detectChanges(); - } - - registerOnChange(callback: SafeAny) { - this.formArray.valueChanges.subscribe(val => { - callback(val); - }) - } - - registerOnTouched() { - - } - - addNewCondition(newCondition: VariantCondition) { - this.formArray.push(this.fb.control(newCondition)); - this.cdr.detectChanges(); - } - - deleteCondition(index: number) { - if (this.formArray.length == 1) { - //popover - } else { - this.formArray.removeAt(index); - this.cdr.detectChanges(); - } - } -} \ No newline at end of file diff --git a/libs/editor/src/lib/config-plane/config-plane.component.html b/libs/editor/src/lib/config-plane/config-plane.component.html index 8df5904..5c562c2 100644 --- a/libs/editor/src/lib/config-plane/config-plane.component.html +++ b/libs/editor/src/lib/config-plane/config-plane.component.html @@ -1,19 +1,16 @@ -
- {{sectionSetting.displayName}} -
-
- - - - - -
+ + + + + + + -
- -
+ + + \ No newline at end of file diff --git a/libs/editor/src/lib/config-plane/config-plane.component.scss b/libs/editor/src/lib/config-plane/config-plane.component.scss index 0e1ab1d..6cae355 100644 --- a/libs/editor/src/lib/config-plane/config-plane.component.scss +++ b/libs/editor/src/lib/config-plane/config-plane.component.scss @@ -1,9 +1,7 @@ :host { box-sizing: border-box; - position: absolute; - padding: 8px; - border-left: solid 1px #ddd; + // padding: 8px; height: 100%; width: 100%; } diff --git a/libs/editor/src/lib/controls/color-control/color-control.component.ts b/libs/editor/src/lib/controls/color-control/color-control.component.ts index 0c1d4f5..9371192 100644 --- a/libs/editor/src/lib/controls/color-control/color-control.component.ts +++ b/libs/editor/src/lib/controls/color-control/color-control.component.ts @@ -1,7 +1,7 @@ import { animate, style, transition, trigger } from '@angular/animations'; import { Overlay } from '@angular/cdk/overlay'; import { TemplatePortal } from '@angular/cdk/portal'; -import { Component, ElementRef, HostListener, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core'; +import { Component, ElementRef, HostListener, Input, OnChanges, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { SafeAny } from '@comen/common'; import { ColorEvent } from 'ngx-color'; @@ -76,10 +76,12 @@ import { take } from 'rxjs/operators'; ]) ] }) -export class ColorControlComponent implements ControlValueAccessor { +export class ColorControlComponent implements ControlValueAccessor, OnChanges { @ViewChild('temp') temp: TemplateRef; + @Input() value: string; + currentColor: BehaviorSubject = new BehaviorSubject('#cccccc'); constructor(private overlay: Overlay, private ele: ElementRef, private vc: ViewContainerRef) { } @@ -145,4 +147,10 @@ export class ColorControlComponent implements ControlValueAccessor { this.touchFn = fn; } + ngOnChanges(simpleChanges: SimpleChanges) { + if(simpleChanges['value']){ + this.currentColor.next(simpleChanges['value'].currentValue); + } + } + } diff --git a/libs/editor/src/lib/controls/controls.module.ts b/libs/editor/src/lib/controls/controls.module.ts index 6ede125..a6cbde4 100644 --- a/libs/editor/src/lib/controls/controls.module.ts +++ b/libs/editor/src/lib/controls/controls.module.ts @@ -14,6 +14,7 @@ import { RadiusControlComponent } from './radius-control/radius-control.componen import { BackgroundControlComponent } from './background-control/background-control.component'; import { DisplayControlComponent } from './display-control/display-control.component'; import { ShadowControlComponent } from './shadow-control/shadow-control.component'; +import { MonacoControlComponent } from './monaco-control/monaco-control.component'; @NgModule({ declarations: [ @@ -26,7 +27,8 @@ import { ShadowControlComponent } from './shadow-control/shadow-control.componen RadiusControlComponent, BackgroundControlComponent, DisplayControlComponent, - ShadowControlComponent + ShadowControlComponent, + MonacoControlComponent, ], imports: [ ReactiveComponentModule, @@ -45,7 +47,8 @@ import { ShadowControlComponent } from './shadow-control/shadow-control.componen RadiusControlComponent, BackgroundControlComponent, DisplayControlComponent, - ShadowControlComponent + ShadowControlComponent, + MonacoControlComponent, ] }) export class ControlsModule { diff --git a/libs/editor/src/lib/controls/monaco-control/monaco-control.component.ts b/libs/editor/src/lib/controls/monaco-control/monaco-control.component.ts new file mode 100644 index 0000000..051eabf --- /dev/null +++ b/libs/editor/src/lib/controls/monaco-control/monaco-control.component.ts @@ -0,0 +1,60 @@ +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { + ControlValueAccessor, + FormBuilder, + NG_VALUE_ACCESSOR, +} from '@angular/forms'; +// import * as monaco from 'monaco-editor'; +// @ts-ignore +// import text from '!!raw-loader!./type.d.ts.string'; + +@Component({ + selector: 'comen-monaco-control', + template: `
`, + styles: [ + ` + #monaco-host { + width: 100%; + height: 400px; + position: relative; + display: block; + } + `, + ], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: MonacoControlComponent, + multi: true, + }, + ], +}) +export class MonacoControlComponent implements ControlValueAccessor { + @ViewChild('host') host: ElementRef; + + constructor(private fb: FormBuilder) {} + + ngAfterViewInit() { + // const model = + // monaco.editor.createModel( ['function x() {', '\tconsole.log("Hello world!");', '}'].join( + // '\n' + // ),'javascript', monaco.Uri.parse('file:///local.js')); + // // model.updateOptions({ + + // // }); + // monaco.editor.create(this.host.nativeElement, { + // model + // }); + // console.log(monaco.languages.typescript.javascriptDefaults.getExtraLibs()); + // // monaco.languages.typescript.javascriptDefaults.addExtraLib(` + + // // `,"comen.d.ts"); + // monaco.languages.typescript.javascriptDefaults.addExtraLib(text,"react.d.ts"); + } + + writeValue() {} + + registerOnChange() {} + + registerOnTouched() {} +} diff --git a/libs/editor/src/lib/editor.component.html b/libs/editor/src/lib/editor.component.html index 30e6c1a..63fa42e 100644 --- a/libs/editor/src/lib/editor.component.html +++ b/libs/editor/src/lib/editor.component.html @@ -1,45 +1,88 @@
-
- -
- - - -
- -
- - - -
-
+
+ + +
+
- + + 宽 + px + + + 高 + px + + +
+
+ + 背景色 + + + + + + + 关闭网格
-
-
- - -
-
-
- -
-
- -
- - - +
+ + {{metadata.displayName}} + {{metadata.description}} + + + + + + + + + + 全局设置 + + + 以下项目仅于导出后生效 + + + + + + + 资源库 + + + 用于 + + + + + + + {{s.value.displayName}} + + + {{s.value['x-icon']}} + + + + + + +
\ No newline at end of file diff --git a/libs/editor/src/lib/editor.component.scss b/libs/editor/src/lib/editor.component.scss index 25ffbbd..5572ce1 100644 --- a/libs/editor/src/lib/editor.component.scss +++ b/libs/editor/src/lib/editor.component.scss @@ -1,68 +1,88 @@ :host { - display: block; - width: 100%; - height: 100%; - min-width: 1260px; - min-height: 780px; - overflow: hidden; + display: block; + width: 100%; + height: 100%; + min-width: 1260px; + min-height: 780px; + overflow: hidden; } #preview { + display: flex; + flex-direction: column; + padding: 1em; + padding-right: 0; + + & > .background { + box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), + 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%); + border-radius: 4px; + height: 100%; + width: 100%; + flex: 1; display: flex; flex-direction: column; - - &>.toolbar { - padding:8px; + align-items: center; + justify-content: center; + background-color: #444; + position: relative; + &.transparent { + background-position: 0 0, 16px 0, 16px -16px, 0px 16px; + background-size: 32px 32px; + background-image: -webkit-gradient( + linear, + 0 100%, + 100% 0, + color-stop(0.25, rgba(0, 0, 0, 0.5)), + color-stop(0.25, transparent) + ), + -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(0, 0, 0, 0.5)), color-stop(0.25, transparent)), + -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.75, transparent), color-stop(0.75, rgba(0, 0, 0, 0.5))), + -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.75, transparent), color-stop(0.75, rgba(0, 0, 0, 0.5))); } - - &>.background { - height: 100%; - width: 100%; - flex: 1; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - background-color: #444; - &.transparent { - background-position: 0 0, 16px 0, 16px -16px, 0px 16px; - background-size: 32px 32px; - background-image: -webkit-gradient( - linear, - 0 100%, - 100% 0, - color-stop(0.25, rgba(0,0,0,0.5)), - color-stop(0.25, transparent) - ), - -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(0,0,0,0.5)), color-stop(0.25, transparent)), - -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.75, transparent), color-stop(0.75,rgba(0,0,0,0.5))), - -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.75, transparent), color-stop(0.75,rgba(0,0,0,0.5))); - } - & > .box { - margin: 0 auto; - } + & > .box { + margin: 0 auto; } - - &>.toolbar { - height: 40px; + + & > .button-container { + position: absolute; + bottom: 1em; + left: 1em; } + } + + & > .toolbar { + position: absolute; + bottom: 2em; + left: 2em; + cursor: move; + background-color: rgba(255,255,255,0.9); + z-index: 1; + box-sizing: border-box; + padding: 1em; + border-radius: 4px; + transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1); + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), + 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + } } -.middle { - box-shadow: -6px 0 16px -8px rgba(0,0,0,.15); - display: flex; - flex-direction: column; - &>div{ - // width: 100%; - flex: 1; - } +.middle { + // box-shadow: -6px 0 16px -8px rgba(0,0,0,.15); + display: flex; + flex-direction: column; + padding: 1em; + & > div { + // width: 100%; + flex: 1; + } } .resize-handler { - position: absolute; - bottom: -10px; - height: 20px; - width: 100%; - z-index: 999; - cursor: row-resize; + position: absolute; + bottom: -10px; + height: 20px; + width: 100%; + z-index: 999; + cursor: row-resize; } diff --git a/libs/editor/src/lib/editor.component.ts b/libs/editor/src/lib/editor.component.ts index e651d44..d7e330d 100644 --- a/libs/editor/src/lib/editor.component.ts +++ b/libs/editor/src/lib/editor.component.ts @@ -1,23 +1,19 @@ -import { Component, Inject, Input } from '@angular/core'; +import { Component, Inject, Input, Optional } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; import { + ComenAddonMetadata, ComenAddonConfiguration, ComenEnvironmentHost, ConfigurationSection, SafeAny, } from '@comen/common'; -import { Action, effect, mut } from 'kairo'; -import { - EventStream, - stream, - task, - ControlStatements as cs, -} from '@kairo/concurrency'; +import { Action, injected, mut } from 'kairo'; import { WithKairo } from '@kairo/angular'; import { merge } from 'rxjs'; import { debounceTime, map } from 'rxjs/operators'; import { EditorEnvironmentHost } from './editor.host'; import { generateCode } from './variant/compiler'; +import { COMEN_ADDON_METADATA, EditorRealtimeMessageProvider, EDITOR_REALTIME_MESSAGE_PROVIDER } from './providers'; @WithKairo() @Component({ @@ -37,53 +33,33 @@ export class EditorComponent { adjustments = this.fb.group({ width: [600], height: [800], - background: ['#666666'], + background: ['#888888'], grid: [false], }); - @Input() configuration: ComenAddonConfiguration; - @Input() elementView: HTMLElement = undefined; - + readonly metadata: ComenAddonMetadata; + readonly configuration: ComenAddonConfiguration; readonly formGroup: FormGroup; - readonly currentConfigSection: string; - readonly currentConfig: ConfigurationSection; - readonly sHeight = 700; - readonly setCurrentConfigSection: Action; - readonly onmouseup: Action; - readonly onmousemove: Action; - readonly startDrag: Action; constructor( private fb: FormBuilder, - @Inject(ComenEnvironmentHost) private host: EditorEnvironmentHost + @Inject(ComenEnvironmentHost) private host: EditorEnvironmentHost, + @Inject(EDITOR_REALTIME_MESSAGE_PROVIDER) @Optional() public realtimeMessageProvider?: EditorRealtimeMessageProvider ) {} - + ngSetup() { /** resizable */ - const { - position: sHeight, - listenResizing: startDrag, - } = useVerticalDraggable( - 700, - fromEvent(window, 'mouseup'), - fromEvent(window, 'mousemove'), - 200 - ); + const metadata = injected(COMEN_ADDON_METADATA); - /** config */ - const [currentConfigSection, setCurrentConfigSection] = mut( - Object.keys(this.configuration.sections)[0] - ); // TODO: make sure length > 0 + const configuration = metadata.configuration; - const currentConfig = currentConfigSection.map( - (x) => this.configuration.sections[x] - ); + /** config */ /** form */ const formGroup = this.fb.group( Object.fromEntries( - Object.entries(this.configuration.sections).map( + Object.entries(configuration.sections).map( ([key, section]) => { return [ key, @@ -111,35 +87,12 @@ export class EditorComponent { }); return { - sHeight, - currentConfigSection, formGroup, - currentConfig, - setCurrentConfigSection, - startDrag, + configuration, + metadata }; } - onTreeHover(selector: string) { - clearMasks(); - if (selector != null && this.elementView) { - const viewport = this.elementView.getBoundingClientRect(); - this.elementView.querySelectorAll(selector).forEach((_) => { - createMask(_, viewport); - }); - } - } - - onTreeLeave() { - clearMasks(); - } - - onSectionClick(section: string) { - if (section != this.currentConfigSection) { - this.setCurrentConfigSection(section); - } - } - importWorkspace(workspace: EditorWorkspace) { this.adjustments.patchValue(workspace.adjustments, { emitEvent: false, @@ -202,6 +155,16 @@ export class EditorComponent { debounceTime(_debounceTime) ); } + + ngAfterViewInit() { + // console.log('wtf>'); + // this.realtimeMessageProvider!.connect({ + // source: 'bilibili', + // channel: 545 + // }).subscribe(x=>{ + // this.host.emitMessage(x); + // }) + } } export interface EditorWorkspace { @@ -211,82 +174,4 @@ export interface EditorWorkspace { }; mocks: {}; values: SafeAny; -} - -function createMask(target: Element, viewport: DOMRect) { - const rect = target.getBoundingClientRect(); - if (rect.top < viewport.top || rect.bottom > viewport.bottom) { - return; - } - const hObj = document.createElement('div'); - hObj.className = 'highlight-wrap'; - hObj.style.position = 'absolute'; - hObj.style.top = rect.top + 'px'; - hObj.style.width = rect.width + 'px'; - hObj.style.height = rect.height + 'px'; - hObj.style.left = rect.left + 'px'; - hObj.style.backgroundColor = '#a0c5e8'; - hObj.style.opacity = '0.5'; - hObj.style.cursor = 'default'; - hObj.style.pointerEvents = 'none'; - //hObj.style.WebkitTransition='top 0.2s'; - document.body.appendChild(hObj); -} - -function clearMasks() { - const hwrappersLength = document.getElementsByClassName('highlight-wrap') - .length; - const hwrappers = document.getElementsByClassName('highlight-wrap'); - if (hwrappersLength > 0) { - for (let i = hwrappersLength - 1; i >= 0; i--) { - hwrappers[i].remove(); - } - } -} - -function useVerticalDraggable( - initial: number, - mouseup: EventStream, - mousemove: EventStream, - minimum: number -) { - const [position, setPosition] = mut(initial); - - const listenResizing = task(function* (e: { - clientX: number; - clientY: number; - }) { - let y = position.current; - let lastMv = e; - yield* cs.loop( - function* () { - yield* cs.select - .case(mousemove, function* (mv) { - y += mv.clientY - lastMv.clientY; - lastMv = mv; - if (y < minimum) yield* cs.break(); - setPosition(y); - }) - .case(mouseup, function* () { - yield* cs.break(); - }); - } - ); - }); - - return { - listenResizing, - position, - }; -} - -function fromEvent(obj: GlobalEventHandlers, event: string) { - const [e, emit] = stream(); - - effect(() => { - obj.addEventListener(event, emit); - return () => obj.removeEventListener(event, emit); - }); - - return e; -} +} \ No newline at end of file diff --git a/libs/editor/src/lib/editor.module.ts b/libs/editor/src/lib/editor.module.ts index cea1749..1f25d52 100644 --- a/libs/editor/src/lib/editor.module.ts +++ b/libs/editor/src/lib/editor.module.ts @@ -1,32 +1,39 @@ import { OverlayModule } from '@angular/cdk/overlay'; +import { DragDropModule } from '@angular/cdk/drag-drop'; import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FlexLayoutModule } from '@angular/flex-layout'; import { ReactiveFormsModule } from '@angular/forms'; import { ReactiveComponentModule } from '@ngrx/component'; import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; -import { ConditionPopoverComponent } from './config-plane/condition-popover/condition-popover.component'; -import { ConditionPopoverDirective } from './config-plane/condition-popover/condition-popover.directive'; import { ConfigBlockComponent } from './config-plane/config-block/config-block.component'; -import { ConfigConditionComponent } from './config-plane/config-condition/config-condition.component'; import { ConfigPlaneComponent } from './config-plane/config-plane.component'; import { ControlsModule } from './controls/controls.module'; import { EditorComponent } from './editor.component'; -import { ElementTreeNodeDirective } from './element-tree-plane/element-tree-node.directive'; -import { ElementTreePlaneComponent } from './element-tree-plane/element-tree-plane.component'; import { MockMessagePlaneComponent } from './mock-message-plane/mock-message-plane.component'; import { MockMessageEditDialogComponent } from './mock-message-plane/mock-message-edit-dialog/mock-message-edit-dialog.component'; +import { MatButtonModule } from '@angular/material/button'; +import { MatButtonToggleModule } from '@angular/material/button-toggle'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; +import { MatSliderModule } from '@angular/material/slider'; +import { MatInputModule } from '@angular/material/input'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatExpansionModule } from '@angular/material/expansion'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; +import { MatChipsModule } from '@angular/material/chips'; +import { MatDialogModule } from '@angular/material/dialog'; +import { MatListModule } from '@angular/material/list'; +import { MatCardModule } from '@angular/material/card'; + @NgModule({ declarations: [ EditorComponent, - ElementTreePlaneComponent, - ElementTreeNodeDirective, ConfigBlockComponent, - ConfigConditionComponent, ConfigPlaneComponent, - ConditionPopoverComponent, - ConditionPopoverDirective, + // ConditionPopoverComponent, + // ConditionPopoverDirective, MockMessagePlaneComponent, MockMessageEditDialogComponent, ], @@ -34,10 +41,25 @@ import { MockMessageEditDialogComponent } from './mock-message-plane/mock-messag CommonModule, ControlsModule, OverlayModule, + DragDropModule, FlexLayoutModule, ReactiveFormsModule, ReactiveComponentModule, - FontAwesomeModule + FontAwesomeModule, + // mat controls + MatButtonModule, + MatSliderModule, + MatInputModule, + MatButtonToggleModule, + MatSlideToggleModule, + MatFormFieldModule, + MatExpansionModule, + MatIconModule, + MatMenuModule, + MatChipsModule, + MatDialogModule, + MatListModule, + MatCardModule, ], exports: [EditorComponent], }) diff --git a/libs/editor/src/lib/element-tree-plane/element-tree-node.directive.ts b/libs/editor/src/lib/element-tree-plane/element-tree-node.directive.ts deleted file mode 100644 index 11125b6..0000000 --- a/libs/editor/src/lib/element-tree-plane/element-tree-node.directive.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { Directive, EventEmitter, HostListener, Output } from '@angular/core'; - -@Directive({ - selector:'[comen-element-tree-node]' -}) -export class ElementTreeNodeDirective { - - @Output('hover') hover:EventEmitter = new EventEmitter(); - - @HostListener('mouseover',['$event']) - onMouseOver(e:MouseEvent){ - e.stopPropagation(); - this.hover.emit(); - } - - @HostListener('mouseleave',['$event']) - onMouseLeave(e:MouseEvent){ - e.stopPropagation(); - } -} \ No newline at end of file diff --git a/libs/editor/src/lib/element-tree-plane/element-tree-plane.component.html b/libs/editor/src/lib/element-tree-plane/element-tree-plane.component.html deleted file mode 100644 index ffdcced..0000000 --- a/libs/editor/src/lib/element-tree-plane/element-tree-plane.component.html +++ /dev/null @@ -1,16 +0,0 @@ -
- 元素 -
- -
- -
- - - - - {{node.value['displayName']}} -
-
\ No newline at end of file diff --git a/libs/editor/src/lib/element-tree-plane/element-tree-plane.component.scss b/libs/editor/src/lib/element-tree-plane/element-tree-plane.component.scss deleted file mode 100644 index d9c549a..0000000 --- a/libs/editor/src/lib/element-tree-plane/element-tree-plane.component.scss +++ /dev/null @@ -1,68 +0,0 @@ -.indent { - width: 24px; - display: inline-block; -} - -:host { - box-sizing: border-box; - display: flex; - flex-direction: column; - width: 100%; - height: 100%; - padding: 8px; -} - -.list { - height: 100%; - flex: 1; - overflow-y: auto; - scroll-behavior: smooth; - background: white; - border-radius: 4px; - border: solid 1px #f1f0f1; - - &::-webkit-scrollbar { - width: 8px; - height: 8px; - // border: solid 2px #ddd; - // background-color: #eee; - } - - &::-webkit-scrollbar-track { - background-color: transparent; - } - - /*定义滑块 内阴影+圆角*/ - &::-webkit-scrollbar-thumb:vertical { - background-color: #f7f7f7; - transition: background-color 2s ease; - } - - &:hover { - /*定义滑块 内阴影+圆角*/ - &::-webkit-scrollbar-thumb:vertical { - background-color: #ddd; - } - } -} - -.node { - &:hover { - background-color: #eee; - } - & > fa-icon { - display: inline-block; - margin-right: 4px; - transform: scale(0.8); - } - margin-bottom: 4px; - padding: 4px 8px; - cursor: pointer; - color: #333333; - font-size: 12px; - - &.active { - background-color: #a16ba1; - color: #ffffff; - } -} diff --git a/libs/editor/src/lib/element-tree-plane/element-tree-plane.component.ts b/libs/editor/src/lib/element-tree-plane/element-tree-plane.component.ts deleted file mode 100644 index 2ebf898..0000000 --- a/libs/editor/src/lib/element-tree-plane/element-tree-plane.component.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { Component, Output, EventEmitter, Input, HostListener } from '@angular/core'; -import { ComenAddonConfiguration, ConfigurationSection } from '@comen/common'; - -@Component({ - selector: 'comen-element-tree', - templateUrl: './element-tree-plane.component.html', - styleUrls: ['./element-tree-plane.component.scss'] -}) -export class ElementTreePlaneComponent { - - @Input() config: ComenAddonConfiguration; - - @Input() selected: string; - - lastHover = ''; - - @Output() sectionHover: EventEmitter = new EventEmitter(); - - @Output() leave: EventEmitter = new EventEmitter(); - - @Output() sectionClick: EventEmitter = new EventEmitter(); - - @HostListener('mouseleave', ['$event']) - onMouseLeave(e: MouseEvent) { - this.leave.emit(); - this.lastHover = ''; - } - - onNodeHover(key: string, node: ConfigurationSection) { - if (node.previewSelector != this.lastHover) { - this.sectionHover.emit(node.previewSelector); - this.lastHover = node.previewSelector; - } - } - - sortNull(a:any,b:any):any { } -} diff --git a/libs/editor/src/lib/providers.ts b/libs/editor/src/lib/providers.ts index 472a6a0..a64b192 100644 --- a/libs/editor/src/lib/providers.ts +++ b/libs/editor/src/lib/providers.ts @@ -1,5 +1,6 @@ import { InjectionToken } from '@angular/core'; -import { Message, SafeAny } from '@comen/common'; +import { ComenAddonConfiguration, ComenAddonMetadata, Message, SafeAny } from '@comen/common'; +import { Identifier } from 'kairo'; import { Observable } from 'rxjs'; export interface EditorRealtimeMessageProvider { @@ -18,4 +19,6 @@ export interface EditorAssetStorage { remove(id: string): void; } -export const EDITOR_ASSET_STORAGE = new InjectionToken('editor asset storage'); \ No newline at end of file +export const EDITOR_ASSET_STORAGE = new InjectionToken('editor asset storage'); + +export const COMEN_ADDON_METADATA = Identifier.of("ComenAddonMetadata"); \ No newline at end of file diff --git a/libs/gamma/src/lib/gamma.module.ts b/libs/gamma/src/lib/gamma.module.ts index be6c1d0..476281e 100644 --- a/libs/gamma/src/lib/gamma.module.ts +++ b/libs/gamma/src/lib/gamma.module.ts @@ -31,8 +31,9 @@ export class GammaModule { entry = GammaApp; metadata = { name: 'gamma', - displayName: 'GAMMA', - editable: false, + displayName: '评论栏-γ型', + description: '能够兼容youtube样式表的评论栏', + editable: true, configuration: COMMENT_CONFIGURATION, }; } diff --git a/libs/gamma/src/lib/metadata.ts b/libs/gamma/src/lib/metadata.ts index a5042af..3bf30dc 100644 --- a/libs/gamma/src/lib/metadata.ts +++ b/libs/gamma/src/lib/metadata.ts @@ -2,7 +2,20 @@ import { ComenAddonConfiguration } from '@comen/common'; const COMMENT_CONFIGURATION: ComenAddonConfiguration = { displayName: 'N/A', - sections: {}, + sections: { + "textMessage": { + "x-icon": "chat_bubble", + displayName: "文本信息", + level: 1, + properties: { + + }, + defaultValue: {}, + variantProperties: [ + + ] + } + }, }; export { COMMENT_CONFIGURATION }; diff --git a/nx.json b/nx.json index 44193ce..164b114 100644 --- a/nx.json +++ b/nx.json @@ -56,9 +56,6 @@ "electron-app": { "tags": [] }, - "dogfood": { - "tags": [] - }, "delta": { "tags": [] } diff --git a/package-lock.json b/package-lock.json index 28bf585..69e9879 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,7 +30,7 @@ "@fortawesome/free-solid-svg-icons": "^5.15.3", "@kairo/angular": "^13.0.0-alpha.0", "@kairo/concurrency": "^0.8.0-alpha.1", - "@kairo/react": "0.8.0-alpha.0", + "@kairo/react": "0.8.0-alpha.1", "@nestjs/common": "^7.6.5", "@nestjs/core": "^7.0.0", "@nestjs/platform-express": "^7.0.0", @@ -49,10 +49,11 @@ "got": "^11.8.1", "idb": "^6.0.0", "isomorphic-ws": "^4.0.1", - "kairo": "0.8.0-alpha.1", + "kairo": "0.8.0-alpha.2", "knex": "^0.21.15", "long": "^4.0.0", "mockjs": "^1.1.0", + "monaco-editor": "^0.30.1", "nanoid": "^3.1.20", "nestjs-knex": "^1.0.1", "ngx-color": "7.0.0", @@ -4032,11 +4033,14 @@ } }, "node_modules/@kairo/react": { - "version": "0.8.0-alpha.0", - "resolved": "https://registry.npmjs.org/@kairo/react/-/react-0.8.0-alpha.0.tgz", - "integrity": "sha512-RMkDIyZeAHQ6Wk3uZRlfFpsdGMWmMoQCNo2/MYijFx/Kg6uEmLwWS7PNiEZreM1SLBL/LQnvsVNIjdv1Ba7L5A==", + "version": "0.8.0-alpha.1", + "resolved": "https://registry.npmjs.org/@kairo/react/-/react-0.8.0-alpha.1.tgz", + "integrity": "sha512-2Zy5CQkI6WSVSKEzpoPv6mf7WwQtS2qeDf7zLCNnpGVE0e5l3UXtg/JXGQrCntYL/vpjH64YmPmIO88KClOCwA==", + "dependencies": { + "use-sync-external-store": "1.0.0-rc.0" + }, "peerDependencies": { - "kairo": "^0.8.0-alpha.0", + "kairo": "^0.8.0-alpha.1", "react": ">=16.8.0" } }, @@ -20972,9 +20976,9 @@ } }, "node_modules/kairo": { - "version": "0.8.0-alpha.1", - "resolved": "https://registry.npmjs.org/kairo/-/kairo-0.8.0-alpha.1.tgz", - "integrity": "sha512-LiYWYdY2V+7LI48n8Fohb4VSWSVLrs0bL6LTTLXf+3G9477uIYf8eUrtH+2Y31LjvKlcnwyq1nik6EWvI2/h/A==" + "version": "0.8.0-alpha.2", + "resolved": "https://registry.npmjs.org/kairo/-/kairo-0.8.0-alpha.2.tgz", + "integrity": "sha512-2LNtyg0UX0jXPru2XPmMtMWQbfv9MmkGZBEy5Iw0RlUwipHjQd8SPzJHSjHTVMngpEAhxO/BJmZk2Ye7vsNrBA==" }, "node_modules/karma-source-map-support": { "version": "1.4.0", @@ -22332,6 +22336,11 @@ "random": "bin/random" } }, + "node_modules/monaco-editor": { + "version": "0.30.1", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.30.1.tgz", + "integrity": "sha512-B/y4+b2O5G2gjuxIFtCE2EkM17R2NM7/3F8x0qcPsqy4V83bitJTIO4TIeZpYlzu/xy6INiY/+84BEm6+7Cmzg==" + }, "node_modules/move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", @@ -33419,6 +33428,14 @@ "node": ">=0.10.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.0.0-rc.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.0.0-rc.0.tgz", + "integrity": "sha512-0U9Xlc2QDFzSGMB0DvcJQL0+DIdxDPJC7mnZlYFbl7wrSrPMcs89X5TVkNB6Dzg618m8lZop+U+J6ow3vq9RAQ==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0-rc" + } + }, "node_modules/utf8-byte-length": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz", @@ -38295,10 +38312,12 @@ "requires": {} }, "@kairo/react": { - "version": "0.8.0-alpha.0", - "resolved": "https://registry.npmjs.org/@kairo/react/-/react-0.8.0-alpha.0.tgz", - "integrity": "sha512-RMkDIyZeAHQ6Wk3uZRlfFpsdGMWmMoQCNo2/MYijFx/Kg6uEmLwWS7PNiEZreM1SLBL/LQnvsVNIjdv1Ba7L5A==", - "requires": {} + "version": "0.8.0-alpha.1", + "resolved": "https://registry.npmjs.org/@kairo/react/-/react-0.8.0-alpha.1.tgz", + "integrity": "sha512-2Zy5CQkI6WSVSKEzpoPv6mf7WwQtS2qeDf7zLCNnpGVE0e5l3UXtg/JXGQrCntYL/vpjH64YmPmIO88KClOCwA==", + "requires": { + "use-sync-external-store": "1.0.0-rc.0" + } }, "@malept/cross-spawn-promise": { "version": "1.1.1", @@ -51727,9 +51746,9 @@ } }, "kairo": { - "version": "0.8.0-alpha.1", - "resolved": "https://registry.npmjs.org/kairo/-/kairo-0.8.0-alpha.1.tgz", - "integrity": "sha512-LiYWYdY2V+7LI48n8Fohb4VSWSVLrs0bL6LTTLXf+3G9477uIYf8eUrtH+2Y31LjvKlcnwyq1nik6EWvI2/h/A==" + "version": "0.8.0-alpha.2", + "resolved": "https://registry.npmjs.org/kairo/-/kairo-0.8.0-alpha.2.tgz", + "integrity": "sha512-2LNtyg0UX0jXPru2XPmMtMWQbfv9MmkGZBEy5Iw0RlUwipHjQd8SPzJHSjHTVMngpEAhxO/BJmZk2Ye7vsNrBA==" }, "karma-source-map-support": { "version": "1.4.0", @@ -52780,6 +52799,11 @@ "commander": "*" } }, + "monaco-editor": { + "version": "0.30.1", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.30.1.tgz", + "integrity": "sha512-B/y4+b2O5G2gjuxIFtCE2EkM17R2NM7/3F8x0qcPsqy4V83bitJTIO4TIeZpYlzu/xy6INiY/+84BEm6+7Cmzg==" + }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", @@ -61480,6 +61504,12 @@ "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==" }, + "use-sync-external-store": { + "version": "1.0.0-rc.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.0.0-rc.0.tgz", + "integrity": "sha512-0U9Xlc2QDFzSGMB0DvcJQL0+DIdxDPJC7mnZlYFbl7wrSrPMcs89X5TVkNB6Dzg618m8lZop+U+J6ow3vq9RAQ==", + "requires": {} + }, "utf8-byte-length": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz", diff --git a/package.json b/package.json index 0284f22..4d8f0ce 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "@fortawesome/free-solid-svg-icons": "^5.15.3", "@kairo/angular": "^13.0.0-alpha.0", "@kairo/concurrency": "^0.8.0-alpha.1", - "@kairo/react": "0.8.0-alpha.0", + "@kairo/react": "0.8.0-alpha.1", "@nestjs/common": "^7.6.5", "@nestjs/core": "^7.0.0", "@nestjs/platform-express": "^7.0.0", @@ -76,10 +76,11 @@ "got": "^11.8.1", "idb": "^6.0.0", "isomorphic-ws": "^4.0.1", - "kairo": "0.8.0-alpha.1", + "kairo": "0.8.0-alpha.2", "knex": "^0.21.15", "long": "^4.0.0", "mockjs": "^1.1.0", + "monaco-editor": "^0.30.1", "nanoid": "^3.1.20", "nestjs-knex": "^1.0.1", "ngx-color": "7.0.0", diff --git a/tsconfig.base.json b/tsconfig.base.json index 911fb00..482e42f 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -29,7 +29,6 @@ ], "@comen/common": ["libs/common/src/index.ts"], "@comen/editor": ["libs/editor/src/index.ts"], - "@comen/dogfood": ["libs/dogfood/src/index.ts"], "@comen/delta": ["libs/delta/src/index.ts"] } }, From 0a23d0738e540af9187c632217b7c6f243d6f670 Mon Sep 17 00:00:00 2001 From: 3Shain Date: Fri, 17 Dec 2021 21:26:15 +0800 Subject: [PATCH 2/7] chore: prettier --- .github/workflows/electron-build.yaml | 11 +- .github/workflows/node-backend-docker.yaml | 23 +- .../node-backend-vercel-staging.yaml | 7 +- .github/workflows/node-backend-vercel.yaml | 9 +- angular.json | 5 +- apps/core/proxy.conf.json | 2 +- .../src/app/addon/addon-lazyload.resolve.ts | 41 +- apps/core/src/app/addon/addon.module.ts | 30 +- apps/core/src/app/addon/addon.service.ts | 158 +- apps/core/src/app/addon/debug.guard.ts | 34 +- apps/core/src/app/addon/definations.ts | 30 +- apps/core/src/app/addon/lookup.service.ts | 216 +- .../app/addon/overlay-container.component.ts | 138 +- apps/core/src/app/app.component.html | 50 +- apps/core/src/app/app.component.scss | 228 +- apps/core/src/app/app.component.ts | 17 +- apps/core/src/app/app.module.ts | 47 +- apps/core/src/app/common/base64.spec.ts | 70 +- apps/core/src/app/common/base64.ts | 149 +- apps/core/src/app/common/emoji.spec.ts | 206 +- apps/core/src/app/common/emoji.ts | 610 +- apps/core/src/app/common/filter.ts | 211 +- apps/core/src/app/common/index.ts | 2 +- apps/core/src/app/common/rx.ts | 65 +- apps/core/src/app/common/utils.ts | 108 +- apps/core/src/app/compatible.guard.ts | 23 +- apps/core/src/app/config/config.ts | 138 +- apps/core/src/app/config/index.ts | 2 +- apps/core/src/app/config/merge-query.ts | 113 +- apps/core/src/app/file/file-storage.ts | 16 +- apps/core/src/app/file/file.module.ts | 24 +- apps/core/src/app/file/file.ts | 28 +- apps/core/src/app/file/idb-file-storage.ts | 203 +- apps/core/src/app/file/index.ts | 2 +- apps/core/src/app/pages/edit/edit.module.ts | 35 +- apps/core/src/app/pages/edit/edit.page.html | 25 +- apps/core/src/app/pages/edit/edit.page.scss | 40 +- apps/core/src/app/pages/edit/edit.page.ts | 79 +- .../src/app/pages/edit/in-memory.storage.ts | 82 +- .../mock-obs-dialog.component.html | 110 +- .../mock-obs-dialog.component.scss | 158 +- .../mock-obs-dialog.component.ts | 14 +- .../mock-obs-dialog/mock-obs-dialog.module.ts | 10 +- .../src/app/pages/edit/restore.resolver.ts | 45 +- apps/core/src/app/pages/home/home.module.ts | 38 +- apps/core/src/app/pages/home/home.page.html | 152 +- apps/core/src/app/pages/home/home.page.scss | 133 +- apps/core/src/app/pages/home/home.page.ts | 93 +- apps/core/src/app/pages/home/time-ago.pipe.ts | 40 +- .../src/app/pages/overlay/overlay.module.ts | 23 +- .../src/app/pages/overlay/overlay.page.ts | 386 +- apps/core/src/app/redirect.guard.ts | 2 +- .../src/app/sources/acfun/acfun.module.ts | 12 +- apps/core/src/app/sources/acfun/acfun.ts | 327 +- .../app/sources/bilibili/bilibili.module.ts | 12 +- .../core/src/app/sources/bilibili/bilibili.ts | 997 +- apps/core/src/assets/css4obs/index.html | 2948 +-- apps/core/src/env.d.ts | 3 +- .../core/src/environments/environment.prod.ts | 2 +- apps/core/src/environments/environment.ts | 2 +- apps/core/src/index.html | 2 +- apps/core/src/material.scss | 14 +- apps/core/src/workers/css.worker.ts | 2 +- apps/core/src/workers/editor.worker.ts | 2 +- apps/core/src/workers/html.worker.ts | 2 +- apps/core/src/workers/json.worker.ts | 2 +- apps/core/src/workers/typescript.worker.ts | 2 +- apps/core/tsconfig.worker.json | 9 +- apps/core/webpack.config.ts | 14 +- apps/electron-app/package.json | 4 +- .../src/app/options/maker.options.json | 24 +- apps/electron-app/webpack.config.js | 28 +- apps/node-backend/package.json | 11 +- apps/node-backend/src/main.ts | 6 +- decorate-angular-cli.js | 28 +- libs/backend-core/src/index.ts | 2 +- .../src/lib/backend-core.module.ts | 21 +- .../src/lib/controllers/acfun.controller.ts | 19 +- .../src/lib/controllers/addon.controller.ts | 12 +- .../lib/controllers/bilibili.controller.ts | 43 +- libs/backend-core/src/lib/entry.ts | 33 +- .../src/lib/services/addon.service.ts | 201 +- .../src/lib/services/bili-user.service.ts | 235 +- libs/common/package.json | 2 +- libs/common/src/index.ts | 2 +- libs/common/src/lib/comen.ts | 34 +- libs/common/src/lib/config.ts | 144 +- libs/common/src/lib/filter.ts | 6 +- libs/common/src/lib/message.ts | 198 +- libs/common/src/lib/variant.ts | 180 +- libs/delta/src/index.ts | 42 +- libs/delta/src/lib/membership.tsx | 8 +- libs/delta/src/lib/sticker.tsx | 8 +- libs/delta/src/lib/styles.scss | 27 +- libs/delta/src/lib/superchat.tsx | 8 +- libs/delta/src/lib/text.tsx | 34 +- libs/delta/src/lib/tokens.ts | 2 +- libs/delta/src/lib/view.tsx | 35 +- libs/delta/src/shims.d.ts | 6 +- libs/delta/tsconfig.lib.json | 4 +- libs/editor/src/index.ts | 2 +- libs/editor/src/lib/animations.ts | 97 +- .../editor/src/lib/config-plane/animations.ts | 48 +- .../config-block/config-block.component.html | 146 +- .../config-block/config-block.component.scss | 58 +- .../config-block/config-block.component.ts | 63 +- .../config-plane/config-plane.component.html | 44 +- .../config-plane/config-plane.component.scss | 23 +- .../config-plane/config-plane.component.ts | 64 +- .../background-control.component.ts | 23 +- .../border-control.component.ts | 34 +- .../color-control/color-control.component.ts | 166 +- .../src/lib/controls/controls.module.ts | 70 +- .../display-control.component.ts | 9 +- .../font-control/font-control.component.html | 60 +- .../font-control/font-control.component.ts | 79 +- .../margin-control.component.ts | 78 +- .../margin-control/margin-control.style.scss | 4 +- .../monaco-control.component.ts | 4 +- .../outline-control.component.html | 23 +- .../outline-control.component.ts | 18 +- .../radius-control.component.html | 32 +- .../radius-control.component.scss | 4 +- .../radius-control.component.ts | 26 +- .../range-control.component.html | 12 +- .../range-control/range-control.component.ts | 48 +- .../shadow-control.component.html | 54 +- .../shadow-control.component.scss | 4 +- .../shadow-control.component.ts | 38 +- libs/editor/src/lib/editor.component.html | 180 +- libs/editor/src/lib/editor.component.scss | 2 +- libs/editor/src/lib/editor.component.ts | 294 +- libs/editor/src/lib/editor.host.ts | 83 +- libs/editor/src/lib/editor.module.ts | 68 +- .../mock-message-edit-dialog.component.html | 7 +- .../mock-message-edit-dialog.component.scss | 6 +- .../mock-message-edit-dialog.component.ts | 21 +- .../mock-message-plane.component.html | 74 +- .../mock-message-plane.component.scss | 128 +- .../mock-message-plane.component.ts | 203 +- libs/editor/src/lib/providers.ts | 35 +- libs/editor/src/lib/variant/compiler.spec.ts | 92 +- libs/editor/src/lib/variant/compiler.ts | 586 +- libs/editor/tsconfig.json | 26 +- libs/gamma/README.md | 4 +- libs/gamma/src/index.ts | 2 +- libs/gamma/src/lib/animations.ts | 27 +- libs/gamma/src/lib/consts.ts | 160 +- libs/gamma/src/lib/gamma-config.service.ts | 107 +- libs/gamma/src/lib/gamma.app.css | 18572 ++++++++-------- libs/gamma/src/lib/gamma.app.html | 201 +- libs/gamma/src/lib/gamma.app.ts | 458 +- libs/gamma/src/lib/gamma.module.ts | 44 +- .../lib/membership-item/membership-item.html | 126 +- .../lib/membership-item/membership-item.ts | 5 +- libs/gamma/src/lib/metadata.ts | 24 +- .../src/lib/paid-message/paid-message.html | 104 +- .../src/lib/paid-message/paid-message.ts | 9 +- .../src/lib/paid-sticker/paid-sticker.html | 95 +- .../src/lib/paid-sticker/paid-sticker.ts | 7 +- .../src/lib/text-message/text-message.html | 193 +- .../src/lib/text-message/text-message.ts | 27 +- .../ticker-paid-item/ticker-paid-item.html | 46 +- .../lib/ticker-paid-item/ticker-paid-item.ts | 35 +- .../ticker-paid-sticker.html | 61 +- .../ticker-paid-sticker.ts | 28 +- .../ticker-sponsor-item.html | 45 +- .../ticker-sponsor-item.ts | 29 +- libs/gamma/tsconfig.json | 2 +- vercel.json | 118 +- 170 files changed, 17411 insertions(+), 16494 deletions(-) diff --git a/.github/workflows/electron-build.yaml b/.github/workflows/electron-build.yaml index cdc4ce4..2f0f8c5 100644 --- a/.github/workflows/electron-build.yaml +++ b/.github/workflows/electron-build.yaml @@ -1,10 +1,10 @@ -name: "Build electron executables" -on: +name: 'Build electron executables' +on: push: - branches: + branches: - main pull_request: - + jobs: deploy: runs-on: ubuntu-18.04 @@ -34,7 +34,7 @@ jobs: - name: Build frontend run: npx nx build core --prod env: - COMEN_ENVIRONMENT: "electron" + COMEN_ENVIRONMENT: 'electron' - name: Build electron app run: npx nx build electron-app --prod - name: Package electron app @@ -44,4 +44,3 @@ jobs: with: name: build-windows path: dist/executables/Comen.exe - diff --git a/.github/workflows/node-backend-docker.yaml b/.github/workflows/node-backend-docker.yaml index ac52e0e..da2d007 100644 --- a/.github/workflows/node-backend-docker.yaml +++ b/.github/workflows/node-backend-docker.yaml @@ -1,33 +1,28 @@ -name: "Build docker image for node backend" -on: +name: 'Build docker image for node backend' +on: push: - branches: + branches: - main jobs: build: runs-on: ubuntu-latest steps: - - - name: Checkout + - name: Checkout uses: actions/checkout@v2 - - - name: Set up QEMU + - name: Set up QEMU uses: docker/setup-qemu-action@v1 - - - name: Set up Docker Buildx + - name: Set up Docker Buildx uses: docker/setup-buildx-action@v1 - - - name: Login to DockerHub + - name: Login to DockerHub uses: docker/login-action@v1 with: username: ${{ secrets.DOCKERHUB_USERNAME }} password: ${{ secrets.DOCKERHUB_TOKEN }} - - - name: Build and push + - name: Build and push uses: docker/build-push-action@v2 with: context: . file: ./apps/node-backend/Dockerfile platforms: linux/amd64 push: true - tags: 3shain/comen:latest \ No newline at end of file + tags: 3shain/comen:latest diff --git a/.github/workflows/node-backend-vercel-staging.yaml b/.github/workflows/node-backend-vercel-staging.yaml index efc04a0..23cdaa8 100644 --- a/.github/workflows/node-backend-vercel-staging.yaml +++ b/.github/workflows/node-backend-vercel-staging.yaml @@ -1,5 +1,5 @@ -name: "Vercel staging deployment for node backend" -on: [pull_request] +name: 'Vercel staging deployment for node backend' +on: [pull_request] jobs: deploy: runs-on: ubuntu-latest @@ -20,7 +20,7 @@ jobs: - name: Build frontend run: npx nx build core --prod env: - COMEN_ENVIRONMENT: "vercel" + COMEN_ENVIRONMENT: 'vercel' - name: Build backend run: npx nx build node-backend --prod - name: Deploy production @@ -32,4 +32,3 @@ jobs: vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} scope: ${{ secrets.VERCEL_SCOPE }} - diff --git a/.github/workflows/node-backend-vercel.yaml b/.github/workflows/node-backend-vercel.yaml index b19f0b0..7ebc987 100644 --- a/.github/workflows/node-backend-vercel.yaml +++ b/.github/workflows/node-backend-vercel.yaml @@ -1,7 +1,7 @@ -name: "Vercel deployment for node backend" -on: +name: 'Vercel deployment for node backend' +on: push: - branches: + branches: - main jobs: deploy: @@ -23,7 +23,7 @@ jobs: - name: Build frontend run: npx nx build core --prod env: - COMEN_ENVIRONMENT: "vercel" + COMEN_ENVIRONMENT: 'vercel' - name: Build backend run: npx nx build node-backend --prod - name: Deploy production @@ -37,4 +37,3 @@ jobs: vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} scope: ${{ secrets.VERCEL_SCOPE }} vercel-args: '--prod' - diff --git a/angular.json b/angular.json index 45c5152..e57b174 100644 --- a/angular.json +++ b/angular.json @@ -24,10 +24,7 @@ "polyfills": "apps/core/src/polyfills.ts", "tsConfig": "apps/core/tsconfig.app.json", "aot": true, - "assets": [ - "apps/core/src/favicon.ico", - "apps/core/src/assets" - ], + "assets": ["apps/core/src/favicon.ico", "apps/core/src/assets"], "styles": [ "apps/core/src/styles.less", "apps/core/src/material.scss" diff --git a/apps/core/proxy.conf.json b/apps/core/proxy.conf.json index 6f73fe5..3d1524c 100644 --- a/apps/core/proxy.conf.json +++ b/apps/core/proxy.conf.json @@ -6,4 +6,4 @@ "Connection": "keep-alive" } } -} \ No newline at end of file +} diff --git a/apps/core/src/app/addon/addon-lazyload.resolve.ts b/apps/core/src/app/addon/addon-lazyload.resolve.ts index 943e2f2..6c5c3a7 100644 --- a/apps/core/src/app/addon/addon-lazyload.resolve.ts +++ b/apps/core/src/app/addon/addon-lazyload.resolve.ts @@ -1,22 +1,25 @@ -import { Injectable } from "@angular/core"; -import { ActivatedRouteSnapshot, Resolve } from "@angular/router"; -import { OverlayInfo, SourceInfo } from "./definations"; -import { LookupService } from "./lookup.service"; +import { Injectable } from '@angular/core'; +import { ActivatedRouteSnapshot, Resolve } from '@angular/router'; +import { OverlayInfo, SourceInfo } from './definations'; +import { LookupService } from './lookup.service'; @Injectable() -export class AddonLazyloadResolver implements Resolve<{ - overlay?: OverlayInfo, - source?: SourceInfo -}> { +export class AddonLazyloadResolver + implements + Resolve<{ + overlay?: OverlayInfo; + source?: SourceInfo; + }> { + constructor(private lookup: LookupService) {} - constructor( - private lookup: LookupService - ) { } - - async resolve(snapshot: ActivatedRouteSnapshot) { - return { - overlay: snapshot.queryParams.o?await this.lookup.ensureOverlayLoaded(snapshot.queryParams.o):undefined, - source: snapshot.queryParams.p?await this.lookup.ensureSourceLoaded(snapshot.queryParams.p):undefined - }; - } -} \ No newline at end of file + async resolve(snapshot: ActivatedRouteSnapshot) { + return { + overlay: snapshot.queryParams.o + ? await this.lookup.ensureOverlayLoaded(snapshot.queryParams.o) + : undefined, + source: snapshot.queryParams.p + ? await this.lookup.ensureSourceLoaded(snapshot.queryParams.p) + : undefined, + }; + } +} diff --git a/apps/core/src/app/addon/addon.module.ts b/apps/core/src/app/addon/addon.module.ts index 61d0570..530b66d 100644 --- a/apps/core/src/app/addon/addon.module.ts +++ b/apps/core/src/app/addon/addon.module.ts @@ -6,20 +6,20 @@ import { AddonLazyloadResolver } from './addon-lazyload.resolve'; import { OverlayContainerComponent } from './overlay-container.component'; @NgModule({ - declarations: [OverlayContainerComponent], - imports: [], - exports: [OverlayContainerComponent] + declarations: [OverlayContainerComponent], + imports: [], + exports: [OverlayContainerComponent], }) export class AddonMoudle { - static forRoot(): ModuleWithProviders { - return { - ngModule: AddonMoudle, - providers: [ - AddonService, - AddonLazyloadResolver, - DebugGuard, - LookupService - ] - } - } -} \ No newline at end of file + static forRoot(): ModuleWithProviders { + return { + ngModule: AddonMoudle, + providers: [ + AddonService, + AddonLazyloadResolver, + DebugGuard, + LookupService, + ], + }; + } +} diff --git a/apps/core/src/app/addon/addon.service.ts b/apps/core/src/app/addon/addon.service.ts index d0b595d..83f0ba5 100644 --- a/apps/core/src/app/addon/addon.service.ts +++ b/apps/core/src/app/addon/addon.service.ts @@ -1,103 +1,103 @@ import { ComponentType } from '@angular/cdk/portal'; import { ComponentFactoryResolver, Injectable } from '@angular/core'; import { - ComenAddonMetadata, - ComenOverlayEntry, - Message, - SafeAny, + ComenAddonMetadata, + ComenOverlayEntry, + Message, + SafeAny, } from '@comen/common'; import { noop, Observable } from 'rxjs'; @Injectable() export class AddonService { - private registeredOverlay: { - [key: string]: { - metadata: ComenAddonMetadata; - entry?: ComenOverlayEntry; - ngComponent?: ComponentType; - }; - } = {}; + private registeredOverlay: { + [key: string]: { + metadata: ComenAddonMetadata; + entry?: ComenOverlayEntry; + ngComponent?: ComponentType; + }; + } = {}; - private registeredSource: { - [key: string]: { - connect(meta: SafeAny): Observable; - }; - } = {}; + private registeredSource: { + [key: string]: { + connect(meta: SafeAny): Observable; + }; + } = {}; - constructor() { - window['registerOverlay'] = this.registerOverlay.bind(this); - window['registerSource'] = this.registerSource.bind(this); + constructor() { + window['registerOverlay'] = this.registerOverlay.bind(this); + window['registerSource'] = this.registerSource.bind(this); - this.registerOverlay( - { - name: 'null', - displayName: 'N/A', - description: '似乎有什么出错了🤔', - editable: false, - configuration: { - displayName: 'N/A', - sections: {}, - }, - }, - () => { - console.log('empty!'); - return noop; - } - ); - } + this.registerOverlay( + { + name: 'null', + displayName: 'N/A', + description: '似乎有什么出错了🤔', + editable: false, + configuration: { + displayName: 'N/A', + sections: {}, + }, + }, + () => { + console.log('empty!'); + return noop; + } + ); + } - registerBuiltinOverlay( - metadata: ComenAddonMetadata, - component: ComponentType, - resolver?: ComponentFactoryResolver - ) { - if (this.registeredOverlay[metadata.name]) { - throw 'REGISTERED'; - } - this.registeredOverlay[metadata.name] = { - metadata: metadata, - ngComponent: component, - }; + registerBuiltinOverlay( + metadata: ComenAddonMetadata, + component: ComponentType, + resolver?: ComponentFactoryResolver + ) { + if (this.registeredOverlay[metadata.name]) { + throw 'REGISTERED'; } + this.registeredOverlay[metadata.name] = { + metadata: metadata, + ngComponent: component, + }; + } - registerBuiltinSource(name: string, service: SafeAny) { - if (this.registeredSource[name]) { - return; - } - this.registeredSource[name] = service; + registerBuiltinSource(name: string, service: SafeAny) { + if (this.registeredSource[name]) { + return; } + this.registeredSource[name] = service; + } - registerOverlay(metadata: ComenAddonMetadata, entry: ComenOverlayEntry) { - if (this.registeredOverlay[metadata.name]) { - return; - } - this.registeredOverlay[metadata.name] = { - metadata, - entry, - }; + registerOverlay(metadata: ComenAddonMetadata, entry: ComenOverlayEntry) { + if (this.registeredOverlay[metadata.name]) { + return; } + this.registeredOverlay[metadata.name] = { + metadata, + entry, + }; + } - registerSource() { - // stub - } + registerSource() { + // stub + } - getOverlay(name: string) { - return this.registeredOverlay[name]; - } + getOverlay(name: string) { + return this.registeredOverlay[name]; + } - getOverlayAddonMetadata(name: string) { - return this.registeredOverlay[name]?.metadata; - } + getOverlayAddonMetadata(name: string) { + return this.registeredOverlay[name]?.metadata; + } - isOverylayExist(name: string) { - return name in this.registeredOverlay; - } + isOverylayExist(name: string) { + return name in this.registeredOverlay; + } - isSourceExist(name: string) { - return name in this.registeredSource; - } + isSourceExist(name: string) { + return name in this.registeredSource; + } - connectSource(name: string, meta: SafeAny) { - return this.registeredSource[name].connect(meta); - } + connectSource(name: string, meta: SafeAny) { + return this.registeredSource[name].connect(meta); + } } diff --git a/apps/core/src/app/addon/debug.guard.ts b/apps/core/src/app/addon/debug.guard.ts index bf48d51..e846307 100644 --- a/apps/core/src/app/addon/debug.guard.ts +++ b/apps/core/src/app/addon/debug.guard.ts @@ -1,19 +1,23 @@ -import { Injectable } from "@angular/core"; -import { CanActivate, ActivatedRouteSnapshot } from "@angular/router"; -import { environment } from "../../environments/environment"; +import { Injectable } from '@angular/core'; +import { CanActivate, ActivatedRouteSnapshot } from '@angular/router'; +import { environment } from '../../environments/environment'; function loadScript(url: string) { - return new Promise(function (resolve) { - const head = document.getElementsByTagName('head')[0] - const script = document.createElement('script') - script.type = 'text/javascript' - script.addEventListener('load', function () { - resolve(script) - }, { once: true }); - script.src = url - head.appendChild(script) - }) - } + return new Promise(function (resolve) { + const head = document.getElementsByTagName('head')[0]; + const script = document.createElement('script'); + script.type = 'text/javascript'; + script.addEventListener( + 'load', + function () { + resolve(script); + }, + { once: true } + ); + script.src = url; + head.appendChild(script); + }); +} @Injectable() export class DebugGuard implements CanActivate { @@ -23,4 +27,4 @@ export class DebugGuard implements CanActivate { } return true; } -} \ No newline at end of file +} diff --git a/apps/core/src/app/addon/definations.ts b/apps/core/src/app/addon/definations.ts index 54240c6..f965788 100644 --- a/apps/core/src/app/addon/definations.ts +++ b/apps/core/src/app/addon/definations.ts @@ -2,28 +2,28 @@ import { Type } from '@angular/core'; import { ComenAddonMetadata } from '@comen/common'; export interface BuiltinOverlayModule { - entry: Type; - metadata: ComenAddonMetadata; + entry: Type; + metadata: ComenAddonMetadata; } export interface BuiltinSourceModule { - source: Type; + source: Type; } export interface OverlayInfo { - name: string; - displayName: string; - version: string; - icon?: string; - description?: string; - preload: () => Promise; + name: string; + displayName: string; + version: string; + icon?: string; + description?: string; + preload: () => Promise; } export interface SourceInfo { - name: string; - version: string; - displayName: string; - icon?: string; - description?: string; - preload: () => Promise; + name: string; + version: string; + displayName: string; + icon?: string; + description?: string; + preload: () => Promise; } diff --git a/apps/core/src/app/addon/lookup.service.ts b/apps/core/src/app/addon/lookup.service.ts index 03ace4f..46b8497 100644 --- a/apps/core/src/app/addon/lookup.service.ts +++ b/apps/core/src/app/addon/lookup.service.ts @@ -1,19 +1,19 @@ import { HttpClient } from '@angular/common/http'; import { - Compiler, - Injectable, - Injector, - NgModuleFactory, - NgModuleRef, - Type, + Compiler, + Injectable, + Injector, + NgModuleFactory, + NgModuleRef, + Type, } from '@angular/core'; import { SafeAny } from '@comen/common'; import { AddonService } from './addon.service'; import { - BuiltinOverlayModule, - BuiltinSourceModule, - OverlayInfo, - SourceInfo, + BuiltinOverlayModule, + BuiltinSourceModule, + OverlayInfo, + SourceInfo, } from './definations'; import { preloadDelta } from '@comen/delta'; @@ -21,113 +21,111 @@ type LazyLoadStaticCallback = () => Promise | Type>; @Injectable() export class LookupService { - readonly BUILT_IN_OVERLAY: OverlayInfo[] = [ - { - name: 'gamma', - displayName: '评论栏', - icon: '/assets/icon_gamma.png', - version: '1.0.0', - preload: async () => { - const module = await this.lazyloadNgModule( - () => import('@comen/gamma').then((m) => m.GammaModule) - ); - this.addon.registerBuiltinOverlay( - module.instance.metadata, - module.instance.entry, - module.componentFactoryResolver - ); - }, - }, - { - name: 'delta', - displayName: '评论栏 v2', - icon: '/assets/icon_gamma.png', - version: '0.0.0', - preload: preloadDelta - }, - ]; + readonly BUILT_IN_OVERLAY: OverlayInfo[] = [ + { + name: 'gamma', + displayName: '评论栏', + icon: '/assets/icon_gamma.png', + version: '1.0.0', + preload: async () => { + const module = await this.lazyloadNgModule(() => + import('@comen/gamma').then((m) => m.GammaModule) + ); + this.addon.registerBuiltinOverlay( + module.instance.metadata, + module.instance.entry, + module.componentFactoryResolver + ); + }, + }, + { + name: 'delta', + displayName: '评论栏 v2', + icon: '/assets/icon_gamma.png', + version: '0.0.0', + preload: preloadDelta, + }, + ]; - readonly BUILT_IN_SOURCE: SourceInfo[] = [ - { - name: 'bilibili', - version: '1.0.0', - displayName: '哔哩哔哩', - preload: async () => { - const module = await this.lazyloadNgModule( - () => - import('../sources/bilibili/bilibili.module').then( - (m) => m.BilibiliSourceModule - ) - ); - this.addon.registerBuiltinSource( - 'bilibili', - module.injector.get(module.instance.source) - ); - }, - }, - { - name: 'acfun', - version: '1.0.0', - displayName: 'AcFun', - preload: async () => { - const module = await this.lazyloadNgModule( - () => - import('../sources/acfun/acfun.module').then( - (m) => m.AcfunSourceModule - ) - ); - this.addon.registerBuiltinSource( - 'bilibili', - module.injector.get(module.instance.source) - ); - }, - }, - ]; + readonly BUILT_IN_SOURCE: SourceInfo[] = [ + { + name: 'bilibili', + version: '1.0.0', + displayName: '哔哩哔哩', + preload: async () => { + const module = await this.lazyloadNgModule(() => + import('../sources/bilibili/bilibili.module').then( + (m) => m.BilibiliSourceModule + ) + ); + this.addon.registerBuiltinSource( + 'bilibili', + module.injector.get(module.instance.source) + ); + }, + }, + { + name: 'acfun', + version: '1.0.0', + displayName: 'AcFun', + preload: async () => { + const module = await this.lazyloadNgModule(() => + import('../sources/acfun/acfun.module').then( + (m) => m.AcfunSourceModule + ) + ); + this.addon.registerBuiltinSource( + 'bilibili', + module.injector.get(module.instance.source) + ); + }, + }, + ]; - constructor( - private addon: AddonService, - private injector: Injector, - private compiler: Compiler, - private http: HttpClient - ) {} + constructor( + private addon: AddonService, + private injector: Injector, + private compiler: Compiler, + private http: HttpClient + ) {} - async getOverlays() { - return [...this.BUILT_IN_OVERLAY]; - } + async getOverlays() { + return [...this.BUILT_IN_OVERLAY]; + } - async getSources() { - return [...this.BUILT_IN_SOURCE]; - } + async getSources() { + return [...this.BUILT_IN_SOURCE]; + } - async ensureSourceLoaded(name: string) { - if (this.addon.isSourceExist(name)) { - return (await this.getSources()).find((x) => x.name == name); - } - const target = (await this.getSources()).find((x) => x.name == name); - if (target) { - await target.preload(); - return target; - } - throw 'NO SUCH SOURCE'; + async ensureSourceLoaded(name: string) { + if (this.addon.isSourceExist(name)) { + return (await this.getSources()).find((x) => x.name == name); } + const target = (await this.getSources()).find((x) => x.name == name); + if (target) { + await target.preload(); + return target; + } + throw 'NO SUCH SOURCE'; + } - async ensureOverlayLoaded(name: string) { - if (this.addon.isOverylayExist(name)) { - return (await this.getOverlays()).find((x) => x.name == name); - } - const target = (await this.getOverlays()).find((x) => x.name == name); - if (target) { - await target.preload(); - return target; - } - throw 'NO SUCH SOURCE'; + async ensureOverlayLoaded(name: string) { + if (this.addon.isOverylayExist(name)) { + return (await this.getOverlays()).find((x) => x.name == name); + } + const target = (await this.getOverlays()).find((x) => x.name == name); + if (target) { + await target.preload(); + return target; } + throw 'NO SUCH SOURCE'; + } - private async lazyloadNgModule(load: LazyLoadStaticCallback) { - let ngf = await load(); - if (!(ngf instanceof NgModuleFactory)) { - ngf = await this.compiler.compileModuleAsync(ngf); - } - return ngf.create(this.injector) as NgModuleRef; + private async lazyloadNgModule(load: LazyLoadStaticCallback) { + let ngf = await load(); + if (!(ngf instanceof NgModuleFactory)) { + ngf = await this.compiler.compileModuleAsync(ngf); } + return ngf.create(this.injector) as NgModuleRef; + } } diff --git a/apps/core/src/app/addon/overlay-container.component.ts b/apps/core/src/app/addon/overlay-container.component.ts index 9f00a27..74d5671 100644 --- a/apps/core/src/app/addon/overlay-container.component.ts +++ b/apps/core/src/app/addon/overlay-container.component.ts @@ -1,86 +1,86 @@ import { ComponentPortal, DomPortalOutlet } from '@angular/cdk/portal'; import { - ApplicationRef, - Component, - ComponentFactoryResolver, - ElementRef, - Injector, - NgZone, - ViewEncapsulation, + ApplicationRef, + Component, + ComponentFactoryResolver, + ElementRef, + Injector, + NgZone, + ViewEncapsulation, } from '@angular/core'; import { ComenEnvironmentHost } from '@comen/common'; import { AddonService } from './addon.service'; @Component({ - selector: 'comen-overlay-container', - template: ``, - styles: [`comen-overlay-container { + selector: 'comen-overlay-container', + template: ``, + styles: [ + ` + comen-overlay-container { display: block; height: 100%; width: 100%; overflow: hidden; - }`], - encapsulation: ViewEncapsulation.None, - exportAs: 'overlayContainer', + } + `, + ], + encapsulation: ViewEncapsulation.None, + exportAs: 'overlayContainer', }) export class OverlayContainerComponent { - constructor( - private element: ElementRef, - private addon: AddonService, - private cfr: ComponentFactoryResolver, - private appRef: ApplicationRef, - private zone: NgZone, - private inj: Injector - ) {} + constructor( + private element: ElementRef, + private addon: AddonService, + private cfr: ComponentFactoryResolver, + private appRef: ApplicationRef, + private zone: NgZone, + private inj: Injector + ) {} - bootstrap(addonName: string) { - const root = this.element.nativeElement.attachShadow({ mode: 'open' }); - const htmlElement = root.appendChild(document.createElement('html')); - htmlElement.style.height = '100%'; - htmlElement.style.overflow = 'hidden'; - htmlElement.lang = 'en'; // TODO - htmlElement.appendChild( - document.createElement('head') - ); - const bodyElement = htmlElement.appendChild( - document.createElement('body') - ); - bodyElement.style.height = '100%'; - const addon = this.addon.getOverlay(addonName); - if (!addon) { - throw 'NOT_FOUND'; - } - if (addon.ngComponent) { - const outlet = new DomPortalOutlet( - bodyElement, - this.cfr, - this.appRef, - this.inj, - root - ); - const portal = new ComponentPortal(addon.ngComponent); - outlet.attach(portal); - return { - element: this.element.nativeElement, - destroy: () => outlet.dispose(), - }; - } else { - const host = this.inj.get(ComenEnvironmentHost); - const dispose = this.zone.runOutsideAngular(() => - addon.entry({ - message: host.message.bind(host), - variantPipe: host.variantPipe.bind(host), - config: host.config.bind(host), - rootElement: root, - }) - ); + bootstrap(addonName: string) { + const root = this.element.nativeElement.attachShadow({ mode: 'open' }); + const htmlElement = root.appendChild(document.createElement('html')); + htmlElement.style.height = '100%'; + htmlElement.style.overflow = 'hidden'; + htmlElement.lang = 'en'; // TODO + htmlElement.appendChild(document.createElement('head')); + const bodyElement = htmlElement.appendChild(document.createElement('body')); + bodyElement.style.height = '100%'; + const addon = this.addon.getOverlay(addonName); + if (!addon) { + throw 'NOT_FOUND'; + } + if (addon.ngComponent) { + const outlet = new DomPortalOutlet( + bodyElement, + this.cfr, + this.appRef, + this.inj, + root + ); + const portal = new ComponentPortal(addon.ngComponent); + outlet.attach(portal); + return { + element: this.element.nativeElement, + destroy: () => outlet.dispose(), + }; + } else { + const host = this.inj.get(ComenEnvironmentHost); + const dispose = this.zone.runOutsideAngular(() => + addon.entry({ + message: host.message.bind(host), + variantPipe: host.variantPipe.bind(host), + config: host.config.bind(host), + rootElement: root, + }) + ); - return { - element: this.element.nativeElement, - destroy: () => { - dispose(); - }, - }; - } + return { + element: this.element.nativeElement, + destroy: () => { + dispose(); + }, + }; } + } } diff --git a/apps/core/src/app/app.component.html b/apps/core/src/app/app.component.html index 6d33c7c..1991d7e 100644 --- a/apps/core/src/app/app.component.html +++ b/apps/core/src/app/app.component.html @@ -1,19 +1,33 @@ -
- - - - - - - - - - - -

加载中...

-
\ No newline at end of file +
+ + + + + + + + + + + +

加载中...

+
diff --git a/apps/core/src/app/app.component.scss b/apps/core/src/app/app.component.scss index f7aaf4c..a01ac5e 100644 --- a/apps/core/src/app/app.component.scss +++ b/apps/core/src/app/app.component.scss @@ -1,129 +1,129 @@ :host { - & > #indicator-bg { - position: fixed; - height: 100vh; - width: 100vw; - top: 0; - left: 0; - z-index: 999; - opacity: 0; - pointer-events: none; - background-color: white; - transition: opacity 0.2s ease; - display: flex; - flex-direction: column; - justify-content: center; + & > #indicator-bg { + position: fixed; + height: 100vh; + width: 100vw; + top: 0; + left: 0; + z-index: 999; + opacity: 0; + pointer-events: none; + background-color: white; + transition: opacity 0.2s ease; + display: flex; + flex-direction: column; + justify-content: center; - &.loading { - opacity: 1; - & > #indicator { - #cross { - animation: turn 4s ease infinite; - transform-origin: 1129.6px 500px; - } - - #circle { - animation: turn2 4s ease infinite; - transform-origin: 501.5px 500px; - } - } + &.loading { + opacity: 1; + & > #indicator { + #cross { + animation: turn 4s ease infinite; + transform-origin: 1129.6px 500px; } - & > #indicator { - color: #a16ba1; - display: block; - width: 64px; - margin: 0 auto; + #circle { + animation: turn2 4s ease infinite; + transform-origin: 501.5px 500px; } + } + } - @keyframes turn2 { - 0% { - transform: rotateY(0) rotateX(0deg); - } - 12.5% { - transform: rotateY(180deg) rotateX(0deg); - } - 25% { - transform: rotateY(180deg) rotateX(0deg); - } - 37.5% { - transform: rotateY(180deg) rotateX(180deg); - } - 50% { - transform: rotateY(180deg) rotateX(180deg); - } - 62.5% { - transform: rotateY(0deg) rotateX(180deg); - } - 75% { - transform: rotateY(0deg) rotateX(180deg); - } - 87.5% { - transform: rotateY(0deg) rotateX(0deg); - } - 100% { - transform: rotateY(0deg) rotateX(0deg); - } - } + & > #indicator { + color: #a16ba1; + display: block; + width: 64px; + margin: 0 auto; + } - @keyframes turn { - 0% { - transform: rotate(0deg) scale(0.96); - } - 12.5% { - transform: rotate(0deg) scale(0.96); - } - 15% { - transform: rotate(0deg) scale(0.9); - } - // 23.5% { - // transform: rotate(90deg) scale(0.9); - // } - 25% { - transform: rotate(90deg) scale(0.96); - } - 37.5% { - transform: rotate(90deg) scale(0.96); - } + @keyframes turn2 { + 0% { + transform: rotateY(0) rotateX(0deg); + } + 12.5% { + transform: rotateY(180deg) rotateX(0deg); + } + 25% { + transform: rotateY(180deg) rotateX(0deg); + } + 37.5% { + transform: rotateY(180deg) rotateX(180deg); + } + 50% { + transform: rotateY(180deg) rotateX(180deg); + } + 62.5% { + transform: rotateY(0deg) rotateX(180deg); + } + 75% { + transform: rotateY(0deg) rotateX(180deg); + } + 87.5% { + transform: rotateY(0deg) rotateX(0deg); + } + 100% { + transform: rotateY(0deg) rotateX(0deg); + } + } - 40% { - transform: rotate(90deg) scale(0.9); - } - // 48.5% { - // transform: rotate(180deg) scale(0.9); - // } + @keyframes turn { + 0% { + transform: rotate(0deg) scale(0.96); + } + 12.5% { + transform: rotate(0deg) scale(0.96); + } + 15% { + transform: rotate(0deg) scale(0.9); + } + // 23.5% { + // transform: rotate(90deg) scale(0.9); + // } + 25% { + transform: rotate(90deg) scale(0.96); + } + 37.5% { + transform: rotate(90deg) scale(0.96); + } - 50% { - transform: rotate(180deg) scale(0.96); - } - 62.5% { - transform: rotate(180deg) scale(0.96); - } + 40% { + transform: rotate(90deg) scale(0.9); + } + // 48.5% { + // transform: rotate(180deg) scale(0.9); + // } - 65% { - transform: rotate(180deg) scale(0.9); - } - // 73.5% { - // transform: rotate(270deg) scale(0.9); - // } + 50% { + transform: rotate(180deg) scale(0.96); + } + 62.5% { + transform: rotate(180deg) scale(0.96); + } - 75% { - transform: rotate(270deg) scale(0.96); - } - 87.5% { - transform: rotate(270deg) scale(0.96); - } + 65% { + transform: rotate(180deg) scale(0.9); + } + // 73.5% { + // transform: rotate(270deg) scale(0.9); + // } - 90% { - transform: rotate(270deg) scale(0.9); - } - // 98.5% { - // transform: rotate(360deg) scale(0.9); - // } + 75% { + transform: rotate(270deg) scale(0.96); + } + 87.5% { + transform: rotate(270deg) scale(0.96); + } - 100% { - transform: rotate(360deg) scale(0.96); - } - } + 90% { + transform: rotate(270deg) scale(0.9); + } + // 98.5% { + // transform: rotate(360deg) scale(0.9); + // } + + 100% { + transform: rotate(360deg) scale(0.96); + } } + } } diff --git a/apps/core/src/app/app.component.ts b/apps/core/src/app/app.component.ts index d61ec8a..6cd1e68 100644 --- a/apps/core/src/app/app.component.ts +++ b/apps/core/src/app/app.component.ts @@ -1,19 +1,24 @@ import { Component } from '@angular/core'; import { NavigationEnd, NavigationStart, Router } from '@angular/router'; -import { debounceTime, filter, map, publishBehavior, refCount, tap } from 'rxjs/operators'; +import { + debounceTime, + filter, + map, + publishBehavior, + refCount, + tap, +} from 'rxjs/operators'; @Component({ selector: 'comen-root', templateUrl: './app.component.html', - styleUrls: [ - './app.component.scss' - ] + styleUrls: ['./app.component.scss'], }) export class AppComponent { - constructor(private router: Router) { } + constructor(private router: Router) {} routeState$ = this.router.events.pipe( - filter(x => x instanceof NavigationStart || x instanceof NavigationEnd), + filter((x) => x instanceof NavigationStart || x instanceof NavigationEnd), map((event) => { if (event instanceof NavigationStart) { return 'loading'; diff --git a/apps/core/src/app/app.module.ts b/apps/core/src/app/app.module.ts index 4bf9bb7..219e4c6 100644 --- a/apps/core/src/app/app.module.ts +++ b/apps/core/src/app/app.module.ts @@ -11,9 +11,7 @@ import { FileModule } from './file'; import { RedirectGuard } from './redirect.guard'; @NgModule({ - declarations: [ - AppComponent - ], + declarations: [AppComponent], imports: [ BrowserAnimationsModule, HttpClientModule, @@ -24,47 +22,54 @@ import { RedirectGuard } from './redirect.guard'; path: '', canActivate: [RedirectGuard], pathMatch: 'full', - loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule) + loadChildren: () => + import('./pages/home/home.module').then((m) => m.HomeModule), }, { path: '', canActivate: [DebugGuard], resolve: { - addonInfo: AddonLazyloadResolver + addonInfo: AddonLazyloadResolver, }, children: [ { path: 'overlay', - loadChildren: () => import('./pages/overlay/overlay.module').then(m => m.OverlayModule) + loadChildren: () => + import('./pages/overlay/overlay.module').then( + (m) => m.OverlayModule + ), }, { path: 'edit', - loadChildren: () => import('./pages/edit/edit.module').then(m => m.EditModule) - } - ] + loadChildren: () => + import('./pages/edit/edit.module').then((m) => m.EditModule), + }, + ], }, /** (bilichat) compatible routes */ { path: 'gkd/:id', canActivate: [CompatibleRoutes], - children: [] - }, { + children: [], + }, + { path: 'alpha/:id', canActivate: [CompatibleRoutes], - children: [] - }, { + children: [], + }, + { path: 'bilibili/:id', canActivate: [CompatibleRoutes], - children: [] - }, { + children: [], + }, + { path: 'acfun/:id', canActivate: [CompatibleRoutes], - children: [] - } - ]) + children: [], + }, + ]), ], providers: [CompatibleRoutes, RedirectGuard], - bootstrap: [AppComponent] + bootstrap: [AppComponent], }) -export class AppModule { -} +export class AppModule {} diff --git a/apps/core/src/app/common/base64.spec.ts b/apps/core/src/app/common/base64.spec.ts index 668e0b2..114bc2f 100644 --- a/apps/core/src/app/common/base64.spec.ts +++ b/apps/core/src/app/common/base64.spec.ts @@ -3,45 +3,45 @@ import { TextDecoder, TextEncoder } from 'util'; import { SafeAny } from '@comen/common'; describe('configuration', () => { - beforeAll(() => { - // 测试体验极差🤮 - if (typeof (global as SafeAny).TextEncoder === 'undefined') { - (global as SafeAny).TextEncoder = TextEncoder; - (global as SafeAny).TextDecoder = TextDecoder; - } - }); + beforeAll(() => { + // 测试体验极差🤮 + if (typeof (global as SafeAny).TextEncoder === 'undefined') { + (global as SafeAny).TextEncoder = TextEncoder; + (global as SafeAny).TextDecoder = TextDecoder; + } + }); - it('should be serialized and deserialized correctly', () => { - const conf = { - var1: 0, - var2: 'test', - var3: false, - var4: { - var5: 1, - var6: { - var7: 'test2', - '!!!': '???', - }, - }, - }; + it('should be serialized and deserialized correctly', () => { + const conf = { + var1: 0, + var2: 'test', + var3: false, + var4: { + var5: 1, + var6: { + var7: 'test2', + '!!!': '???', + }, + }, + }; - const serialized = serializeObjectToBase64(conf); - const ret = deserializeBase64(serialized); + const serialized = serializeObjectToBase64(conf); + const ret = deserializeBase64(serialized); - expect(ret).toEqual(conf); - }); + expect(ret).toEqual(conf); + }); - it('should work with blob attachments', () => { - const conf = { - blob: new Uint8Array(16).fill(0x99), - nested: { - blob2: new Uint8Array(32).fill(0x86), - }, - }; + it('should work with blob attachments', () => { + const conf = { + blob: new Uint8Array(16).fill(0x99), + nested: { + blob2: new Uint8Array(32).fill(0x86), + }, + }; - const serialized = serializeObjectToBase64(conf); - const ret = deserializeBase64(serialized); + const serialized = serializeObjectToBase64(conf); + const ret = deserializeBase64(serialized); - expect(ret).toEqual(conf); - }); + expect(ret).toEqual(conf); + }); }); diff --git a/apps/core/src/app/common/base64.ts b/apps/core/src/app/common/base64.ts index 9c2986f..26851ec 100644 --- a/apps/core/src/app/common/base64.ts +++ b/apps/core/src/app/common/base64.ts @@ -2,91 +2,94 @@ import { SafeAny } from '@comen/common'; import { toByteArray, fromByteArray } from 'base64-js'; import { inflate, deflate } from 'pako'; -export function deserializeBase64( - dataString: string -): T { - if (dataString == null) { - throw new Error('dataString should not be null'); - } +export function deserializeBase64(dataString: string): T { + if (dataString == null) { + throw new Error('dataString should not be null'); + } - const buffer = toByteArray(dataString); - // resolve buffer - return deserializeBuffer(buffer); + const buffer = toByteArray(dataString); + // resolve buffer + return deserializeBuffer(buffer); } export function deserializeBuffer(buffer: Uint8Array) { - /** - * 2 bytes | 2 bytes | 4 bytes | vary | 4 bytes | vary - * magic 3S| reserved| raw length | raw datas (blobs)| json length | json body - */ + /** + * 2 bytes | 2 bytes | 4 bytes | vary | 4 bytes | vary + * magic 3S| reserved| raw length | raw datas (blobs)| json length | json body + */ - const dataView = new DataView(buffer.buffer); - dataView.getInt16(0); // assert ascii 3S - dataView.getUint16(2); // reserved - const rawOffset = 8; - const jsonOffset = dataView.getUint32(4) + 12; - const json = JSON.parse(new TextDecoder().decode( - buffer.slice(jsonOffset, dataView.getUint32(jsonOffset)))); + const dataView = new DataView(buffer.buffer); + dataView.getInt16(0); // assert ascii 3S + dataView.getUint16(2); // reserved + const rawOffset = 8; + const jsonOffset = dataView.getUint32(4) + 12; + const json = JSON.parse( + new TextDecoder().decode( + buffer.slice(jsonOffset, dataView.getUint32(jsonOffset)) + ) + ); - function travelObject(obj: SafeAny) { - for (const props in obj) { - if (typeof obj[props] == 'string') { - if ((obj[props] as string).startsWith('@@raw:')) { - const segs = (obj[props] as string).split(':'); - // assert length == 3 - obj[props] = inflate(new Uint8Array(buffer.buffer, rawOffset + parseInt(segs[1]), parseInt(segs[2]))); // replace - } - } else if (typeof obj[props] == 'object') { - travelObject(obj[props]); - } + function travelObject(obj: SafeAny) { + for (const props in obj) { + if (typeof obj[props] == 'string') { + if ((obj[props] as string).startsWith('@@raw:')) { + const segs = (obj[props] as string).split(':'); + // assert length == 3 + obj[props] = inflate( + new Uint8Array( + buffer.buffer, + rawOffset + parseInt(segs[1]), + parseInt(segs[2]) + ) + ); // replace } - return obj; + } else if (typeof obj[props] == 'object') { + travelObject(obj[props]); + } } - return travelObject(json); + return obj; + } + return travelObject(json); } -export function serializeObjectToBase64( - config: T -) { - return fromByteArray(serializeObjectToBuffer(config)); +export function serializeObjectToBase64(config: T) { + return fromByteArray(serializeObjectToBuffer(config)); } -export function serializeObjectToBuffer( - object: T -) { - const buffer = new Uint8Array(16 * 1024 * 1024); // 16MiB - let length = 4; - const dataView = new DataView(buffer.buffer); - dataView.setUint32(0, 0x33530000); +export function serializeObjectToBuffer(object: T) { + const buffer = new Uint8Array(16 * 1024 * 1024); // 16MiB + let length = 4; + const dataView = new DataView(buffer.buffer); + dataView.setUint32(0, 0x33530000); - let rawLen = 0; + let rawLen = 0; - // TODO: iterate attachments - function travelObject(obj: SafeAny) { - const cloned = {}; - for (const props in obj) { - if (obj[props] instanceof Uint8Array) { - const ziped = deflate(obj[props] as Uint8Array); - const uLen = ziped.byteLength; - buffer.set(ziped, rawLen + 8); - cloned[props] = `@@raw:${rawLen}:${uLen}`; - rawLen += uLen; - } else if (typeof obj[props] == 'object') { - cloned[props] = travelObject(obj[props]); - } else { - cloned[props] = obj[props]; - } - } - return cloned; + // TODO: iterate attachments + function travelObject(obj: SafeAny) { + const cloned = {}; + for (const props in obj) { + if (obj[props] instanceof Uint8Array) { + const ziped = deflate(obj[props] as Uint8Array); + const uLen = ziped.byteLength; + buffer.set(ziped, rawLen + 8); + cloned[props] = `@@raw:${rawLen}:${uLen}`; + rawLen += uLen; + } else if (typeof obj[props] == 'object') { + cloned[props] = travelObject(obj[props]); + } else { + cloned[props] = obj[props]; + } } - const iterated = travelObject(object); - dataView.setUint32(4, rawLen); - const jsonStr = JSON.stringify(iterated); - const jsonBuffer = (new TextEncoder().encode(jsonStr)); - length += rawLen + 4; - dataView.setUint32(4, rawLen); - dataView.setUint32(rawLen + 8, jsonBuffer.byteLength); - buffer.set(jsonBuffer, rawLen + 12); - length += jsonBuffer.byteLength + 4; - return buffer.slice(0, length); -} \ No newline at end of file + return cloned; + } + const iterated = travelObject(object); + dataView.setUint32(4, rawLen); + const jsonStr = JSON.stringify(iterated); + const jsonBuffer = new TextEncoder().encode(jsonStr); + length += rawLen + 4; + dataView.setUint32(4, rawLen); + dataView.setUint32(rawLen + 8, jsonBuffer.byteLength); + buffer.set(jsonBuffer, rawLen + 12); + length += jsonBuffer.byteLength + 4; + return buffer.slice(0, length); +} diff --git a/apps/core/src/app/common/emoji.spec.ts b/apps/core/src/app/common/emoji.spec.ts index 80c0b12..fdc588c 100644 --- a/apps/core/src/app/common/emoji.spec.ts +++ b/apps/core/src/app/common/emoji.spec.ts @@ -1,99 +1,117 @@ import { emojiExpressionLexer } from './emoji'; const TEXT_MAP = { - 狗头: 'goutou', - 猫头: 'maotou' -} + 狗头: 'goutou', + 猫头: 'maotou', +}; describe('emoji', () => { - - - it.each([ - ['总之测试一下（狗头', [ - { - type: 'text', - content: '总之测试一下' - }, - { - type: 'emoji', - url: 'goutou' - } - ]], - ['总之测试一下(猫头', [ - { - type: 'text', - content: '总之测试一下' - }, - { - type: 'emoji', - url: 'maotou' - } - ]], - ['总之测试一下（狗头)', [ - { - type: 'text', - content: '总之测试一下' - }, - { - type: 'emoji', - url: 'goutou' - } - ]], - ['总之测试一下（狗头)233', [ - { - type: 'text', - content: '总之测试一下' - }, - { - type: 'emoji', - url: 'goutou' - }, - { - type: 'text', - content: '233' - } - ]], - ['总之测试一下（狗头 233', [ - { - type: 'text', - content: '总之测试一下' - }, - { - type: 'emoji', - url: 'goutou' - }, - { - type: 'text', - content: ' 233' - } - ]], - ['总之测试一下（狗头 233', [ - { - type: 'text', - content: '总之测试一下' - }, - { - type: 'emoji', - url: 'goutou' - }, - { - type: 'text', - content: ' 233' - }] - ], - ['（狗头)（(（= =）（（（（（', [ - { - type: 'emoji', - url: 'goutou' - }, - { - type: 'text', - content: '（(（= =）（（（（（' - } - ]] - ])('should parse %s', (a, b) => { - - const ret = emojiExpressionLexer((s) => TEXT_MAP[s], a); - expect(ret).toEqual(b) - }) -}) \ No newline at end of file + it.each([ + [ + '总之测试一下（狗头', + [ + { + type: 'text', + content: '总之测试一下', + }, + { + type: 'emoji', + url: 'goutou', + }, + ], + ], + [ + '总之测试一下(猫头', + [ + { + type: 'text', + content: '总之测试一下', + }, + { + type: 'emoji', + url: 'maotou', + }, + ], + ], + [ + '总之测试一下（狗头)', + [ + { + type: 'text', + content: '总之测试一下', + }, + { + type: 'emoji', + url: 'goutou', + }, + ], + ], + [ + '总之测试一下（狗头)233', + [ + { + type: 'text', + content: '总之测试一下', + }, + { + type: 'emoji', + url: 'goutou', + }, + { + type: 'text', + content: '233', + }, + ], + ], + [ + '总之测试一下（狗头 233', + [ + { + type: 'text', + content: '总之测试一下', + }, + { + type: 'emoji', + url: 'goutou', + }, + { + type: 'text', + content: ' 233', + }, + ], + ], + [ + '总之测试一下（狗头 233', + [ + { + type: 'text', + content: '总之测试一下', + }, + { + type: 'emoji', + url: 'goutou', + }, + { + type: 'text', + content: ' 233', + }, + ], + ], + [ + '（狗头)（(（= =）（（（（（', + [ + { + type: 'emoji', + url: 'goutou', + }, + { + type: 'text', + content: '（(（= =）（（（（（', + }, + ], + ], + ])('should parse %s', (a, b) => { + const ret = emojiExpressionLexer((s) => TEXT_MAP[s], a); + expect(ret).toEqual(b); + }); +}); diff --git a/apps/core/src/app/common/emoji.ts b/apps/core/src/app/common/emoji.ts index 7532181..0486931 100644 --- a/apps/core/src/app/common/emoji.ts +++ b/apps/core/src/app/common/emoji.ts @@ -4,245 +4,417 @@ import { map } from 'rxjs/operators'; import { ComenConfiguration } from '../config'; const EMOJI_START_TOKEN = ['(', '（']; -const EMOJI_END_TOKEN = [')', '）', ',', '，', '.', ' ', '。', '/', '\\', - '$', '¥', '-', '+', '*', '#', '@', '!', '~', '?', '=', '_', ';', '"', '“', '”', '|'] +const EMOJI_END_TOKEN = [ + ')', + '）', + ',', + '，', + '.', + ' ', + '。', + '/', + '\\', + '$', + '¥', + '-', + '+', + '*', + '#', + '@', + '!', + '~', + '?', + '=', + '_', + ';', + '"', + '“', + '”', + '|', +]; function emojiExpressionToken(charArr: string[]): [string, string] { - let constructed = ''; - //eslint-disable-next-line - while (true) { - if (charArr.length == 0) { - return [constructed, '']; - } - const next = charArr.shift(); - if (EMOJI_START_TOKEN.includes(next)) { - charArr.unshift(next); - return [constructed, '']; - } - if (EMOJI_END_TOKEN.includes(next)) { - return [constructed, next]; - } else { - constructed += next; - } + let constructed = ''; + //eslint-disable-next-line + while (true) { + if (charArr.length == 0) { + return [constructed, '']; + } + const next = charArr.shift(); + if (EMOJI_START_TOKEN.includes(next)) { + charArr.unshift(next); + return [constructed, '']; + } + if (EMOJI_END_TOKEN.includes(next)) { + return [constructed, next]; + } else { + constructed += next; } + } } -export function emojiExpressionLexer(dict: (token: string) => string | null, content: string): RichTextNode[] { - if (content.length == 0) { - return [{ type: 'text', content: '' }]; +export function emojiExpressionLexer( + dict: (token: string) => string | null, + content: string +): RichTextNode[] { + if (content.length == 0) { + return [{ type: 'text', content: '' }]; + } + const nodes: RichTextNode[] = []; + const charArr = Array.from(content); + let constructedText = ''; + //eslint-disable-next-line + while (true) { + if (charArr.length == 0) { + constructedText && + nodes.push({ + type: 'text', + content: constructedText, + }); + break; } - const nodes: RichTextNode[] = []; - const charArr = Array.from(content); - let constructedText = ''; - //eslint-disable-next-line - while (true) { - if (charArr.length == 0) { - constructedText && nodes.push({ - type: 'text', - content: constructedText - }); - break; - } - const next = charArr.shift(); - if (EMOJI_START_TOKEN.includes(next)) { - const [token, tokenEnd] = emojiExpressionToken(charArr); - const url = dict(token); - if (url != null) { //has emoji - constructedText && nodes.push({ - type: 'text', - content: constructedText - }); - nodes.push({ - type: 'emoji', - url: url - }); - if (tokenEnd == ')' || tokenEnd == '）') { - constructedText = ''; - } else { - constructedText = tokenEnd; - } - } else { - constructedText += (next + token + tokenEnd); - } + const next = charArr.shift(); + if (EMOJI_START_TOKEN.includes(next)) { + const [token, tokenEnd] = emojiExpressionToken(charArr); + const url = dict(token); + if (url != null) { + //has emoji + constructedText && + nodes.push({ + type: 'text', + content: constructedText, + }); + nodes.push({ + type: 'emoji', + url: url, + }); + if (tokenEnd == ')' || tokenEnd == '）') { + constructedText = ''; } else { - constructedText += next; + constructedText = tokenEnd; } + } else { + constructedText += next + token + tokenEnd; + } + } else { + constructedText += next; } - return nodes; + } + return nodes; } function emojiMap(message: Message) { - if (message.type == 'text') { - const ret = emojiExpressionLexer((token) => { - return EMOJI_MAP[token]; - }, message.content); - if (ret.some(x => x.type == 'emoji')) { - return { - ...message, - type: 'richtext', - richtext: { - nodes: ret - } - } as RichTextMessage; - } - return message; - } else { - return message; + if (message.type == 'text') { + const ret = emojiExpressionLexer((token) => { + return EMOJI_MAP[token]; + }, message.content); + if (ret.some((x) => x.type == 'emoji')) { + return { + ...message, + type: 'richtext', + richtext: { + nodes: ret, + }, + } as RichTextMessage; } + return message; + } else { + return message; + } } export const emojiFilter = (config: ComenConfiguration) => { - if (config.platform == 'bilibili') { - return map(emojiMap); - } - return identity; + if (config.platform == 'bilibili') { + return map(emojiMap); + } + return identity; }; /** * TODO: configurable emojis */ export const EMOJI_MAP = { - 2021: 'http://i0.hdslb.com/bfs/emote/14d8996128d46dabd3a2ed6c172c8af918d7a5d2.png', - 微笑: 'http://i0.hdslb.com/bfs/emote/685612eadc33f6bc233776c6241813385844f182.png', - OK: 'http://i0.hdslb.com/bfs/emote/4683fd9ffc925fa6423110979d7dcac5eda297f4.png', - 星星眼: 'http://i0.hdslb.com/bfs/emote/63c9d1a31c0da745b61cdb35e0ecb28635675db2.png', - doge: 'http://i0.hdslb.com/bfs/emote/bba7c12aa51fed0199c241465560dfc2714c593e.png', - 狗头: 'http://i0.hdslb.com/bfs/emote/bba7c12aa51fed0199c241465560dfc2714c593e.png', - 妙啊: 'http://i0.hdslb.com/bfs/emote/b4cb77159d58614a9b787b91b1cd22a81f383535.png', - 吃瓜: 'http://i0.hdslb.com/bfs/emote/4191ce3c44c2b3df8fd97c33f85d3ab15f4f3c84.png', - 辣眼睛: 'http://i0.hdslb.com/bfs/emote/35d62c496d1e4ea9e091243fa812866f5fecc101.png', - 滑稽: 'http://i0.hdslb.com/bfs/emote/d15121545a99ac46774f1f4465b895fe2d1411c3.png', - 笑哭: 'http://i0.hdslb.com/bfs/emote/c3043ba94babf824dea03ce500d0e73763bf4f40.png', - 呲牙: 'http://i0.hdslb.com/bfs/emote/b5a5898491944a4268360f2e7a84623149672eb6.png', - 打call: 'http://i0.hdslb.com/bfs/emote/431432c43da3ee5aab5b0e4f8931953e649e9975.png', - 歪嘴: 'http://i0.hdslb.com/bfs/emote/4384050fbab0586259acdd170b510fe262f08a17.png', - 嫌弃: 'http://i0.hdslb.com/bfs/emote/de4c0783aaa60ec03de0a2b90858927bfad7154b.png', - 喜欢: 'http://i0.hdslb.com/bfs/emote/8a10a4d73a89f665feff3d46ca56e83dc68f9eb8.png', - 哦呼: 'http://i0.hdslb.com/bfs/emote/362bded07ea5434886271d23fa25f5d85d8af06c.png', - 酸了: 'http://i0.hdslb.com/bfs/emote/92b1c8cbceea3ae0e8e32253ea414783e8ba7806.png', - 大哭: 'http://i0.hdslb.com/bfs/emote/2caafee2e5db4db72104650d87810cc2c123fc86.png', - 害羞: 'http://i0.hdslb.com/bfs/emote/9d2ec4e1fbd6cb1b4d12d2bbbdd124ccb83ddfda.png', - 疑惑: 'http://i0.hdslb.com/bfs/emote/b7840db4b1f9f4726b7cb23c0972720c1698d661.png', - 调皮: 'http://i0.hdslb.com/bfs/emote/8290b7308325e3179d2154327c85640af1528617.png', - 喜极而泣: 'http://i0.hdslb.com/bfs/emote/485a7e0c01c2d70707daae53bee4a9e2e31ef1ed.png', - 奸笑: 'http://i0.hdslb.com/bfs/emote/bb84906573472f0a84cebad1e9000eb6164a6f5a.png', - 笑: 'http://i0.hdslb.com/bfs/emote/81edf17314cea3b48674312b4364df44d5c01f17.png', - 偷笑: 'http://i0.hdslb.com/bfs/emote/6c49d226e76c42cd8002abc47b3112bc5a92f66a.png', - 惊讶: 'http://i0.hdslb.com/bfs/emote/f8e9a59cad52ae1a19622805696a35f0a0d853f3.png', - 捂脸: 'http://i0.hdslb.com/bfs/emote/6921bb43f0c634870b92f4a8ad41dada94a5296d.png', - 阴险: 'http://i0.hdslb.com/bfs/emote/ba8d5f8e7d136d59aab52c40fd3b8a43419eb03c.png', - 囧: 'http://i0.hdslb.com/bfs/emote/12e41d357a9807cc80ef1e1ed258127fcc791424.png', - 呆: 'http://i0.hdslb.com/bfs/emote/33ad6000d9f9f168a0976bc60937786f239e5d8c.png', - 抠鼻: 'http://i0.hdslb.com/bfs/emote/cb89184c97e3f6d50acfd7961c313ce50360d70f.png', - 大笑: 'http://i0.hdslb.com/bfs/emote/ca94ad1c7e6dac895eb5b33b7836b634c614d1c0.png', - 惊喜: 'http://i0.hdslb.com/bfs/emote/0afecaf3a3499479af946f29749e1a6c285b6f65.png', - 无语: 'http://i0.hdslb.com/bfs/emote/44667b7d9349957e903b1b62cb91fb9b13720f04.png', - 鼓掌: 'http://i0.hdslb.com/bfs/emote/895d1fc616b4b6c830cf96012880818c0e1de00d.png', - 点赞: 'http://i0.hdslb.com/bfs/emote/1a67265993913f4c35d15a6028a30724e83e7d35.png', - 尴尬: 'http://i0.hdslb.com/bfs/emote/cb321684ed5ce6eacdc2699092ab8fe7679e4fda.png', - 灵魂出窍: 'http://i0.hdslb.com/bfs/emote/43d3db7d97343c01b47e22cfabeca84b4251f35a.png', - 委屈: 'http://i0.hdslb.com/bfs/emote/d2f26cbdd6c96960320af03f5514c5b524990840.png', - 傲娇: 'http://i0.hdslb.com/bfs/emote/010540d0f61220a0db4922e4a679a1d8eca94f4e.png', - 冷: 'http://i0.hdslb.com/bfs/emote/cb0ebbd0668640f07ebfc0e03f7a18a8cd00b4ed.png', - 疼: 'http://i0.hdslb.com/bfs/emote/905fd9a99ec316e353b9bd4ecd49a5f0a301eabf.png', - 吓: 'http://i0.hdslb.com/bfs/emote/9c10c5ebc7bef27ec641b8a1877674e0c65fea5d.png', - 生病: 'http://i0.hdslb.com/bfs/emote/0f25ce04ae1d7baf98650986454c634f6612cb76.png', - 吐: 'http://i0.hdslb.com/bfs/emote/06946bfe71ac48a6078a0b662181bb5cad09decc.png', - 捂眼: 'http://i0.hdslb.com/bfs/emote/c5c6d6982e1e53e478daae554b239f2b227b172b.png', - 嘘声: 'http://i0.hdslb.com/bfs/emote/e64af664d20716e090f10411496998095f62f844.png', - 思考: 'http://i0.hdslb.com/bfs/emote/cfa9b7e89e4bfe04bbcd34ccb1b0df37f4fa905c.png', - 再见: 'http://i0.hdslb.com/bfs/emote/fc510306bae26c9aec7e287cdf201ded27b065b9.png', - 翻白眼: 'http://i0.hdslb.com/bfs/emote/eba54707c7168925b18f6f8b1f48d532fe08c2b1.png', - 哈欠: 'http://i0.hdslb.com/bfs/emote/888d877729cbec444ddbd1cf4c9af155a7a06086.png', - 奋斗: 'http://i0.hdslb.com/bfs/emote/bb2060c15dba7d3fd731c35079d1617f1afe3376.png', - 墨镜: 'http://i0.hdslb.com/bfs/emote/3a03aebfc06339d86a68c2d893303b46f4b85771.png', - 难过: 'http://i0.hdslb.com/bfs/emote/a651db36701610aa70a781fa98c07c9789b11543.png', - 撇嘴: 'http://i0.hdslb.com/bfs/emote/531863568e5668c5ac181d395508a0eeb1f0cda4.png', - 抓狂: 'http://i0.hdslb.com/bfs/emote/4c87afff88c22439c45b79e9d2035d21d5622eba.png', - 生气: 'http://i0.hdslb.com/bfs/emote/3195714219c4b582a4fb02033dd1519913d0246d.png', - 口罩: 'http://i0.hdslb.com/bfs/emote/3ad2f66b151496d2a5fb0a8ea75f32265d778dd3.png', - 鸡腿: 'http://i0.hdslb.com/bfs/emote/c7860392815d345fa69c4f00ef18d67dccfbd574.png', - 月饼: 'http://i0.hdslb.com/bfs/emote/89b19c5730e08d6f12fadf6996de5bc2e52f81fe.png', - 雪花: 'http://i0.hdslb.com/bfs/emote/a41813c4edf8782047e172c884ebd4507ce5e449.png', - 视频卫星: 'http://i0.hdslb.com/bfs/emote/dce6fc7d6dfeafff01241924db60f8251cca5307.png', - '11周年': 'http://i0.hdslb.com/bfs/emote/d3b2d5dc028c75ae4df379f4c3afbe186d0f6f9b.png', - 干杯: 'http://i0.hdslb.com/bfs/emote/8da12d5f55a2c7e9778dcc05b40571979fe208e6.png', - 爱心: 'http://i0.hdslb.com/bfs/emote/ed04066ea7124106d17ffcaf75600700e5442f5c.png', - 锦鲤: 'http://i0.hdslb.com/bfs/emote/643d6c19c8164ffd89e3e9cdf093cf5d773d979c.png', - 胜利: 'http://i0.hdslb.com/bfs/emote/b49fa9f4b1e7c3477918153b82c60b114d87347c.png', - 加油: 'http://i0.hdslb.com/bfs/emote/c7aaeacb21e107292d3bb053e5abde4a4459ed30.png', - 抱拳: 'http://i0.hdslb.com/bfs/emote/89516218158dbea18ab78e8873060bf95d33bbbe.png', - 响指: 'http://i0.hdslb.com/bfs/emote/1b5c53cf14336903e1d2ae3527ca380a1256a077.png', - 保佑: 'http://i0.hdslb.com/bfs/emote/fafe8d3de0dc139ebe995491d2dac458a865fb30.png', - 支持: 'http://i0.hdslb.com/bfs/emote/3c210366a5585706c09d4c686a9d942b39feeb50.png', - 拥抱: 'http://i0.hdslb.com/bfs/emote/41780a4254750cdaaccb20735730a36044e98ef3.png', - 跪了: 'http://i0.hdslb.com/bfs/emote/f2b3aee7e521de7799d4e3aa379b01be032698ac.png', - 怪我咯: 'http://i0.hdslb.com/bfs/emote/07cc6077f7f7d75b8d2c722dd9d9828a9fb9e46d.png', - 黑洞: 'http://i0.hdslb.com/bfs/emote/e90ec4c799010f25391179118ccd9f66b3b279ba.png', - 老鼠: 'http://i0.hdslb.com/bfs/emote/8e6fb491eb1bb0d5862e7ec8ccf9a3da12b6c155.png', - 福到了: 'http://i0.hdslb.com/bfs/emote/5de5373d354c373cf1617b6b836f3a8d53c5a655.png', - 'W-哈哈': 'http://i0.hdslb.com/bfs/emote/83d527303c8f62f494e6971c48836487e7d87b1b.png', - '凛冬-生气': 'http://i0.hdslb.com/bfs/emote/d90bd2fbc13a3cb8d313f6d675f20caf109f60a7.png', - '霜叶-疑问': 'http://i0.hdslb.com/bfs/emote/ada3aea8594e724511c1daad15fb3b23900d8e24.png', - '煌-震撼': 'http://i0.hdslb.com/bfs/emote/7bb39ac289bc97fe52af047020a9bf324ecdebe1.png', - 哭泣: 'http://i0.hdslb.com/bfs/emote/a61abafb8c39defc323b045f30072198007b1c89.png', - 哈哈: 'http://i0.hdslb.com/bfs/emote/e6449b0bae13b8c97cc65976ff8cdc2c16be0015.png', - 狗子: 'http://i0.hdslb.com/bfs/emote/6a997106af5bf490f22c80a7acf3be813ee755fc.png', - 羞羞: 'http://i0.hdslb.com/bfs/emote/f4f9171e4d8c3f30827a8b96ea1ce1beb825ad50.png', - 亲亲: 'http://i0.hdslb.com/bfs/emote/2f72bae7b834d499f259c833f7011d5ed8748fd1.png', - 耍帅: 'http://i0.hdslb.com/bfs/emote/d7a38b08d1f1cc35b19c35041f29ffcc48808e87.png', - 气愤: 'http://i0.hdslb.com/bfs/emote/069b029d17a086ab475fd331697a649e234850bb.png', - 高兴: 'http://i0.hdslb.com/bfs/emote/416570a8aca7be12fb2c36e4b846906653f6d294.png', + 2021: 'http://i0.hdslb.com/bfs/emote/14d8996128d46dabd3a2ed6c172c8af918d7a5d2.png', + 微笑: + 'http://i0.hdslb.com/bfs/emote/685612eadc33f6bc233776c6241813385844f182.png', + OK: + 'http://i0.hdslb.com/bfs/emote/4683fd9ffc925fa6423110979d7dcac5eda297f4.png', + 星星眼: + 'http://i0.hdslb.com/bfs/emote/63c9d1a31c0da745b61cdb35e0ecb28635675db2.png', + doge: + 'http://i0.hdslb.com/bfs/emote/bba7c12aa51fed0199c241465560dfc2714c593e.png', + 狗头: + 'http://i0.hdslb.com/bfs/emote/bba7c12aa51fed0199c241465560dfc2714c593e.png', + 妙啊: + 'http://i0.hdslb.com/bfs/emote/b4cb77159d58614a9b787b91b1cd22a81f383535.png', + 吃瓜: + 'http://i0.hdslb.com/bfs/emote/4191ce3c44c2b3df8fd97c33f85d3ab15f4f3c84.png', + 辣眼睛: + 'http://i0.hdslb.com/bfs/emote/35d62c496d1e4ea9e091243fa812866f5fecc101.png', + 滑稽: + 'http://i0.hdslb.com/bfs/emote/d15121545a99ac46774f1f4465b895fe2d1411c3.png', + 笑哭: + 'http://i0.hdslb.com/bfs/emote/c3043ba94babf824dea03ce500d0e73763bf4f40.png', + 呲牙: + 'http://i0.hdslb.com/bfs/emote/b5a5898491944a4268360f2e7a84623149672eb6.png', + 打call: + 'http://i0.hdslb.com/bfs/emote/431432c43da3ee5aab5b0e4f8931953e649e9975.png', + 歪嘴: + 'http://i0.hdslb.com/bfs/emote/4384050fbab0586259acdd170b510fe262f08a17.png', + 嫌弃: + 'http://i0.hdslb.com/bfs/emote/de4c0783aaa60ec03de0a2b90858927bfad7154b.png', + 喜欢: + 'http://i0.hdslb.com/bfs/emote/8a10a4d73a89f665feff3d46ca56e83dc68f9eb8.png', + 哦呼: + 'http://i0.hdslb.com/bfs/emote/362bded07ea5434886271d23fa25f5d85d8af06c.png', + 酸了: + 'http://i0.hdslb.com/bfs/emote/92b1c8cbceea3ae0e8e32253ea414783e8ba7806.png', + 大哭: + 'http://i0.hdslb.com/bfs/emote/2caafee2e5db4db72104650d87810cc2c123fc86.png', + 害羞: + 'http://i0.hdslb.com/bfs/emote/9d2ec4e1fbd6cb1b4d12d2bbbdd124ccb83ddfda.png', + 疑惑: + 'http://i0.hdslb.com/bfs/emote/b7840db4b1f9f4726b7cb23c0972720c1698d661.png', + 调皮: + 'http://i0.hdslb.com/bfs/emote/8290b7308325e3179d2154327c85640af1528617.png', + 喜极而泣: + 'http://i0.hdslb.com/bfs/emote/485a7e0c01c2d70707daae53bee4a9e2e31ef1ed.png', + 奸笑: + 'http://i0.hdslb.com/bfs/emote/bb84906573472f0a84cebad1e9000eb6164a6f5a.png', + 笑: + 'http://i0.hdslb.com/bfs/emote/81edf17314cea3b48674312b4364df44d5c01f17.png', + 偷笑: + 'http://i0.hdslb.com/bfs/emote/6c49d226e76c42cd8002abc47b3112bc5a92f66a.png', + 惊讶: + 'http://i0.hdslb.com/bfs/emote/f8e9a59cad52ae1a19622805696a35f0a0d853f3.png', + 捂脸: + 'http://i0.hdslb.com/bfs/emote/6921bb43f0c634870b92f4a8ad41dada94a5296d.png', + 阴险: + 'http://i0.hdslb.com/bfs/emote/ba8d5f8e7d136d59aab52c40fd3b8a43419eb03c.png', + 囧: + 'http://i0.hdslb.com/bfs/emote/12e41d357a9807cc80ef1e1ed258127fcc791424.png', + 呆: + 'http://i0.hdslb.com/bfs/emote/33ad6000d9f9f168a0976bc60937786f239e5d8c.png', + 抠鼻: + 'http://i0.hdslb.com/bfs/emote/cb89184c97e3f6d50acfd7961c313ce50360d70f.png', + 大笑: + 'http://i0.hdslb.com/bfs/emote/ca94ad1c7e6dac895eb5b33b7836b634c614d1c0.png', + 惊喜: + 'http://i0.hdslb.com/bfs/emote/0afecaf3a3499479af946f29749e1a6c285b6f65.png', + 无语: + 'http://i0.hdslb.com/bfs/emote/44667b7d9349957e903b1b62cb91fb9b13720f04.png', + 鼓掌: + 'http://i0.hdslb.com/bfs/emote/895d1fc616b4b6c830cf96012880818c0e1de00d.png', + 点赞: + 'http://i0.hdslb.com/bfs/emote/1a67265993913f4c35d15a6028a30724e83e7d35.png', + 尴尬: + 'http://i0.hdslb.com/bfs/emote/cb321684ed5ce6eacdc2699092ab8fe7679e4fda.png', + 灵魂出窍: + 'http://i0.hdslb.com/bfs/emote/43d3db7d97343c01b47e22cfabeca84b4251f35a.png', + 委屈: + 'http://i0.hdslb.com/bfs/emote/d2f26cbdd6c96960320af03f5514c5b524990840.png', + 傲娇: + 'http://i0.hdslb.com/bfs/emote/010540d0f61220a0db4922e4a679a1d8eca94f4e.png', + 冷: + 'http://i0.hdslb.com/bfs/emote/cb0ebbd0668640f07ebfc0e03f7a18a8cd00b4ed.png', + 疼: + 'http://i0.hdslb.com/bfs/emote/905fd9a99ec316e353b9bd4ecd49a5f0a301eabf.png', + 吓: + 'http://i0.hdslb.com/bfs/emote/9c10c5ebc7bef27ec641b8a1877674e0c65fea5d.png', + 生病: + 'http://i0.hdslb.com/bfs/emote/0f25ce04ae1d7baf98650986454c634f6612cb76.png', + 吐: + 'http://i0.hdslb.com/bfs/emote/06946bfe71ac48a6078a0b662181bb5cad09decc.png', + 捂眼: + 'http://i0.hdslb.com/bfs/emote/c5c6d6982e1e53e478daae554b239f2b227b172b.png', + 嘘声: + 'http://i0.hdslb.com/bfs/emote/e64af664d20716e090f10411496998095f62f844.png', + 思考: + 'http://i0.hdslb.com/bfs/emote/cfa9b7e89e4bfe04bbcd34ccb1b0df37f4fa905c.png', + 再见: + 'http://i0.hdslb.com/bfs/emote/fc510306bae26c9aec7e287cdf201ded27b065b9.png', + 翻白眼: + 'http://i0.hdslb.com/bfs/emote/eba54707c7168925b18f6f8b1f48d532fe08c2b1.png', + 哈欠: + 'http://i0.hdslb.com/bfs/emote/888d877729cbec444ddbd1cf4c9af155a7a06086.png', + 奋斗: + 'http://i0.hdslb.com/bfs/emote/bb2060c15dba7d3fd731c35079d1617f1afe3376.png', + 墨镜: + 'http://i0.hdslb.com/bfs/emote/3a03aebfc06339d86a68c2d893303b46f4b85771.png', + 难过: + 'http://i0.hdslb.com/bfs/emote/a651db36701610aa70a781fa98c07c9789b11543.png', + 撇嘴: + 'http://i0.hdslb.com/bfs/emote/531863568e5668c5ac181d395508a0eeb1f0cda4.png', + 抓狂: + 'http://i0.hdslb.com/bfs/emote/4c87afff88c22439c45b79e9d2035d21d5622eba.png', + 生气: + 'http://i0.hdslb.com/bfs/emote/3195714219c4b582a4fb02033dd1519913d0246d.png', + 口罩: + 'http://i0.hdslb.com/bfs/emote/3ad2f66b151496d2a5fb0a8ea75f32265d778dd3.png', + 鸡腿: + 'http://i0.hdslb.com/bfs/emote/c7860392815d345fa69c4f00ef18d67dccfbd574.png', + 月饼: + 'http://i0.hdslb.com/bfs/emote/89b19c5730e08d6f12fadf6996de5bc2e52f81fe.png', + 雪花: + 'http://i0.hdslb.com/bfs/emote/a41813c4edf8782047e172c884ebd4507ce5e449.png', + 视频卫星: + 'http://i0.hdslb.com/bfs/emote/dce6fc7d6dfeafff01241924db60f8251cca5307.png', + '11周年': + 'http://i0.hdslb.com/bfs/emote/d3b2d5dc028c75ae4df379f4c3afbe186d0f6f9b.png', + 干杯: + 'http://i0.hdslb.com/bfs/emote/8da12d5f55a2c7e9778dcc05b40571979fe208e6.png', + 爱心: + 'http://i0.hdslb.com/bfs/emote/ed04066ea7124106d17ffcaf75600700e5442f5c.png', + 锦鲤: + 'http://i0.hdslb.com/bfs/emote/643d6c19c8164ffd89e3e9cdf093cf5d773d979c.png', + 胜利: + 'http://i0.hdslb.com/bfs/emote/b49fa9f4b1e7c3477918153b82c60b114d87347c.png', + 加油: + 'http://i0.hdslb.com/bfs/emote/c7aaeacb21e107292d3bb053e5abde4a4459ed30.png', + 抱拳: + 'http://i0.hdslb.com/bfs/emote/89516218158dbea18ab78e8873060bf95d33bbbe.png', + 响指: + 'http://i0.hdslb.com/bfs/emote/1b5c53cf14336903e1d2ae3527ca380a1256a077.png', + 保佑: + 'http://i0.hdslb.com/bfs/emote/fafe8d3de0dc139ebe995491d2dac458a865fb30.png', + 支持: + 'http://i0.hdslb.com/bfs/emote/3c210366a5585706c09d4c686a9d942b39feeb50.png', + 拥抱: + 'http://i0.hdslb.com/bfs/emote/41780a4254750cdaaccb20735730a36044e98ef3.png', + 跪了: + 'http://i0.hdslb.com/bfs/emote/f2b3aee7e521de7799d4e3aa379b01be032698ac.png', + 怪我咯: + 'http://i0.hdslb.com/bfs/emote/07cc6077f7f7d75b8d2c722dd9d9828a9fb9e46d.png', + 黑洞: + 'http://i0.hdslb.com/bfs/emote/e90ec4c799010f25391179118ccd9f66b3b279ba.png', + 老鼠: + 'http://i0.hdslb.com/bfs/emote/8e6fb491eb1bb0d5862e7ec8ccf9a3da12b6c155.png', + 福到了: + 'http://i0.hdslb.com/bfs/emote/5de5373d354c373cf1617b6b836f3a8d53c5a655.png', + 'W-哈哈': + 'http://i0.hdslb.com/bfs/emote/83d527303c8f62f494e6971c48836487e7d87b1b.png', + '凛冬-生气': + 'http://i0.hdslb.com/bfs/emote/d90bd2fbc13a3cb8d313f6d675f20caf109f60a7.png', + '霜叶-疑问': + 'http://i0.hdslb.com/bfs/emote/ada3aea8594e724511c1daad15fb3b23900d8e24.png', + '煌-震撼': + 'http://i0.hdslb.com/bfs/emote/7bb39ac289bc97fe52af047020a9bf324ecdebe1.png', + 哭泣: + 'http://i0.hdslb.com/bfs/emote/a61abafb8c39defc323b045f30072198007b1c89.png', + 哈哈: + 'http://i0.hdslb.com/bfs/emote/e6449b0bae13b8c97cc65976ff8cdc2c16be0015.png', + 狗子: + 'http://i0.hdslb.com/bfs/emote/6a997106af5bf490f22c80a7acf3be813ee755fc.png', + 羞羞: + 'http://i0.hdslb.com/bfs/emote/f4f9171e4d8c3f30827a8b96ea1ce1beb825ad50.png', + 亲亲: + 'http://i0.hdslb.com/bfs/emote/2f72bae7b834d499f259c833f7011d5ed8748fd1.png', + 耍帅: + 'http://i0.hdslb.com/bfs/emote/d7a38b08d1f1cc35b19c35041f29ffcc48808e87.png', + 气愤: + 'http://i0.hdslb.com/bfs/emote/069b029d17a086ab475fd331697a649e234850bb.png', + 高兴: + 'http://i0.hdslb.com/bfs/emote/416570a8aca7be12fb2c36e4b846906653f6d294.png', - 知识增加: 'http://i0.hdslb.com/bfs/emote/142409b595982b8210b2958f3d340f3b47942645.png', - 爷青回: 'http://i0.hdslb.com/bfs/emote/a26189ff1e681bddef7f6533f9aabe7604731a3e.png', - 好家伙: 'http://i0.hdslb.com/bfs/emote/63ec80dea3066bd9f449ba999ba531fa61f7b4eb.png', - 芜湖起飞: 'http://i0.hdslb.com/bfs/emote/78d04c6ce78a613c90d510cd45fe7e25c57ba00b.png', - 梦幻联动: 'http://i0.hdslb.com/bfs/emote/4809416be5ca787c2ec3e897e4fd022a58da6e0e.png', - 泪目: 'http://i0.hdslb.com/bfs/emote/bba3703ab90b7d16fe9dbcb85ed949db687f8331.png', - 保护: 'http://i0.hdslb.com/bfs/emote/55f8f6445ca7c3170cdfc5b16036abf639ce9b57.png', - 害怕: 'http://i0.hdslb.com/bfs/emote/d77e2de26da143249f0c0ad7a608c27152c985bf.png', - 爱了爱了: 'http://i0.hdslb.com/bfs/emote/2a165b555ba20391316366c664ed7891883dc5aa.png', - 吹爆: 'http://i0.hdslb.com/bfs/emote/b528220f9c37256ed6a37f05bf118e44b08b81e5.png', - 三连: 'http://i0.hdslb.com/bfs/emote/21f15fe11b7a84d2f2121c16dec50a4e4556f865.png', - 可以: 'http://i0.hdslb.com/bfs/emote/e08543c71202b36c590094417fcfbb80c3506cd8.png', - 希望没事: 'http://i0.hdslb.com/bfs/emote/6c0d2e6c486d1ba5afd6204a96e102652464a01d.png', - 打卡: 'http://i0.hdslb.com/bfs/emote/a9cf77c78e1b9b40aa3ed4862402fba008ee2f51.png', - skr: 'http://i0.hdslb.com/bfs/emote/bd285ff94db16ad52557c3effe930d64663e8375.png', - battle: 'http://i0.hdslb.com/bfs/emote/f2f81c8e47db6252becd633a5d1ee14e15df2ea8.png', - DNA: 'http://i0.hdslb.com/bfs/emote/f6eb74f8230588f61a298af89061a7d75c5762e5.png', - // "妙啊":"http://i0.hdslb.com/bfs/emote/0e98299d7decf5eaffad854977946075c3e91cb8.png", - 这次一定: 'http://i0.hdslb.com/bfs/emote/a01ca28923daa7cc896c42f27deb4914e20dd572.png', - AWSL: 'http://i0.hdslb.com/bfs/emote/c37f88cf799f9badf9d84b7671dc3dd98c0fc0c2.png', - 递话筒: 'http://i0.hdslb.com/bfs/emote/98e6950e39fbb4dd1c576042063ca632074070ba.png', - 你细品: 'http://i0.hdslb.com/bfs/emote/535e00658e7e47966f154d3a167fa2365ebc4321.png', - 咕咕: 'http://i0.hdslb.com/bfs/emote/d8065c2e7ce48c929317a94553499a46fecc262a.png', - 标准结局: 'http://i0.hdslb.com/bfs/emote/3de98174b510cf7dc5fd1bd08c5d881065e79137.png', - 危: 'http://i0.hdslb.com/bfs/emote/5cc6c3357c4df544dd8de9d5c5c0cec97c7c9a56.png', - 张三: 'http://i0.hdslb.com/bfs/emote/255a938f39cea625032b6650036b31aa26c50a3c.png', - 害: 'http://i0.hdslb.com/bfs/emote/cbe798a194612958537c5282fcca7c3bcd2aa15c.png', - 我裂开了: 'http://i0.hdslb.com/bfs/emote/29bd57ec4e8952880fea6c9e47aee924e91f10c4.png', - 有内味了: 'http://i0.hdslb.com/bfs/emote/7ca61680a905b5b6e2e335c630e725b648b03b4d.png', - 猛男必看: 'http://i0.hdslb.com/bfs/emote/c97064450528a0e45c7e7c365a15fbb13fd61d8c.png', - 奥力给: 'http://i0.hdslb.com/bfs/emote/c9b8683827ec6c00fea5327c9bec14f581cef2aa.png', - 问号: 'http://i0.hdslb.com/bfs/emote/c1d1e76c12180adc8558f47006fe0e7ded4154bb.png', - 我哭了: 'http://i0.hdslb.com/bfs/emote/9e0b3877d649aaf6538fbdd3f937e240a9d808e4.png', - 高产: 'http://i0.hdslb.com/bfs/emote/9db817cba4a7f4a42398f3b2ec7c0a8e0c247c42.png', - 我酸了: 'http://i0.hdslb.com/bfs/emote/a8cbf3f6b8cd9377eeb15b9172f3cd683b2e4650.png', - 真香: 'http://i0.hdslb.com/bfs/emote/e68497c775feaac1c3b1a6cd63a50cfb11b767c4.png', - 我全都要: 'http://i0.hdslb.com/bfs/emote/d424d1ad8d14c1c9b8367842bc68c658b9229bc1.png', - 神仙UP: 'http://i0.hdslb.com/bfs/emote/a49e0d0db1e7d35a0f7411be13208951ab448f03.png', - 你币有了: 'http://i0.hdslb.com/bfs/emote/84820c2b147a8ca02f3c4006b63f76c6313cbfa0.png', - 不愧是你: 'http://i0.hdslb.com/bfs/emote/9ff2e356797c57ee3b1675ade0883d2d2247be9b.png', - 锤: 'http://i0.hdslb.com/bfs/emote/35668cc12ae25b9545420e4a85bf21a0bfc03e5d.png', - 秀: 'http://i0.hdslb.com/bfs/emote/50782fbf5d9b7f48f9467b5c53932981e321eedc.png', - 爷关更: 'http://i0.hdslb.com/bfs/emote/faad40c56447f1f8abcb4045c17ce159d113d1fd.png', - 有生之年: 'http://i0.hdslb.com/bfs/emote/f41fdafe2d0fbb8e8bc1598d2cf37e355560103a.png', - 镇站之宝: 'http://i0.hdslb.com/bfs/emote/24e7a6a6e6383c987215fb905e3ee070aca259b5.png', - 我太南了: 'http://i0.hdslb.com/bfs/emote/a523f3e4c63e4db1232365765d0ec452f83be97e.png', - 完结撒花: 'http://i0.hdslb.com/bfs/emote/ea9db62ff5bca8e069cd70c4233353a802835422.png', - 大师球: 'http://i0.hdslb.com/bfs/emote/f30089248dd137c568edabcb07cf67e0f6e98cf3.png', - 知识盲区: 'http://i0.hdslb.com/bfs/emote/ccc94600b321a28116081e49ecedaa4ee8728312.png', - 狼火: 'http://i0.hdslb.com/bfs/emote/33ccd3617bfa89e9d1498b13b7542b63f163e5de.png', - 你可真星: 'http://i0.hdslb.com/bfs/emote/54c8ddff400abfe388060cabfbb579280fdea1be.png' -} \ No newline at end of file + 知识增加: + 'http://i0.hdslb.com/bfs/emote/142409b595982b8210b2958f3d340f3b47942645.png', + 爷青回: + 'http://i0.hdslb.com/bfs/emote/a26189ff1e681bddef7f6533f9aabe7604731a3e.png', + 好家伙: + 'http://i0.hdslb.com/bfs/emote/63ec80dea3066bd9f449ba999ba531fa61f7b4eb.png', + 芜湖起飞: + 'http://i0.hdslb.com/bfs/emote/78d04c6ce78a613c90d510cd45fe7e25c57ba00b.png', + 梦幻联动: + 'http://i0.hdslb.com/bfs/emote/4809416be5ca787c2ec3e897e4fd022a58da6e0e.png', + 泪目: + 'http://i0.hdslb.com/bfs/emote/bba3703ab90b7d16fe9dbcb85ed949db687f8331.png', + 保护: + 'http://i0.hdslb.com/bfs/emote/55f8f6445ca7c3170cdfc5b16036abf639ce9b57.png', + 害怕: + 'http://i0.hdslb.com/bfs/emote/d77e2de26da143249f0c0ad7a608c27152c985bf.png', + 爱了爱了: + 'http://i0.hdslb.com/bfs/emote/2a165b555ba20391316366c664ed7891883dc5aa.png', + 吹爆: + 'http://i0.hdslb.com/bfs/emote/b528220f9c37256ed6a37f05bf118e44b08b81e5.png', + 三连: + 'http://i0.hdslb.com/bfs/emote/21f15fe11b7a84d2f2121c16dec50a4e4556f865.png', + 可以: + 'http://i0.hdslb.com/bfs/emote/e08543c71202b36c590094417fcfbb80c3506cd8.png', + 希望没事: + 'http://i0.hdslb.com/bfs/emote/6c0d2e6c486d1ba5afd6204a96e102652464a01d.png', + 打卡: + 'http://i0.hdslb.com/bfs/emote/a9cf77c78e1b9b40aa3ed4862402fba008ee2f51.png', + skr: + 'http://i0.hdslb.com/bfs/emote/bd285ff94db16ad52557c3effe930d64663e8375.png', + battle: + 'http://i0.hdslb.com/bfs/emote/f2f81c8e47db6252becd633a5d1ee14e15df2ea8.png', + DNA: + 'http://i0.hdslb.com/bfs/emote/f6eb74f8230588f61a298af89061a7d75c5762e5.png', + // "妙啊":"http://i0.hdslb.com/bfs/emote/0e98299d7decf5eaffad854977946075c3e91cb8.png", + 这次一定: + 'http://i0.hdslb.com/bfs/emote/a01ca28923daa7cc896c42f27deb4914e20dd572.png', + AWSL: + 'http://i0.hdslb.com/bfs/emote/c37f88cf799f9badf9d84b7671dc3dd98c0fc0c2.png', + 递话筒: + 'http://i0.hdslb.com/bfs/emote/98e6950e39fbb4dd1c576042063ca632074070ba.png', + 你细品: + 'http://i0.hdslb.com/bfs/emote/535e00658e7e47966f154d3a167fa2365ebc4321.png', + 咕咕: + 'http://i0.hdslb.com/bfs/emote/d8065c2e7ce48c929317a94553499a46fecc262a.png', + 标准结局: + 'http://i0.hdslb.com/bfs/emote/3de98174b510cf7dc5fd1bd08c5d881065e79137.png', + 危: + 'http://i0.hdslb.com/bfs/emote/5cc6c3357c4df544dd8de9d5c5c0cec97c7c9a56.png', + 张三: + 'http://i0.hdslb.com/bfs/emote/255a938f39cea625032b6650036b31aa26c50a3c.png', + 害: + 'http://i0.hdslb.com/bfs/emote/cbe798a194612958537c5282fcca7c3bcd2aa15c.png', + 我裂开了: + 'http://i0.hdslb.com/bfs/emote/29bd57ec4e8952880fea6c9e47aee924e91f10c4.png', + 有内味了: + 'http://i0.hdslb.com/bfs/emote/7ca61680a905b5b6e2e335c630e725b648b03b4d.png', + 猛男必看: + 'http://i0.hdslb.com/bfs/emote/c97064450528a0e45c7e7c365a15fbb13fd61d8c.png', + 奥力给: + 'http://i0.hdslb.com/bfs/emote/c9b8683827ec6c00fea5327c9bec14f581cef2aa.png', + 问号: + 'http://i0.hdslb.com/bfs/emote/c1d1e76c12180adc8558f47006fe0e7ded4154bb.png', + 我哭了: + 'http://i0.hdslb.com/bfs/emote/9e0b3877d649aaf6538fbdd3f937e240a9d808e4.png', + 高产: + 'http://i0.hdslb.com/bfs/emote/9db817cba4a7f4a42398f3b2ec7c0a8e0c247c42.png', + 我酸了: + 'http://i0.hdslb.com/bfs/emote/a8cbf3f6b8cd9377eeb15b9172f3cd683b2e4650.png', + 真香: + 'http://i0.hdslb.com/bfs/emote/e68497c775feaac1c3b1a6cd63a50cfb11b767c4.png', + 我全都要: + 'http://i0.hdslb.com/bfs/emote/d424d1ad8d14c1c9b8367842bc68c658b9229bc1.png', + 神仙UP: + 'http://i0.hdslb.com/bfs/emote/a49e0d0db1e7d35a0f7411be13208951ab448f03.png', + 你币有了: + 'http://i0.hdslb.com/bfs/emote/84820c2b147a8ca02f3c4006b63f76c6313cbfa0.png', + 不愧是你: + 'http://i0.hdslb.com/bfs/emote/9ff2e356797c57ee3b1675ade0883d2d2247be9b.png', + 锤: + 'http://i0.hdslb.com/bfs/emote/35668cc12ae25b9545420e4a85bf21a0bfc03e5d.png', + 秀: + 'http://i0.hdslb.com/bfs/emote/50782fbf5d9b7f48f9467b5c53932981e321eedc.png', + 爷关更: + 'http://i0.hdslb.com/bfs/emote/faad40c56447f1f8abcb4045c17ce159d113d1fd.png', + 有生之年: + 'http://i0.hdslb.com/bfs/emote/f41fdafe2d0fbb8e8bc1598d2cf37e355560103a.png', + 镇站之宝: + 'http://i0.hdslb.com/bfs/emote/24e7a6a6e6383c987215fb905e3ee070aca259b5.png', + 我太南了: + 'http://i0.hdslb.com/bfs/emote/a523f3e4c63e4db1232365765d0ec452f83be97e.png', + 完结撒花: + 'http://i0.hdslb.com/bfs/emote/ea9db62ff5bca8e069cd70c4233353a802835422.png', + 大师球: + 'http://i0.hdslb.com/bfs/emote/f30089248dd137c568edabcb07cf67e0f6e98cf3.png', + 知识盲区: + 'http://i0.hdslb.com/bfs/emote/ccc94600b321a28116081e49ecedaa4ee8728312.png', + 狼火: + 'http://i0.hdslb.com/bfs/emote/33ccd3617bfa89e9d1498b13b7542b63f163e5de.png', + 你可真星: + 'http://i0.hdslb.com/bfs/emote/54c8ddff400abfe388060cabfbb579280fdea1be.png', +}; diff --git a/apps/core/src/app/common/filter.ts b/apps/core/src/app/common/filter.ts index 8840f41..b1b3a37 100644 --- a/apps/core/src/app/common/filter.ts +++ b/apps/core/src/app/common/filter.ts @@ -4,131 +4,116 @@ import { TextMessage, Message } from '@comen/common'; import { nextAnimationFrame, task } from '@kairo/concurrency'; export function commentFilter(config: { - userBlacklist: number[]; - wordBlacklist: string[]; - minGiftValue: number; - levelFilter: number; - typeFilterControlBit: number; + userBlacklist: number[]; + wordBlacklist: string[]; + minGiftValue: number; + levelFilter: number; + typeFilterControlBit: number; }): OperatorFunction { - return (upstream) => - upstream.pipe( - filter((comment) => { - if ('platformUserId' in comment) { - if ( - config.userBlacklist.indexOf(comment.platformUserId) != - -1 - ) { - return false; - } - } - if ('content' in comment) { - if ( - config.wordBlacklist.some((s) => { - return comment.content.indexOf(s) != -1; - }) - ) { - return false; - } - } - if ( - config.levelFilter > 0 && - 'platformUserLevel' in comment && - comment.platformUserLevel < config.levelFilter - ) { - return false; - } - if ('price' in comment && comment.price < config.minGiftValue) { - return false; - } - if ( - comment.type == 'text' && - config.typeFilterControlBit & 0b1 - ) { - return false; - } - if ( - comment.type == 'sticker' && - config.typeFilterControlBit & 0b10 - ) { - return false; - } - if ( - comment.type == 'paid' && - config.typeFilterControlBit & 0b100 - ) { - return false; - } - if ( - comment.type == 'member' && - config.typeFilterControlBit & 0b1000 - ) { - return false; - } - return true; + return (upstream) => + upstream.pipe( + filter((comment) => { + if ('platformUserId' in comment) { + if (config.userBlacklist.indexOf(comment.platformUserId) != -1) { + return false; + } + } + if ('content' in comment) { + if ( + config.wordBlacklist.some((s) => { + return comment.content.indexOf(s) != -1; }) - ); + ) { + return false; + } + } + if ( + config.levelFilter > 0 && + 'platformUserLevel' in comment && + comment.platformUserLevel < config.levelFilter + ) { + return false; + } + if ('price' in comment && comment.price < config.minGiftValue) { + return false; + } + if (comment.type == 'text' && config.typeFilterControlBit & 0b1) { + return false; + } + if (comment.type == 'sticker' && config.typeFilterControlBit & 0b10) { + return false; + } + if (comment.type == 'paid' && config.typeFilterControlBit & 0b100) { + return false; + } + if (comment.type == 'member' && config.typeFilterControlBit & 0b1000) { + return false; + } + return true; + }) + ); } export function smoother(config: { - disableSmoother: boolean; + disableSmoother: boolean; }): OperatorFunction { - return (upstream) => { - if (config.disableSmoother) { - return upstream; + return (upstream) => { + if (config.disableSmoother) { + return upstream; + } + return new Observable((observer) => { + const messageBuffer = [] as TextMessage[]; + const startedTask = task(function* () { + while (true) { + if (messageBuffer.length) { + observer.next(messageBuffer.shift()); + const time = performance.now(); + for ( + let i = 0; + i < 12 - messageBuffer.length * 0.4 /* pressure */; + i++ + ) { + yield* nextAnimationFrame(); + } + } + yield* nextAnimationFrame(); } - return new Observable((observer) => { - const messageBuffer = [] as TextMessage[]; - const startedTask = task(function* () { - while (true) { - if (messageBuffer.length) { - observer.next(messageBuffer.shift()); - const time = performance.now(); - for ( - let i = 0; - i < 12 - messageBuffer.length * 0.4 /* pressure */; - i++ - ) { - yield* nextAnimationFrame(); - } - } - yield* nextAnimationFrame(); - } - })(); + })(); - return upstream - .subscribe((comment) => { - if (comment.type == 'text') { - messageBuffer.push(comment); - } else { - // ignore non text comment - observer.next(comment); - } - }) - .add(() => { - startedTask.abort(); - }); + return upstream + .subscribe((comment) => { + if (comment.type == 'text') { + messageBuffer.push(comment); + } else { + // ignore non text comment + observer.next(comment); + } + }) + .add(() => { + startedTask.abort(); }); - }; + }); + }; } export function folder(config: { - groupSimilar: boolean; - groupSimilarWindow: number; + groupSimilar: boolean; + groupSimilarWindow: number; }): OperatorFunction { - return (upstream) => { - if (!config.groupSimilar) { - return upstream; + return (upstream) => { + if (!config.groupSimilar) { + return upstream; + } + return new Observable((observer) => { + return upstream.subscribe((comment) => { + if (comment.type === 'text') { + // folding logic + observer.next(comment); + } else { + // ignore non text comment + observer.next(comment); } - return new Observable((observer) => { - return upstream.subscribe((comment) => { - if (comment.type === 'text') { - // folding logic - observer.next(comment); - } else { - // ignore non text comment - observer.next(comment); - } - }); - }); - }; + }); + }); + }; } diff --git a/apps/core/src/app/common/index.ts b/apps/core/src/app/common/index.ts index 998668a..009bf07 100644 --- a/apps/core/src/app/common/index.ts +++ b/apps/core/src/app/common/index.ts @@ -1 +1 @@ -export * from './filter'; \ No newline at end of file +export * from './filter'; diff --git a/apps/core/src/app/common/rx.ts b/apps/core/src/app/common/rx.ts index 70bd610..7bb3caa 100644 --- a/apps/core/src/app/common/rx.ts +++ b/apps/core/src/app/common/rx.ts @@ -3,43 +3,42 @@ import { Injectable, NgZone } from '@angular/core'; /** * For one trial observable - * @param abort + * @param abort */ export function abortable(abort: AbortController): OperatorFunction { - return (upstream) => { - return new Observable((observer) => { - const handler = () => { - unsub.unsubscribe(); - observer.error('ABORTED'); - abort.signal.removeEventListener('abort', handler); - } - const unsub = upstream.subscribe({ - next: (v) => { - observer.next(v); - }, - error: (e) => { - observer.error(e); - }, - complete: () => { - observer.complete(); - abort.signal.removeEventListener('abort', handler); - } - }); - abort.signal.addEventListener('abort', handler); - }); - } + return (upstream) => { + return new Observable((observer) => { + const handler = () => { + unsub.unsubscribe(); + observer.error('ABORTED'); + abort.signal.removeEventListener('abort', handler); + }; + const unsub = upstream.subscribe({ + next: (v) => { + observer.next(v); + }, + error: (e) => { + observer.error(e); + }, + complete: () => { + observer.complete(); + abort.signal.removeEventListener('abort', handler); + }, + }); + abort.signal.addEventListener('abort', handler); + }); + }; } @Injectable() export class RxZone { + constructor(private zone: NgZone) {} - constructor(private zone: NgZone) { } - - subscribeOutsideAngular(): OperatorFunction { - return (source) => { - return new Observable((observer) => { - return this.zone.runOutsideAngular(() => source.subscribe(observer)); - }); - } - } -} \ No newline at end of file + subscribeOutsideAngular(): OperatorFunction { + return (source) => { + return new Observable((observer) => { + return this.zone.runOutsideAngular(() => source.subscribe(observer)); + }); + }; + } +} diff --git a/apps/core/src/app/common/utils.ts b/apps/core/src/app/common/utils.ts index 2e15ec0..19269fc 100644 --- a/apps/core/src/app/common/utils.ts +++ b/apps/core/src/app/common/utils.ts @@ -1,69 +1,69 @@ import { Observable, OperatorFunction } from 'rxjs'; -export function waitTimeout(time:number){ - return new Promise((res)=>{ - setTimeout(res,time); - }) +export function waitTimeout(time: number) { + return new Promise((res) => { + setTimeout(res, time); + }); } export function waitUntilVisible(): OperatorFunction { - return (upstream) => { - return new Observable(observer => { - return upstream.subscribe({ - next(x) { - if (document.visibilityState == 'visible') { - observer.next(x); - return; - } - const teardown = registerVisibilityChange(v => { - v && observer.next(x), teardown(); - }); - }, - error: observer.error.bind(observer), - complete: observer.complete.bind(observer) - }) - }) - } + return (upstream) => { + return new Observable((observer) => { + return upstream.subscribe({ + next(x) { + if (document.visibilityState == 'visible') { + observer.next(x); + return; + } + const teardown = registerVisibilityChange((v) => { + v && observer.next(x), teardown(); + }); + }, + error: observer.error.bind(observer), + complete: observer.complete.bind(observer), + }); + }); + }; } export function waitUntilPageVisible(): Promise { - return new Promise((res)=>{ - if(document.visibilityState=='visible'){ - res(); - } else { - const teardown = registerVisibilityChange(v=>{ - if(v){ - res(); - teardown(); - } - }) + return new Promise((res) => { + if (document.visibilityState == 'visible') { + res(); + } else { + const teardown = registerVisibilityChange((v) => { + if (v) { + res(); + teardown(); } - }); + }); + } + }); } export function registerVisibilityChange(cb: (visible: boolean) => unknown) { - // eslint-disable-next-line - if ((window as any).obsstudio) { - const handler = (ev: CustomEvent) => { - cb(ev.detail.visible); - } - window.addEventListener('obsSourceVisibleChanged', handler); - return () => { - document.removeEventListener('obsSourceVisibleChanged', handler); - } - } else { - const handler = () => { - cb(document.visibilityState === 'visible'); - }; - document.addEventListener('visibilitychange', handler); - return () => { - document.removeEventListener('visibilitychange', handler); - } - } + // eslint-disable-next-line + if ((window as any).obsstudio) { + const handler = (ev: CustomEvent) => { + cb(ev.detail.visible); + }; + window.addEventListener('obsSourceVisibleChanged', handler); + return () => { + document.removeEventListener('obsSourceVisibleChanged', handler); + }; + } else { + const handler = () => { + cb(document.visibilityState === 'visible'); + }; + document.addEventListener('visibilitychange', handler); + return () => { + document.removeEventListener('visibilitychange', handler); + }; + } } export function nextFrame() { - return new Promise((res) => { - requestAnimationFrame(res); - }); -} \ No newline at end of file + return new Promise((res) => { + requestAnimationFrame(res); + }); +} diff --git a/apps/core/src/app/compatible.guard.ts b/apps/core/src/app/compatible.guard.ts index f69a940..1a235bc 100644 --- a/apps/core/src/app/compatible.guard.ts +++ b/apps/core/src/app/compatible.guard.ts @@ -1,10 +1,14 @@ - import { Injectable } from '@angular/core'; -import { ActivatedRouteSnapshot, CanActivate, Router, UrlTree } from '@angular/router'; +import { + ActivatedRouteSnapshot, + CanActivate, + Router, + UrlTree, +} from '@angular/router'; @Injectable() export class CompatibleRoutes implements CanActivate { - constructor(private router: Router) { } + constructor(private router: Router) {} async canActivate(route: ActivatedRouteSnapshot): Promise { switch (route.url[0].path) { case 'gkd': @@ -15,8 +19,8 @@ export class CompatibleRoutes implements CanActivate { p: 'bilibili', bilichat: '', id: +route.params.id, - o: 'gamma' - } + o: 'gamma', + }, }); case 'bilibili': return this.router.createUrlTree(['/', 'overlay'], { @@ -24,8 +28,8 @@ export class CompatibleRoutes implements CanActivate { ...route.queryParams, p: 'bilibili', id: +route.params.id, - o: 'gamma' - } + o: 'gamma', + }, }); case 'acfun': return this.router.createUrlTree(['/', 'overlay'], { @@ -33,11 +37,10 @@ export class CompatibleRoutes implements CanActivate { ...route.queryParams, p: 'acfun', id: +route.params.id, - o: 'gamma' - } + o: 'gamma', + }, }); } throw new Error('NOT EXPECTED ROUTE'); } - } diff --git a/apps/core/src/app/config/config.ts b/apps/core/src/app/config/config.ts index dad917b..0957c12 100644 --- a/apps/core/src/app/config/config.ts +++ b/apps/core/src/app/config/config.ts @@ -1,75 +1,71 @@ export interface ComenConfiguration { - - platform?: string; - roomId?: string; - - bilichat?: unknown; - - disableAnalytics: boolean, - - /** - * - */ - userBlacklist: number[], - wordBlacklist: string[], - minGiftValue: number, - levelFilter: number, //? what level? - /** - * bits (7h -> 0l): 0 0 0 0 - */ - typeFilterControlBit: number; - - groupSimilar: boolean, - groupSimilarWindow: number, - - /** - * Misc - */ - disableSmoother: boolean, - hideTimestamp: boolean, - - /** - * Renderer settings - */ - - maxDanmakuNumber: number; - - /** - * Bilibili - * - */ - silverGoldRatio: number, - showGiftAutoDammaku: boolean, - disableAvatarPreload: boolean, - useJapaneseSC: boolean, - - /** - * Acfun - */ + platform?: string; + roomId?: string; + + bilichat?: unknown; + + disableAnalytics: boolean; + + /** + * + */ + userBlacklist: number[]; + wordBlacklist: string[]; + minGiftValue: number; + levelFilter: number; //? what level? + /** + * bits (7h -> 0l): 0 0 0 0 + */ + typeFilterControlBit: number; + + groupSimilar: boolean; + groupSimilarWindow: number; + + /** + * Misc + */ + disableSmoother: boolean; + hideTimestamp: boolean; + + /** + * Renderer settings + */ + + maxDanmakuNumber: number; + + /** + * Bilibili + * + */ + silverGoldRatio: number; + showGiftAutoDammaku: boolean; + disableAvatarPreload: boolean; + useJapaneseSC: boolean; + + /** + * Acfun + */ } export const DEFAULT_CONFIG: ComenConfiguration = { - - disableAnalytics: false, - - userBlacklist: [], - wordBlacklist: [], - levelFilter: 0, - minGiftValue: 5, - typeFilterControlBit: 0, - - groupSimilar: false, - groupSimilarWindow: 5, - - disableSmoother: false, - hideTimestamp: false, - - maxDanmakuNumber: 100, - //bili - silverGoldRatio: 0, - showGiftAutoDammaku: false, - disableAvatarPreload: false, - useJapaneseSC: false -} - - + disableAnalytics: false, + + userBlacklist: [], + wordBlacklist: [], + levelFilter: 0, + minGiftValue: 5, + typeFilterControlBit: 0, + + groupSimilar: false, + groupSimilarWindow: 5, + + disableSmoother: false, + hideTimestamp: false, + + maxDanmakuNumber: 100, + //bili + silverGoldRatio: 0, + showGiftAutoDammaku: false, + disableAvatarPreload: false, + useJapaneseSC: false, +}; diff --git a/apps/core/src/app/config/index.ts b/apps/core/src/app/config/index.ts index eb09bd7..747c041 100644 --- a/apps/core/src/app/config/index.ts +++ b/apps/core/src/app/config/index.ts @@ -1,2 +1,2 @@ export { ComenConfiguration, DEFAULT_CONFIG } from './config'; -export { mergeQueryParameters } from './merge-query'; \ No newline at end of file +export { mergeQueryParameters } from './merge-query'; diff --git a/apps/core/src/app/config/merge-query.ts b/apps/core/src/app/config/merge-query.ts index 5f9a847..b7da269 100644 --- a/apps/core/src/app/config/merge-query.ts +++ b/apps/core/src/app/config/merge-query.ts @@ -1,61 +1,66 @@ import { SafeAny } from '@comen/common'; import { ComenConfiguration } from './config'; -export function mergeQueryParameters(query: SafeAny, config: ComenConfiguration) { - if (query.bilichat != undefined) { - /** - * these query parameters is for bilichat compatibility, do not use if you don't know about it - */ - config.bilichat = true; - // in bilichat, groupSimilar is default on - config.groupSimilar = query.groupSimilar ?? true; - config.groupSimilarWindow = ('groupSimilarWindow' in query) ? parseInt(query.groupSimilarWindow) : 5; - config.hideTimestamp = true; // BILICHAT doesn't provide timestamp - - // TODO: implement all bilichat compatiable options - if (query.loadAvatar == 'false') { - config.disableAvatarPreload = true; - } - if (query.levelFilter != undefined) { - config.levelFilter = parseInt(query.levelFilter); - } - if (query.hideGiftDanmaku == 'false') { - config.showGiftAutoDammaku = true; - } - if (query.wordFilter != undefined) { - const words = (query.wordFilter as string).split(','); - config.wordBlacklist?.push(...words); - } - if(query.giftOnly=='true'){ - config.typeFilterControlBit = 0b1001; // is that correct? - } - if (query.showGift == 'false') { - config.typeFilterControlBit = config.typeFilterControlBit ^ 0b0010; - } - if (query.showJapanese == 'true') { - config.useJapaneseSC = true; - } - if (query.blackList != undefined) { - const blacklist = (query.blackList as string).split(',').map((v) => parseInt(v)); - config.userBlacklist?.push(...blacklist); - } - if (query.pure == 'true') { - config.disableAvatarPreload = true; - // No other effect - } - if(query.minGiftValue!=undefined){ - config.minGiftValue = parseFloat(query.minGiftValue); - } - if (query.silverGoldRatio != undefined) { - config.silverGoldRatio = parseInt(query.silverGoldRatio); - } - } else { +export function mergeQueryParameters( + query: SafeAny, + config: ComenConfiguration +) { + if (query.bilichat != undefined) { + /** + * these query parameters is for bilichat compatibility, do not use if you don't know about it + */ + config.bilichat = true; + // in bilichat, groupSimilar is default on + config.groupSimilar = query.groupSimilar ?? true; + config.groupSimilarWindow = + 'groupSimilarWindow' in query ? parseInt(query.groupSimilarWindow) : 5; + config.hideTimestamp = true; // BILICHAT doesn't provide timestamp + // TODO: implement all bilichat compatiable options + if (query.loadAvatar == 'false') { + config.disableAvatarPreload = true; + } + if (query.levelFilter != undefined) { + config.levelFilter = parseInt(query.levelFilter); + } + if (query.hideGiftDanmaku == 'false') { + config.showGiftAutoDammaku = true; + } + if (query.wordFilter != undefined) { + const words = (query.wordFilter as string).split(','); + config.wordBlacklist?.push(...words); + } + if (query.giftOnly == 'true') { + config.typeFilterControlBit = 0b1001; // is that correct? + } + if (query.showGift == 'false') { + config.typeFilterControlBit = config.typeFilterControlBit ^ 0b0010; + } + if (query.showJapanese == 'true') { + config.useJapaneseSC = true; + } + if (query.blackList != undefined) { + const blacklist = (query.blackList as string) + .split(',') + .map((v) => parseInt(v)); + config.userBlacklist?.push(...blacklist); + } + if (query.pure == 'true') { + config.disableAvatarPreload = true; + // No other effect + } + if (query.minGiftValue != undefined) { + config.minGiftValue = parseFloat(query.minGiftValue); } - if (query.disableAnalytics == 'true') { - config.disableAnalytics = true; + if (query.silverGoldRatio != undefined) { + config.silverGoldRatio = parseInt(query.silverGoldRatio); } - config.platform = query.p; - config.roomId = query.id; - return config; + } else { + } + if (query.disableAnalytics == 'true') { + config.disableAnalytics = true; + } + config.platform = query.p; + config.roomId = query.id; + return config; } diff --git a/apps/core/src/app/file/file-storage.ts b/apps/core/src/app/file/file-storage.ts index 000fee3..471f27c 100644 --- a/apps/core/src/app/file/file-storage.ts +++ b/apps/core/src/app/file/file-storage.ts @@ -1,12 +1,14 @@ -import { ComenFile, ComenFileConstraint } from "./file"; +import { ComenFile, ComenFileConstraint } from './file'; export abstract class FileStorage { + abstract getList(): Promise; - abstract getList(): Promise; + abstract addNewFile( + name: string, + constraint: ComenFileConstraint + ): Promise; - abstract addNewFile(name: string, constraint: ComenFileConstraint): Promise; + abstract getFile(id: string): Promise; - abstract getFile(id: string): Promise; - - abstract removeFile(file: ComenFile): Promise; -} \ No newline at end of file + abstract removeFile(file: ComenFile): Promise; +} diff --git a/apps/core/src/app/file/file.module.ts b/apps/core/src/app/file/file.module.ts index 7d8cfc2..1a6df4e 100644 --- a/apps/core/src/app/file/file.module.ts +++ b/apps/core/src/app/file/file.module.ts @@ -4,15 +4,15 @@ import { IdbFileStorage } from './idb-file-storage'; @NgModule() export class FileModule { - static forRoot(): ModuleWithProviders { - return { - ngModule: FileModule, - providers: [ - { - provide: FileStorage, - useClass: IdbFileStorage - } - ] - } - } -} \ No newline at end of file + static forRoot(): ModuleWithProviders { + return { + ngModule: FileModule, + providers: [ + { + provide: FileStorage, + useClass: IdbFileStorage, + }, + ], + }; + } +} diff --git a/apps/core/src/app/file/file.ts b/apps/core/src/app/file/file.ts index 5176ee5..5885415 100644 --- a/apps/core/src/app/file/file.ts +++ b/apps/core/src/app/file/file.ts @@ -1,19 +1,19 @@ -import { SafeAny } from "@comen/common"; +import { SafeAny } from '@comen/common'; export interface ComenFileConstraint { - name: string; - version: string; + name: string; + version: string; } export interface ComenFile { - readonly id:string; - readonly name: string; - readonly constraint: { - name: string; - version: string; - }; - readonly lastModified: number; - getData(): Promise; - storeData(data: SafeAny, constraint: ComenFileConstraint): Promise; - rename(newName: string): Promise; -} \ No newline at end of file + readonly id: string; + readonly name: string; + readonly constraint: { + name: string; + version: string; + }; + readonly lastModified: number; + getData(): Promise; + storeData(data: SafeAny, constraint: ComenFileConstraint): Promise; + rename(newName: string): Promise; +} diff --git a/apps/core/src/app/file/idb-file-storage.ts b/apps/core/src/app/file/idb-file-storage.ts index 0f2ee2e..d2c9d8d 100644 --- a/apps/core/src/app/file/idb-file-storage.ts +++ b/apps/core/src/app/file/idb-file-storage.ts @@ -1,123 +1,118 @@ -import { ComenFile, ComenFileConstraint } from "./file"; +import { ComenFile, ComenFileConstraint } from './file'; import { openDB } from 'idb'; -import { FileStorage } from "./file-storage"; -import { nanoid } from "nanoid"; -import { SafeAny } from "@comen/common"; -import { Injectable } from "@angular/core"; +import { FileStorage } from './file-storage'; +import { nanoid } from 'nanoid'; +import { SafeAny } from '@comen/common'; +import { Injectable } from '@angular/core'; const DB_NAME = 'comen_local_db'; async function _openDb() { - return await openDB(DB_NAME, 1, { - upgrade: (db, _, newv) => { - switch (newv) { - case 1: { - db.createObjectStore('comen_storage'); - db.createObjectStore('comen_files'); - } - } + return await openDB(DB_NAME, 1, { + upgrade: (db, _, newv) => { + switch (newv) { + case 1: { + db.createObjectStore('comen_storage'); + db.createObjectStore('comen_files'); } - }) + } + }, + }); } class IdbComenFile implements ComenFile { + constructor( + public id: string, + public name: string, + public constraint: { + name: string; + version: string; + }, + public lastModified: number + ) {} - constructor( - public id: string, - public name: string, - public constraint: { - name: string; - version: string - }, - public lastModified: number - ) { } + async getData() { + const db = await _openDb(); + const ret = await db.get('comen_storage', this.id); + db.close(); + return ret; + } - async getData() { - const db = await _openDb(); - const ret = await db.get('comen_storage', this.id); - db.close(); - return ret; - } + async storeData(data: SafeAny, constraint: ComenFileConstraint) { + const db = await _openDb(); + Object.assign(this.constraint, constraint); + await db.put('comen_storage', data, this.id); + this.lastModified = Date.now(); + await db.put( + 'comen_files', + { + id: this.id, + name: this.name, + constraint: constraint, + lastModified: this.lastModified, + }, + this.id + ); + db.close(); + } - async storeData(data: SafeAny, constraint: ComenFileConstraint) { - const db = await _openDb(); - Object.assign(this.constraint, constraint); - await db.put('comen_storage', data, this.id); - this.lastModified = Date.now(); - await db.put('comen_files', { - id: this.id, - name: this.name, - constraint: constraint, - lastModified: this.lastModified - }, this.id); - db.close(); - } - - async rename(newname: string) { - const db = await _openDb(); - this.lastModified = Date.now(); - this.name = newname; - await db.put('comen_files', { - id: this.id, - name: this.name, - constraint: this.constraint, - lastModified: this.lastModified - }, this.id); - db.close(); - } + async rename(newname: string) { + const db = await _openDb(); + this.lastModified = Date.now(); + this.name = newname; + await db.put( + 'comen_files', + { + id: this.id, + name: this.name, + constraint: this.constraint, + lastModified: this.lastModified, + }, + this.id + ); + db.close(); + } } @Injectable() export class IdbFileStorage extends FileStorage { + async getList() { + const db = await _openDb(); + const ret = await db.getAll('comen_files'); + db.close(); + return ret.map((x) => { + return new IdbComenFile(x.id, x.name, x.constraint, x.lastModified); + }); + } - async getList() { - const db = await _openDb(); - const ret = await db.getAll('comen_files'); - db.close(); - return ret.map((x) => { - return new IdbComenFile( - x.id, - x.name, - x.constraint, - x.lastModified - ) - }); - } - - async getFile(id: string) { - const db = await _openDb(); - const x = await db.get('comen_files', id); - db.close(); - return new IdbComenFile( - x.id, - x.name, - x.constraint, - x.lastModified - ); - } + async getFile(id: string) { + const db = await _openDb(); + const x = await db.get('comen_files', id); + db.close(); + return new IdbComenFile(x.id, x.name, x.constraint, x.lastModified); + } - async removeFile(file: IdbComenFile) { - const db = await _openDb(); - await db.delete('comen_storage', file.id); - await db.delete('comen_files', file.id); - db.close(); - } + async removeFile(file: IdbComenFile) { + const db = await _openDb(); + await db.delete('comen_storage', file.id); + await db.delete('comen_files', file.id); + db.close(); + } - async addNewFile(name: string, constraint: ComenFileConstraint) { - const db = await _openDb(); - const id = nanoid(); - await db.add('comen_storage', null, id); - await db.add('comen_files', { - id, - name: name, - constraint, - lastModified: Date.now() - }, id); - return new IdbComenFile( - id, - name, - constraint, - Date.now() - ); - } -} \ No newline at end of file + async addNewFile(name: string, constraint: ComenFileConstraint) { + const db = await _openDb(); + const id = nanoid(); + await db.add('comen_storage', null, id); + await db.add( + 'comen_files', + { + id, + name: name, + constraint, + lastModified: Date.now(), + }, + id + ); + return new IdbComenFile(id, name, constraint, Date.now()); + } +} diff --git a/apps/core/src/app/file/index.ts b/apps/core/src/app/file/index.ts index 192e55e..7f80c52 100644 --- a/apps/core/src/app/file/index.ts +++ b/apps/core/src/app/file/index.ts @@ -1,3 +1,3 @@ export * from './file'; export * from './file.module'; -export * from './file-storage'; \ No newline at end of file +export * from './file-storage'; diff --git a/apps/core/src/app/pages/edit/edit.module.ts b/apps/core/src/app/pages/edit/edit.module.ts index c16ddf4..5cbaf0c 100644 --- a/apps/core/src/app/pages/edit/edit.module.ts +++ b/apps/core/src/app/pages/edit/edit.module.ts @@ -7,22 +7,23 @@ import { EditPage } from './edit.page'; import { MockObsDialogModule } from './mock-obs-dialog/mock-obs-dialog.module'; import { RestoreSessionResovler } from './restore.resolver'; - @NgModule({ - declarations: [EditPage], - imports: [ - CommonModule, - EditorModule, - RouterModule.forChild([{ - path: '', - component: EditPage, - resolve: { - session: RestoreSessionResovler - } - }]), - AddonMoudle, - MockObsDialogModule - ], - providers: [RestoreSessionResovler] + declarations: [EditPage], + imports: [ + CommonModule, + EditorModule, + RouterModule.forChild([ + { + path: '', + component: EditPage, + resolve: { + session: RestoreSessionResovler, + }, + }, + ]), + AddonMoudle, + MockObsDialogModule, + ], + providers: [RestoreSessionResovler], }) -export class EditModule { } \ No newline at end of file +export class EditModule {} diff --git a/apps/core/src/app/pages/edit/edit.page.html b/apps/core/src/app/pages/edit/edit.page.html index 19b79cd..46e0369 100644 --- a/apps/core/src/app/pages/edit/edit.page.html +++ b/apps/core/src/app/pages/edit/edit.page.html @@ -1,17 +1,18 @@ - - + -
-
- - - -
-
-

一切已就绪！

-
+
+
+ + + +
+
+

一切已就绪！

- \ No newline at end of file +
+ diff --git a/apps/core/src/app/pages/edit/edit.page.scss b/apps/core/src/app/pages/edit/edit.page.scss index 094bb2c..b4bbf7f 100644 --- a/apps/core/src/app/pages/edit/edit.page.scss +++ b/apps/core/src/app/pages/edit/edit.page.scss @@ -1,29 +1,29 @@ :host { - display: flex; - width: 100vw; - height: 100vh; /* weird */ - flex-direction: column; + display: flex; + width: 100vw; + height: 100vh; /* weird */ + flex-direction: column; - background-color: #fafbfc; + background-color: #fafbfc; - & > comen-editor { - flex: auto; - } + & > comen-editor { + flex: auto; + } } #dialog { - background-color: white; - display: flex; - border-radius: 4px; - padding: 16px; + background-color: white; + display: flex; + border-radius: 4px; + padding: 16px; - & > #mock { - width: 550px; - height: 850px; - margin-right: 16px; - } + & > #mock { + width: 550px; + height: 850px; + margin-right: 16px; + } - & > #info { - width: 450px; - } + & > #info { + width: 450px; + } } diff --git a/apps/core/src/app/pages/edit/edit.page.ts b/apps/core/src/app/pages/edit/edit.page.ts index d0f80c0..598cf41 100644 --- a/apps/core/src/app/pages/edit/edit.page.ts +++ b/apps/core/src/app/pages/edit/edit.page.ts @@ -42,9 +42,9 @@ import { Title } from '@angular/platform-browser'; const inject = addon.getOverlayAddonMetadata( rr.snapshot.queryParams.o ?? 'null' ); // TODO: reasonable default selection - + return { - [COMEN_ADDON_METADATA]: inject + [COMEN_ADDON_METADATA]: inject, }; }) @Component({ @@ -66,11 +66,13 @@ import { Title } from '@angular/platform-browser'; ], }) // eslint-disable-next-line -export class EditPage extends ngSetup(()=>{ +export class EditPage + extends ngSetup(() => { return { - addonMetadata: injected(COMEN_ADDON_METADATA) + addonMetadata: injected(COMEN_ADDON_METADATA), }; -}) implements OnDestroy, EditorRealtimeMessageProvider { + }) + implements OnDestroy, EditorRealtimeMessageProvider { overlayContainerElement: HTMLElement = undefined; @ViewChild('container', { static: true }) @@ -99,8 +101,8 @@ export class EditPage extends ngSetup(()=>{ private router: Router, private title: Title ) { - super(); - title.setTitle('编辑器 - 活动 - Comen') + super(); + title.setTitle('编辑器 - 活动 - Comen'); } session: { @@ -111,41 +113,40 @@ export class EditPage extends ngSetup(()=>{ .overlay!; ngOnInit() { - if (this.session) { - // load the file! - - } else { - // window.location.pathname = '/'; // TODO this may cause panic? - // return; - } - console.log(this.session); - const bootstraped = this.container.bootstrap(this.addonMetadata.name); - this.overlayContainerElement = bootstraped.element; - this.destroy$.subscribe(() => bootstraped.destroy()); - // setTimeout(() => { - // if (this.session.data != null) { - // this.editor.importWorkspace(this.session.data.workspace); - // } - // }, 0); + if (this.session) { + // load the file! + } else { + // window.location.pathname = '/'; // TODO this may cause panic? + // return; + } + console.log(this.session); + const bootstraped = this.container.bootstrap(this.addonMetadata.name); + this.overlayContainerElement = bootstraped.element; + this.destroy$.subscribe(() => bootstraped.destroy()); + // setTimeout(() => { + // if (this.session.data != null) { + // this.editor.importWorkspace(this.session.data.workspace); + // } + // }, 0); } ngAfterViewInit() { - return this.editor - .workspaceChange(1 * 1000) - .pipe(takeUntil(this.destroy$)) - .subscribe((workspaceData) => { - console.log(workspaceData); - this.session.file.storeData( - { - workspace: workspaceData, - }, - { - name: this.overlayInfo.name, - version: this.overlayInfo.version, - } - ); - sessionStorage.setItem('modifying', this.session.file.id); - }); + return this.editor + .workspaceChange(1 * 1000) + .pipe(takeUntil(this.destroy$)) + .subscribe((workspaceData) => { + console.log(workspaceData); + this.session.file.storeData( + { + workspace: workspaceData, + }, + { + name: this.overlayInfo.name, + version: this.overlayInfo.version, + } + ); + sessionStorage.setItem('modifying', this.session.file.id); + }); } ngOnDestroy() { diff --git a/apps/core/src/app/pages/edit/in-memory.storage.ts b/apps/core/src/app/pages/edit/in-memory.storage.ts index aeb616b..f2f4b94 100644 --- a/apps/core/src/app/pages/edit/in-memory.storage.ts +++ b/apps/core/src/app/pages/edit/in-memory.storage.ts @@ -1,51 +1,49 @@ -import { EditorAssetStorage } from "@comen/editor"; +import { EditorAssetStorage } from '@comen/editor'; import { nanoid } from 'nanoid'; const MAX_STORAGE_SIZE = 20 * 1024 * 1024; export class InMemoryStorage implements EditorAssetStorage { - - readonly storage: { - [key: string]: { - blob?: Blob, - url: string - } - } = {}; - - // mutable size - size$ = 0; - - - getUrl(id: string) { - if (id in this.storage) { - return this.storage[id].url; - } - throw 'not found'; + readonly storage: { + [key: string]: { + blob?: Blob; + url: string; + }; + } = {}; + + // mutable size + size$ = 0; + + getUrl(id: string) { + if (id in this.storage) { + return this.storage[id].url; } - - store(blob: Blob) { - const currentSize = Object.values(this.storage).reduce((a, b) => { return a + b.blob?.size ?? 0 }, 0); - if (blob.size + currentSize > MAX_STORAGE_SIZE) { - throw 'space limit'; - } - const url = URL.createObjectURL(blob); - const id = nanoid(); - this.storage[id] = { - blob, - url - }; - return id; + throw 'not found'; + } + + store(blob: Blob) { + const currentSize = Object.values(this.storage).reduce((a, b) => { + return a + b.blob?.size ?? 0; + }, 0); + if (blob.size + currentSize > MAX_STORAGE_SIZE) { + throw 'space limit'; } - - remove(id: string) { - if (id in this.storage) { - this.storage[id].blob && URL.revokeObjectURL(this.storage[id].url); - delete this.storage[id]; - } - throw 'not found'; + const url = URL.createObjectURL(blob); + const id = nanoid(); + this.storage[id] = { + blob, + url, + }; + return id; + } + + remove(id: string) { + if (id in this.storage) { + this.storage[id].blob && URL.revokeObjectURL(this.storage[id].url); + delete this.storage[id]; } + throw 'not found'; + } - load() { - - } -} \ No newline at end of file + load() {} +} diff --git a/apps/core/src/app/pages/edit/mock-obs-dialog/mock-obs-dialog.component.html b/apps/core/src/app/pages/edit/mock-obs-dialog/mock-obs-dialog.component.html index b14ef50..bd7bf75 100644 --- a/apps/core/src/app/pages/edit/mock-obs-dialog/mock-obs-dialog.component.html +++ b/apps/core/src/app/pages/edit/mock-obs-dialog/mock-obs-dialog.component.html @@ -1,60 +1,58 @@
-
- -
+
+ +
-
- -
- 本地文件 -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- 使用自定义帧率 -
- 将音频重新路由到OBS -
-
-
- -
- -
-
+
+ +
本地文件
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ 使用自定义帧率 +
+ 将音频重新路由到OBS +
+
+
+ +
+ +
+
-
- -
- -
-
-
- -
- 不可见时关闭源 -
- 场景变为活动状态时,刷新浏览器 -
-
-
\ No newline at end of file +
+ +
+ +
+
+
+ +
+ 不可见时关闭源 +
+ 场景变为活动状态时,刷新浏览器 +
+
+
diff --git a/apps/core/src/app/pages/edit/mock-obs-dialog/mock-obs-dialog.component.scss b/apps/core/src/app/pages/edit/mock-obs-dialog/mock-obs-dialog.component.scss index 2286b8d..9819d18 100644 --- a/apps/core/src/app/pages/edit/mock-obs-dialog/mock-obs-dialog.component.scss +++ b/apps/core/src/app/pages/edit/mock-obs-dialog/mock-obs-dialog.component.scss @@ -1,96 +1,92 @@ :host { - box-sizing: border-box; - --color-background: #3a393a; - --color-view: #4c4c4c; - --color-scroller: #4c4c4c; - --color-control: #1f1f1f; - --color-outline: #234b82; - --color-text: #d1d0d1;; - display: block; - width: 100%; - height: 100%; + box-sizing: border-box; + --color-background: #3a393a; + --color-view: #4c4c4c; + --color-scroller: #4c4c4c; + --color-control: #1f1f1f; + --color-outline: #234b82; + --color-text: #d1d0d1; + display: block; + width: 100%; + height: 100%; - background-color: var(--color-background); + background-color: var(--color-background); - padding: 20px; + padding: 20px; - &>.view { - width: 100%; - height: 50%; - background-color: var(--color-view); - overflow: hidden; - } + & > .view { + width: 100%; + height: 50%; + background-color: var(--color-view); + overflow: hidden; + } - &>.controls{ - padding: 20px; - color: var(--color-text); - font-size: 13.3px; + & > .controls { + padding: 20px; + color: var(--color-text); + font-size: 13.3px; - &>.control{ - &.notimportant{ - opacity: 0.2; - } - display: flex; - margin-bottom: 10px; - &>label{ - box-sizing: border-box; - width: 100px; - text-align: right; - padding-right: 10px; - } - &>.body{ - flex:1; - &>input[type="text"]{ - display: inline-block; - width: 100%; - background-color: var(--color-control); - border:none; - border-radius: 4px; - line-height: 20px; - padding: 1px 10px; - color: var(--color-text); - &:focus{ - outline: solid 4px var(--color-outline); - } - } + & > .control { + &.notimportant { + opacity: 0.2; + } + display: flex; + margin-bottom: 10px; + & > label { + box-sizing: border-box; + width: 100px; + text-align: right; + padding-right: 10px; + } + & > .body { + flex: 1; + & > input[type='text'] { + display: inline-block; + width: 100%; + background-color: var(--color-control); + border: none; + border-radius: 4px; + line-height: 20px; + padding: 1px 10px; + color: var(--color-text); + &:focus { + outline: solid 4px var(--color-outline); + } + } - &>textarea{ - display: inline-block; - width: 100%; - background-color: var(--color-control); - border:none; - border-radius: 4px; - line-height: 20px; - padding: 1px 10px; - height: 100px; - color: var(--color-text); - resize: none; - &:focus{ - outline: solid 4px var(--color-outline); - } - } - } + & > textarea { + display: inline-block; + width: 100%; + background-color: var(--color-control); + border: none; + border-radius: 4px; + line-height: 20px; + padding: 1px 10px; + height: 100px; + color: var(--color-text); + resize: none; + &:focus { + outline: solid 4px var(--color-outline); + } } + } } + } } - -::-webkit-scrollbar -{ - width: 12px; - height: 12px; - border: solid 2px var(--color-control); - background-color: var(--color-background); +::-webkit-scrollbar { + width: 12px; + height: 12px; + border: solid 2px var(--color-control); + background-color: var(--color-background); } -::-webkit-scrollbar-track -{ - background-color: var(--color-background); +::-webkit-scrollbar-track { + background-color: var(--color-background); } - + /*定义滑块 内阴影+圆角*/ -::-webkit-scrollbar-thumb:vertical -{ - border-radius: 10px; - background-color: var(--color-view); -} \ No newline at end of file +::-webkit-scrollbar-thumb:vertical { + border-radius: 10px; + background-color: var(--color-view); +} diff --git a/apps/core/src/app/pages/edit/mock-obs-dialog/mock-obs-dialog.component.ts b/apps/core/src/app/pages/edit/mock-obs-dialog/mock-obs-dialog.component.ts index 9c47a13..737014e 100644 --- a/apps/core/src/app/pages/edit/mock-obs-dialog/mock-obs-dialog.component.ts +++ b/apps/core/src/app/pages/edit/mock-obs-dialog/mock-obs-dialog.component.ts @@ -3,10 +3,9 @@ import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; @Component({ selector: 'comen-mock-obs-dialog', templateUrl: './mock-obs-dialog.component.html', - styleUrls: ['./mock-obs-dialog.component.scss'] + styleUrls: ['./mock-obs-dialog.component.scss'], }) export class MockObsDialogComponent implements OnInit { - @Input() cssInfo: string; @Input() url: string; @@ -14,7 +13,8 @@ export class MockObsDialogComponent implements OnInit { @Input() size: [number, number] = [800, 600]; @ViewChild('view', { static: true }) view: ElementRef; - @ViewChild('container', { static: true }) container: ElementRef; + @ViewChild('container', { static: true }) + container: ElementRef; clickCss(event: Event) { (event.target as HTMLTextAreaElement).select(); @@ -26,10 +26,14 @@ export class MockObsDialogComponent implements OnInit { const ratio = rect.width / this.size[0]; const ratio2 = rect.height / this.size[1]; if (this.size[0] > this.size[1]) { - this.container.nativeElement.style.transform = `scale(${ratio}) translateY(${(rect.height - ratio * this.size[1]) / ratio / 2}px)`; + this.container.nativeElement.style.transform = `scale(${ratio}) translateY(${ + (rect.height - ratio * this.size[1]) / ratio / 2 + }px)`; this.container.nativeElement.style.transformOrigin = `left top`; } else { - this.container.nativeElement.style.transform = `scale(${ratio2}) translateX(${(rect.width - ratio2 * this.size[0]) / ratio2 / 2}px)`; + this.container.nativeElement.style.transform = `scale(${ratio2}) translateX(${ + (rect.width - ratio2 * this.size[0]) / ratio2 / 2 + }px)`; this.container.nativeElement.style.transformOrigin = `left top`; } } diff --git a/apps/core/src/app/pages/edit/mock-obs-dialog/mock-obs-dialog.module.ts b/apps/core/src/app/pages/edit/mock-obs-dialog/mock-obs-dialog.module.ts index 3b1b399..887b8f5 100644 --- a/apps/core/src/app/pages/edit/mock-obs-dialog/mock-obs-dialog.module.ts +++ b/apps/core/src/app/pages/edit/mock-obs-dialog/mock-obs-dialog.module.ts @@ -2,13 +2,9 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MockObsDialogComponent } from './mock-obs-dialog.component'; - - @NgModule({ declarations: [MockObsDialogComponent], - imports: [ - CommonModule - ], - exports: [MockObsDialogComponent] + imports: [CommonModule], + exports: [MockObsDialogComponent], }) -export class MockObsDialogModule { } +export class MockObsDialogModule {} diff --git a/apps/core/src/app/pages/edit/restore.resolver.ts b/apps/core/src/app/pages/edit/restore.resolver.ts index 6914c4f..cd67d8e 100644 --- a/apps/core/src/app/pages/edit/restore.resolver.ts +++ b/apps/core/src/app/pages/edit/restore.resolver.ts @@ -1,28 +1,27 @@ -import { Injectable } from "@angular/core"; +import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, Resolve } from '@angular/router'; -import { SafeAny } from "@comen/common"; -import { FileStorage } from "../../file"; +import { SafeAny } from '@comen/common'; +import { FileStorage } from '../../file'; @Injectable() -export class RestoreSessionResovler implements Resolve{ +export class RestoreSessionResovler implements Resolve { + constructor(private file: FileStorage) {} - constructor(private file: FileStorage) { } - - async resolve(snap:ActivatedRouteSnapshot) { - const modifyingSession = sessionStorage.getItem('modifying'); - if (modifyingSession != undefined) { - const c = await this.file.getFile(modifyingSession); - return { - file: c, - data: await c.getData() - }; - } else if(snap.queryParams.id){ - const c = await this.file.getFile(snap.queryParams.id); - return { - file: c, - data: await c.getData() - }; - } - return undefined; + async resolve(snap: ActivatedRouteSnapshot) { + const modifyingSession = sessionStorage.getItem('modifying'); + if (modifyingSession != undefined) { + const c = await this.file.getFile(modifyingSession); + return { + file: c, + data: await c.getData(), + }; + } else if (snap.queryParams.id) { + const c = await this.file.getFile(snap.queryParams.id); + return { + file: c, + data: await c.getData(), + }; } -} \ No newline at end of file + return undefined; + } +} diff --git a/apps/core/src/app/pages/home/home.module.ts b/apps/core/src/app/pages/home/home.module.ts index 7ca9d5f..374760d 100644 --- a/apps/core/src/app/pages/home/home.module.ts +++ b/apps/core/src/app/pages/home/home.module.ts @@ -10,26 +10,26 @@ import { FlexLayoutModule } from '@angular/flex-layout'; import { MatSliderModule } from '@angular/material/slider'; import { MatInputModule } from '@angular/material/input'; import { MatFormFieldModule } from '@angular/material/form-field'; -import {MatIconModule} from '@angular/material/icon'; +import { MatIconModule } from '@angular/material/icon'; @NgModule({ - declarations: [HomePage, TimeAgoPipe], - imports: [ - CommonModule, - FlexLayoutModule, - ReactiveFormsModule, - ReactiveComponentModule, - RouterModule.forChild([ - { - path: '', - pathMatch: 'full', - component: HomePage, - }, - ]), - MatSliderModule, - MatInputModule, - MatFormFieldModule, - MatIconModule - ], + declarations: [HomePage, TimeAgoPipe], + imports: [ + CommonModule, + FlexLayoutModule, + ReactiveFormsModule, + ReactiveComponentModule, + RouterModule.forChild([ + { + path: '', + pathMatch: 'full', + component: HomePage, + }, + ]), + MatSliderModule, + MatInputModule, + MatFormFieldModule, + MatIconModule, + ], }) export class HomeModule {} diff --git a/apps/core/src/app/pages/home/home.page.html b/apps/core/src/app/pages/home/home.page.html index 9b58743..0279c12 100644 --- a/apps/core/src/app/pages/home/home.page.html +++ b/apps/core/src/app/pages/home/home.page.html @@ -1,57 +1,103 @@

Produced by 3Shain

- -

COMEN

-
-
- - - -
-
- -
+ +

COMEN

+
+
+ + +
-
- - 直播间号 - - - - - 生成链接 - - content_copy - 单击复制到剪贴板 - +
+
-

- -
\ No newline at end of file +
+
+ + 直播间号 + + + + + 生成链接 + + content_copy + 单击复制到剪贴板 + +
+

+ +
diff --git a/apps/core/src/app/pages/home/home.page.scss b/apps/core/src/app/pages/home/home.page.scss index 692bce4..5a5c3f9 100644 --- a/apps/core/src/app/pages/home/home.page.scss +++ b/apps/core/src/app/pages/home/home.page.scss @@ -1,89 +1,88 @@ :host { - box-sizing: border-box; - padding: 16px; - display: block; - width: 100vw; - height: 100vh; - background-color: #fafbfc; + box-sizing: border-box; + padding: 16px; + display: block; + width: 100vw; + height: 100vh; + background-color: #fafbfc; } .in { - color: #586069; - font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace!important;; + color: #586069; + font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace !important; } .icon-button { - border-radius: 8px; - cursor: pointer; - padding: 16px; - margin: 16px; - &>svg{ - height: 72px; - width: 72px; - } + border-radius: 8px; + cursor: pointer; + padding: 16px; + margin: 16px; + & > svg { + height: 72px; + width: 72px; + } - color: #aabaca; + color: #aabaca; - transition: color 0.5s ease, background-color 0.5s ease; + transition: color 0.5s ease, background-color 0.5s ease; - &.selected { - color: white; - background-color: #aabaca; - } + &.selected { + color: white; + background-color: #aabaca; + } - &:hover{ - color: var(--primary-color); - background-color: #eaebec; - } + &:hover { + color: var(--primary-color); + background-color: #eaebec; + } - &.bilibili { - --primary-color: #00a1d6; - } + &.bilibili { + --primary-color: #00a1d6; + } - &.acfun { - --primary-color: #FD4C5D; - } + &.acfun { + --primary-color: #fd4c5d; + } } #cover { - height: calc(100% - 48px); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; + height: calc(100% - 48px); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; - &>#logo { - height: 128px; - } - - &>#platforms { - display: flex; - } + & > #logo { + height: 128px; + } - &>#form { - width: 500px; - display: flex; - flex-direction: column; - align-items: flex-start; - &>*{ + & > #platforms { + display: flex; + } - width: 500px; - } + & > #form { + width: 500px; + display: flex; + flex-direction: column; + align-items: flex-start; + & > * { + width: 500px; } + } - .generate-link { - cursor: pointer; - // border-radius: 5px; - // padding: 10px 16px; - color: #555; - // border: 1px #cccccc solid; - font-variant-ligatures: none; - font-family: "Fira Mono", "Andale Mono", "Consolas", monospace; - letter-spacing: 0px; - display: inline-block; - // width: 400px; - // line-height: 24px; - transition: background-color 0.5s ease; - user-select: none; - } + .generate-link { + cursor: pointer; + // border-radius: 5px; + // padding: 10px 16px; + color: #555; + // border: 1px #cccccc solid; + font-variant-ligatures: none; + font-family: 'Fira Mono', 'Andale Mono', 'Consolas', monospace; + letter-spacing: 0px; + display: inline-block; + // width: 400px; + // line-height: 24px; + transition: background-color 0.5s ease; + user-select: none; + } } diff --git a/apps/core/src/app/pages/home/home.page.ts b/apps/core/src/app/pages/home/home.page.ts index c9712ca..3b09dbe 100644 --- a/apps/core/src/app/pages/home/home.page.ts +++ b/apps/core/src/app/pages/home/home.page.ts @@ -5,53 +5,54 @@ import { BehaviorSubject, combineLatest, Subject, Subscription } from 'rxjs'; import { map, startWith } from 'rxjs/operators'; @Component({ - selector: 'comen-home', - templateUrl: './home.page.html', - styleUrls: [ - './home.page.scss' - ] + selector: 'comen-home', + templateUrl: './home.page.html', + styleUrls: ['./home.page.scss'], }) // eslint-disable-next-line export class HomePage implements OnInit, OnDestroy { - - platform$: Subject = new BehaviorSubject(localStorage.getItem('platform') ?? 'bilibili'); - - roomId = new FormControl(localStorage.getItem('roomId') ?? '123456'); - roomIdSubscription: Subscription; - - comenEnvironment = COMEN_ENVIRONMENT ?? ''; - - - generatedLink = combineLatest([this.platform$, this.roomId.valueChanges.pipe(startWith(this.roomId.value))]).pipe( - map(([platform, id]) => { - return `${window.location.origin}/${platform}/${id}` - }) - ) - - constructor(private title: Title) { - title.setTitle('主页'); - if (window.location.host == 'bilichat.3shain.com') { - window.location.href = 'https://github.com/3Shain/Comen/tree/bilichat'; - } - } - - ngOnInit() { - this.roomIdSubscription = this.roomId.valueChanges.subscribe(id => { - localStorage.setItem('roomId', id) - }); - } - - setPlatform(platform: string) { - this.platform$.next(platform); - localStorage.setItem('platform', platform); - } - - clickLink(event:Event){ - (event.target as HTMLInputElement).select(); - document.execCommand('copy'); - } - - ngOnDestroy() { - this.roomIdSubscription.unsubscribe(); + platform$: Subject = new BehaviorSubject( + localStorage.getItem('platform') ?? 'bilibili' + ); + + roomId = new FormControl(localStorage.getItem('roomId') ?? '123456'); + roomIdSubscription: Subscription; + + comenEnvironment = COMEN_ENVIRONMENT ?? ''; + + generatedLink = combineLatest([ + this.platform$, + this.roomId.valueChanges.pipe(startWith(this.roomId.value)), + ]).pipe( + map(([platform, id]) => { + return `${window.location.origin}/${platform}/${id}`; + }) + ); + + constructor(private title: Title) { + title.setTitle('主页'); + if (window.location.host == 'bilichat.3shain.com') { + window.location.href = 'https://github.com/3Shain/Comen/tree/bilichat'; } -} \ No newline at end of file + } + + ngOnInit() { + this.roomIdSubscription = this.roomId.valueChanges.subscribe((id) => { + localStorage.setItem('roomId', id); + }); + } + + setPlatform(platform: string) { + this.platform$.next(platform); + localStorage.setItem('platform', platform); + } + + clickLink(event: Event) { + (event.target as HTMLInputElement).select(); + document.execCommand('copy'); + } + + ngOnDestroy() { + this.roomIdSubscription.unsubscribe(); + } +} diff --git a/apps/core/src/app/pages/home/time-ago.pipe.ts b/apps/core/src/app/pages/home/time-ago.pipe.ts index 47f4774..1834385 100644 --- a/apps/core/src/app/pages/home/time-ago.pipe.ts +++ b/apps/core/src/app/pages/home/time-ago.pipe.ts @@ -6,26 +6,30 @@ import { timer, Observable } from 'rxjs'; import { tap, map, distinctUntilChanged, startWith } from 'rxjs/operators'; @Pipe({ - name: 'timeAgo', - pure: false, + name: 'timeAgo', + pure: false, }) export class TimeAgoPipe extends AsyncPipe implements PipeTransform { + private time: Date; + private formatted$: Observable; - private time: Date; - private formatted$: Observable; + constructor(private cd: ChangeDetectorRef) { + super(cd); - constructor(private cd: ChangeDetectorRef) { - super(cd); + this.formatted$ = timer(0, 5000).pipe( + map(() => + formatDistanceToNow(this.time, { + addSuffix: true, + includeSeconds: true, + locale: zhCN, + }) + ), + distinctUntilChanged() + ); + } - this.formatted$ = timer(0, 5000).pipe( - map(() => formatDistanceToNow(this.time, { addSuffix: true, includeSeconds: true,locale: zhCN })), - distinctUntilChanged() - ); - } - - public transform(value: any): any { - this.time = new Date(value); - return super.transform(this.formatted$); - } - -} \ No newline at end of file + public transform(value: any): any { + this.time = new Date(value); + return super.transform(this.formatted$); + } +} diff --git a/apps/core/src/app/pages/overlay/overlay.module.ts b/apps/core/src/app/pages/overlay/overlay.module.ts index 9271f44..5ce388f 100644 --- a/apps/core/src/app/pages/overlay/overlay.module.ts +++ b/apps/core/src/app/pages/overlay/overlay.module.ts @@ -4,16 +4,17 @@ import { RouterModule } from '@angular/router'; import { AddonMoudle } from '../../addon/addon.module'; import { OverlayPage } from './overlay.page'; - @NgModule({ - declarations: [OverlayPage], - imports: [ - CommonModule, - AddonMoudle, - RouterModule.forChild([{ - path: '', - component: OverlayPage - }]) - ] + declarations: [OverlayPage], + imports: [ + CommonModule, + AddonMoudle, + RouterModule.forChild([ + { + path: '', + component: OverlayPage, + }, + ]), + ], }) -export class OverlayModule { } \ No newline at end of file +export class OverlayModule {} diff --git a/apps/core/src/app/pages/overlay/overlay.page.ts b/apps/core/src/app/pages/overlay/overlay.page.ts index a52adf9..b2f9654 100644 --- a/apps/core/src/app/pages/overlay/overlay.page.ts +++ b/apps/core/src/app/pages/overlay/overlay.page.ts @@ -1,16 +1,16 @@ import { - Component, - ElementRef, - OnDestroy, - OnInit, - ViewChild, + Component, + ElementRef, + OnDestroy, + OnInit, + ViewChild, } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { - ComenEnvironmentHost, - Message, - SafeAny, - TextMessage, + ComenEnvironmentHost, + Message, + SafeAny, + TextMessage, } from '@comen/common'; import { BehaviorSubject, Observable, of, Subject } from 'rxjs'; import { catchError, filter, retry, takeUntil, tap } from 'rxjs/operators'; @@ -22,207 +22,205 @@ import { emojiFilter } from '../../common/emoji'; import { RxZone } from '../../common/rx'; import { nextFrame, waitUntilPageVisible } from '../../common/utils'; import { - ComenConfiguration, - DEFAULT_CONFIG, - mergeQueryParameters, + ComenConfiguration, + DEFAULT_CONFIG, + mergeQueryParameters, } from '../../config'; const BILICHAT_SYSTEM_MESSAGE = { - FETCHING: '正在获取直播间信息...', - CONNECTING: '正在连接到直播间...', - CONNECTED: '成功连接到直播间!', - ERROR: '检测到服务器断开,尝试重连中...', + FETCHING: '正在获取直播间信息...', + CONNECTING: '正在连接到直播间...', + CONNECTED: '成功连接到直播间!', + ERROR: '检测到服务器断开,尝试重连中...', }; @Component({ - selector: 'comen-overlay', - template: ` -
`, - styles: [ - ` - #comen-configuration-data { - display: none; - } - :host { - display: block; - height: 100vh; - width: 100vw; - } - `, - ], - viewProviders: [ - RxZone, - { - provide: ComenEnvironmentHost, - useExisting: OverlayPage, - }, - ], + selector: 'comen-overlay', + template: ` +
`, + styles: [ + ` + #comen-configuration-data { + display: none; + } + :host { + display: block; + height: 100vh; + width: 100vw; + } + `, + ], + viewProviders: [ + RxZone, + { + provide: ComenEnvironmentHost, + useExisting: OverlayPage, + }, + ], }) // eslint-disable-next-line export class OverlayPage - extends ComenEnvironmentHost - implements OnInit, OnDestroy { - @ViewChild('data', { static: true }) data: ElementRef; - @ViewChild('container', { static: true }) - container: OverlayContainerComponent; - - private destroy$ = new Subject(); - - constructor( - private activatedRoute: ActivatedRoute, - private rxzone: RxZone, - private addon: AddonService - ) { - super(); - } - - get addonTarget() { - return this.activatedRoute.snapshot.queryParams.o ?? 'null'; - } - - message$: Subject = new Subject(); - legacyConfig$: Subject = new Subject(); - - private _configs: { - [key: string]: Observable; - } = {}; - - private _variantPipes: { - [key: string]: Observable; - } = {}; - - async ngOnInit() { - await waitUntilPageVisible(); - // init element? - const queryParams = this.activatedRoute.snapshot.queryParams; - // Query parameters are not expected to change. Any change is not responsed - // unless component is fully reconstructed. - const injectedConfiguration = await this.initConfig(); - const globalConfig = mergeQueryParameters(queryParams, { - ...DEFAULT_CONFIG, - ...(injectedConfiguration?.config?.['@@global']?.default ?? {}), - }); - - if (injectedConfiguration.config) { - Object.entries(injectedConfiguration.config).forEach( - ([key, value]: [string, SafeAny]) => { - this._configs[key] = new BehaviorSubject(value.default); - if (value.variantsPipe) { - this._variantPipes[key] = new BehaviorSubject( - new Function('c', value.variantsPipe) - ); - } - } + extends ComenEnvironmentHost + implements OnInit, OnDestroy { + @ViewChild('data', { static: true }) data: ElementRef; + @ViewChild('container', { static: true }) + container: OverlayContainerComponent; + + private destroy$ = new Subject(); + + constructor( + private activatedRoute: ActivatedRoute, + private rxzone: RxZone, + private addon: AddonService + ) { + super(); + } + + get addonTarget() { + return this.activatedRoute.snapshot.queryParams.o ?? 'null'; + } + + message$: Subject = new Subject(); + legacyConfig$: Subject = new Subject(); + + private _configs: { + [key: string]: Observable; + } = {}; + + private _variantPipes: { + [key: string]: Observable; + } = {}; + + async ngOnInit() { + await waitUntilPageVisible(); + // init element? + const queryParams = this.activatedRoute.snapshot.queryParams; + // Query parameters are not expected to change. Any change is not responsed + // unless component is fully reconstructed. + const injectedConfiguration = await this.initConfig(); + const globalConfig = mergeQueryParameters(queryParams, { + ...DEFAULT_CONFIG, + ...(injectedConfiguration?.config?.['@@global']?.default ?? {}), + }); + + if (injectedConfiguration.config) { + Object.entries(injectedConfiguration.config).forEach( + ([key, value]: [string, SafeAny]) => { + this._configs[key] = new BehaviorSubject(value.default); + if (value.variantsPipe) { + this._variantPipes[key] = new BehaviorSubject( + new Function('c', value.variantsPipe) ); + } } - - const bootstraped = this.container.bootstrap(this.addonTarget); - this.destroy$.subscribe(() => bootstraped.destroy()); - - this.legacyConfig$.next(globalConfig); - if ('bilichat' in globalConfig) { - setTimeout(() => { - // here showMessage is expected not undefined! - this.message$.next({ - type: 'blank', - }); - }, 0); - } - this.addon - .connectSource(globalConfig.platform, globalConfig) - .pipe( - filter(() => document.visibilityState == 'visible'), - // this is important! because some filter depend on requestAnimationFrame will cause some weired behavior - commentFilter(globalConfig), - smoother(globalConfig), - folder(globalConfig), - filter((msg) => { - if ('bilichat' in globalConfig) { - if (msg.type == 'system') { - this.message$.next({ - type: 'text', - content: - BILICHAT_SYSTEM_MESSAGE[msg.data.status], - avatar: '/assets/bilichat_icon.png', - usertype: 0b10, - username: 'BILICHAT', - } as TextMessage); - } else if (msg.type == 'sticker') { - // bilichat has no sticker type, downgrade to mock paid message - this.message$.next({ - type: 'paid', - itemInfo: msg.itemInfo, - price: msg.price, - content: null, - avatar: msg.avatar, - username: msg.username, - platformUserId: msg.platformUserId, - }); - return false; - } - } - return true; - }), - emojiFilter(globalConfig), - tap((msg) => { - this.message$.next(msg); - }), - catchError((e) => { - if (e == 'NOT_FOUND') { - console.error('ADDON NOT FOUND'); // TODO: Error UI - return of(); - } - console.error(e); - throw e; - }), - retry(), //TODO: endless retry will cause stackoverflow - this.rxzone.subscribeOutsideAngular(), - takeUntil(this.destroy$) - ) - .subscribe(); + ); } - ngOnDestroy() { - this.destroy$.next(); - this.destroy$.complete(); - } + const bootstraped = this.container.bootstrap(this.addonTarget); + this.destroy$.subscribe(() => bootstraped.destroy()); - message() { - return this.message$; - } - - config(section: string) { - if (section == '__legacy__') { - return this.legacyConfig$; - } - return this._configs[section] ?? of({}); - } - - variantPipe(section: string) { - return this._variantPipes[section] ?? of((x: unknown) => x); - } - - assetUrl(id: string) { - return ''; + this.legacyConfig$.next(globalConfig); + if ('bilichat' in globalConfig) { + setTimeout(() => { + // here showMessage is expected not undefined! + this.message$.next({ + type: 'blank', + }); + }, 0); } - - async initConfig() { - // config in css - if ('obsstudio' in window) { - let retryCount = 0; - while (retryCount < 60) { - await nextFrame(); - const ret = getComputedStyle(this.data.nativeElement, ':after') - .content; - if (ret != 'none') { - return deserializeBase64(ret.substring(1, ret.length - 1)); - } - retryCount++; + this.addon + .connectSource(globalConfig.platform, globalConfig) + .pipe( + filter(() => document.visibilityState == 'visible'), + // this is important! because some filter depend on requestAnimationFrame will cause some weired behavior + commentFilter(globalConfig), + smoother(globalConfig), + folder(globalConfig), + filter((msg) => { + if ('bilichat' in globalConfig) { + if (msg.type == 'system') { + this.message$.next({ + type: 'text', + content: BILICHAT_SYSTEM_MESSAGE[msg.data.status], + avatar: '/assets/bilichat_icon.png', + usertype: 0b10, + username: 'BILICHAT', + } as TextMessage); + } else if (msg.type == 'sticker') { + // bilichat has no sticker type, downgrade to mock paid message + this.message$.next({ + type: 'paid', + itemInfo: msg.itemInfo, + price: msg.price, + content: null, + avatar: msg.avatar, + username: msg.username, + platformUserId: msg.platformUserId, + }); + return false; } - return {}; + } + return true; + }), + emojiFilter(globalConfig), + tap((msg) => { + this.message$.next(msg); + }), + catchError((e) => { + if (e == 'NOT_FOUND') { + console.error('ADDON NOT FOUND'); // TODO: Error UI + return of(); + } + console.error(e); + throw e; + }), + retry(), //TODO: endless retry will cause stackoverflow + this.rxzone.subscribeOutsideAngular(), + takeUntil(this.destroy$) + ) + .subscribe(); + } + + ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); + } + + message() { + return this.message$; + } + + config(section: string) { + if (section == '__legacy__') { + return this.legacyConfig$; + } + return this._configs[section] ?? of({}); + } + + variantPipe(section: string) { + return this._variantPipes[section] ?? of((x: unknown) => x); + } + + assetUrl(id: string) { + return ''; + } + + async initConfig() { + // config in css + if ('obsstudio' in window) { + let retryCount = 0; + while (retryCount < 60) { + await nextFrame(); + const ret = getComputedStyle(this.data.nativeElement, ':after').content; + if (ret != 'none') { + return deserializeBase64(ret.substring(1, ret.length - 1)); } - return {}; + retryCount++; + } + return {}; } + return {}; + } } diff --git a/apps/core/src/app/redirect.guard.ts b/apps/core/src/app/redirect.guard.ts index 1aef039..fe5d035 100644 --- a/apps/core/src/app/redirect.guard.ts +++ b/apps/core/src/app/redirect.guard.ts @@ -11,7 +11,7 @@ import { environment } from '../environments/environment'; export class RedirectGuard implements CanActivate { constructor(private router: Router) {} async canActivate(route: ActivatedRouteSnapshot): Promise { - if (COMEN_ENVIRONMENT === 'vercel'||!environment.production) { + if (COMEN_ENVIRONMENT === 'vercel' || !environment.production) { return true; } return this.router.createUrlTree(['/', 'edit'], { diff --git a/apps/core/src/app/sources/acfun/acfun.module.ts b/apps/core/src/app/sources/acfun/acfun.module.ts index b1a82a4..4afa049 100644 --- a/apps/core/src/app/sources/acfun/acfun.module.ts +++ b/apps/core/src/app/sources/acfun/acfun.module.ts @@ -1,11 +1,9 @@ -import { NgModule } from "@angular/core"; -import { AcfunSource } from "./acfun"; +import { NgModule } from '@angular/core'; +import { AcfunSource } from './acfun'; @NgModule({ - providers: [ - AcfunSource - ] + providers: [AcfunSource], }) export class AcfunSourceModule { - source = AcfunSource; -} \ No newline at end of file + source = AcfunSource; +} diff --git a/apps/core/src/app/sources/acfun/acfun.ts b/apps/core/src/app/sources/acfun/acfun.ts index 0dc753b..de098a9 100644 --- a/apps/core/src/app/sources/acfun/acfun.ts +++ b/apps/core/src/app/sources/acfun/acfun.ts @@ -1,7 +1,5 @@ import { Observable } from 'rxjs'; -import { - Message, StickerMessage, TextMessage -} from '@comen/common'; +import { Message, StickerMessage, TextMessage } from '@comen/common'; import { connectAcfunLiveWs } from 'isomorphic-danmaku/acfun'; import { HttpClient } from '@angular/common/http'; import { switchMap } from 'rxjs/operators'; @@ -11,175 +9,178 @@ import { waitTimeout } from '../../common/utils'; @Injectable() export class AcfunSource { + // avatar address cache? + readonly type = 'acfun'; - // avatar address cache? - readonly type = 'acfun'; + constructor(private http: HttpClient) {} - constructor(private http: HttpClient) { } + connect({ roomId }) { + return this.http + .get(`/api/acfun/getRoomInfo?roomid=${roomId}`) + .pipe( + switchMap((data) => { + if (data.closed) { + // TODO: + throw new Error('live is closed'); + } else { + return this._connect(data as Required); + } + }) + ); + } - connect({ roomId }) { - return this.http.get(`/api/acfun/getRoomInfo?roomid=${roomId}`) - .pipe( - switchMap((data) => { - if (data.closed) { - // TODO: - throw new Error('live is closed'); - } else { - return this._connect(data as Required); - } - }) - ); - } - - private _connect(resp: AcfunRoominfoResponse) { - return new Observable((observer) => { - // 简易coroutine模型 - const abort = new AbortController(); - (async () => { - let errorCounter = 0; - if (errorCounter > 3) { - observer.error(new Error('Failed to connect to server.')); - observer.complete(); - return; - } - while (!observer.closed) { - try { - for await (const msg of connectAcfunLiveWs({ - liveId: resp.liveId, - serviceToken: resp.serviceToken, - acSecurity: resp.acSecurity, - enterRoomAttach: resp.enterRoomAttach, - tickets: resp.tickets, - userId: resp.userId, - abort - } as any) as AsyncGenerator) { - switch (msg.type) { - case 'CommonActionSignalComment': - observer.next({ - type: 'text', - content: msg.data.content, - avatar: msg.data.userInfo.avatar[0].url, - badges: [], - username: msg.data.userInfo.nickname, - usertype: (msg.data.userInfo.userIdentity.managerType == 1 ? 0x2 : 0), - platformUserId: msg.data.userInfo.userId.toNumber() - } as TextMessage); - break; - case 'CommonActionSignalGift': - { - const giftInfo = resp.giftInfo.giftList.find - (x => x.giftId == msg.data.giftId.toNumber()); - if (!giftInfo) { - break; // in case not found - } - observer.next({ - type: 'sticker', - avatar: msg.data.user.avatar[0].url, - sticker: giftInfo.webpPicList[0].url, - username: msg.data.user.nickname, - amount: msg.data.count, - itemInfo: `投喂 ${giftInfo.giftName} ×${msg.data.count}`, - price: giftInfo.payWalletType == 1 ? giftInfo.giftPrice : 0, - platformPrice: giftInfo.payWalletType == 2 ? giftInfo.giftPrice : 0, - platformUserId: msg.data.user.userId.toNumber(), - } as StickerMessage) - break; - } - } - } - } - catch (e) { - await waitTimeout(5000); - } - errorCounter++; + private _connect(resp: AcfunRoominfoResponse) { + return new Observable((observer) => { + // 简易coroutine模型 + const abort = new AbortController(); + (async () => { + let errorCounter = 0; + if (errorCounter > 3) { + observer.error(new Error('Failed to connect to server.')); + observer.complete(); + return; + } + while (!observer.closed) { + try { + for await (const msg of connectAcfunLiveWs({ + liveId: resp.liveId, + serviceToken: resp.serviceToken, + acSecurity: resp.acSecurity, + enterRoomAttach: resp.enterRoomAttach, + tickets: resp.tickets, + userId: resp.userId, + abort, + } as any) as AsyncGenerator) { + switch (msg.type) { + case 'CommonActionSignalComment': + observer.next({ + type: 'text', + content: msg.data.content, + avatar: msg.data.userInfo.avatar[0].url, + badges: [], + username: msg.data.userInfo.nickname, + usertype: + msg.data.userInfo.userIdentity.managerType == 1 ? 0x2 : 0, + platformUserId: msg.data.userInfo.userId.toNumber(), + } as TextMessage); + break; + case 'CommonActionSignalGift': { + const giftInfo = resp.giftInfo.giftList.find( + (x) => x.giftId == msg.data.giftId.toNumber() + ); + if (!giftInfo) { + break; // in case not found + } + observer.next({ + type: 'sticker', + avatar: msg.data.user.avatar[0].url, + sticker: giftInfo.webpPicList[0].url, + username: msg.data.user.nickname, + amount: msg.data.count, + itemInfo: `投喂 ${giftInfo.giftName} ×${msg.data.count}`, + price: giftInfo.payWalletType == 1 ? giftInfo.giftPrice : 0, + platformPrice: + giftInfo.payWalletType == 2 ? giftInfo.giftPrice : 0, + platformUserId: msg.data.user.userId.toNumber(), + } as StickerMessage); + break; } - })(); - return () => { - abort.abort(); - }; - }).pipe() as Observable; - } + } + } + } catch (e) { + await waitTimeout(5000); + } + errorCounter++; + } + })(); + return () => { + abort.abort(); + }; + }).pipe() as Observable; + } } -type AcfunMsg = { - type: 'CommonActionSignalGift', - data: { - giftId: Long, +type AcfunMsg = + | { + type: 'CommonActionSignalGift'; + data: { + giftId: Long; user: { - avatar: { - url: string; - }[], - nickname: string; - userId: Long, - userIdentity: { - managerType: number - } - }, - value: Long, - count: number, - combo: number, - comboId: string + avatar: { + url: string; + }[]; + nickname: string; + userId: Long; + userIdentity: { + managerType: number; + }; + }; + value: Long; + count: number; + combo: number; + comboId: string; + }; } -} | { - type: 'CommonActionSignalComment', - data: { + | { + type: 'CommonActionSignalComment'; + data: { content: string; userInfo: { - userId: Long, - nickname: string, - badge: string, // medalInfo: {uperId userId clubName level} - userIdentity: { - managerType: number - } - , avatar: { - url: string; - }[], - } - } -} + userId: Long; + nickname: string; + badge: string; // medalInfo: {uperId userId clubName level} + userIdentity: { + managerType: number; + }; + avatar: { + url: string; + }[]; + }; + }; + }; type AcfunRoominfoResponse = { - closed: boolean; - acSecurity: string; - userId: number; - serviceToken: string; - tickets?: string[]; - enterRoomAttach?: string; - liveId?: string; - giftInfo?: { - giftList: { - allowBatchSendSizeList: number[]; - arLiveName: string; - canCombo: boolean; - canDraw: boolean; - description: string; - giftId: number; - giftName: string; - giftPrice: number; - magicFaceId: number; - payWalletType: number; - pngPicListt: { - cdn: string; - freeTraffic: boolean; - url: string; - urlPattern: string; - }[]; - smallPngPicList: { - cdn: string; - freeTraffic: boolean; - url: string; - urlPattern: string; - }[]; - webpPicList: { - cdn: string; - freeTraffic: boolean; - url: string; - urlPattern: string; - }[]; - redpackPrice: number; - }[]; - externalDisplayGiftId: number; - giftListHash: string; - externalDisplayGiftTipsDelayTime: number; - } -} \ No newline at end of file + closed: boolean; + acSecurity: string; + userId: number; + serviceToken: string; + tickets?: string[]; + enterRoomAttach?: string; + liveId?: string; + giftInfo?: { + giftList: { + allowBatchSendSizeList: number[]; + arLiveName: string; + canCombo: boolean; + canDraw: boolean; + description: string; + giftId: number; + giftName: string; + giftPrice: number; + magicFaceId: number; + payWalletType: number; + pngPicListt: { + cdn: string; + freeTraffic: boolean; + url: string; + urlPattern: string; + }[]; + smallPngPicList: { + cdn: string; + freeTraffic: boolean; + url: string; + urlPattern: string; + }[]; + webpPicList: { + cdn: string; + freeTraffic: boolean; + url: string; + urlPattern: string; + }[]; + redpackPrice: number; + }[]; + externalDisplayGiftId: number; + giftListHash: string; + externalDisplayGiftTipsDelayTime: number; + }; +}; diff --git a/apps/core/src/app/sources/bilibili/bilibili.module.ts b/apps/core/src/app/sources/bilibili/bilibili.module.ts index a9bb74a..ae0f88c 100644 --- a/apps/core/src/app/sources/bilibili/bilibili.module.ts +++ b/apps/core/src/app/sources/bilibili/bilibili.module.ts @@ -1,11 +1,9 @@ -import { NgModule } from "@angular/core"; -import { BilibiliSource } from "./bilibili"; +import { NgModule } from '@angular/core'; +import { BilibiliSource } from './bilibili'; @NgModule({ - providers: [ - BilibiliSource - ] + providers: [BilibiliSource], }) export class BilibiliSourceModule { - source = BilibiliSource; -} \ No newline at end of file + source = BilibiliSource; +} diff --git a/apps/core/src/app/sources/bilibili/bilibili.ts b/apps/core/src/app/sources/bilibili/bilibili.ts index 64fd5cd..e8ee398 100644 --- a/apps/core/src/app/sources/bilibili/bilibili.ts +++ b/apps/core/src/app/sources/bilibili/bilibili.ts @@ -1,8 +1,15 @@ import { Observable, of, OperatorFunction } from 'rxjs'; import { - Message, TextMessage, StickerMessage, PaidMessage, MemberMessage, - LiveStartMessage, LiveStopMessage, SystemMessage, RichTextMessage, - SafeAny + Message, + TextMessage, + StickerMessage, + PaidMessage, + MemberMessage, + LiveStartMessage, + LiveStopMessage, + SystemMessage, + RichTextMessage, + SafeAny, } from '@comen/common'; import { connectBilibiliLiveWs } from 'isomorphic-danmaku/bilibili'; import { Injectable } from '@angular/core'; @@ -13,529 +20,499 @@ import { waitTimeout } from '../../common/utils'; @Injectable() export class BilibiliSource { + readonly type = 'bilibili'; - readonly type = 'bilibili'; + private __lastLIVECMD = 0; + private __lastPREPCMD = 0; - private __lastLIVECMD = 0; - private __lastPREPCMD = 0; + constructor(private http: HttpClient) {} - constructor(private http: HttpClient) { } - - connect(config: { - roomId: number; - silverGoldRatio: number; - showGiftAutoDammaku: boolean; - disableAvatarPreload: boolean; - useJapaneseSC: boolean; - }) { - return new Observable((observer) => { - const abortController = new AbortController(); - (async () => { - await waitTimeout(0); - while (!observer.closed) { - try { - observer.next({ - type: 'system', - data: { - status: 'FETCHING', - }, - } as SystemMessage); - const resp = await this.http - .get( - `/api/bili/getRoomInfo?roomid=${config.roomId}` - ) - .pipe( - abortable(abortController), - catchError((e) => { - return of({ - roomInfo: { - room_id: config.roomId, - uid: -1, - live_status: -1, - }, - danmuInfo: { - token: '', - }, - giftInfo: { - list: [], - }, - }); - }) - ) - .toPromise(); - observer.next({ - type: 'system', - data: { - status: 'CONNECTING', - }, - } as SystemMessage); - for await (const msg of connectBilibiliLiveWs({ - roomId: resp.roomInfo.room_id, - abort: abortController, - token: resp.danmuInfo.token, - }) as AsyncGenerator) { - if ( - msg.cmd == 'DANMU_MSG' || - msg.cmd.startsWith('DANMU_MSG') - ) { - assumeType<{ cmd: 'DANMU_MSG'; info: any[] }>( - msg - ); - if (typeof msg.info[0][13] === 'object') { - observer.next({ - type: 'richtext', - richtext: { - nodes: [ - { - type: 'image', - url: msg.info[0][13].url, - width: - msg.info[0][13].width, - height: - msg.info[0][13].height, - }, - ], - }, - avatar: '', - badges: [ - ...[guardType[msg.info[7]]].filter( - Boolean - ), // TODO: custom badge - ], - username: msg.info[2][1], - //owner - usertype: - (msg.info[7] > 0 ? 0x1 : 0x0) | // member - (msg.info[2][2] == 1 ? 0x2 : 0x0) | // moderator - (msg.info[2][0] == resp.roomInfo.uid - ? 0x04 - : 0x0), - platformUserId: msg.info[2][0], - platformUserExtra: {}, - platformUserLevel: msg.info[4][0], - } as RichTextMessage); - continue; - } - if ( - !config.showGiftAutoDammaku && - msg.info[0][9] > 0 - ) { - continue; - } - observer.next({ - type: 'text', - content: msg.info[1], - avatar: '', - badges: [ - ...[guardType[msg.info[7]]].filter( - Boolean - ), // TODO: custom badge - ], - username: msg.info[2][1], - //owner - usertype: - (msg.info[7] > 0 ? 0x1 : 0x0) | // member - (msg.info[2][2] == 1 ? 0x2 : 0x0) | // moderator - (msg.info[2][0] == resp.roomInfo.uid - ? 0x04 - : 0x0), - platformUserId: msg.info[2][0], - platformUserExtra: { - guardType: msg.info[7] - }, - platformUserLevel: msg.info[4][0] - } as TextMessage); - continue; - } - switch (msg.cmd) { - case '__CONNECTED__': - observer.next({ - type: 'system', - data: { - status: 'CONNECTED', - }, - } as SystemMessage); - if (resp.roomInfo.live_status == 1) { // TODO: - observer.next({ - type: 'livestart', - } as LiveStartMessage); - } - break; - case '__ERROR__': - // TODO: report - break; - case 'SEND_GIFT': - // console.log(msg); - if (config.silverGoldRatio > 0) { - // mutate object, not a good practice but ok - msg.data.coin_type = 'gold'; - msg.data.total_coin *= - config.silverGoldRatio; - } - observer.next({ - type: 'sticker', - sticker: resp.giftInfo.list.find( - (x) => x.id == msg.data.giftId - )?.webp, - avatar: '', - username: msg.data.uname, - amount: msg.data.num, - itemInfo: `${msg.data.action} ${msg.data.giftName} ×${msg.data.num}`, - price: - msg.data.coin_type == 'gold' - ? msg.data.total_coin / 1000 - : 0, - platformPrice: - msg.data.coin_type == 'silver' - ? msg.data.total_coin - : 0, - platformUserId: msg.data.uid, - } as StickerMessage); - break; - case 'GUARD_BUY': - // console.log(msg); - observer.next({ - type: 'member', - avatar: '', - username: msg.data.username, - price: msg.data.price / 1000, - platformUserId: msg.data.uid, - platformMemberType: - msg.data.guard_level, - platformPrice: msg.data.price, - itemInfo: '欢迎加入大航海', - } as MemberMessage); - break; - case 'COMBO_SEND': - // console.log(msg); - break; - case 'SUPER_CHAT_MESSAGE_JPN': - observer.next({ - type: 'paid', - avatar: msg.data.user_info.face, - username: msg.data.user_info.uname, - content: config.useJapaneseSC - ? msg.data.message_jpn - : msg.data.message, - itemInfo: `CN¥${msg.data.price}`, - price: msg.data.price, - platformUserId: msg.data.uid, - } as PaidMessage); - break; - case 'LIVE': - if ( - Date.now() - this.__lastLIVECMD < - 30000 - ) { - break; // weired behavior - } - this.__lastLIVECMD = Date.now(); - observer.next({ - type: 'livestart', - } as LiveStartMessage); - break; - case 'PREPARING': - if ( - Date.now() - this.__lastPREPCMD < - 30000 - ) { - break; // weired behavior - } - this.__lastPREPCMD = Date.now(); - observer.next({ - type: 'livestop', - } as LiveStopMessage); - break; - } - } - // break; // peacefully terminated - } catch (e) { - if (e == 'ABORTED') { - break; // peacefully terminated - } - //error occured! try to reconnect! - observer.next({ - type: 'system', - data: { - status: 'ERROR', - }, - } as SystemMessage); - await waitTimeout(5 * 1000); - } + connect(config: { + roomId: number; + silverGoldRatio: number; + showGiftAutoDammaku: boolean; + disableAvatarPreload: boolean; + useJapaneseSC: boolean; + }) { + return new Observable((observer) => { + const abortController = new AbortController(); + (async () => { + await waitTimeout(0); + while (!observer.closed) { + try { + observer.next({ + type: 'system', + data: { + status: 'FETCHING', + }, + } as SystemMessage); + const resp = await this.http + .get( + `/api/bili/getRoomInfo?roomid=${config.roomId}` + ) + .pipe( + abortable(abortController), + catchError((e) => { + return of({ + roomInfo: { + room_id: config.roomId, + uid: -1, + live_status: -1, + }, + danmuInfo: { + token: '', + }, + giftInfo: { + list: [], + }, + }); + }) + ) + .toPromise(); + observer.next({ + type: 'system', + data: { + status: 'CONNECTING', + }, + } as SystemMessage); + for await (const msg of connectBilibiliLiveWs({ + roomId: resp.roomInfo.room_id, + abort: abortController, + token: resp.danmuInfo.token, + }) as AsyncGenerator) { + if (msg.cmd == 'DANMU_MSG' || msg.cmd.startsWith('DANMU_MSG')) { + assumeType<{ cmd: 'DANMU_MSG'; info: any[] }>(msg); + if (typeof msg.info[0][13] === 'object') { + observer.next({ + type: 'richtext', + richtext: { + nodes: [ + { + type: 'image', + url: msg.info[0][13].url, + width: msg.info[0][13].width, + height: msg.info[0][13].height, + }, + ], + }, + avatar: '', + badges: [ + ...[guardType[msg.info[7]]].filter(Boolean), // TODO: custom badge + ], + username: msg.info[2][1], + //owner + usertype: + (msg.info[7] > 0 ? 0x1 : 0x0) | // member + (msg.info[2][2] == 1 ? 0x2 : 0x0) | // moderator + (msg.info[2][0] == resp.roomInfo.uid ? 0x04 : 0x0), + platformUserId: msg.info[2][0], + platformUserExtra: {}, + platformUserLevel: msg.info[4][0], + } as RichTextMessage); + continue; } - })(); - return () => { - abortController.abort(); - }; - }).pipe( - this._avatarPreloadPipe(Boolean(config.disableAvatarPreload)) - ) as Observable; - } + if (!config.showGiftAutoDammaku && msg.info[0][9] > 0) { + continue; + } + observer.next({ + type: 'text', + content: msg.info[1], + avatar: '', + badges: [ + ...[guardType[msg.info[7]]].filter(Boolean), // TODO: custom badge + ], + username: msg.info[2][1], + //owner + usertype: + (msg.info[7] > 0 ? 0x1 : 0x0) | // member + (msg.info[2][2] == 1 ? 0x2 : 0x0) | // moderator + (msg.info[2][0] == resp.roomInfo.uid ? 0x04 : 0x0), + platformUserId: msg.info[2][0], + platformUserExtra: { + guardType: msg.info[7], + }, + platformUserLevel: msg.info[4][0], + } as TextMessage); + continue; + } + switch (msg.cmd) { + case '__CONNECTED__': + observer.next({ + type: 'system', + data: { + status: 'CONNECTED', + }, + } as SystemMessage); + if (resp.roomInfo.live_status == 1) { + // TODO: + observer.next({ + type: 'livestart', + } as LiveStartMessage); + } + break; + case '__ERROR__': + // TODO: report + break; + case 'SEND_GIFT': + // console.log(msg); + if (config.silverGoldRatio > 0) { + // mutate object, not a good practice but ok + msg.data.coin_type = 'gold'; + msg.data.total_coin *= config.silverGoldRatio; + } + observer.next({ + type: 'sticker', + sticker: resp.giftInfo.list.find( + (x) => x.id == msg.data.giftId + )?.webp, + avatar: '', + username: msg.data.uname, + amount: msg.data.num, + itemInfo: `${msg.data.action} ${msg.data.giftName} ×${msg.data.num}`, + price: + msg.data.coin_type == 'gold' + ? msg.data.total_coin / 1000 + : 0, + platformPrice: + msg.data.coin_type == 'silver' ? msg.data.total_coin : 0, + platformUserId: msg.data.uid, + } as StickerMessage); + break; + case 'GUARD_BUY': + // console.log(msg); + observer.next({ + type: 'member', + avatar: '', + username: msg.data.username, + price: msg.data.price / 1000, + platformUserId: msg.data.uid, + platformMemberType: msg.data.guard_level, + platformPrice: msg.data.price, + itemInfo: '欢迎加入大航海', + } as MemberMessage); + break; + case 'COMBO_SEND': + // console.log(msg); + break; + case 'SUPER_CHAT_MESSAGE_JPN': + observer.next({ + type: 'paid', + avatar: msg.data.user_info.face, + username: msg.data.user_info.uname, + content: config.useJapaneseSC + ? msg.data.message_jpn + : msg.data.message, + itemInfo: `CN¥${msg.data.price}`, + price: msg.data.price, + platformUserId: msg.data.uid, + } as PaidMessage); + break; + case 'LIVE': + if (Date.now() - this.__lastLIVECMD < 30000) { + break; // weired behavior + } + this.__lastLIVECMD = Date.now(); + observer.next({ + type: 'livestart', + } as LiveStartMessage); + break; + case 'PREPARING': + if (Date.now() - this.__lastPREPCMD < 30000) { + break; // weired behavior + } + this.__lastPREPCMD = Date.now(); + observer.next({ + type: 'livestop', + } as LiveStopMessage); + break; + } + } + // break; // peacefully terminated + } catch (e) { + if (e == 'ABORTED') { + break; // peacefully terminated + } + //error occured! try to reconnect! + observer.next({ + type: 'system', + data: { + status: 'ERROR', + }, + } as SystemMessage); + await waitTimeout(5 * 1000); + } + } + })(); + return () => { + abortController.abort(); + }; + }).pipe( + this._avatarPreloadPipe(Boolean(config.disableAvatarPreload)) + ) as Observable; + } - private _avatarPreloadPipe( - disabled: boolean - ): OperatorFunction { - return (upstream) => { - if (disabled) { - return upstream; + private _avatarPreloadPipe( + disabled: boolean + ): OperatorFunction { + return (upstream) => { + if (disabled) { + return upstream; + } + return new Observable((obs) => { + return upstream.subscribe({ + next: (x) => { + if ( + x.type == 'text' || + x.type == 'sticker' || + x.type == 'member' || + x.type == 'richtext' + ) { + this.http + .get<{ + url: string; + }>(`/api/bili/getAvatar?uid=${x.platformUserId}`) + .pipe(timeout(10 * 1000)) + .subscribe( + (ret) => { + if ( + ret.url !== + 'http://static.hdslb.com/images/member/noface.gif' + ) { + ret.url = ret.url + '@48w_48h'; + } + x.avatar = ret.url; + obs.next(x); + }, + () => { + // failed to load + x.avatar = + 'http://static.hdslb.com/images/member/noface.gif'; + obs.next(x); + } + ); + } else { + obs.next(x); } - return new Observable((obs) => { - return upstream.subscribe({ - next: (x) => { - if ( - x.type == 'text' || - x.type == 'sticker' || - x.type == 'member'|| - x.type == 'richtext' - ) { - this.http - .get<{ - url: string; - }>( - `/api/bili/getAvatar?uid=${x.platformUserId}` - ) - .pipe(timeout(10 * 1000)) - .subscribe( - (ret) => { - if ( - ret.url !== - 'http://static.hdslb.com/images/member/noface.gif' - ) { - ret.url = ret.url + '@48w_48h'; - } - x.avatar = ret.url; - obs.next(x); - }, - () => { - // failed to load - x.avatar = - 'http://static.hdslb.com/images/member/noface.gif'; - obs.next(x); - } - ); - } else { - obs.next(x); - } - }, - error: (e) => obs.error(e), - complete: () => obs.complete(), - }); - }); - }; - } + }, + error: (e) => obs.error(e), + complete: () => obs.complete(), + }); + }); + }; + } } const guardType = { - 1: { - type: 'member', - badge: - 'https://i0.hdslb.com/bfs/activity-plat/static/20200716/1d0c5a1b042efb59f46d4ba1286c6727/icon-guard1.png@44w_44h.webp', - }, - 2: { - type: 'member', - badge: - 'https://i0.hdslb.com/bfs/activity-plat/static/20200716/1d0c5a1b042efb59f46d4ba1286c6727/icon-guard2.png@44w_44h.webp', - }, - 3: { - type: 'member', - badge: - 'https://i0.hdslb.com/bfs/activity-plat/static/20200716/1d0c5a1b042efb59f46d4ba1286c6727/icon-guard3.png@44w_44h.webp', - }, + 1: { + type: 'member', + badge: + 'https://i0.hdslb.com/bfs/activity-plat/static/20200716/1d0c5a1b042efb59f46d4ba1286c6727/icon-guard1.png@44w_44h.webp', + }, + 2: { + type: 'member', + badge: + 'https://i0.hdslb.com/bfs/activity-plat/static/20200716/1d0c5a1b042efb59f46d4ba1286c6727/icon-guard2.png@44w_44h.webp', + }, + 3: { + type: 'member', + badge: + 'https://i0.hdslb.com/bfs/activity-plat/static/20200716/1d0c5a1b042efb59f46d4ba1286c6727/icon-guard3.png@44w_44h.webp', + }, }; type BilibiliMsg = - | { - cmd: 'DANMU_MSG'; - info: [ - [ - any, - any, - any, - any, - any, - any, - any, - any, - any, - any, - any, - any, - any, - ( - | string - | { - bulge_display: number; - emoticon_unique: string; - height: number; - in_player_area: number; - is_dynamic: number; - url: string; - width: number; - } - ), - any, - any - ], - string, - any[], - any[], - any[], - any[], - any, - any, - any, - any, - any, - any, - any, - any, - any, - any - ]; - } - | { - cmd: 'SEND_GIFT'; - data: { - coin_type: 'gold' | 'silver'; - uid: number; - uname: string; - giftName: string; - num: number; - total_coin: number; - giftId: number; - action: string; - }; - } - | { - cmd: 'GUARD_BUY'; - data: { - uid: number; - username: string; - gift_name: string; - num: number; - price: number; - guard_level: number; - }; - } - | { - cmd: 'SUPER_CHAT_MESSAGE_JPN'; - data: { - uid: number; - user_info: { - uname: string; - face: string; - }; - price: number; - message_jpn: string; - message: string; - }; - } - | { - cmd: 'WELCOME_GUARD'; - data: { - uid: number; - username: string; - guard_level: number; - }; - } - | { - cmd: 'INTERACT_WORD'; - data: { - contribution: { - grade: number; - }; - identities: [number]; - is_spread: number; - msg_type: number; - roomid: number; - uid: string; - uname: string; - uname_color: string; - }; - } - | { - cmd: 'COMBO_SEND'; - data: { - gift_id: number; - gift_name: string; - gift_nun: string; - is_show: number; - uid: number; - uname: string; - action: string; - batch_combo_id: string; - batch_combo_num: number; - combi_id: string; - combo: number; - combo_total_coin: number; - }; - } - | { - cmd: 'ROOM_REAL_TIME_MESSAGE_UPDATA'; - data: { - fans: number; - fans_club: number; - roomid: number; - red_notice: number; - }; - } - | { - cmd: 'PREPARING'; - roomid: number; - } - | { - cmd: 'LIVE'; - } - | { - cmd: '__CONNECTED__'; - } - | { - cmd: '__ERROR__'; - //eslint-disable-next-line - error: any; + | { + cmd: 'DANMU_MSG'; + info: [ + [ + any, + any, + any, + any, + any, + any, + any, + any, + any, + any, + any, + any, + any, + ( + | string + | { + bulge_display: number; + emoticon_unique: string; + height: number; + in_player_area: number; + is_dynamic: number; + url: string; + width: number; + } + ), + any, + any + ], + string, + any[], + any[], + any[], + any[], + any, + any, + any, + any, + any, + any, + any, + any, + any, + any + ]; + } + | { + cmd: 'SEND_GIFT'; + data: { + coin_type: 'gold' | 'silver'; + uid: number; + uname: string; + giftName: string; + num: number; + total_coin: number; + giftId: number; + action: string; }; - -type BilibiliRoominfoResponse = { - roomInfo: { - room_id: number; - short_id: number; + } + | { + cmd: 'GUARD_BUY'; + data: { uid: number; - need_p2p: number; - is_hidden: boolean; - is_locked: boolean; - is_portrait: boolean; - live_status: number; - hidden_till: number; - lock_till: number; - encrypted: boolean; - pwd_verified: boolean; - live_time: number; - room_shield: number; - special_type: number; - }; - danmuInfo: { - token: string; - host_list: { - host: string; - port: number; - wss_port: number; - ws_port: number; - }[]; - }; - giftInfo: { - list: { - id: number; - number: string; - price: number; - coin_type: 'silver' | 'gold'; - img_basic: string; - img_dynamic: string; - gift: string; - webp: string; - }[]; + username: string; + gift_name: string; + num: number; + price: number; + guard_level: number; + }; + } + | { + cmd: 'SUPER_CHAT_MESSAGE_JPN'; + data: { + uid: number; + user_info: { + uname: string; + face: string; + }; + price: number; + message_jpn: string; + message: string; + }; + } + | { + cmd: 'WELCOME_GUARD'; + data: { + uid: number; + username: string; + guard_level: number; + }; + } + | { + cmd: 'INTERACT_WORD'; + data: { + contribution: { + grade: number; + }; + identities: [number]; + is_spread: number; + msg_type: number; + roomid: number; + uid: string; + uname: string; + uname_color: string; + }; + } + | { + cmd: 'COMBO_SEND'; + data: { + gift_id: number; + gift_name: string; + gift_nun: string; + is_show: number; + uid: number; + uname: string; + action: string; + batch_combo_id: string; + batch_combo_num: number; + combi_id: string; + combo: number; + combo_total_coin: number; + }; + } + | { + cmd: 'ROOM_REAL_TIME_MESSAGE_UPDATA'; + data: { + fans: number; + fans_club: number; + roomid: number; + red_notice: number; + }; + } + | { + cmd: 'PREPARING'; + roomid: number; + } + | { + cmd: 'LIVE'; + } + | { + cmd: '__CONNECTED__'; + } + | { + cmd: '__ERROR__'; + //eslint-disable-next-line + error: any; }; + +type BilibiliRoominfoResponse = { + roomInfo: { + room_id: number; + short_id: number; + uid: number; + need_p2p: number; + is_hidden: boolean; + is_locked: boolean; + is_portrait: boolean; + live_status: number; + hidden_till: number; + lock_till: number; + encrypted: boolean; + pwd_verified: boolean; + live_time: number; + room_shield: number; + special_type: number; + }; + danmuInfo: { + token: string; + host_list: { + host: string; + port: number; + wss_port: number; + ws_port: number; + }[]; + }; + giftInfo: { + list: { + id: number; + number: string; + price: number; + coin_type: 'silver' | 'gold'; + img_basic: string; + img_dynamic: string; + gift: string; + webp: string; + }[]; + }; }; function assumeType(x: unknown): asserts x is T { - return; // ¯\_(ツ)_/¯ + return; // ¯\_(ツ)_/¯ } diff --git a/apps/core/src/assets/css4obs/index.html b/apps/core/src/assets/css4obs/index.html index a395308..3c54309 100644 --- a/apps/core/src/assets/css4obs/index.html +++ b/apps/core/src/assets/css4obs/index.html @@ -1,1408 +1,1626 @@ - + + + + + Chat v2.0 Style Generator 中文版 + - - - -

Chat v2.0 Style Generator 中文版

-
-
- 自定义直播时显示评论/弹幕内容样式的 Chat v2.0 Style Generator 中文版
- 原项目地址,由@3Shain提供中文翻译版本
- 可以作用于Comen、Bilichat上,也可作用于Youtube原生评论栏上 -

名词解释

- Youtube中的Onwer=>即房主
- Moderator=>管理员,即房管,有权限进行禁言等操作,ID后会有小扳手
- Sponser=>赞助者/会员,在Bilibili中等于舰长/提督/总督 - -

字体:

-
-
- -
-
- -
-
- -
-
+ section { + display: table; + } -

头像:

-
-
- -
-
- -
-
+ section > div { + display: table-row; + } -

用户名:

-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -

弹幕(评论):

-
-
- -
-
- -
-
- -
-
- -
-
- -
-
+ textarea { + width: 100%; + height: 25%; + } -

时间:

-
-
- -
-
- -
-
- -
-
- -
-
- -
-
+ #split { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + } -

背景:

-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -

SuperChat/赞助:(部分效果在Bilichat不可用)

-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
+ #inputs, + #example { + width: 50%; + } -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-

动画:

-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
- -
-
-
-

预览:

-
-
- - - -
- - $5.00 -
- - -
- - $500.00 -
- - - - -
-
- 12:00 PM - - 3Shain这是房主的信息 -
- - -
-
- 12:00 PM - - 4Shain这是管理员的信息 -
- - -
-
- 12:00 PM - - 5Shain这是会员的信息 -
- - -
-
- 12:00 PMDD这是一般路过的信息 -
- - -
-
-
新的舰长/提督/总督!
-
欢迎 xxxxxx 上舰!
-
- - -
-
- 12:00 PM用户名春眠不觉晓，处处闻啼鸟。夜来风雨声， - 花落知多少。 - -
- - - -
-
- -

CSS:(Ctrl+A全选 Ctrl+C复制)

- - - - - - - - - - - - \ No newline at end of file + document + .querySelector('#animation-trigger') + .addEventListener('click', update); + update(); + + + diff --git a/apps/core/src/env.d.ts b/apps/core/src/env.d.ts index f402033..02fcf00 100644 --- a/apps/core/src/env.d.ts +++ b/apps/core/src/env.d.ts @@ -1,2 +1 @@ - -declare var COMEN_ENVIRONMENT:string; \ No newline at end of file +declare var COMEN_ENVIRONMENT: string; diff --git a/apps/core/src/environments/environment.prod.ts b/apps/core/src/environments/environment.prod.ts index 3612073..c966979 100644 --- a/apps/core/src/environments/environment.prod.ts +++ b/apps/core/src/environments/environment.prod.ts @@ -1,3 +1,3 @@ export const environment = { - production: true + production: true, }; diff --git a/apps/core/src/environments/environment.ts b/apps/core/src/environments/environment.ts index 30d7bcc..31cb785 100644 --- a/apps/core/src/environments/environment.ts +++ b/apps/core/src/environments/environment.ts @@ -3,7 +3,7 @@ // The list of file replacements can be found in `angular.json`. export const environment = { - production: false + production: false, }; /* diff --git a/apps/core/src/index.html b/apps/core/src/index.html index 3d9ed04..d4e972b 100644 --- a/apps/core/src/index.html +++ b/apps/core/src/index.html @@ -6,7 +6,7 @@ - + diff --git a/apps/core/src/material.scss b/apps/core/src/material.scss index 452cb0d..87772e0 100644 --- a/apps/core/src/material.scss +++ b/apps/core/src/material.scss @@ -8,12 +8,14 @@ $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); // The "warn" palette is optional and defaults to red if not specified. $my-warn: mat.define-palette(mat.$red-palette); -$my-theme: mat.define-light-theme(( - color: ( - primary: $my-primary, - accent: $my-accent, - ) -)); +$my-theme: mat.define-light-theme( + ( + color: ( + primary: $my-primary, + accent: $my-accent, + ), + ) +); // Emit theme-dependent styles for common features used across multiple components. @include mat.core-theme($my-theme); diff --git a/apps/core/src/workers/css.worker.ts b/apps/core/src/workers/css.worker.ts index 523922b..f361e4d 100644 --- a/apps/core/src/workers/css.worker.ts +++ b/apps/core/src/workers/css.worker.ts @@ -1 +1 @@ -import 'monaco-editor/esm/vs/language/css/css.worker.js' \ No newline at end of file +import 'monaco-editor/esm/vs/language/css/css.worker.js'; diff --git a/apps/core/src/workers/editor.worker.ts b/apps/core/src/workers/editor.worker.ts index 3108aa3..ad51566 100644 --- a/apps/core/src/workers/editor.worker.ts +++ b/apps/core/src/workers/editor.worker.ts @@ -1 +1 @@ -import 'monaco-editor/esm/vs/editor/editor.worker.js' \ No newline at end of file +import 'monaco-editor/esm/vs/editor/editor.worker.js'; diff --git a/apps/core/src/workers/html.worker.ts b/apps/core/src/workers/html.worker.ts index 02d259e..3c13091 100644 --- a/apps/core/src/workers/html.worker.ts +++ b/apps/core/src/workers/html.worker.ts @@ -1 +1 @@ -import 'monaco-editor/esm/vs/language/html/html.worker.js' \ No newline at end of file +import 'monaco-editor/esm/vs/language/html/html.worker.js'; diff --git a/apps/core/src/workers/json.worker.ts b/apps/core/src/workers/json.worker.ts index a8c64fb..c536d86 100644 --- a/apps/core/src/workers/json.worker.ts +++ b/apps/core/src/workers/json.worker.ts @@ -1 +1 @@ -import 'monaco-editor/esm/vs/language/json/json.worker.js' \ No newline at end of file +import 'monaco-editor/esm/vs/language/json/json.worker.js'; diff --git a/apps/core/src/workers/typescript.worker.ts b/apps/core/src/workers/typescript.worker.ts index a9cd8b8..b58a2b2 100644 --- a/apps/core/src/workers/typescript.worker.ts +++ b/apps/core/src/workers/typescript.worker.ts @@ -1 +1 @@ -import 'monaco-editor/esm/vs/language/typescript/ts.worker.js' \ No newline at end of file +import 'monaco-editor/esm/vs/language/typescript/ts.worker.js'; diff --git a/apps/core/tsconfig.worker.json b/apps/core/tsconfig.worker.json index 8f513e4..dff9f2d 100644 --- a/apps/core/tsconfig.worker.json +++ b/apps/core/tsconfig.worker.json @@ -3,13 +3,8 @@ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "../../out-tsc/worker", - "lib": [ - "es2018", - "webworker" - ], + "lib": ["es2018", "webworker"], "types": [] }, - "include": [ - "src/**/*.worker.ts" - ] + "include": ["src/**/*.worker.ts"] } diff --git a/apps/core/webpack.config.ts b/apps/core/webpack.config.ts index fb54ba6..06af362 100644 --- a/apps/core/webpack.config.ts +++ b/apps/core/webpack.config.ts @@ -1,19 +1,21 @@ -import { CustomWebpackBrowserSchema, TargetOptions } from '@angular-builders/custom-webpack'; +import { + CustomWebpackBrowserSchema, + TargetOptions, +} from '@angular-builders/custom-webpack'; import * as webpack from 'webpack'; - export default ( config: webpack.Configuration, options: CustomWebpackBrowserSchema, targetOptions: TargetOptions -)=>{ +) => { config.plugins?.push( new webpack.DefinePlugin({ - 'COMEN_ENVIRONMENT': `"${process.env.COMEN_ENVIRONMENT ?? ''}"` + COMEN_ENVIRONMENT: `"${process.env.COMEN_ENVIRONMENT ?? ''}"`, }) ); config.resolve['fallback'] = { - "crypto": false + crypto: false, }; return config; -} \ No newline at end of file +}; diff --git a/apps/electron-app/package.json b/apps/electron-app/package.json index 0843be9..b25fcb1 100644 --- a/apps/electron-app/package.json +++ b/apps/electron-app/package.json @@ -23,6 +23,6 @@ "rxjs": "~6.5.5" }, "devDependencies": { - "electron":"" + "electron": "" } -} \ No newline at end of file +} diff --git a/apps/electron-app/src/app/options/maker.options.json b/apps/electron-app/src/app/options/maker.options.json index 68de463..b84f94a 100644 --- a/apps/electron-app/src/app/options/maker.options.json +++ b/apps/electron-app/src/app/options/maker.options.json @@ -1,18 +1,16 @@ { "$schema": "../../../../../node_modules/nx-electron/src/validation/maker.schema.json", "productName": "Comen", - "appId":"app.comen", + "appId": "app.comen", "copyright": "Copyright © 2020 ${author}", "icon": "assets/icon.png", - "directories":{ + "directories": { "app": "dist/apps/electron-app", "buildResources": "dist/apps/electron-app" }, - "win":{ + "win": { "icon": "assets/icon.png", - "target": [ - "portable" - ], + "target": ["portable"], "artifactName": "${productName}.${ext}" }, "nsis": { @@ -21,12 +19,14 @@ "allowElevation": true, "allowToChangeInstallationDirectory": true }, - "mac":{ + "mac": { "icon": "assets/icon.png" }, - "publish": [{ - "provider": "github", - "owner": "3Shain", - "repo": "Comen" - }] + "publish": [ + { + "provider": "github", + "owner": "3Shain", + "repo": "Comen" + } + ] } diff --git a/apps/electron-app/webpack.config.js b/apps/electron-app/webpack.config.js index b582f3d..6b70f1c 100644 --- a/apps/electron-app/webpack.config.js +++ b/apps/electron-app/webpack.config.js @@ -16,7 +16,12 @@ module.exports = (config, context) => { // Install additional plugins config.plugins = config.plugins || []; - config.plugins.push(...extractRelevantNodeModules(outputPath, require(path.resolve(context.options.sourceRoot, "..", "package.json")))); + config.plugins.push( + ...extractRelevantNodeModules( + outputPath, + require(path.resolve(context.options.sourceRoot, '..', 'package.json')) + ) + ); return config; }; @@ -35,7 +40,11 @@ module.exports = (config, context) => { * @returns {Array} An array of Webpack plugins */ function extractRelevantNodeModules(outputPath, basePackageJson) { - return [copyLockFile(outputPath), generatePackageJson(basePackageJson), new CleanWebpackPlugin()]; + return [ + copyLockFile(outputPath), + generatePackageJson(basePackageJson), + new CleanWebpackPlugin(), + ]; } /** @@ -47,7 +56,12 @@ function extractRelevantNodeModules(outputPath, basePackageJson) { */ function copyLockFile(outputPath) { return new CopyPlugin({ - patterns: [{ from: 'package-lock.json', to: path.join(outputPath, 'package-lock.json') }] + patterns: [ + { + from: 'package-lock.json', + to: path.join(outputPath, 'package-lock.json'), + }, + ], }); } @@ -65,12 +79,12 @@ function generatePackageJson(basePackageJson) { }, {}); basePackageJson.dependencies = { ...dependencies, - ...basePackageJson.dependencies - } + ...basePackageJson.dependencies, + }; delete basePackageJson.dependencies.electron; const pathToPackageJson = path.join(__dirname, 'package.json'); return new GeneratePackageJsonPlugin(basePackageJson, { sourcePackageFilenames: [pathToPackageJson], - forceWebpackVersion: 'webpack4' + forceWebpackVersion: 'webpack4', }); -} \ No newline at end of file +} diff --git a/apps/node-backend/package.json b/apps/node-backend/package.json index 07956d6..4701d1c 100644 --- a/apps/node-backend/package.json +++ b/apps/node-backend/package.json @@ -11,7 +11,14 @@ "name": "3Shain" }, "description": "Comment box rendered in html5 for live stream", - "keywords": ["bilibili","acfun","youtube","livechat","comen","comment"], + "keywords": [ + "bilibili", + "acfun", + "youtube", + "livechat", + "comen", + "comment" + ], "dependencies": { "@nestjs/common": "^7.0.0", "@nestjs/core": "^7.0.0", @@ -23,4 +30,4 @@ "rxjs": "~6.5.5", "tslib": "^2.0.0" } -} \ No newline at end of file +} diff --git a/apps/node-backend/src/main.ts b/apps/node-backend/src/main.ts index dc4638d..3a6d881 100644 --- a/apps/node-backend/src/main.ts +++ b/apps/node-backend/src/main.ts @@ -3,6 +3,6 @@ import { environment } from './environments/environment'; import { join, resolve } from 'path'; bootstrapBackendCore({ - dev: !environment.production, - frontendPath: join(resolve(__dirname), 'frontend') -}).catch(console.error); \ No newline at end of file + dev: !environment.production, + frontendPath: join(resolve(__dirname), 'frontend'), +}).catch(console.error); diff --git a/decorate-angular-cli.js b/decorate-angular-cli.js index bc81a83..5be540e 100644 --- a/decorate-angular-cli.js +++ b/decorate-angular-cli.js @@ -29,7 +29,9 @@ let output; try { output = require('@nrwl/workspace').output; } catch (e) { - console.warn('Angular CLI could not be decorated to enable computation caching. Please ensure @nrwl/workspace is installed.'); + console.warn( + 'Angular CLI could not be decorated to enable computation caching. Please ensure @nrwl/workspace is installed.' + ); process.exit(0); } @@ -46,16 +48,20 @@ function symlinkNgCLItoNxCLI() { * This is the most reliable way to create symlink-like behavior on Windows. * Such that it works in all shells and works with npx. */ - ['', '.cmd', '.ps1'].forEach(ext => { - if (fs.existsSync(nxPath + ext)) fs.writeFileSync(ngPath + ext, fs.readFileSync(nxPath + ext)); + ['', '.cmd', '.ps1'].forEach((ext) => { + if (fs.existsSync(nxPath + ext)) + fs.writeFileSync(ngPath + ext, fs.readFileSync(nxPath + ext)); }); } else { // If unix-based, symlink cp.execSync(`ln -sf ./nx ${ngPath}`); } - } - catch(e) { - output.error({ title: 'Unable to create a symlink from the Angular CLI to the Nx CLI:' + e.message }); + } catch (e) { + output.error({ + title: + 'Unable to create a symlink from the Angular CLI to the Nx CLI:' + + e.message, + }); throw e; } } @@ -63,7 +69,11 @@ function symlinkNgCLItoNxCLI() { try { symlinkNgCLItoNxCLI(); require('@nrwl/cli/lib/decorate-cli').decorateCli(); - output.log({ title: 'Angular CLI has been decorated to enable computation caching.' }); -} catch(e) { - output.error({ title: 'Decoration of the Angular CLI did not complete successfully' }); + output.log({ + title: 'Angular CLI has been decorated to enable computation caching.', + }); +} catch (e) { + output.error({ + title: 'Decoration of the Angular CLI did not complete successfully', + }); } diff --git a/libs/backend-core/src/index.ts b/libs/backend-core/src/index.ts index 002d115..ffd7ea0 100644 --- a/libs/backend-core/src/index.ts +++ b/libs/backend-core/src/index.ts @@ -1 +1 @@ -export * from './lib/entry'; \ No newline at end of file +export * from './lib/entry'; diff --git a/libs/backend-core/src/lib/backend-core.module.ts b/libs/backend-core/src/lib/backend-core.module.ts index 85ebbca..0bd2019 100644 --- a/libs/backend-core/src/lib/backend-core.module.ts +++ b/libs/backend-core/src/lib/backend-core.module.ts @@ -1,4 +1,9 @@ -import { MiddlewareConsumer, Module, NestModule, RequestMethod } from '@nestjs/common'; +import { + MiddlewareConsumer, + Module, + NestModule, + RequestMethod, +} from '@nestjs/common'; import { BilibiliController } from './controllers/bilibili.controller'; import { AcfunController } from './controllers/acfun.controller'; @@ -9,17 +14,13 @@ import { AddonProxyMiddleware } from './middlewares/addon-proxy.middleware'; @Module({ controllers: [AcfunController, BilibiliController, AddonController], - providers: [ - BilibiliUserService, AddonService - ], + providers: [BilibiliUserService, AddonService], }) export class BackendCoreModule implements NestModule { configure(consumer: MiddlewareConsumer) { - consumer - .apply(AddonProxyMiddleware) - .forRoutes({ - path: '*', - method: RequestMethod.ALL - }); + consumer.apply(AddonProxyMiddleware).forRoutes({ + path: '*', + method: RequestMethod.ALL, + }); } } diff --git a/libs/backend-core/src/lib/controllers/acfun.controller.ts b/libs/backend-core/src/lib/controllers/acfun.controller.ts index 5037994..211b563 100644 --- a/libs/backend-core/src/lib/controllers/acfun.controller.ts +++ b/libs/backend-core/src/lib/controllers/acfun.controller.ts @@ -1,13 +1,14 @@ -import { Controller, Get, ParseIntPipe, Query, Res } from "@nestjs/common"; -import { Response } from "express"; +import { Controller, Get, ParseIntPipe, Query, Res } from '@nestjs/common'; +import { Response } from 'express'; import { getAcfunRoomInfo } from 'isomorphic-danmaku-server'; @Controller('api/acfun') export class AcfunController { - - @Get('getRoomInfo') - async getRoomInfo(@Query('roomid', ParseIntPipe) roomid: number, - @Res() res: Response) { - return res.json(await getAcfunRoomInfo(roomid)); - } -} \ No newline at end of file + @Get('getRoomInfo') + async getRoomInfo( + @Query('roomid', ParseIntPipe) roomid: number, + @Res() res: Response + ) { + return res.json(await getAcfunRoomInfo(roomid)); + } +} diff --git a/libs/backend-core/src/lib/controllers/addon.controller.ts b/libs/backend-core/src/lib/controllers/addon.controller.ts index 51e42da..71a49e5 100644 --- a/libs/backend-core/src/lib/controllers/addon.controller.ts +++ b/libs/backend-core/src/lib/controllers/addon.controller.ts @@ -1,10 +1,8 @@ -import { Controller, Get, ParseIntPipe, Query, Res } from "@nestjs/common"; -import { Response } from "express"; -import { take } from "rxjs/operators"; +import { Controller, Get, ParseIntPipe, Query, Res } from '@nestjs/common'; +import { Response } from 'express'; +import { take } from 'rxjs/operators'; @Controller('api/addon') export class AddonController { - - constructor() { } - -} \ No newline at end of file + constructor() {} +} diff --git a/libs/backend-core/src/lib/controllers/bilibili.controller.ts b/libs/backend-core/src/lib/controllers/bilibili.controller.ts index d4278f9..4597962 100644 --- a/libs/backend-core/src/lib/controllers/bilibili.controller.ts +++ b/libs/backend-core/src/lib/controllers/bilibili.controller.ts @@ -5,27 +5,28 @@ import { getBilibiliRoomInfo } from 'isomorphic-danmaku-server'; @Controller('api/bili') export class BilibiliController { - constructor(private bilibiliUser: BilibiliUserService) { + constructor(private bilibiliUser: BilibiliUserService) {} - } - - @Get('getRoomInfo') - async getRoomInfo(@Query('roomid', ParseIntPipe) roomid: number) { - return await getBilibiliRoomInfo(roomid, { - fetchGift: true, - fetchHistoryDanmaku: false - }); - } + @Get('getRoomInfo') + async getRoomInfo(@Query('roomid', ParseIntPipe) roomid: number) { + return await getBilibiliRoomInfo(roomid, { + fetchGift: true, + fetchHistoryDanmaku: false, + }); + } - @Get('getAvatar') - async getAvatar(@Query('uid', ParseIntPipe) uid: number, @Res() resp: Response) { - // cache - const cached = await this.bilibiliUser.getUserInfoFromCache(uid); - if (!cached.temp) { - resp.setHeader("Cache-Control", `public,max-age=${3 * 24 * 60 * 60}`); - } - return resp.json({ - url: cached.face - }); + @Get('getAvatar') + async getAvatar( + @Query('uid', ParseIntPipe) uid: number, + @Res() resp: Response + ) { + // cache + const cached = await this.bilibiliUser.getUserInfoFromCache(uid); + if (!cached.temp) { + resp.setHeader('Cache-Control', `public,max-age=${3 * 24 * 60 * 60}`); } -} \ No newline at end of file + return resp.json({ + url: cached.face, + }); + } +} diff --git a/libs/backend-core/src/lib/entry.ts b/libs/backend-core/src/lib/entry.ts index d3b3675..f342451 100644 --- a/libs/backend-core/src/lib/entry.ts +++ b/libs/backend-core/src/lib/entry.ts @@ -50,8 +50,8 @@ function initModuleDependencies(options: ComenBackendOptions) { }, }), InjectionModule.inject({ - COMEN_DEVMODE: options.dev - }) + COMEN_DEVMODE: options.dev, + }), ]; if (!options.dev) { modules.push( @@ -67,19 +67,18 @@ function initModuleDependencies(options: ComenBackendOptions) { Reflect.defineMetadata('imports', modules, BackendCoreModule); } - export class InjectionModule { - static inject(object:Record):DynamicModule { - const providers = Object.entries(object).map(([key,value])=>{ - return { - provide: key, - useValue: value - } - }); - return { - module: InjectionModule, - providers, - exports: providers - } - } -} \ No newline at end of file + static inject(object: Record): DynamicModule { + const providers = Object.entries(object).map(([key, value]) => { + return { + provide: key, + useValue: value, + }; + }); + return { + module: InjectionModule, + providers, + exports: providers, + }; + } +} diff --git a/libs/backend-core/src/lib/services/addon.service.ts b/libs/backend-core/src/lib/services/addon.service.ts index 26a73a1..8e65a2d 100644 --- a/libs/backend-core/src/lib/services/addon.service.ts +++ b/libs/backend-core/src/lib/services/addon.service.ts @@ -1,125 +1,126 @@ -import { Injectable } from "@nestjs/common"; +import { Injectable } from '@nestjs/common'; import * as os from 'os'; -import { resolve } from "path"; -import { Subject } from "rxjs"; +import { resolve } from 'path'; +import { Subject } from 'rxjs'; import { exhaustMap, shareReplay, startWith } from 'rxjs/operators'; import * as tar from 'tar'; import * as lock from 'proper-lockfile'; import * as fse from 'fs-extra'; export interface ComenAddonInfo { + name: string; + displayName: string; + icon: string; + version: string; + overlays: { name: string; displayName: string; icon: string; - version: string; - overlays: { - name: string; - displayName: string; - icon: string; - load: string; - }[], - sources: { - name: string; - displayName: string; - icon: string; - load: string; - }[] + load: string; + }[]; + sources: { + name: string; + displayName: string; + icon: string; + load: string; + }[]; } @Injectable() export class AddonService { + workDir = resolve(os.homedir(), '.comen'); + addonsDir = resolve(this.workDir, 'addons'); - workDir = resolve(os.homedir(), '.comen'); - addonsDir = resolve(this.workDir, 'addons'); - - constructor() { - - } - - updatePluginInfo$ = new Subject(); - pluginInfo$ = this.updatePluginInfo$.pipe( - startWith(void 0), - exhaustMap(async () => { - if (!fse.existsSync(this.workDir)) { - await fse.mkdir(this.workDir); - await fse.mkdir(this.addonsDir); - } - // block : - return fse.readdirSync(this.addonsDir).map( - d => { - return { - path: resolve(this.addonsDir,d), - state: fse.lstatSync(resolve(this.addonsDir,d)) - } - } - ).filter( - f => f.state.isDirectory() && fse.existsSync(resolve(f.path, "package.json")) - ).map(addonDir => { - return JSON.parse(fse.readFileSync(resolve(addonDir.path, "package.json"), "utf-8")) as ComenAddonPackageJson; - }).filter(pkg => pkg.comen != undefined) - .map(pkg => { - return { - name: pkg.name, - displayName: pkg.comen.displayName, - overlays: pkg.comen.overlays, - sources: pkg.comen.sources, - version: pkg.version, - icon: pkg.icon - } as ComenAddonInfo; - }); - }), - shareReplay(1) - ); + constructor() {} - isInAddonWhitelist(ipOrDomain: string) { - - } + updatePluginInfo$ = new Subject(); + pluginInfo$ = this.updatePluginInfo$.pipe( + startWith(void 0), + exhaustMap(async () => { + if (!fse.existsSync(this.workDir)) { + await fse.mkdir(this.workDir); + await fse.mkdir(this.addonsDir); + } + // block : + return fse + .readdirSync(this.addonsDir) + .map((d) => { + return { + path: resolve(this.addonsDir, d), + state: fse.lstatSync(resolve(this.addonsDir, d)), + }; + }) + .filter( + (f) => + f.state.isDirectory() && + fse.existsSync(resolve(f.path, 'package.json')) + ) + .map((addonDir) => { + return JSON.parse( + fse.readFileSync(resolve(addonDir.path, 'package.json'), 'utf-8') + ) as ComenAddonPackageJson; + }) + .filter((pkg) => pkg.comen != undefined) + .map((pkg) => { + return { + name: pkg.name, + displayName: pkg.comen.displayName, + overlays: pkg.comen.overlays, + sources: pkg.comen.sources, + version: pkg.version, + icon: pkg.icon, + } as ComenAddonInfo; + }); + }), + shareReplay(1) + ); - async installAddon(tarFile: string) { - //lock - //download + isInAddonWhitelist(ipOrDomain: string) {} - //extract - await tar.extract({ - file: tarFile, - cwd: '', - strip: 1 - }); - // load - this.updatePluginInfo$.next(); - //unload - } + async installAddon(tarFile: string) { + //lock + //download - async uninstallAddon(name: string) { - //lock + //extract + await tar.extract({ + file: tarFile, + cwd: '', + strip: 1, + }); + // load + this.updatePluginInfo$.next(); + //unload + } - await fse.remove(resolve(this.addonsDir, name)); - this.updatePluginInfo$.next(); + async uninstallAddon(name: string) { + //lock - } + await fse.remove(resolve(this.addonsDir, name)); + this.updatePluginInfo$.next(); + } } interface ComenAddonPackageJson { + name: string; + version: string; + author: { name: string; - version: string; - author: { - name: string; - }; - icon?: string; - main?: string; - comen: { - displayName: string; - overlays?: { - name: string; - displayName: string; - icon?: string; - load?: string; - }[], - sources?: { - name: string; - displayName: string; - icon?: string; - load?: string; - }[] - } -} \ No newline at end of file + }; + icon?: string; + main?: string; + comen: { + displayName: string; + overlays?: { + name: string; + displayName: string; + icon?: string; + load?: string; + }[]; + sources?: { + name: string; + displayName: string; + icon?: string; + load?: string; + }[]; + }; +} diff --git a/libs/backend-core/src/lib/services/bili-user.service.ts b/libs/backend-core/src/lib/services/bili-user.service.ts index 05448f1..a9058b3 100644 --- a/libs/backend-core/src/lib/services/bili-user.service.ts +++ b/libs/backend-core/src/lib/services/bili-user.service.ts @@ -1,5 +1,5 @@ -import { CACHE_MANAGER, Inject, Injectable } from "@nestjs/common"; -import { Cache } from "cache-manager"; +import { CACHE_MANAGER, Inject, Injectable } from '@nestjs/common'; +import { Cache } from 'cache-manager'; import got from 'got'; const MINIMUM_FETCH_INTERVAL = 500; //ms @@ -8,127 +8,140 @@ const CACHE_TIME = 1.5 * REFRESH_TIME; //ms @Injectable() export class BilibiliUserService { - constructor(@Inject(CACHE_MANAGER) private cache: Cache) { } + constructor(@Inject(CACHE_MANAGER) private cache: Cache) {} - lastFetch: number = Date.now(); - fetchQueue: Set = new Set() - currentFetchJob: NodeJS.Timeout = null; + lastFetch: number = Date.now(); + fetchQueue: Set = new Set(); + currentFetchJob: NodeJS.Timeout = null; - interfaceUnlock = 0; + interfaceUnlock = 0; - // NB: current design is not for horizontal scale! SINGLE INSTANCE ONLY! - async fetchUserInfo(uid: number): Promise { - // determine fetch now or insert into batch - // eslint-disable-next-line - while (true) { - if (Date.now() - this.lastFetch < MINIMUM_FETCH_INTERVAL || this.interfaceUnlock > Date.now()) { - this.fetchQueue.add(uid); - if (this.currentFetchJob == null) { - this.currentFetchJob = setTimeout(async () => { - // this is a different context that fetchQueue is mutated. - const ids = [...this.fetchQueue].slice(0, this.fetchQueue.size > 20 ? 20 : this.fetchQueue.size); // maximum size? + // NB: current design is not for horizontal scale! SINGLE INSTANCE ONLY! + async fetchUserInfo(uid: number): Promise { + // determine fetch now or insert into batch + // eslint-disable-next-line + while (true) { + if ( + Date.now() - this.lastFetch < MINIMUM_FETCH_INTERVAL || + this.interfaceUnlock > Date.now() + ) { + this.fetchQueue.add(uid); + if (this.currentFetchJob == null) { + this.currentFetchJob = setTimeout(async () => { + // this is a different context that fetchQueue is mutated. + const ids = [...this.fetchQueue].slice( + 0, + this.fetchQueue.size > 20 ? 20 : this.fetchQueue.size + ); // maximum size? - try { - this.lastFetch = Date.now(); - const ret = (await got.get<{ - data: { - [key: string]: { - info: { - uid: number, - uname: string, - face: string - } - } - } - }>(`https://api.live.bilibili.com/user/v3/User/getMultiple?${ids.map(x => `uids[]=${x}`).join('&') - }&attributes[]=info`, { - headers: { - 'User-Agent': "" - }, - responseType: 'json' - })).body; - for (const uid in ret.data) { - const user = ret.data[uid]; - const obj: CachedBilibiliUserInfo = { - uid: user.info.uid, - face: user.info.face, - name: user.info.uname, - refresh_time: Date.now() + REFRESH_TIME, - } - this.fetchQueue.delete(obj.uid); - await this.cache.set(`BILI_USERINFO_${uid}`, obj, { - ttl: CACHE_TIME / 1000 - }); - } - } - catch (e) { - console.error(e); - } - finally { - this.currentFetchJob = null; - } - - }, this.lastFetch + MINIMUM_FETCH_INTERVAL - Date.now()); - } - const obj: CachedBilibiliUserInfo = { - uid: uid, - temp: true, - face: "http://static.hdslb.com/images/member/noface.gif", // normal avatar - } - return obj; - } else { - this.lastFetch = Date.now(); - try { - const ret = (await got.get<{ - data: { - name: string; - face: string; - } - }>(`https://api.bilibili.com/x/space/acc/info?mid=${uid}`, { - headers: { - // 'User-Agent': "" - }, - responseType: 'json' - })).body; - - const obj: CachedBilibiliUserInfo = { - uid: uid, - face: ret.data.face, - name: ret.data.name, - refresh_time: Date.now() + REFRESH_TIME, + try { + this.lastFetch = Date.now(); + const ret = ( + await got.get<{ + data: { + [key: string]: { + info: { + uid: number; + uname: string; + face: string; + }; }; - await this.cache.set(`BILI_USERINFO_${uid}`, obj, { - ttl: CACHE_TIME / 1000 - }); - return obj; - } catch (e) { - this.interfaceUnlock = Date.now() + 10 * 60 * 1000; // 10 min - } + }; + }>( + `https://api.live.bilibili.com/user/v3/User/getMultiple?${ids + .map((x) => `uids[]=${x}`) + .join('&')}&attributes[]=info`, + { + headers: { + 'User-Agent': '', + }, + responseType: 'json', + } + ) + ).body; + for (const uid in ret.data) { + const user = ret.data[uid]; + const obj: CachedBilibiliUserInfo = { + uid: user.info.uid, + face: user.info.face, + name: user.info.uname, + refresh_time: Date.now() + REFRESH_TIME, + }; + this.fetchQueue.delete(obj.uid); + await this.cache.set(`BILI_USERINFO_${uid}`, obj, { + ttl: CACHE_TIME / 1000, + }); + } + } catch (e) { + console.error(e); + } finally { + this.currentFetchJob = null; } + }, this.lastFetch + MINIMUM_FETCH_INTERVAL - Date.now()); } - } + const obj: CachedBilibiliUserInfo = { + uid: uid, + temp: true, + face: 'http://static.hdslb.com/images/member/noface.gif', // normal avatar + }; + return obj; + } else { + this.lastFetch = Date.now(); + try { + const ret = ( + await got.get<{ + data: { + name: string; + face: string; + }; + }>(`https://api.bilibili.com/x/space/acc/info?mid=${uid}`, { + headers: { + // 'User-Agent': "" + }, + responseType: 'json', + }) + ).body; - async getUserInfoFromCache(uid: number): Promise { - const info = await this.cache.get(`BILI_USERINFO_${uid}`) as CachedBilibiliUserInfo | null; - if (info) { - if (info.refresh_time < Date.now()) { - this.fetchUserInfo(uid); // fire and forgot - } - return info; - } else { - return await this.fetchUserInfo(uid); // fire and forgot + const obj: CachedBilibiliUserInfo = { + uid: uid, + face: ret.data.face, + name: ret.data.name, + refresh_time: Date.now() + REFRESH_TIME, + }; + await this.cache.set(`BILI_USERINFO_${uid}`, obj, { + ttl: CACHE_TIME / 1000, + }); + return obj; + } catch (e) { + this.interfaceUnlock = Date.now() + 10 * 60 * 1000; // 10 min } + } + } + } + + async getUserInfoFromCache(uid: number): Promise { + const info = (await this.cache.get( + `BILI_USERINFO_${uid}` + )) as CachedBilibiliUserInfo | null; + if (info) { + if (info.refresh_time < Date.now()) { + this.fetchUserInfo(uid); // fire and forgot + } + return info; + } else { + return await this.fetchUserInfo(uid); // fire and forgot } + } } export type CachedBilibiliUserInfo = { - uid: number; + uid: number; - name?: string; - face?: string; + name?: string; + face?: string; - // refresh time - refresh_time?: number; - // do not cache in browser - temp?: boolean; -} \ No newline at end of file + // refresh time + refresh_time?: number; + // do not cache in browser + temp?: boolean; +}; diff --git a/libs/common/package.json b/libs/common/package.json index 090ce5f..458a5cb 100644 --- a/libs/common/package.json +++ b/libs/common/package.json @@ -2,4 +2,4 @@ "name": "@comen/common", "version": "0.0.1", "license": "MIT" -} \ No newline at end of file +} diff --git a/libs/common/src/index.ts b/libs/common/src/index.ts index 154cdf8..270bee8 100644 --- a/libs/common/src/index.ts +++ b/libs/common/src/index.ts @@ -1,4 +1,4 @@ export * from './lib/message'; export * from './lib/config'; export * from './lib/variant'; -export * from './lib/comen'; \ No newline at end of file +export * from './lib/comen'; diff --git a/libs/common/src/lib/comen.ts b/libs/common/src/lib/comen.ts index 32d60dd..2af3ace 100644 --- a/libs/common/src/lib/comen.ts +++ b/libs/common/src/lib/comen.ts @@ -6,32 +6,32 @@ import { Message } from './message'; export type SafeAny = any; export type ComenAddonMetadata = { - name: string; - displayName: string; - editable: boolean; - description: string; - configuration: ComenAddonConfiguration; + name: string; + displayName: string; + editable: boolean; + description: string; + configuration: ComenAddonConfiguration; }; export interface ComenAddonInstance { - message(): Observable; - config(section: string): Observable; - variantPipe(section: string): Observable; - rootElement: SafeAny; + message(): Observable; + config(section: string): Observable; + variantPipe(section: string): Observable; + rootElement: SafeAny; } export type ComenOverlayEntry = (instance: ComenAddonInstance) => Function; declare global { - export function registerOverlay( - metadata: ComenAddonMetadata, - entry: ComenOverlayEntry - ): void; + export function registerOverlay( + metadata: ComenAddonMetadata, + entry: ComenOverlayEntry + ): void; } export abstract class ComenEnvironmentHost { - abstract message(): Observable; - abstract config(section: string): Observable; - abstract variantPipe(section: string): Observable; - abstract assetUrl(id: string): string; + abstract message(): Observable; + abstract config(section: string): Observable; + abstract variantPipe(section: string): Observable; + abstract assetUrl(id: string): string; } diff --git a/libs/common/src/lib/config.ts b/libs/common/src/lib/config.ts index d9fd90c..4b57a95 100644 --- a/libs/common/src/lib/config.ts +++ b/libs/common/src/lib/config.ts @@ -1,91 +1,91 @@ import { SafeAny } from './comen'; export interface PropertySchema { - type: - | 'number' - | 'text' - | 'color' - | 'background' - | 'margin' - | 'border' - | 'range' - | 'switch' - | 'font' - | 'outline' - | 'radius' - | 'shadow' - | 'list'; - displayName: string; - 'x-icon'?: string | any; - defaultValue: SafeAny; - dependsOn?: string[]; - exclusive?: string[]; - validation?: SafeAny; - extra?: SafeAny; + type: + | 'number' + | 'text' + | 'color' + | 'background' + | 'margin' + | 'border' + | 'range' + | 'switch' + | 'font' + | 'outline' + | 'radius' + | 'shadow' + | 'list'; + displayName: string; + 'x-icon'?: string | any; + defaultValue: SafeAny; + dependsOn?: string[]; + exclusive?: string[]; + validation?: SafeAny; + extra?: SafeAny; } export interface ConfigurationSection { - displayName: string; - previewSelector?: string; - level: number; // use flat layout other than object. - 'x-icon'?: string | any; - properties: { - [key: string]: PropertySchema; - }; - defaultValue: SafeAny; - variantProperties?: SafeAny[]; + displayName: string; + previewSelector?: string; + level: number; // use flat layout other than object. + 'x-icon'?: string | any; + properties: { + [key: string]: PropertySchema; + }; + defaultValue: SafeAny; + variantProperties?: SafeAny[]; } export interface ComenAddonConfiguration { - displayName: string; - preset?: { - viewport?: { - width: number; - height: number; - }; - }; - sections: { - [key: string]: ConfigurationSection; + displayName: string; + preset?: { + viewport?: { + width: number; + height: number; }; + }; + sections: { + [key: string]: ConfigurationSection; + }; } export namespace ComenControlTypes { - export interface Font { - font: string; - size: number; - weight: string; - space: number | null; - lineHeight: number | null; - textAlign: 'left' | 'center' | 'right'; - italic: boolean; - underline: boolean; - strikeThrough: boolean; - } + export interface Font { + font: string; + size: number; + weight: string; + space: number | null; + lineHeight: number | null; + textAlign: 'left' | 'center' | 'right'; + italic: boolean; + underline: boolean; + strikeThrough: boolean; + } - export const DEFAULT_FONT: Font = { - font: '', - size: 14, - weight: 'normal', - space: null, - lineHeight: null, - textAlign: 'left', - italic: false, - underline: false, - strikeThrough: false, - }; + export const DEFAULT_FONT: Font = { + font: '', + size: 14, + weight: 'normal', + space: null, + lineHeight: null, + textAlign: 'left', + italic: false, + underline: false, + strikeThrough: false, + }; - export interface Outline { - width: number; - color: string; - } + export interface Outline { + width: number; + color: string; + } - export interface BoxShadow { - x: number; - y: number; - } + export interface BoxShadow { + x: number; + y: number; + } - export type Margin = [number, number, number, number]; - export type Padding = [number, number, number, number]; + export type Margin = [number, number, number, number]; + export type Padding = [number, number, number, number]; - export interface Radius {} + export interface Radius {} } diff --git a/libs/common/src/lib/filter.ts b/libs/common/src/lib/filter.ts index 6d9dcac..519d523 100644 --- a/libs/common/src/lib/filter.ts +++ b/libs/common/src/lib/filter.ts @@ -1,4 +1,4 @@ -import { Message } from "./message"; +import { Message } from './message'; -export type FilterNextFunction = (msg:Message)=>unknown; -export type FilterFunction = (next:FilterNextFunction)=>FilterNextFunction; \ No newline at end of file +export type FilterNextFunction = (msg: Message) => unknown; +export type FilterFunction = (next: FilterNextFunction) => FilterNextFunction; diff --git a/libs/common/src/lib/message.ts b/libs/common/src/lib/message.ts index bc0da7a..d5f4bce 100644 --- a/libs/common/src/lib/message.ts +++ b/libs/common/src/lib/message.ts @@ -1,128 +1,146 @@ - type BadgeInfo = { - type: string; - aria_label?: string; - badge: string | Blob; -} - -type RichTextNode = { - type: 'text'; - content: string; -} | { - type: 'image'; - url: string; - width?: number; - height?: number; - style?: string; -} | { - type: 'emoji'; - url: string; -} + type: string; + aria_label?: string; + badge: string | Blob; +}; + +type RichTextNode = + | { + type: 'text'; + content: string; + } + | { + type: 'image'; + url: string; + width?: number; + height?: number; + style?: string; + } + | { + type: 'emoji'; + url: string; + }; type RichText = { - nodes: RichTextNode[]; -} + nodes: RichTextNode[]; +}; type PlatformBase = { - platformUserId: number; - platformUserLevel: number; - platformUserExtra: unknown; -} + platformUserId: number; + platformUserLevel: number; + platformUserExtra: unknown; +}; type BaseTextMessage = { - avatar: string; - username: string; - - // extensions - badges: BadgeInfo[]; - usertype: number; // 0 normal 1 member 2 mod 3 both (bit) - platformUserId: number; - platformUserLevel: number; - platformUserExtra: unknown; -} + avatar: string; + username: string; + + // extensions + badges: BadgeInfo[]; + usertype: number; // 0 normal 1 member 2 mod 3 both (bit) + platformUserId: number; + platformUserLevel: number; + platformUserExtra: unknown; +}; type TextMessage = { - type: 'text'; - content: string; + type: 'text'; + content: string; } & BaseTextMessage; type RichTextMessage = { - type: 'richtext'; - richtext: RichText; + type: 'richtext'; + richtext: RichText; } & BaseTextMessage; type PaidMessage = { - type: 'paid'; - content: string; - avatar: string | Blob; - username: string; - itemInfo: string; // e.g.: $500 - price: number; - - // extension - platformUserId: number; -} + type: 'paid'; + content: string; + avatar: string | Blob; + username: string; + itemInfo: string; // e.g.: $500 + price: number; + + // extension + platformUserId: number; +}; type MemberMessage = { - type: 'member'; - avatar: string | Blob; - username: string; - itemInfo: string; // e.g.: Welcome to ... + type: 'member'; + avatar: string | Blob; + username: string; + itemInfo: string; // e.g.: Welcome to ... - price: number; + price: number; - //extension - platformMemberType: number; - platformUserId: number; - platformPrice: number; -} + //extension + platformMemberType: number; + platformUserId: number; + platformPrice: number; +}; type StickerMessage = { - type: 'sticker'; - avatar: string | Blob; - username: string; - sticker: string | Blob; - itemInfo: string; // name: - price: number; - amount: number; - - //extension - platformUserId: number; - // 非真实价值 - platformPrice: number; -} + type: 'sticker'; + avatar: string | Blob; + username: string; + sticker: string | Blob; + itemInfo: string; // name: + price: number; + amount: number; + + //extension + platformUserId: number; + // 非真实价值 + platformPrice: number; +}; // Special type FoldMessage = { - type: 'fold'; - targetMessage: TextMessage; -} + type: 'fold'; + targetMessage: TextMessage; +}; type BlankMessage = { - type: 'blank'; -} + type: 'blank'; +}; type SystemMessage = { - type: 'system'; - // eslint-disable-next-line - data: any; -} + type: 'system'; + // eslint-disable-next-line + data: any; +}; type LiveStartMessage = { - type: 'livestart'; -} + type: 'livestart'; +}; type LiveStopMessage = { - type: 'livestop'; -} - + type: 'livestop'; +}; -type Message = TextMessage | PaidMessage | MemberMessage | StickerMessage - | FoldMessage | RichTextMessage | SystemMessage | LiveStartMessage | LiveStopMessage | BlankMessage; +type Message = + | TextMessage + | PaidMessage + | MemberMessage + | StickerMessage + | FoldMessage + | RichTextMessage + | SystemMessage + | LiveStartMessage + | LiveStopMessage + | BlankMessage; export { - TextMessage, PaidMessage, MemberMessage, StickerMessage, - Message, RichTextMessage, BlankMessage, SystemMessage, LiveStartMessage, LiveStopMessage + TextMessage, + PaidMessage, + MemberMessage, + StickerMessage, + Message, + RichTextMessage, + BlankMessage, + SystemMessage, + LiveStartMessage, + LiveStopMessage, }; export { RichText, RichTextNode }; diff --git a/libs/common/src/lib/variant.ts b/libs/common/src/lib/variant.ts index 2095528..4e10998 100644 --- a/libs/common/src/lib/variant.ts +++ b/libs/common/src/lib/variant.ts @@ -1,110 +1,120 @@ -import { SafeAny } from "./comen"; +import { SafeAny } from './comen'; export class VariantProperty { - type: "number" | "text" | "boolean"; - displayName: string; - name: string; - "x-icon"?: string; - defaultValue?: SafeAny; - // enum extra + type: 'number' | 'text' | 'boolean'; + displayName: string; + name: string; + 'x-icon'?: string; + defaultValue?: SafeAny; + // enum extra } export class VariantCompareMethod { - displayName: string; - name: string; - targetType: "number" | "text" | "boolean"; + displayName: string; + name: string; + targetType: 'number' | 'text' | 'boolean'; } export class VariantCondition { - property: string; - method: string; - target: SafeAny; + property: string; + method: string; + target: SafeAny; } export const TEXT_MESSAGE_VARIANTS = [ - { - type: "string", - displayName: "用户名", - name: "username" - } -] + { + type: 'string', + displayName: '用户名', + name: 'username', + }, +]; export const TEXT_COMPARE_METHOD = [ - { - displayName: "包含", - name: "tct", - targetType: "text" - }, - { - displayName: "不包含", - name: "tnct", - targetType: "text" - }, - { - displayName: "等于", - name: "teq", - targetType: "text" - } -] + { + displayName: '包含', + name: 'tct', + targetType: 'text', + }, + { + displayName: '不包含', + name: 'tnct', + targetType: 'text', + }, + { + displayName: '等于', + name: 'teq', + targetType: 'text', + }, +]; export const NUMBER_COMPARE_METHOD = [ - { - displayName: "大于", - name: "gt", - targetType: "number" - }, { - displayName: "大于等于", - name: "gte", - targetType: "number" - }, { - displayName: "小于", - name: "lt", - targetType: "number" - }, { - displayName: "小于等于", - name: "lte", - targetType: "number" - }, { - displayName: "等于", - name: "eq", - targetType: "number" - }, { - displayName: "不等于", - name: "neq", - targetType: "number" - } -] + { + displayName: '大于', + name: 'gt', + targetType: 'number', + }, + { + displayName: '大于等于', + name: 'gte', + targetType: 'number', + }, + { + displayName: '小于', + name: 'lt', + targetType: 'number', + }, + { + displayName: '小于等于', + name: 'lte', + targetType: 'number', + }, + { + displayName: '等于', + name: 'eq', + targetType: 'number', + }, + { + displayName: '不等于', + name: 'neq', + targetType: 'number', + }, +]; export const BOOL_COMPARE_METHOD = [ - { - displayName: "", - name: "isTrue", - targetType: "boolean" - } -] + { + displayName: '', + name: 'isTrue', + targetType: 'boolean', + }, +]; export const ALL_COMPARE_METHOD = [ - ...TEXT_COMPARE_METHOD, - ...NUMBER_COMPARE_METHOD, - ...BOOL_COMPARE_METHOD -] + ...TEXT_COMPARE_METHOD, + ...NUMBER_COMPARE_METHOD, + ...BOOL_COMPARE_METHOD, +]; /** infact you can edit property here */ export const COMPARE_METHOD_MAP = { - "text": TEXT_COMPARE_METHOD, - "number": NUMBER_COMPARE_METHOD, - "boolean": BOOL_COMPARE_METHOD -} + text: TEXT_COMPARE_METHOD, + number: NUMBER_COMPARE_METHOD, + boolean: BOOL_COMPARE_METHOD, +}; export const COMPARE_METHOD_DEFAULT_VALUE = { - "text": "", - "number": 0, - "boolean": true -} + text: '', + number: 0, + boolean: true, +}; -export function formatConditionString(conditon: VariantCondition, schemas: VariantProperty[]) { - const compareMethod = ALL_COMPARE_METHOD.find(x => x.name == conditon.method); - const schema = schemas.find(x => x.name == conditon.property); - // assert exist - return `${schema.displayName}${compareMethod.displayName}${conditon.target}`; -} \ No newline at end of file +export function formatConditionString( + conditon: VariantCondition, + schemas: VariantProperty[] +) { + const compareMethod = ALL_COMPARE_METHOD.find( + (x) => x.name == conditon.method + ); + const schema = schemas.find((x) => x.name == conditon.property); + // assert exist + return `${schema.displayName}${compareMethod.displayName}${conditon.target}`; +} diff --git a/libs/delta/src/index.ts b/libs/delta/src/index.ts index 1d9de48..a8149eb 100644 --- a/libs/delta/src/index.ts +++ b/libs/delta/src/index.ts @@ -3,29 +3,29 @@ import { stream } from '@kairo/concurrency'; import { EVENT_MESSAGE } from './lib/tokens'; const DELTA_METADATA: ComenAddonMetadata = { - name: 'delta', - displayName: '评论栏-δ型', - description: '高度自定义评论栏', - editable: true, - configuration: { - displayName: 'delta', - sections: {}, - }, + name: 'delta', + displayName: '评论栏-δ型', + description: '高度自定义评论栏', + editable: true, + configuration: { + displayName: 'delta', + sections: {}, + }, }; export async function preloadDelta() { - const setup = await import('./lib/delta').then((x) => x.setupDelta); - registerOverlay(DELTA_METADATA, (instance) => { - const [messages, emitMessage] = stream(); - const subscription = instance.message().subscribe(emitMessage); - const dispose = setup(instance.rootElement, () => { - return { - [EVENT_MESSAGE]: messages, - }; - }); - return () => { - subscription.unsubscribe(); - dispose(); - } + const setup = await import('./lib/delta').then((x) => x.setupDelta); + registerOverlay(DELTA_METADATA, (instance) => { + const [messages, emitMessage] = stream(); + const subscription = instance.message().subscribe(emitMessage); + const dispose = setup(instance.rootElement, () => { + return { + [EVENT_MESSAGE]: messages, + }; }); + return () => { + subscription.unsubscribe(); + dispose(); + }; + }); } diff --git a/libs/delta/src/lib/membership.tsx b/libs/delta/src/lib/membership.tsx index dd723f9..2980a08 100644 --- a/libs/delta/src/lib/membership.tsx +++ b/libs/delta/src/lib/membership.tsx @@ -3,11 +3,11 @@ import { withKairo } from '@kairo/react'; import React from 'react'; interface MembershipProps { - content: string; - username: string; - avatar: string; + content: string; + username: string; + avatar: string; } export default withKairo(() => { - return () =>
; + return () =>
; }); diff --git a/libs/delta/src/lib/sticker.tsx b/libs/delta/src/lib/sticker.tsx index 674d565..1adfff8 100644 --- a/libs/delta/src/lib/sticker.tsx +++ b/libs/delta/src/lib/sticker.tsx @@ -3,11 +3,11 @@ import { withKairo } from '@kairo/react'; import React from 'react'; interface StickerProps { - content: string; - username: string; - avatar: string; + content: string; + username: string; + avatar: string; } export default withKairo(() => { - return () =>
; + return () =>
; }); diff --git a/libs/delta/src/lib/styles.scss b/libs/delta/src/lib/styles.scss index 0f10fca..3249d2b 100644 --- a/libs/delta/src/lib/styles.scss +++ b/libs/delta/src/lib/styles.scss @@ -1,21 +1,20 @@ delta-root { - - & > #scroller { - height: 100%; - width: 100%; - overflow: hidden; - & > #items { - & > #text-message { - display: grid; - grid-template-columns: min-content auto; - & > #avatar { - margin-right: 4px; - } - } + & > #scroller { + height: 100%; + width: 100%; + overflow: hidden; + & > #items { + & > #text-message { + display: grid; + grid-template-columns: min-content auto; + & > #avatar { + margin-right: 4px; } + } } + } } body { - margin: 0; + margin: 0; } diff --git a/libs/delta/src/lib/superchat.tsx b/libs/delta/src/lib/superchat.tsx index 8aedc86..8f53afd 100644 --- a/libs/delta/src/lib/superchat.tsx +++ b/libs/delta/src/lib/superchat.tsx @@ -3,11 +3,11 @@ import { withKairo } from '@kairo/react'; import React from 'react'; interface SuperchatProps { - content: string; - username: string; - avatar: string; + content: string; + username: string; + avatar: string; } export default withKairo(() => { - return () =>
; + return () =>
; }); diff --git a/libs/delta/src/lib/text.tsx b/libs/delta/src/lib/text.tsx index f7294a6..4646a48 100644 --- a/libs/delta/src/lib/text.tsx +++ b/libs/delta/src/lib/text.tsx @@ -1,21 +1,21 @@ import { RichText, TextMessage } from '@comen/common'; import React from 'react'; -export default ({avatar,username,content}:TextMessage) => ( -
-
-
- -
-
-
{username}
-
-
{content}
+export default ({ avatar, username, content }: TextMessage) => ( +
+
+
+ +
-) \ No newline at end of file +
{username}
+
+
{content}
+
+); diff --git a/libs/delta/src/lib/tokens.ts b/libs/delta/src/lib/tokens.ts index 5d9c7e6..b40833f 100644 --- a/libs/delta/src/lib/tokens.ts +++ b/libs/delta/src/lib/tokens.ts @@ -5,5 +5,5 @@ import { Identifier, injected } from 'kairo'; export const EVENT_MESSAGE = Identifier.of>('message'); export function readMessages() { - return injected(EVENT_MESSAGE); + return injected(EVENT_MESSAGE); } diff --git a/libs/delta/src/lib/view.tsx b/libs/delta/src/lib/view.tsx index 7123e5c..adc97d2 100644 --- a/libs/delta/src/lib/view.tsx +++ b/libs/delta/src/lib/view.tsx @@ -89,12 +89,7 @@ export default withKairo<{}>(() => { {$(renderList).map((message) => { switch (message.type) { case 'text': - return ( - - ); + return ; case 'member': return ( (() => { }); function useFastdom() { - const [measure, doMeasure] = stream(); - const [mutate, doMutate] = stream(); + const [measure, doMeasure] = stream(); + const [mutate, doMutate] = stream(); - effect(() => { - const rafCallback = () => { - doMeasure(); - doMutate(); - id = requestAnimationFrame(rafCallback); - }; - let id = requestAnimationFrame(rafCallback); - return () => cancelAnimationFrame(id); - }); - return { - measure, - mutate, + effect(() => { + const rafCallback = () => { + doMeasure(); + doMutate(); + id = requestAnimationFrame(rafCallback); }; + let id = requestAnimationFrame(rafCallback); + return () => cancelAnimationFrame(id); + }); + return { + measure, + mutate, + }; } diff --git a/libs/delta/src/shims.d.ts b/libs/delta/src/shims.d.ts index 93fbadf..997d84d 100644 --- a/libs/delta/src/shims.d.ts +++ b/libs/delta/src/shims.d.ts @@ -1,4 +1,4 @@ declare module '*.scss' { - const css: string; - export default css; -} \ No newline at end of file + const css: string; + export default css; +} diff --git a/libs/delta/tsconfig.lib.json b/libs/delta/tsconfig.lib.json index 1358e0e..65cb2a7 100644 --- a/libs/delta/tsconfig.lib.json +++ b/libs/delta/tsconfig.lib.json @@ -6,6 +6,6 @@ "declaration": true, "types": ["node"] }, - "exclude": ["**/*.spec.ts","**/*.spec.tsx"], - "include": ["**/*.ts","**/*.tsx"] + "exclude": ["**/*.spec.ts", "**/*.spec.tsx"], + "include": ["**/*.ts", "**/*.tsx"] } diff --git a/libs/editor/src/index.ts b/libs/editor/src/index.ts index 621c96a..0a8d0d6 100644 --- a/libs/editor/src/index.ts +++ b/libs/editor/src/index.ts @@ -1,4 +1,4 @@ export * from './lib/editor.module'; export * from './lib/editor.component'; export * from './lib/providers'; -export * from './lib/animations'; \ No newline at end of file +export * from './lib/animations'; diff --git a/libs/editor/src/lib/animations.ts b/libs/editor/src/lib/animations.ts index 1ae8280..3f9c38b 100644 --- a/libs/editor/src/lib/animations.ts +++ b/libs/editor/src/lib/animations.ts @@ -1,47 +1,56 @@ -import { animate, AnimationTriggerMetadata, style, transition, trigger } from '@angular/animations'; +import { + animate, + AnimationTriggerMetadata, + style, + transition, + trigger, +} from '@angular/animations'; export class AnimationDuration { - static SLOW = '0.3s'; // Modal - static BASE = '0.2s'; - static FAST = '0.1s'; // Tooltip - } - - export class AnimationCurves { - static EASE_BASE_OUT = 'cubic-bezier(0.7, 0.3, 0.1, 1)'; - static EASE_BASE_IN = 'cubic-bezier(0.9, 0, 0.3, 0.7)'; - static EASE_OUT = 'cubic-bezier(0.215, 0.61, 0.355, 1)'; - static EASE_IN = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)'; - static EASE_IN_OUT = 'cubic-bezier(0.645, 0.045, 0.355, 1)'; - static EASE_OUT_BACK = 'cubic-bezier(0.12, 0.4, 0.29, 1.46)'; - static EASE_IN_BACK = 'cubic-bezier(0.71, -0.46, 0.88, 0.6)'; - static EASE_IN_OUT_BACK = 'cubic-bezier(0.71, -0.46, 0.29, 1.46)'; - static EASE_OUT_CIRC = 'cubic-bezier(0.08, 0.82, 0.17, 1)'; - static EASE_IN_CIRC = 'cubic-bezier(0.6, 0.04, 0.98, 0.34)'; - static EASE_IN_OUT_CIRC = 'cubic-bezier(0.78, 0.14, 0.15, 0.86)'; - static EASE_OUT_QUINT = 'cubic-bezier(0.23, 1, 0.32, 1)'; - static EASE_IN_QUINT = 'cubic-bezier(0.755, 0.05, 0.855, 0.06)'; - static EASE_IN_OUT_QUINT = 'cubic-bezier(0.86, 0, 0.07, 1)'; - } + static SLOW = '0.3s'; // Modal + static BASE = '0.2s'; + static FAST = '0.1s'; // Tooltip +} -export const zoomBigMotion: AnimationTriggerMetadata = trigger('zoomBigMotion', [ - transition('void => active', [ - style({ opacity: 0, transform: 'scale(0.8)' }), - animate( - `${AnimationDuration.BASE} ${AnimationCurves.EASE_OUT_CIRC}`, - style({ - opacity: 1, - transform: 'scale(1)' - }) - ) - ]), - transition('active => void', [ - style({ opacity: 1, transform: 'scale(1)' }), - animate( - `${AnimationDuration.BASE} ${AnimationCurves.EASE_IN_OUT_CIRC}`, - style({ - opacity: 0, - transform: 'scale(0.8)' - }) - ) - ]) -]); \ No newline at end of file +export class AnimationCurves { + static EASE_BASE_OUT = 'cubic-bezier(0.7, 0.3, 0.1, 1)'; + static EASE_BASE_IN = 'cubic-bezier(0.9, 0, 0.3, 0.7)'; + static EASE_OUT = 'cubic-bezier(0.215, 0.61, 0.355, 1)'; + static EASE_IN = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)'; + static EASE_IN_OUT = 'cubic-bezier(0.645, 0.045, 0.355, 1)'; + static EASE_OUT_BACK = 'cubic-bezier(0.12, 0.4, 0.29, 1.46)'; + static EASE_IN_BACK = 'cubic-bezier(0.71, -0.46, 0.88, 0.6)'; + static EASE_IN_OUT_BACK = 'cubic-bezier(0.71, -0.46, 0.29, 1.46)'; + static EASE_OUT_CIRC = 'cubic-bezier(0.08, 0.82, 0.17, 1)'; + static EASE_IN_CIRC = 'cubic-bezier(0.6, 0.04, 0.98, 0.34)'; + static EASE_IN_OUT_CIRC = 'cubic-bezier(0.78, 0.14, 0.15, 0.86)'; + static EASE_OUT_QUINT = 'cubic-bezier(0.23, 1, 0.32, 1)'; + static EASE_IN_QUINT = 'cubic-bezier(0.755, 0.05, 0.855, 0.06)'; + static EASE_IN_OUT_QUINT = 'cubic-bezier(0.86, 0, 0.07, 1)'; +} + +export const zoomBigMotion: AnimationTriggerMetadata = trigger( + 'zoomBigMotion', + [ + transition('void => active', [ + style({ opacity: 0, transform: 'scale(0.8)' }), + animate( + `${AnimationDuration.BASE} ${AnimationCurves.EASE_OUT_CIRC}`, + style({ + opacity: 1, + transform: 'scale(1)', + }) + ), + ]), + transition('active => void', [ + style({ opacity: 1, transform: 'scale(1)' }), + animate( + `${AnimationDuration.BASE} ${AnimationCurves.EASE_IN_OUT_CIRC}`, + style({ + opacity: 0, + transform: 'scale(0.8)', + }) + ), + ]), + ] +); diff --git a/libs/editor/src/lib/config-plane/animations.ts b/libs/editor/src/lib/config-plane/animations.ts index 6ee56c1..f4de275 100644 --- a/libs/editor/src/lib/config-plane/animations.ts +++ b/libs/editor/src/lib/config-plane/animations.ts @@ -1,24 +1,30 @@ import { animate, style, transition, trigger } from '@angular/animations'; export const PLANE_SLIDE = trigger('slide', [ - transition(':enter', [ - style({ - transform: 'translateX(5vw)', - opacity: 0.2 - }), - animate('0.3s ease', style({ - opacity: 1, - transform: 'translateX(0)' - })) - ]), - transition(':leave', [ - style({ - transform: 'translateX(0)', - opacity: 1 - }), - animate('0.2s ease', style({ - opacity: 0, - transform: 'translateX(1vw)' - })) - ]) -]) \ No newline at end of file + transition(':enter', [ + style({ + transform: 'translateX(5vw)', + opacity: 0.2, + }), + animate( + '0.3s ease', + style({ + opacity: 1, + transform: 'translateX(0)', + }) + ), + ]), + transition(':leave', [ + style({ + transform: 'translateX(0)', + opacity: 1, + }), + animate( + '0.2s ease', + style({ + opacity: 0, + transform: 'translateX(1vw)', + }) + ), + ]), +]); diff --git a/libs/editor/src/lib/config-plane/config-block/config-block.component.html b/libs/editor/src/lib/config-plane/config-block/config-block.component.html index 323905f..184398c 100644 --- a/libs/editor/src/lib/config-plane/config-block/config-block.component.html +++ b/libs/editor/src/lib/config-plane/config-block/config-block.component.html @@ -1,64 +1,90 @@ -
- -
- - - - - - - - - - - - - - - - - - - {{prop.value['extra'].description}} - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - - - - +
+ +
+ + + + + + + + + + + + + + + + + + + {{ + prop.value['extra'].description + }} + + + + + + + + + + + + + + + + + + + +
+
+
+ + + + +
- \ No newline at end of file + diff --git a/libs/editor/src/lib/config-plane/config-block/config-block.component.scss b/libs/editor/src/lib/config-plane/config-block/config-block.component.scss index 7f2c485..8734988 100644 --- a/libs/editor/src/lib/config-plane/config-block/config-block.component.scss +++ b/libs/editor/src/lib/config-plane/config-block/config-block.component.scss @@ -1,37 +1,37 @@ :host { - & > .control { - margin-bottom: 16px; - min-height: 28px; + & > .control { + margin-bottom: 16px; + min-height: 28px; - & > label { - display: block; - width: 100%; - color: #555; - font-weight: bold; - margin-bottom: 8px; - // border-top: #ddd 1px solid; + & > label { + display: block; + width: 100%; + color: #555; + font-weight: bold; + margin-bottom: 8px; + // border-top: #ddd 1px solid; - & > i[nz-icon] { - margin-right: 4px; - } - & > i[nzType='close'] { - opacity: 0; - margin-left: 6px; - cursor: pointer; - transition: opacity 0.2s ease; - color: #7f7f7f; - } + & > i[nz-icon] { + margin-right: 4px; + } + & > i[nzType='close'] { + opacity: 0; + margin-left: 6px; + cursor: pointer; + transition: opacity 0.2s ease; + color: #7f7f7f; + } - &:hover { - & > i[nzType='close'] { - opacity: 1; - } - } + &:hover { + & > i[nzType='close'] { + opacity: 1; } + } + } - & > div { - // line-height: 28px; - // min-height: 28px; - } + & > div { + // line-height: 28px; + // min-height: 28px; } + } } diff --git a/libs/editor/src/lib/config-plane/config-block/config-block.component.ts b/libs/editor/src/lib/config-plane/config-block/config-block.component.ts index 707888a..690ffc9 100644 --- a/libs/editor/src/lib/config-plane/config-block/config-block.component.ts +++ b/libs/editor/src/lib/config-plane/config-block/config-block.component.ts @@ -1,6 +1,17 @@ import { KeyValue } from '@angular/common'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'; -import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + Input, + OnInit, +} from '@angular/core'; +import { + ControlValueAccessor, + FormBuilder, + FormGroup, + NG_VALUE_ACCESSOR, +} from '@angular/forms'; import { ConfigurationSection, PropertySchema, SafeAny } from '@comen/common'; @Component({ @@ -8,18 +19,21 @@ import { ConfigurationSection, PropertySchema, SafeAny } from '@comen/common'; templateUrl: './config-block.component.html', styleUrls: ['./config-block.component.scss'], providers: [ - { provide: NG_VALUE_ACCESSOR, useExisting: ConfigBlockComponent, multi: true } + { + provide: NG_VALUE_ACCESSOR, + useExisting: ConfigBlockComponent, + multi: true, + }, ], - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, }) export class ConfigBlockComponent implements OnInit, ControlValueAccessor { - allVisiable = false; _visibleProps: { - [key: string]: PropertySchema + [key: string]: PropertySchema; } = {}; _invisibleProps: { - [key: string]: PropertySchema + [key: string]: PropertySchema; } = {}; @Input() sectionSetting: ConfigurationSection; @@ -30,23 +44,25 @@ export class ConfigBlockComponent implements OnInit, ControlValueAccessor { constructor( private fb: FormBuilder, - private changeDetector: ChangeDetectorRef) { } - + private changeDetector: ChangeDetectorRef + ) {} ngOnInit(): void { this.propertiesFormGroup = this.fb.group( - Object.fromEntries(Object.entries(this.sectionSetting.properties).map(([key, schema]) => { - return [key, [schema.defaultValue]]; - })) + Object.fromEntries( + Object.entries(this.sectionSetting.properties).map(([key, schema]) => { + return [key, [schema.defaultValue]]; + }) + ) ); - this.addFromControl.valueChanges.subscribe(_ => { + this.addFromControl.valueChanges.subscribe((_) => { if (_ != null) { this._visibleProps[_] = this._invisibleProps[_]; delete this._invisibleProps[_]; this.checkAllVisible(); this.changeDetector.markForCheck(); this.propertiesFormGroup.patchValue({ - [_]: this._visibleProps[_].defaultValue + [_]: this._visibleProps[_].defaultValue, }); this.addFromControl.setValue(null); } @@ -72,7 +88,7 @@ export class ConfigBlockComponent implements OnInit, ControlValueAccessor { delete this._visibleProps[_]; this.allVisiable = false; this.propertiesFormGroup.patchValue({ - [_]: this._invisibleProps[_].defaultValue + [_]: this._invisibleProps[_].defaultValue, }); this.changeDetector.markForCheck(); } @@ -91,12 +107,15 @@ export class ConfigBlockComponent implements OnInit, ControlValueAccessor { } registerOnChange(callback: (v: SafeAny) => void) { - this.propertiesFormGroup.valueChanges.subscribe(props => { - callback(Object.fromEntries(Object.entries(props).filter(([prop]) => { - return this._visibleProps[prop] != undefined; - }))); + this.propertiesFormGroup.valueChanges.subscribe((props) => { + callback( + Object.fromEntries( + Object.entries(props).filter(([prop]) => { + return this._visibleProps[prop] != undefined; + }) + ) + ); }); } - registerOnTouched() { - } -} \ No newline at end of file + registerOnTouched() {} +} diff --git a/libs/editor/src/lib/config-plane/config-plane.component.html b/libs/editor/src/lib/config-plane/config-plane.component.html index 5c562c2..48367bc 100644 --- a/libs/editor/src/lib/config-plane/config-plane.component.html +++ b/libs/editor/src/lib/config-plane/config-plane.component.html @@ -1,16 +1,30 @@ - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + diff --git a/libs/editor/src/lib/config-plane/config-plane.component.scss b/libs/editor/src/lib/config-plane/config-plane.component.scss index 6cae355..228db8b 100644 --- a/libs/editor/src/lib/config-plane/config-plane.component.scss +++ b/libs/editor/src/lib/config-plane/config-plane.component.scss @@ -1,17 +1,16 @@ - :host { - box-sizing: border-box; - // padding: 8px; - height: 100%; - width: 100%; + box-sizing: border-box; + // padding: 8px; + height: 100%; + width: 100%; } .variant { - margin: 32px 0; - padding-top: 16px; - border-top: #ddd 1px dashed; + margin: 32px 0; + padding-top: 16px; + border-top: #ddd 1px dashed; - &>comen-config-condition { - margin-bottom: 16px; - } -} \ No newline at end of file + & > comen-config-condition { + margin-bottom: 16px; + } +} diff --git a/libs/editor/src/lib/config-plane/config-plane.component.ts b/libs/editor/src/lib/config-plane/config-plane.component.ts index 24d7074..6ed4597 100644 --- a/libs/editor/src/lib/config-plane/config-plane.component.ts +++ b/libs/editor/src/lib/config-plane/config-plane.component.ts @@ -1,26 +1,32 @@ import { Component, Input } from '@angular/core'; -import { ControlValueAccessor, FormArray, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { + ControlValueAccessor, + FormArray, + FormBuilder, + NG_VALUE_ACCESSOR, +} from '@angular/forms'; import { ConfigurationSection, SafeAny, VariantCondition } from '@comen/common'; @Component({ selector: 'comen-config-plane', templateUrl: './config-plane.component.html', styleUrls: ['./config-plane.component.scss'], - providers: [{ - provide: NG_VALUE_ACCESSOR, - useExisting: ConfigPlaneComponent, - multi: true - }] + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: ConfigPlaneComponent, + multi: true, + }, + ], }) export class ConfigPlaneComponent implements ControlValueAccessor { - @Input() sectionSetting: ConfigurationSection; - constructor(private fb: FormBuilder) { } + constructor(private fb: FormBuilder) {} formGroup = this.fb.group({ default: this.fb.control({}), - variants: this.fb.array([]) + variants: this.fb.array([]), }); get variantsFormArray() { @@ -32,10 +38,12 @@ export class ConfigPlaneComponent implements ControlValueAccessor { } addNewVariant(condition: VariantCondition) { - this.variantsFormArray.push(this.fb.group({ - condition: [[condition]], - properties: [{}] - })); + this.variantsFormArray.push( + this.fb.group({ + condition: [[condition]], + properties: [{}], + }) + ); } removeVariant(index: number) { @@ -47,7 +55,10 @@ export class ConfigPlaneComponent implements ControlValueAccessor { return; } const control = this.variantsFormArray.at(index); - this.variantsFormArray.setControl(index, this.variantsFormArray.at(index - 1)); + this.variantsFormArray.setControl( + index, + this.variantsFormArray.at(index - 1) + ); this.variantsFormArray.setControl(index - 1, control); } @@ -56,22 +67,27 @@ export class ConfigPlaneComponent implements ControlValueAccessor { return; } const control = this.variantsFormArray.at(index); - this.variantsFormArray.setControl(index, this.variantsFormArray.at(index + 1)); + this.variantsFormArray.setControl( + index, + this.variantsFormArray.at(index + 1) + ); this.variantsFormArray.setControl(index + 1, control); } writeValue(value: { - default: SafeAny, + default: SafeAny; variants: { - condition: SafeAny[], - properties: SafeAny - }[] + condition: SafeAny[]; + properties: SafeAny; + }[]; }) { - value.variants?.forEach(val => { - this.variantsFormArray.push(this.fb.group({ - condition: this.fb.control(val.condition), - properties: val.properties - })); + value.variants?.forEach((val) => { + this.variantsFormArray.push( + this.fb.group({ + condition: this.fb.control(val.condition), + properties: val.properties, + }) + ); }); this.formGroup.get('default').setValue(value.default, { emitEvent: false }); } diff --git a/libs/editor/src/lib/controls/background-control/background-control.component.ts b/libs/editor/src/lib/controls/background-control/background-control.component.ts index 194c783..a6ea828 100644 --- a/libs/editor/src/lib/controls/background-control/background-control.component.ts +++ b/libs/editor/src/lib/controls/background-control/background-control.component.ts @@ -5,27 +5,20 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; selector: 'comen-background-control', templateUrl: './background-control.component.html', styleUrls: ['./background-control.component.scss'], - providers:[ + providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: BackgroundControlComponent, - multi: true - } - ] + multi: true, + }, + ], }) export class BackgroundControlComponent implements ControlValueAccessor { + constructor() {} - constructor() { } + writeValue() {} - writeValue(){ + registerOnTouched() {} - } - - registerOnTouched(){ - - } - - registerOnChange(){ - - } + registerOnChange() {} } diff --git a/libs/editor/src/lib/controls/border-control/border-control.component.ts b/libs/editor/src/lib/controls/border-control/border-control.component.ts index 94a6c7f..56ebef5 100644 --- a/libs/editor/src/lib/controls/border-control/border-control.component.ts +++ b/libs/editor/src/lib/controls/border-control/border-control.component.ts @@ -1,30 +1,28 @@ import { Component } from '@angular/core'; -import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { + ControlValueAccessor, + FormBuilder, + NG_VALUE_ACCESSOR, +} from '@angular/forms'; @Component({ selector: 'comen-border-control', templateUrl: './border-control.component.html', styleUrls: ['./border-control.component.scss'], - providers:[{ - provide: NG_VALUE_ACCESSOR, - useExisting:BorderControlComponent, - multi: true - }] + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: BorderControlComponent, + multi: true, + }, + ], }) export class BorderControlComponent implements ControlValueAccessor { + constructor(private fb: FormBuilder) {} - constructor(private fb:FormBuilder) { } + writeValue() {} - writeValue(){ - - } - - registerOnChange(){ - - } - - registerOnTouched(){ - - } + registerOnChange() {} + registerOnTouched() {} } diff --git a/libs/editor/src/lib/controls/color-control/color-control.component.ts b/libs/editor/src/lib/controls/color-control/color-control.component.ts index 9371192..19a8e8e 100644 --- a/libs/editor/src/lib/controls/color-control/color-control.component.ts +++ b/libs/editor/src/lib/controls/color-control/color-control.component.ts @@ -1,7 +1,17 @@ import { animate, style, transition, trigger } from '@angular/animations'; import { Overlay } from '@angular/cdk/overlay'; import { TemplatePortal } from '@angular/cdk/portal'; -import { Component, ElementRef, HostListener, Input, OnChanges, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core'; +import { + Component, + ElementRef, + HostListener, + Input, + OnChanges, + SimpleChanges, + TemplateRef, + ViewChild, + ViewContainerRef, +} from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { SafeAny } from '@comen/common'; import { ColorEvent } from 'ngx-color'; @@ -9,14 +19,20 @@ import { BehaviorSubject } from 'rxjs'; import { take } from 'rxjs/operators'; @Component({ - template: `
-
-
- + template: `
+
+
- -
- `, + +
+ +
`, selector: 'comen-color-control', styles: [ ` @@ -24,13 +40,13 @@ import { take } from 'rxjs/operators'; display: inline-block; } #block { - display: inline-block; - height: 100%; - width: 3em; - overflow:hidden; - border: solid 1px #ddddde; - border-radius: 4px; - cursor: pointer; + display: inline-block; + height: 100%; + width: 3em; + overflow: hidden; + border: solid 1px #ddddde; + border-radius: 4px; + cursor: pointer; } #checkbox { @@ -42,93 +58,114 @@ import { take } from 'rxjs/operators'; background-position: center; background-repeat: repeat; } - ` + `, ], providers: [ { provide: NG_VALUE_ACCESSOR, multi: true, - useExisting: ColorControlComponent - } + useExisting: ColorControlComponent, + }, ], animations: [ trigger('inout', [ transition(':enter', [ style({ opacity: 0, - transform: 'scale3d(0.95,0.95,0.95)' + transform: 'scale3d(0.95,0.95,0.95)', }), - animate(30, style({ - opacity: 1, - transform: 'scale3d(1,1,1)' - })) + animate( + 30, + style({ + opacity: 1, + transform: 'scale3d(1,1,1)', + }) + ), ]), transition(':leave', [ style({ opacity: 1, - transform: 'scale3d(1,1,1)' + transform: 'scale3d(1,1,1)', }), - animate(30, style({ - opacity: 0, - transform: 'scale3d(0.95,0.95,0.95)' - })) - ]) - ]) - ] + animate( + 30, + style({ + opacity: 0, + transform: 'scale3d(0.95,0.95,0.95)', + }) + ), + ]), + ]), + ], }) export class ColorControlComponent implements ControlValueAccessor, OnChanges { - @ViewChild('temp') temp: TemplateRef; @Input() value: string; currentColor: BehaviorSubject = new BehaviorSubject('#cccccc'); - constructor(private overlay: Overlay, private ele: ElementRef, private vc: ViewContainerRef) { } + constructor( + private overlay: Overlay, + private ele: ElementRef, + private vc: ViewContainerRef + ) {} ref = this.overlay.create({ hasBackdrop: true, backdropClass: 'cdk-backdrop-transparent', - positionStrategy: this.overlay.position().flexibleConnectedTo(this.ele).withPositions([{ - offsetX: -30, - offsetY: 0, - overlayX: 'start', - overlayY: 'center', - originX: 'start', - originY: 'center' - }, - { - offsetX: -30, - offsetY: 0, - overlayX: 'start', - overlayY: 'top', - originX: 'start', - originY: 'center' - }, { - offsetX: -30, - offsetY: 0, - overlayX: 'start', - overlayY: 'bottom', - originX: 'start', - originY: 'center' - }]), - scrollStrategy: this.overlay.scrollStrategies.close() + positionStrategy: this.overlay + .position() + .flexibleConnectedTo(this.ele) + .withPositions([ + { + offsetX: -30, + offsetY: 0, + overlayX: 'start', + overlayY: 'center', + originX: 'start', + originY: 'center', + }, + { + offsetX: -30, + offsetY: 0, + overlayX: 'start', + overlayY: 'top', + originX: 'start', + originY: 'center', + }, + { + offsetX: -30, + offsetY: 0, + overlayX: 'start', + overlayY: 'bottom', + originX: 'start', + originY: 'center', + }, + ]), + scrollStrategy: this.overlay.scrollStrategies.close(), }); handleChange(e: ColorEvent) { - this.currentColor.next(`rgba(${e.color.rgb.r},${e.color.rgb.g},${e.color.rgb.b},${e.color.rgb.a})`); - this.changeFn?.(`rgba(${e.color.rgb.r},${e.color.rgb.g},${e.color.rgb.b},${e.color.rgb.a})`); + this.currentColor.next( + `rgba(${e.color.rgb.r},${e.color.rgb.g},${e.color.rgb.b},${e.color.rgb.a})` + ); + this.changeFn?.( + `rgba(${e.color.rgb.r},${e.color.rgb.g},${e.color.rgb.b},${e.color.rgb.a})` + ); this.touchFn?.(); } @HostListener('click') click() { this.ref.attach(new TemplatePortal(this.temp, this.vc)); - this.ref.backdropClick().pipe(take(1)).subscribe(() => { - this.ref.detach(); - }); + this.ref + .backdropClick() + .pipe(take(1)) + .subscribe(() => { + this.ref.detach(); + }); } - writeValue(obj: string): void { if (obj == null) { throw 'NOT EXPECTED VALUE'; @@ -148,9 +185,8 @@ export class ColorControlComponent implements ControlValueAccessor, OnChanges { } ngOnChanges(simpleChanges: SimpleChanges) { - if(simpleChanges['value']){ + if (simpleChanges['value']) { this.currentColor.next(simpleChanges['value'].currentValue); } } - } diff --git a/libs/editor/src/lib/controls/controls.module.ts b/libs/editor/src/lib/controls/controls.module.ts index a6cbde4..67bfc6b 100644 --- a/libs/editor/src/lib/controls/controls.module.ts +++ b/libs/editor/src/lib/controls/controls.module.ts @@ -17,40 +17,38 @@ import { ShadowControlComponent } from './shadow-control/shadow-control.componen import { MonacoControlComponent } from './monaco-control/monaco-control.component'; @NgModule({ - declarations: [ - ColorControlComponent, - MarginControlComponent, - FontControlComponent, - RangeControlComponent, - OutlineControlComponent, - BorderControlComponent, - RadiusControlComponent, - BackgroundControlComponent, - DisplayControlComponent, - ShadowControlComponent, - MonacoControlComponent, - ], - imports: [ - ReactiveComponentModule, - ReactiveFormsModule, - CommonModule, - ColorChromeModule, - FlexLayoutModule - ], - exports: [ - ColorControlComponent, - MarginControlComponent, - FontControlComponent, - RangeControlComponent, - OutlineControlComponent, - BorderControlComponent, - RadiusControlComponent, - BackgroundControlComponent, - DisplayControlComponent, - ShadowControlComponent, - MonacoControlComponent, - ] + declarations: [ + ColorControlComponent, + MarginControlComponent, + FontControlComponent, + RangeControlComponent, + OutlineControlComponent, + BorderControlComponent, + RadiusControlComponent, + BackgroundControlComponent, + DisplayControlComponent, + ShadowControlComponent, + MonacoControlComponent, + ], + imports: [ + ReactiveComponentModule, + ReactiveFormsModule, + CommonModule, + ColorChromeModule, + FlexLayoutModule, + ], + exports: [ + ColorControlComponent, + MarginControlComponent, + FontControlComponent, + RangeControlComponent, + OutlineControlComponent, + BorderControlComponent, + RadiusControlComponent, + BackgroundControlComponent, + DisplayControlComponent, + ShadowControlComponent, + MonacoControlComponent, + ], }) -export class ControlsModule { - -} \ No newline at end of file +export class ControlsModule {} diff --git a/libs/editor/src/lib/controls/display-control/display-control.component.ts b/libs/editor/src/lib/controls/display-control/display-control.component.ts index 1414728..673a458 100644 --- a/libs/editor/src/lib/controls/display-control/display-control.component.ts +++ b/libs/editor/src/lib/controls/display-control/display-control.component.ts @@ -3,13 +3,10 @@ import { Component, OnInit } from '@angular/core'; @Component({ selector: 'comen-display-control', templateUrl: './display-control.component.html', - styleUrls: ['./display-control.component.scss'] + styleUrls: ['./display-control.component.scss'], }) export class DisplayControlComponent implements OnInit { + constructor() {} - constructor() { } - - ngOnInit(): void { - } - + ngOnInit(): void {} } diff --git a/libs/editor/src/lib/controls/font-control/font-control.component.html b/libs/editor/src/lib/controls/font-control/font-control.component.html index da1d2ee..d6d9be4 100644 --- a/libs/editor/src/lib/controls/font-control/font-control.component.html +++ b/libs/editor/src/lib/controls/font-control/font-control.component.html @@ -1,43 +1,47 @@
-
- -
-
- -
-
- +
+
+ -
-
- - -
-
- - - -
-
- -
-
- - - -
+
+
+ + + +
-
-
\ No newline at end of file +
diff --git a/libs/editor/src/lib/controls/font-control/font-control.component.ts b/libs/editor/src/lib/controls/font-control/font-control.component.ts index 5c16024..2c87964 100644 --- a/libs/editor/src/lib/controls/font-control/font-control.component.ts +++ b/libs/editor/src/lib/controls/font-control/font-control.component.ts @@ -1,46 +1,45 @@ import { Component } from '@angular/core'; -import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { + ControlValueAccessor, + FormBuilder, + NG_VALUE_ACCESSOR, +} from '@angular/forms'; import { ComenControlTypes } from '@comen/common'; @Component({ - selector: 'comen-font-control', - styleUrls: ['./font-control.component.scss'], - templateUrl: './font-control.component.html', - providers: [ - { - provide: NG_VALUE_ACCESSOR, - useExisting: FontControlComponent, - multi: true - } - ] + selector: 'comen-font-control', + styleUrls: ['./font-control.component.scss'], + templateUrl: './font-control.component.html', + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: FontControlComponent, + multi: true, + }, + ], }) export class FontControlComponent implements ControlValueAccessor { - - constructor(private fb: FormBuilder) { - - } - - formGroup = this.fb.group({ - font: [''], - size: [16], - weight: ['normal'], - space: [null], - lineHeight: [null], - textAlign: ['left'], - italic: [false], - underline: [false], - strikeThrough: [false] - }); - - writeValue(value: ComenControlTypes.Font) { - this.formGroup.setValue(value); - } - - registerOnChange(callback: (v) => void) { - this.formGroup.valueChanges.subscribe(callback); - } - - registerOnTouched() { - - } -} \ No newline at end of file + constructor(private fb: FormBuilder) {} + + formGroup = this.fb.group({ + font: [''], + size: [16], + weight: ['normal'], + space: [null], + lineHeight: [null], + textAlign: ['left'], + italic: [false], + underline: [false], + strikeThrough: [false], + }); + + writeValue(value: ComenControlTypes.Font) { + this.formGroup.setValue(value); + } + + registerOnChange(callback: (v) => void) { + this.formGroup.valueChanges.subscribe(callback); + } + + registerOnTouched() {} +} diff --git a/libs/editor/src/lib/controls/margin-control/margin-control.component.ts b/libs/editor/src/lib/controls/margin-control/margin-control.component.ts index 0011dfc..7725dbb 100644 --- a/libs/editor/src/lib/controls/margin-control/margin-control.component.ts +++ b/libs/editor/src/lib/controls/margin-control/margin-control.component.ts @@ -1,17 +1,20 @@ import { Component } from '@angular/core'; -import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms'; - +import { + ControlValueAccessor, + FormBuilder, + NG_VALUE_ACCESSOR, +} from '@angular/forms'; @Component({ - selector: 'comen-margin-control', - template: `
-
- -
- -
`, - styleUrls: [ - './margin-control.style.scss' - ], - providers: [ - { - provide: NG_VALUE_ACCESSOR, - useExisting: MarginControlComponent, - multi: true - } - ] +
`, + styleUrls: ['./margin-control.style.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: MarginControlComponent, + multi: true, + }, + ], }) export class MarginControlComponent implements ControlValueAccessor { - - formatterPx = (value: number) => `${value}px`; - mode = this.fb.control('common'); - formGroup = this.fb.group({ - top: [0], - right: [0], - bottom: [0], - left: [0] - }) - - constructor(private fb: FormBuilder) { } - writeValue() { - - } - - registerOnChange() { - - } - - registerOnTouched() { - - } -} \ No newline at end of file + formatterPx = (value: number) => `${value}px`; + mode = this.fb.control('common'); + formGroup = this.fb.group({ + top: [0], + right: [0], + bottom: [0], + left: [0], + }); + + constructor(private fb: FormBuilder) {} + writeValue() {} + + registerOnChange() {} + + registerOnTouched() {} +} diff --git a/libs/editor/src/lib/controls/margin-control/margin-control.style.scss b/libs/editor/src/lib/controls/margin-control/margin-control.style.scss index 8c10f01..90447c4 100644 --- a/libs/editor/src/lib/controls/margin-control/margin-control.style.scss +++ b/libs/editor/src/lib/controls/margin-control/margin-control.style.scss @@ -1,3 +1,3 @@ nz-input-number { - width: 100%; -} \ No newline at end of file + width: 100%; +} diff --git a/libs/editor/src/lib/controls/monaco-control/monaco-control.component.ts b/libs/editor/src/lib/controls/monaco-control/monaco-control.component.ts index 051eabf..a26410c 100644 --- a/libs/editor/src/lib/controls/monaco-control/monaco-control.component.ts +++ b/libs/editor/src/lib/controls/monaco-control/monaco-control.component.ts @@ -35,19 +35,17 @@ export class MonacoControlComponent implements ControlValueAccessor { constructor(private fb: FormBuilder) {} ngAfterViewInit() { - // const model = + // const model = // monaco.editor.createModel( ['function x() {', '\tconsole.log("Hello world!");', '}'].join( // '\n' // ),'javascript', monaco.Uri.parse('file:///local.js')); // // model.updateOptions({ - // // }); // monaco.editor.create(this.host.nativeElement, { // model // }); // console.log(monaco.languages.typescript.javascriptDefaults.getExtraLibs()); // // monaco.languages.typescript.javascriptDefaults.addExtraLib(` - // // `,"comen.d.ts"); // monaco.languages.typescript.javascriptDefaults.addExtraLib(text,"react.d.ts"); } diff --git a/libs/editor/src/lib/controls/outline-control/outline-control.component.html b/libs/editor/src/lib/controls/outline-control/outline-control.component.html index 2b6ef46..2baa869 100644 --- a/libs/editor/src/lib/controls/outline-control/outline-control.component.html +++ b/libs/editor/src/lib/controls/outline-control/outline-control.component.html @@ -1,10 +1,15 @@
- -
- -
- -
- -
-
\ No newline at end of file + +
+ +
+ +
+ +
+
diff --git a/libs/editor/src/lib/controls/outline-control/outline-control.component.ts b/libs/editor/src/lib/controls/outline-control/outline-control.component.ts index a4d20dc..2b89132 100644 --- a/libs/editor/src/lib/controls/outline-control/outline-control.component.ts +++ b/libs/editor/src/lib/controls/outline-control/outline-control.component.ts @@ -1,5 +1,9 @@ import { Component } from '@angular/core'; -import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { + ControlValueAccessor, + FormBuilder, + NG_VALUE_ACCESSOR, +} from '@angular/forms'; import { ComenControlTypes } from '@comen/common'; @Component({ @@ -10,17 +14,16 @@ import { ComenControlTypes } from '@comen/common'; { provide: NG_VALUE_ACCESSOR, useExisting: OutlineControlComponent, - multi: true - } - ] + multi: true, + }, + ], }) export class OutlineControlComponent implements ControlValueAccessor { - - constructor(private fb: FormBuilder) { } + constructor(private fb: FormBuilder) {} formGroup = this.fb.group({ color: ['#ffffff'], - width: [0] + width: [0], }); writeValue(value: ComenControlTypes.Outline) { @@ -34,5 +37,4 @@ export class OutlineControlComponent implements ControlValueAccessor { registerOnTouched() { // stub method } - } diff --git a/libs/editor/src/lib/controls/radius-control/radius-control.component.html b/libs/editor/src/lib/controls/radius-control/radius-control.component.html index 37cf183..eedc6d4 100644 --- a/libs/editor/src/lib/controls/radius-control/radius-control.component.html +++ b/libs/editor/src/lib/controls/radius-control/radius-control.component.html @@ -1,18 +1,18 @@
-
- +
+ +
+
- -
- -
-
- - - - - -
- -
-
\ No newline at end of file +
+
diff --git a/libs/editor/src/lib/controls/radius-control/radius-control.component.scss b/libs/editor/src/lib/controls/radius-control/radius-control.component.scss index 8c10f01..90447c4 100644 --- a/libs/editor/src/lib/controls/radius-control/radius-control.component.scss +++ b/libs/editor/src/lib/controls/radius-control/radius-control.component.scss @@ -1,3 +1,3 @@ nz-input-number { - width: 100%; -} \ No newline at end of file + width: 100%; +} diff --git a/libs/editor/src/lib/controls/radius-control/radius-control.component.ts b/libs/editor/src/lib/controls/radius-control/radius-control.component.ts index 6594e9c..9caacce 100644 --- a/libs/editor/src/lib/controls/radius-control/radius-control.component.ts +++ b/libs/editor/src/lib/controls/radius-control/radius-control.component.ts @@ -1,5 +1,9 @@ import { Component, OnInit } from '@angular/core'; -import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { + ControlValueAccessor, + FormBuilder, + NG_VALUE_ACCESSOR, +} from '@angular/forms'; @Component({ selector: 'comen-radius-control', @@ -9,13 +13,11 @@ import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/f { provide: NG_VALUE_ACCESSOR, useExisting: RadiusControlComponent, - multi: true - } - ] + multi: true, + }, + ], }) export class RadiusControlComponent implements ControlValueAccessor { - - mode = this.fb.control('single'); single = this.fb.control(0); @@ -25,11 +27,11 @@ export class RadiusControlComponent implements ControlValueAccessor { value2: [0], value3: [0], value4: [0], - unit: ['px'] + unit: ['px'], }); constructor(private fb: FormBuilder) { - this.single.valueChanges.subscribe(v => { + this.single.valueChanges.subscribe((v) => { this.formGroup.patchValue({ value1: v, value2: v, @@ -46,7 +48,7 @@ export class RadiusControlComponent implements ControlValueAccessor { value2: v.value[1], value3: v.value[2], value4: v.value[3], - unit: v.unit + unit: v.unit, }); } } @@ -55,12 +57,10 @@ export class RadiusControlComponent implements ControlValueAccessor { this.formGroup.valueChanges.subscribe((v) => { callback({ value: [v.value1, v.value2, v.value3, v.value4], - unit: v.unit + unit: v.unit, }); }); } - registerOnTouched() { - - } + registerOnTouched() {} } diff --git a/libs/editor/src/lib/controls/range-control/range-control.component.html b/libs/editor/src/lib/controls/range-control/range-control.component.html index eac03ff..e39234a 100644 --- a/libs/editor/src/lib/controls/range-control/range-control.component.html +++ b/libs/editor/src/lib/controls/range-control/range-control.component.html @@ -1,7 +1,7 @@
- -
- - -
-
\ No newline at end of file + +
+ + +
+
diff --git a/libs/editor/src/lib/controls/range-control/range-control.component.ts b/libs/editor/src/lib/controls/range-control/range-control.component.ts index 8b63668..16106f3 100644 --- a/libs/editor/src/lib/controls/range-control/range-control.component.ts +++ b/libs/editor/src/lib/controls/range-control/range-control.component.ts @@ -1,5 +1,9 @@ import { Component, Input } from '@angular/core'; -import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { + ControlValueAccessor, + FormBuilder, + NG_VALUE_ACCESSOR, +} from '@angular/forms'; import { tap } from 'rxjs/operators'; @Component({ @@ -10,28 +14,35 @@ import { tap } from 'rxjs/operators'; { provide: NG_VALUE_ACCESSOR, useExisting: RangeControlComponent, - multi: true - } - ] + multi: true, + }, + ], }) export class RangeControlComponent implements ControlValueAccessor { - @Input() max = 1; @Input() min = 0; @Input() step = 0.01; constructor(private fb: FormBuilder) { - this.sliderControl.valueChanges.pipe(tap(x => { - if (this.numberInputControl.value != x) { - this.numberInputControl.setValue(x); - } - this.changeCallback?.(x); - })).subscribe(); - this.numberInputControl.valueChanges.pipe(tap(x => { - if (this.sliderControl.value != x) { - this.sliderControl.setValue(x); - } - })).subscribe(); + this.sliderControl.valueChanges + .pipe( + tap((x) => { + if (this.numberInputControl.value != x) { + this.numberInputControl.setValue(x); + } + this.changeCallback?.(x); + }) + ) + .subscribe(); + this.numberInputControl.valueChanges + .pipe( + tap((x) => { + if (this.sliderControl.value != x) { + this.sliderControl.setValue(x); + } + }) + ) + .subscribe(); } sliderControl = this.fb.control(0); @@ -50,8 +61,5 @@ export class RangeControlComponent implements ControlValueAccessor { this.changeCallback = callback; } - registerOnTouched() { - - } - + registerOnTouched() {} } diff --git a/libs/editor/src/lib/controls/shadow-control/shadow-control.component.html b/libs/editor/src/lib/controls/shadow-control/shadow-control.component.html index 18c6725..c72b744 100644 --- a/libs/editor/src/lib/controls/shadow-control/shadow-control.component.html +++ b/libs/editor/src/lib/controls/shadow-control/shadow-control.component.html @@ -1,29 +1,29 @@
- -
- -
+ +
+ +
- -
- -
-
- -
- -
- -
- -
-
- -
- -
- -
- -
-
\ No newline at end of file + +
+ +
+
+ +
+ +
+ +
+ +
+
+ +
+ +
+ +
+ +
+ diff --git a/libs/editor/src/lib/controls/shadow-control/shadow-control.component.scss b/libs/editor/src/lib/controls/shadow-control/shadow-control.component.scss index 8c10f01..90447c4 100644 --- a/libs/editor/src/lib/controls/shadow-control/shadow-control.component.scss +++ b/libs/editor/src/lib/controls/shadow-control/shadow-control.component.scss @@ -1,3 +1,3 @@ nz-input-number { - width: 100%; -} \ No newline at end of file + width: 100%; +} diff --git a/libs/editor/src/lib/controls/shadow-control/shadow-control.component.ts b/libs/editor/src/lib/controls/shadow-control/shadow-control.component.ts index 8f40656..c8e4c31 100644 --- a/libs/editor/src/lib/controls/shadow-control/shadow-control.component.ts +++ b/libs/editor/src/lib/controls/shadow-control/shadow-control.component.ts @@ -1,5 +1,9 @@ import { Component } from '@angular/core'; -import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { + ControlValueAccessor, + FormBuilder, + NG_VALUE_ACCESSOR, +} from '@angular/forms'; @Component({ selector: 'comen-shadow-control', @@ -9,33 +13,25 @@ import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/f { provide: NG_VALUE_ACCESSOR, useExisting: ShadowControlComponent, - multi: true - } - ] + multi: true, + }, + ], }) export class ShadowControlComponent implements ControlValueAccessor { - - constructor(private fb:FormBuilder) { } + constructor(private fb: FormBuilder) {} formGroup = this.fb.group({ - color:['rgba(0,0,0,0.5)'], - x:[0], - y:[0], - spread:[0], + color: ['rgba(0,0,0,0.5)'], + x: [0], + y: [0], + spread: [0], blur: [0], - inset: [false] + inset: [false], }); - writeValue(){ - - } - - registerOnChange(){ - - } - - registerOnTouched(){ + writeValue() {} - } + registerOnChange() {} + registerOnTouched() {} } diff --git a/libs/editor/src/lib/editor.component.html b/libs/editor/src/lib/editor.component.html index 63fa42e..197ca24 100644 --- a/libs/editor/src/lib/editor.component.html +++ b/libs/editor/src/lib/editor.component.html @@ -1,88 +1,108 @@ -
-
- -
-
- -
- - -
-
-
- - 宽 - px - - - 高 - px - - -
-
- - 背景色 - - - - - - - 关闭网格 -
-
-
- - {{metadata.displayName}} - {{metadata.description}} - - - - - - - - - - 全局设置 - - - 以下项目仅于导出后生效 - - - - - - - 资源库 - - - 用于 - - - - - - - {{s.value.displayName}} - - - {{s.value['x-icon']}} - - - - - - - +
+
+ + 宽 + px + + + 高 + px + +
+
+ + 背景色 + + + + + + + 关闭网格 +
-
\ No newline at end of file +
+
+ + {{ metadata.displayName }} + {{ metadata.description }} + + + + + + + + + 全局设置 + + 以下项目仅于导出后生效 + + + + + + 资源库 + 用于 + + + + + + {{ s.value.displayName }} + + + {{ s.value['x-icon'] }} + + + + + + + +
+ diff --git a/libs/editor/src/lib/editor.component.scss b/libs/editor/src/lib/editor.component.scss index 5572ce1..7035442 100644 --- a/libs/editor/src/lib/editor.component.scss +++ b/libs/editor/src/lib/editor.component.scss @@ -56,7 +56,7 @@ bottom: 2em; left: 2em; cursor: move; - background-color: rgba(255,255,255,0.9); + background-color: rgba(255, 255, 255, 0.9); z-index: 1; box-sizing: border-box; padding: 1em; diff --git a/libs/editor/src/lib/editor.component.ts b/libs/editor/src/lib/editor.component.ts index d7e330d..ffb070c 100644 --- a/libs/editor/src/lib/editor.component.ts +++ b/libs/editor/src/lib/editor.component.ts @@ -1,11 +1,11 @@ import { Component, Inject, Input, Optional } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; import { - ComenAddonMetadata, - ComenAddonConfiguration, - ComenEnvironmentHost, - ConfigurationSection, - SafeAny, + ComenAddonMetadata, + ComenAddonConfiguration, + ComenEnvironmentHost, + ConfigurationSection, + SafeAny, } from '@comen/common'; import { Action, injected, mut } from 'kairo'; import { WithKairo } from '@kairo/angular'; @@ -13,165 +13,167 @@ import { merge } from 'rxjs'; import { debounceTime, map } from 'rxjs/operators'; import { EditorEnvironmentHost } from './editor.host'; import { generateCode } from './variant/compiler'; -import { COMEN_ADDON_METADATA, EditorRealtimeMessageProvider, EDITOR_REALTIME_MESSAGE_PROVIDER } from './providers'; +import { + COMEN_ADDON_METADATA, + EditorRealtimeMessageProvider, + EDITOR_REALTIME_MESSAGE_PROVIDER, +} from './providers'; @WithKairo() @Component({ - selector: 'comen-editor', - templateUrl: './editor.component.html', - styleUrls: ['./editor.component.scss'], - exportAs: 'editor', - providers: [ - { - provide: ComenEnvironmentHost, - useClass: EditorEnvironmentHost, - }, - ], + selector: 'comen-editor', + templateUrl: './editor.component.html', + styleUrls: ['./editor.component.scss'], + exportAs: 'editor', + providers: [ + { + provide: ComenEnvironmentHost, + useClass: EditorEnvironmentHost, + }, + ], }) export class EditorComponent { - mockControl = this.fb.control(null); - adjustments = this.fb.group({ - width: [600], - height: [800], - background: ['#888888'], - grid: [false], - }); + mockControl = this.fb.control(null); + adjustments = this.fb.group({ + width: [600], + height: [800], + background: ['#888888'], + grid: [false], + }); + + readonly metadata: ComenAddonMetadata; + readonly configuration: ComenAddonConfiguration; + readonly formGroup: FormGroup; - readonly metadata: ComenAddonMetadata; - readonly configuration: ComenAddonConfiguration; - readonly formGroup: FormGroup; + constructor( + private fb: FormBuilder, + @Inject(ComenEnvironmentHost) private host: EditorEnvironmentHost, + @Inject(EDITOR_REALTIME_MESSAGE_PROVIDER) + @Optional() + public realtimeMessageProvider?: EditorRealtimeMessageProvider + ) {} - constructor( - private fb: FormBuilder, - @Inject(ComenEnvironmentHost) private host: EditorEnvironmentHost, - @Inject(EDITOR_REALTIME_MESSAGE_PROVIDER) @Optional() public realtimeMessageProvider?: EditorRealtimeMessageProvider - ) {} - - ngSetup() { - /** resizable */ + ngSetup() { + /** resizable */ - const metadata = injected(COMEN_ADDON_METADATA); + const metadata = injected(COMEN_ADDON_METADATA); - const configuration = metadata.configuration; + const configuration = metadata.configuration; - /** config */ + /** config */ - /** form */ - const formGroup = this.fb.group( - Object.fromEntries( - Object.entries(configuration.sections).map( - ([key, section]) => { - return [ - key, - { - default: section.defaultValue, - variants: [], - }, - ]; - } - ) - ) - ); - Object.entries(formGroup.controls).forEach(([section, control]) => { - control.valueChanges - .pipe( - debounceTime(0) // NB: avoid repeating singal in one eventloop execution - ) - .subscribe((val) => { - this.host.emitConfig(section, val.default); - this.host.emitVariantPipe( - section, - new Function('c', generateCode(val)) - ); - }); + /** form */ + const formGroup = this.fb.group( + Object.fromEntries( + Object.entries(configuration.sections).map(([key, section]) => { + return [ + key, + { + default: section.defaultValue, + variants: [], + }, + ]; + }) + ) + ); + Object.entries(formGroup.controls).forEach(([section, control]) => { + control.valueChanges + .pipe( + debounceTime(0) // NB: avoid repeating singal in one eventloop execution + ) + .subscribe((val) => { + this.host.emitConfig(section, val.default); + this.host.emitVariantPipe( + section, + new Function('c', generateCode(val)) + ); }); + }); - return { - formGroup, - configuration, - metadata - }; - } + return { + formGroup, + configuration, + metadata, + }; + } - importWorkspace(workspace: EditorWorkspace) { - this.adjustments.patchValue(workspace.adjustments, { - emitEvent: false, - }); - this.formGroup.patchValue(workspace.values, { emitEvent: false }); - this.mockControl.patchValue(workspace.mocks, { emitEvent: false }); - Object.entries(this.formGroup.controls).forEach( - ([section, control]) => { - this.host.emitConfig(section, control.value.default); - this.host.emitVariantPipe( - section, - new Function('c', generateCode(control.value)) - ); - } - ); - } + importWorkspace(workspace: EditorWorkspace) { + this.adjustments.patchValue(workspace.adjustments, { + emitEvent: false, + }); + this.formGroup.patchValue(workspace.values, { emitEvent: false }); + this.mockControl.patchValue(workspace.mocks, { emitEvent: false }); + Object.entries(this.formGroup.controls).forEach(([section, control]) => { + this.host.emitConfig(section, control.value.default); + this.host.emitVariantPipe( + section, + new Function('c', generateCode(control.value)) + ); + }); + } - exportWorkspace() { - return { - values: this.formGroup.value, - mocks: this.mockControl.value, - adjustments: this.adjustments.value, - } as EditorWorkspace; - } + exportWorkspace() { + return { + values: this.formGroup.value, + mocks: this.mockControl.value, + adjustments: this.adjustments.value, + } as EditorWorkspace; + } - generateWorkspace(): SafeAny { - return Object.fromEntries( - Object.entries(this.formGroup.value).map( - ([key, value]: [string, SafeAny]) => { - if (this.configuration.sections[key].variantProperties) { - return [ - key, - { - default: value.default, - variantsPipe: generateCode(value), - }, - ]; - } else { - return [ - key, - { - default: value.default, - }, - ]; - } - } - ) - ); - } + generateWorkspace(): SafeAny { + return Object.fromEntries( + Object.entries(this.formGroup.value).map( + ([key, value]: [string, SafeAny]) => { + if (this.configuration.sections[key].variantProperties) { + return [ + key, + { + default: value.default, + variantsPipe: generateCode(value), + }, + ]; + } else { + return [ + key, + { + default: value.default, + }, + ]; + } + } + ) + ); + } - workspaceChange(_debounceTime: number = 0) { - return merge( - this.adjustments.valueChanges, - this.formGroup.valueChanges, - this.mockControl.valueChanges - ).pipe( - map(() => { - return this.exportWorkspace(); - }), - debounceTime(_debounceTime) - ); - } + workspaceChange(_debounceTime: number = 0) { + return merge( + this.adjustments.valueChanges, + this.formGroup.valueChanges, + this.mockControl.valueChanges + ).pipe( + map(() => { + return this.exportWorkspace(); + }), + debounceTime(_debounceTime) + ); + } - ngAfterViewInit() { - // console.log('wtf>'); - // this.realtimeMessageProvider!.connect({ - // source: 'bilibili', - // channel: 545 - // }).subscribe(x=>{ - // this.host.emitMessage(x); - // }) - } + ngAfterViewInit() { + // console.log('wtf>'); + // this.realtimeMessageProvider!.connect({ + // source: 'bilibili', + // channel: 545 + // }).subscribe(x=>{ + // this.host.emitMessage(x); + // }) + } } export interface EditorWorkspace { - adjustments: { - width: string; - height: string; - }; - mocks: {}; - values: SafeAny; -} \ No newline at end of file + adjustments: { + width: string; + height: string; + }; + mocks: {}; + values: SafeAny; +} diff --git a/libs/editor/src/lib/editor.host.ts b/libs/editor/src/lib/editor.host.ts index a9f5f34..915ab18 100644 --- a/libs/editor/src/lib/editor.host.ts +++ b/libs/editor/src/lib/editor.host.ts @@ -4,59 +4,58 @@ import { BehaviorSubject, ReplaySubject, Subject } from 'rxjs'; @Injectable() export class EditorEnvironmentHost extends ComenEnvironmentHost { + constructor() { + super(); + } - constructor() { - super(); - } + private message$: Subject = new Subject(); - private message$: Subject = new Subject(); + message() { + return this.message$; + } - message() { - return this.message$; - } + emitMessage(message: Message) { + this.message$.next(message); + } - emitMessage(message: Message) { - this.message$.next(message); - } + private configMap: { + [key: string]: Subject; + } = {}; - private configMap: { - [key: string]: Subject; - } = {}; - - config(section: string) { - if (!this.configMap[section]) { - this.configMap[section] = new ReplaySubject(1); - } - return this.configMap[section]; + config(section: string) { + if (!this.configMap[section]) { + this.configMap[section] = new ReplaySubject(1); } + return this.configMap[section]; + } - emitConfig(section: string, value: SafeAny) { - if (!this.configMap[section]) { - this.configMap[section] = new BehaviorSubject(value); - return; - } - this.configMap[section].next(value); + emitConfig(section: string, value: SafeAny) { + if (!this.configMap[section]) { + this.configMap[section] = new BehaviorSubject(value); + return; } + this.configMap[section].next(value); + } - private variantPipeMap: { - [key: string]: Subject; - } = {}; + private variantPipeMap: { + [key: string]: Subject; + } = {}; - variantPipe(section: string) { - if (!this.variantPipeMap[section]) { - this.variantPipeMap[section] = new ReplaySubject(1); - } - return this.variantPipeMap[section]; + variantPipe(section: string) { + if (!this.variantPipeMap[section]) { + this.variantPipeMap[section] = new ReplaySubject(1); } + return this.variantPipeMap[section]; + } - emitVariantPipe(section: string, value: SafeAny) { - if (!this.variantPipeMap[section]) { - this.variantPipeMap[section] = new BehaviorSubject(value); - } - this.variantPipeMap[section].next(value); + emitVariantPipe(section: string, value: SafeAny) { + if (!this.variantPipeMap[section]) { + this.variantPipeMap[section] = new BehaviorSubject(value); } + this.variantPipeMap[section].next(value); + } - assetUrl(id: string) { - return ''; - } -} \ No newline at end of file + assetUrl(id: string) { + return ''; + } +} diff --git a/libs/editor/src/lib/editor.module.ts b/libs/editor/src/lib/editor.module.ts index 1f25d52..d3b8f69 100644 --- a/libs/editor/src/lib/editor.module.ts +++ b/libs/editor/src/lib/editor.module.ts @@ -28,39 +28,39 @@ import { MatListModule } from '@angular/material/list'; import { MatCardModule } from '@angular/material/card'; @NgModule({ - declarations: [ - EditorComponent, - ConfigBlockComponent, - ConfigPlaneComponent, - // ConditionPopoverComponent, - // ConditionPopoverDirective, - MockMessagePlaneComponent, - MockMessageEditDialogComponent, - ], - imports: [ - CommonModule, - ControlsModule, - OverlayModule, - DragDropModule, - FlexLayoutModule, - ReactiveFormsModule, - ReactiveComponentModule, - FontAwesomeModule, - // mat controls - MatButtonModule, - MatSliderModule, - MatInputModule, - MatButtonToggleModule, - MatSlideToggleModule, - MatFormFieldModule, - MatExpansionModule, - MatIconModule, - MatMenuModule, - MatChipsModule, - MatDialogModule, - MatListModule, - MatCardModule, - ], - exports: [EditorComponent], + declarations: [ + EditorComponent, + ConfigBlockComponent, + ConfigPlaneComponent, + // ConditionPopoverComponent, + // ConditionPopoverDirective, + MockMessagePlaneComponent, + MockMessageEditDialogComponent, + ], + imports: [ + CommonModule, + ControlsModule, + OverlayModule, + DragDropModule, + FlexLayoutModule, + ReactiveFormsModule, + ReactiveComponentModule, + FontAwesomeModule, + // mat controls + MatButtonModule, + MatSliderModule, + MatInputModule, + MatButtonToggleModule, + MatSlideToggleModule, + MatFormFieldModule, + MatExpansionModule, + MatIconModule, + MatMenuModule, + MatChipsModule, + MatDialogModule, + MatListModule, + MatCardModule, + ], + exports: [EditorComponent], }) export class EditorModule {} diff --git a/libs/editor/src/lib/mock-message-plane/mock-message-edit-dialog/mock-message-edit-dialog.component.html b/libs/editor/src/lib/mock-message-plane/mock-message-edit-dialog/mock-message-edit-dialog.component.html index d71861b..d3d629b 100644 --- a/libs/editor/src/lib/mock-message-plane/mock-message-edit-dialog/mock-message-edit-dialog.component.html +++ b/libs/editor/src/lib/mock-message-plane/mock-message-edit-dialog/mock-message-edit-dialog.component.html @@ -1,5 +1,2 @@ - - -
-
- \ No newline at end of file +
+ diff --git a/libs/editor/src/lib/mock-message-plane/mock-message-edit-dialog/mock-message-edit-dialog.component.scss b/libs/editor/src/lib/mock-message-plane/mock-message-edit-dialog/mock-message-edit-dialog.component.scss index 2cda81e..aead702 100644 --- a/libs/editor/src/lib/mock-message-plane/mock-message-edit-dialog/mock-message-edit-dialog.component.scss +++ b/libs/editor/src/lib/mock-message-plane/mock-message-edit-dialog/mock-message-edit-dialog.component.scss @@ -1,5 +1,5 @@ :host { - display: block; - width: 240px; - background-color: white; + display: block; + width: 240px; + background-color: white; } diff --git a/libs/editor/src/lib/mock-message-plane/mock-message-edit-dialog/mock-message-edit-dialog.component.ts b/libs/editor/src/lib/mock-message-plane/mock-message-edit-dialog/mock-message-edit-dialog.component.ts index a282618..8f73202 100644 --- a/libs/editor/src/lib/mock-message-plane/mock-message-edit-dialog/mock-message-edit-dialog.component.ts +++ b/libs/editor/src/lib/mock-message-plane/mock-message-edit-dialog/mock-message-edit-dialog.component.ts @@ -7,30 +7,25 @@ import { Subject } from 'rxjs'; selector: 'comen-mock-message-edit-dialog', templateUrl: './mock-message-edit-dialog.component.html', styleUrls: ['./mock-message-edit-dialog.component.scss'], - animations: [ - zoomBigMotion - ], - host:{ - '[@zoomBigMotion]':'"active"' - } + animations: [zoomBigMotion], + host: { + '[@zoomBigMotion]': '"active"', + }, }) export class MockMessageEditDialogComponent implements OnInit { - - constructor() { } + constructor() {} close$ = new Subject(); - ngOnInit(): void { - } + ngOnInit(): void {} - close(){ + close() { this.close$.next(); this.close$.complete(); } - save(value){ + save(value) { this.close$.next(); this.close$.complete(); } - } diff --git a/libs/editor/src/lib/mock-message-plane/mock-message-plane.component.html b/libs/editor/src/lib/mock-message-plane/mock-message-plane.component.html index 961b8d3..66bdf18 100644 --- a/libs/editor/src/lib/mock-message-plane/mock-message-plane.component.html +++ b/libs/editor/src/lib/mock-message-plane/mock-message-plane.component.html @@ -1,35 +1,49 @@ -
- 测试 -
+
测试
- -
- - {{mock.name}} -
+ +
+ + {{ mock.name }} +
+ + +
当前未设置任何测试消息。
+ +
+
+ + + +
-
- - - - -
\ No newline at end of file diff --git a/libs/editor/src/lib/mock-message-plane/mock-message-plane.component.scss b/libs/editor/src/lib/mock-message-plane/mock-message-plane.component.scss index 3918e31..1b836b8 100644 --- a/libs/editor/src/lib/mock-message-plane/mock-message-plane.component.scss +++ b/libs/editor/src/lib/mock-message-plane/mock-message-plane.component.scss @@ -1,79 +1,79 @@ :host { - box-sizing: border-box; - display: flex; - flex-direction: column; - width: 100%; - height: 100%; - padding: 8px; + box-sizing: border-box; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + padding: 8px; - & > .list { - height: 100%; - flex: 1; - overflow-y: auto; - font-size: 13.3px; - background: white; - border-radius: 4px; - border: solid 1px #f1f0f1; + & > .list { + height: 100%; + flex: 1; + overflow-y: auto; + font-size: 13.3px; + background: white; + border-radius: 4px; + border: solid 1px #f1f0f1; - &::-webkit-scrollbar { - width: 8px; - height: 8px; - // border: solid 2px #ddd; - // background-color: #eee; - } + &::-webkit-scrollbar { + width: 8px; + height: 8px; + // border: solid 2px #ddd; + // background-color: #eee; + } - &::-webkit-scrollbar-track { - background-color: transparent; - } + &::-webkit-scrollbar-track { + background-color: transparent; + } - /*定义滑块 内阴影+圆角*/ - &::-webkit-scrollbar-thumb:vertical { - background-color: #f7f7f7; - transition: background-color 2s ease; - } + /*定义滑块 内阴影+圆角*/ + &::-webkit-scrollbar-thumb:vertical { + background-color: #f7f7f7; + transition: background-color 2s ease; + } - &:hover { - /*定义滑块 内阴影+圆角*/ - &::-webkit-scrollbar-thumb:vertical { - background-color: #ddd; - } - } + &:hover { + /*定义滑块 内阴影+圆角*/ + &::-webkit-scrollbar-thumb:vertical { + background-color: #ddd; + } + } - & > .item { - // margin-bottom: 4px; - padding: 5px 8px; - cursor: pointer; - color: #333333; - font-size: 12px; - user-select: none; + & > .item { + // margin-bottom: 4px; + padding: 5px 8px; + cursor: pointer; + color: #333333; + font-size: 12px; + user-select: none; - &:nth-child(even) { - background-color: #f9f8f9; - } + &:nth-child(even) { + background-color: #f9f8f9; + } - &:hover { - background-color: #f0e4f0; - } + &:hover { + background-color: #f0e4f0; + } - &.active { - background-color: #a16ba1; - color: #ffffff; - & > fa-icon { - color: #ffffff; - } - } - & > fa-icon { - color: #666; - display: inline-block; - margin-right: 4px; - transform: scale(0.75); - } + &.active { + background-color: #a16ba1; + color: #ffffff; + & > fa-icon { + color: #ffffff; } + } + & > fa-icon { + color: #666; + display: inline-block; + margin-right: 4px; + transform: scale(0.75); + } } + } - & > .actions { - & > button { - margin-right: 4px; - } + & > .actions { + & > button { + margin-right: 4px; } + } } diff --git a/libs/editor/src/lib/mock-message-plane/mock-message-plane.component.ts b/libs/editor/src/lib/mock-message-plane/mock-message-plane.component.ts index 6c713e9..50ebf63 100644 --- a/libs/editor/src/lib/mock-message-plane/mock-message-plane.component.ts +++ b/libs/editor/src/lib/mock-message-plane/mock-message-plane.component.ts @@ -1,15 +1,36 @@ import { Overlay } from '@angular/cdk/overlay'; import { ComponentPortal } from '@angular/cdk/portal'; -import { ChangeDetectorRef, Component, ElementRef, Inject, Injector, Optional, ViewContainerRef } from '@angular/core'; -import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { + ChangeDetectorRef, + Component, + ElementRef, + Inject, + Injector, + Optional, + ViewContainerRef, +} from '@angular/core'; +import { + ControlValueAccessor, + FormBuilder, + NG_VALUE_ACCESSOR, +} from '@angular/forms'; import { ComenEnvironmentHost, SafeAny, TextMessage } from '@comen/common'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { EditorEnvironmentHost } from '../editor.host'; -import { EditorRealtimeMessageProvider, EDITOR_REALTIME_MESSAGE_PROVIDER } from '../providers'; +import { + EditorRealtimeMessageProvider, + EDITOR_REALTIME_MESSAGE_PROVIDER, +} from '../providers'; import { MockMessageEditDialogComponent } from './mock-message-edit-dialog/mock-message-edit-dialog.component'; import * as mock from 'mockjs'; -import { faLink,faPlus,faMinus,faEdit, faPlay } from '@fortawesome/free-solid-svg-icons'; +import { + faLink, + faPlus, + faMinus, + faEdit, + faPlay, +} from '@fortawesome/free-solid-svg-icons'; @Component({ selector: 'comen-mock-message-plane', @@ -19,12 +40,11 @@ import { faLink,faPlus,faMinus,faEdit, faPlay } from '@fortawesome/free-solid-sv { provide: NG_VALUE_ACCESSOR, useExisting: MockMessagePlaneComponent, - multi: true - } - ] + multi: true, + }, + ], }) export class MockMessagePlaneComponent implements ControlValueAccessor { - realtimeConnecting = false; currentSelect = null; @@ -34,33 +54,41 @@ export class MockMessagePlaneComponent implements ControlValueAccessor { mockGens: { id: string; name: string; - val?: SafeAny - }[] = [{ - id: "233", - name: "测试消息1", - val: { - username: "Test", - content: "fuck" - } - }, { - id: "2344", - name: "测试消息1", - }, { - id: "634", - name: "测试消息1", - }, { - id: "2d当然人 f33", - name: "测试消息1", - }, { - id: "fha", - name: "测试消息1", - }, { - id: "233eea", - name: "测试消息1", - }, { - id: "2esa33", - name: "测试消息1", - }]; + val?: SafeAny; + }[] = [ + { + id: '233', + name: '测试消息1', + val: { + username: 'Test', + content: 'fuck', + }, + }, + { + id: '2344', + name: '测试消息1', + }, + { + id: '634', + name: '测试消息1', + }, + { + id: '2d当然人 f33', + name: '测试消息1', + }, + { + id: 'fha', + name: '测试消息1', + }, + { + id: '233eea', + name: '测试消息1', + }, + { + id: '2esa33', + name: '测试消息1', + }, + ]; constructor( @Inject(ComenEnvironmentHost) private host: EditorEnvironmentHost, @@ -69,8 +97,10 @@ export class MockMessagePlaneComponent implements ControlValueAccessor { private overlay: Overlay, private element: ElementRef, private vcr: ViewContainerRef, - @Inject(EDITOR_REALTIME_MESSAGE_PROVIDER) @Optional() public realtimeMessageProvider?: EditorRealtimeMessageProvider - ) { } + @Inject(EDITOR_REALTIME_MESSAGE_PROVIDER) + @Optional() + public realtimeMessageProvider?: EditorRealtimeMessageProvider + ) {} connectRealtimeSource(event: MouseEvent) { if (this.realtimeConnecting) { @@ -78,19 +108,21 @@ export class MockMessagePlaneComponent implements ControlValueAccessor { } else { this.realtimeConnecting = true; this.realtimeMessageProvider!.connect({ - target: event.currentTarget - }).pipe(takeUntil(this.disconnect$)).subscribe( - (value) => { - this.host.emitMessage(value); - }, - (e) => { - console.error(e); - }, - () => { - this.realtimeConnecting = false; - this.cdr.markForCheck(); - } - ); + target: event.currentTarget, + }) + .pipe(takeUntil(this.disconnect$)) + .subscribe( + (value) => { + this.host.emitMessage(value); + }, + (e) => { + console.error(e); + }, + () => { + this.realtimeConnecting = false; + this.cdr.markForCheck(); + } + ); } } @@ -102,28 +134,35 @@ export class MockMessagePlaneComponent implements ControlValueAccessor { return new Promise((res) => { const ref = this.overlay.create({ hasBackdrop: true, - backdropClass: "cdk-overlay-transparent-backdrop", - positionStrategy: this.overlay.position().flexibleConnectedTo(this.element).withPositions([ - { - originX: "start", - originY: "bottom", - overlayX: "end", - overlayY: "bottom", - offsetX: -16, - offsetY: -16 - } - ]) + backdropClass: 'cdk-overlay-transparent-backdrop', + positionStrategy: this.overlay + .position() + .flexibleConnectedTo(this.element) + .withPositions([ + { + originX: 'start', + originY: 'bottom', + overlayX: 'end', + overlayY: 'bottom', + offsetX: -16, + offsetY: -16, + }, + ]), }); const injector = Injector.create({ providers: [], - parent: this.vcr.injector + parent: this.vcr.injector, }); - const portal = new ComponentPortal(MockMessageEditDialogComponent, this.vcr, injector); - portal.attach(ref).instance.close$.subscribe(value => { + const portal = new ComponentPortal( + MockMessageEditDialogComponent, + this.vcr, + injector + ); + portal.attach(ref).instance.close$.subscribe((value) => { ref.dispose(); res(value); }); - }) + }); } async addMock() { @@ -131,22 +170,20 @@ export class MockMessagePlaneComponent implements ControlValueAccessor { // create new ... } - editMock() { - - } + editMock() {} deleteMock() { if (this.currentSelect != null) { - this.mockGens = this.mockGens.filter(x => x.id != this.currentSelect); + this.mockGens = this.mockGens.filter((x) => x.id != this.currentSelect); this.currentSelect = null; } } - generateMock(mock:SafeAny,event:MouseEvent){ + generateMock(mock: SafeAny, event: MouseEvent) { event.stopPropagation(); this.host.emitMessage({ ...mockTextMessage(), - ...mock.val + ...mock.val, }); } @@ -154,13 +191,9 @@ export class MockMessagePlaneComponent implements ControlValueAccessor { this.mockGens = value; } - registerOnChange() { + registerOnChange() {} - } - - registerOnTouched() { - - } + registerOnTouched() {} ngOnDestroy() { this.disconnect$.next(); @@ -171,19 +204,19 @@ export class MockMessagePlaneComponent implements ControlValueAccessor { faPlus = faPlus; faMinus = faMinus; faEdit = faEdit; - faPlay = faPlay + faPlay = faPlay; } -function mockTextMessage(){ +function mockTextMessage() { return { type: 'text', - username: mock.Random.csentence(3,8), + username: mock.Random.csentence(3, 8), content: mock.Random.csentence(), - avatar: mock.Random.dataImage("64x64"), + avatar: mock.Random.dataImage('64x64'), badges: [], platformUserExtra: {}, - platformUserId: mock.Random.natural(1,10000000), - platformUserLevel: mock.Random.natural(1,3), - usertype: 1 + platformUserId: mock.Random.natural(1, 10000000), + platformUserLevel: mock.Random.natural(1, 3), + usertype: 1, } as TextMessage; -} \ No newline at end of file +} diff --git a/libs/editor/src/lib/providers.ts b/libs/editor/src/lib/providers.ts index a64b192..4255bcb 100644 --- a/libs/editor/src/lib/providers.ts +++ b/libs/editor/src/lib/providers.ts @@ -1,24 +1,35 @@ import { InjectionToken } from '@angular/core'; -import { ComenAddonConfiguration, ComenAddonMetadata, Message, SafeAny } from '@comen/common'; +import { + ComenAddonConfiguration, + ComenAddonMetadata, + Message, + SafeAny, +} from '@comen/common'; import { Identifier } from 'kairo'; import { Observable } from 'rxjs'; export interface EditorRealtimeMessageProvider { - /** - * [IMPORTANT]: the returned observable may not (and should not) in zone environment - * @param options - */ - connect(options: SafeAny): Observable; + /** + * [IMPORTANT]: the returned observable may not (and should not) in zone environment + * @param options + */ + connect(options: SafeAny): Observable; } -export const EDITOR_REALTIME_MESSAGE_PROVIDER = new InjectionToken('editor realtime message provider'); +export const EDITOR_REALTIME_MESSAGE_PROVIDER = new InjectionToken( + 'editor realtime message provider' +); export interface EditorAssetStorage { - getUrl(id: string): string; - store(blob: Blob): string; - remove(id: string): void; + getUrl(id: string): string; + store(blob: Blob): string; + remove(id: string): void; } -export const EDITOR_ASSET_STORAGE = new InjectionToken('editor asset storage'); +export const EDITOR_ASSET_STORAGE = new InjectionToken( + 'editor asset storage' +); -export const COMEN_ADDON_METADATA = Identifier.of("ComenAddonMetadata"); \ No newline at end of file +export const COMEN_ADDON_METADATA = Identifier.of( + 'ComenAddonMetadata' +); diff --git a/libs/editor/src/lib/variant/compiler.spec.ts b/libs/editor/src/lib/variant/compiler.spec.ts index d9e7e90..f4c319d 100644 --- a/libs/editor/src/lib/variant/compiler.spec.ts +++ b/libs/editor/src/lib/variant/compiler.spec.ts @@ -1,49 +1,53 @@ import { generateCode } from './compiler'; describe('Compiler', () => { - it('should works', () => { - const testdata = { - default: { - a: 1, - b: 2, - c: 3 + it('should works', () => { + const testdata = { + default: { + a: 1, + b: 2, + c: 3, + }, + variants: [ + { + condition: [ + { + property: 'test', + method: 'gte', + target: 100, }, - variants: [ - { - condition: [{ - property: 'test', - method: 'gte', - target: 100 - }], - property: { - a: 3, - c: 6 - } - }, - { - condition: [{ - property: 'test2', - method: 'tct', - target: 'work' - }], - property: { - a: 7 - } - } - ] - }; - const fn = generateCode(testdata); - const ret = fn({ - test: 0 - }); - expect(ret.a).toBe(1); - const ret2 = fn({ - test: 101 - }); - expect(ret2.a).toBe(3); - const ret3 = fn({ - test2: 'it works!' - }); - expect(ret3.a).toBe(7); + ], + property: { + a: 3, + c: 6, + }, + }, + { + condition: [ + { + property: 'test2', + method: 'tct', + target: 'work', + }, + ], + property: { + a: 7, + }, + }, + ], + }; + const fn = generateCode(testdata); + const ret = fn({ + test: 0, + }); + expect(ret.a).toBe(1); + const ret2 = fn({ + test: 101, + }); + expect(ret2.a).toBe(3); + const ret3 = fn({ + test2: 'it works!', }); -}) \ No newline at end of file + expect(ret3.a).toBe(7); + }); +}); diff --git a/libs/editor/src/lib/variant/compiler.ts b/libs/editor/src/lib/variant/compiler.ts index 8e1c0e5..e173bb7 100644 --- a/libs/editor/src/lib/variant/compiler.ts +++ b/libs/editor/src/lib/variant/compiler.ts @@ -2,316 +2,340 @@ import { SafeAny, VariantCondition } from '@comen/common'; import * as esgen from 'escodegen'; import * as estree from 'estree'; -export type CustomConditionExpressionGenerator = - (operateExpression: estree.Expression, method: string, target: SafeAny) => estree.Expression; +export type CustomConditionExpressionGenerator = ( + operateExpression: estree.Expression, + method: string, + target: SafeAny +) => estree.Expression; export const CUSTEM_CONDITION_EXPRESSION_GENERATOR: { - [key: string]: CustomConditionExpressionGenerator + [key: string]: CustomConditionExpressionGenerator; } = {}; const BINARY_OPERATIONS_MAP = { - gt: '>', - gte: '>=', - lt: '<', - lte: '<=', - eq: '===', - neq: '!==' -} + gt: '>', + gte: '>=', + lt: '<', + lte: '<=', + eq: '===', + neq: '!==', +}; -function ensureAccessable(target: estree.Expression, expression: estree.Expression) { - return { - type: 'ConditionalExpression', - test: target, - consequent: expression, - alternate: { - type: 'Literal', - value: false - } - } as estree.ConditionalExpression; +function ensureAccessable( + target: estree.Expression, + expression: estree.Expression +) { + return { + type: 'ConditionalExpression', + test: target, + consequent: expression, + alternate: { + type: 'Literal', + value: false, + }, + } as estree.ConditionalExpression; } -function generateStringConditionExpression(operateExpression: estree.Expression, method: string, target: SafeAny): estree.Expression { - switch (method) { - case 'tnct': - return { - type: 'BinaryExpression', - operator: '==', - left: { - type: 'CallExpression', - optional: false, - callee: { - type: 'MemberExpression', - object: operateExpression, - optional: false, - property: { - type: 'Identifier', - name: 'indexOf' - }, - computed: false - }, - arguments: [ - generateObjectExpression(target) - ] - }, - right: generateObjectExpression(-1) - } - case 'tct': - return { - type: 'BinaryExpression', - operator: '!=', - left: { - type: 'CallExpression', - optional: false, - callee: { - type: 'MemberExpression', - object: operateExpression, - optional: false, - property: { - type: 'Identifier', - name: 'indexOf' - }, - computed: false - }, - arguments: [ - generateObjectExpression(target) - ] - }, - right: generateObjectExpression(-1) - } - case 'teq': - return { - type: 'BinaryExpression', - operator: '==', - left: operateExpression, - right: { - type: 'Literal', - value: target - } - } - case 'tstart': - return { - type: 'CallExpression', - optional: true, - callee: { - type: 'MemberExpression', - object: operateExpression, - optional: false, - property: { - type: 'Identifier', - name: 'startsWith' - }, - computed: false - }, - arguments: [ - generateObjectExpression(target) - ] - }; - case 'tend': - return { - type: 'CallExpression', - optional: true, - callee: { - type: 'MemberExpression', - object: operateExpression, - optional: true, - property: { - type: 'Identifier', - name: 'endsWith' - }, - computed: false - }, - arguments: [ - generateObjectExpression(target) - ] - } - } +function generateStringConditionExpression( + operateExpression: estree.Expression, + method: string, + target: SafeAny +): estree.Expression { + switch (method) { + case 'tnct': + return { + type: 'BinaryExpression', + operator: '==', + left: { + type: 'CallExpression', + optional: false, + callee: { + type: 'MemberExpression', + object: operateExpression, + optional: false, + property: { + type: 'Identifier', + name: 'indexOf', + }, + computed: false, + }, + arguments: [generateObjectExpression(target)], + }, + right: generateObjectExpression(-1), + }; + case 'tct': + return { + type: 'BinaryExpression', + operator: '!=', + left: { + type: 'CallExpression', + optional: false, + callee: { + type: 'MemberExpression', + object: operateExpression, + optional: false, + property: { + type: 'Identifier', + name: 'indexOf', + }, + computed: false, + }, + arguments: [generateObjectExpression(target)], + }, + right: generateObjectExpression(-1), + }; + case 'teq': + return { + type: 'BinaryExpression', + operator: '==', + left: operateExpression, + right: { + type: 'Literal', + value: target, + }, + }; + case 'tstart': + return { + type: 'CallExpression', + optional: true, + callee: { + type: 'MemberExpression', + object: operateExpression, + optional: false, + property: { + type: 'Identifier', + name: 'startsWith', + }, + computed: false, + }, + arguments: [generateObjectExpression(target)], + }; + case 'tend': + return { + type: 'CallExpression', + optional: true, + callee: { + type: 'MemberExpression', + object: operateExpression, + optional: true, + property: { + type: 'Identifier', + name: 'endsWith', + }, + computed: false, + }, + arguments: [generateObjectExpression(target)], + }; + } } function generateObjectExpression(constObject: SafeAny): estree.Expression { - if (typeof constObject == 'string' || typeof constObject == 'number' - || typeof constObject == 'bigint' || typeof constObject == 'boolean') { - if (typeof constObject == 'number' && constObject < 0) { - return { - type: 'UnaryExpression', - operator: '-', - prefix: true, - argument: { - type: 'Literal', - value: -constObject - } - } - } - return { - type: 'Literal', - value: constObject - } as estree.Literal; + if ( + typeof constObject == 'string' || + typeof constObject == 'number' || + typeof constObject == 'bigint' || + typeof constObject == 'boolean' + ) { + if (typeof constObject == 'number' && constObject < 0) { + return { + type: 'UnaryExpression', + operator: '-', + prefix: true, + argument: { + type: 'Literal', + value: -constObject, + }, + }; } - else if (typeof constObject == 'object') { - if (constObject instanceof Array) { - return { - type: 'ArrayExpression', - elements: constObject.map(generateObjectExpression) - } - } - if (constObject === null) { - return { - type: 'Literal', - value: null - } - } - return { - type: 'ObjectExpression', - properties: Object.entries(constObject).map(([key, value]) => { - return { - type: 'Property', - key: { - type: 'Literal', - value: key - }, - value: generateObjectExpression(value) - } as estree.Property; - }) - } - } else if (constObject === undefined) { - return { - type: 'Identifier', - name: 'undefined' - } + return { + type: 'Literal', + value: constObject, + } as estree.Literal; + } else if (typeof constObject == 'object') { + if (constObject instanceof Array) { + return { + type: 'ArrayExpression', + elements: constObject.map(generateObjectExpression), + }; } - else { - console.log(constObject); - throw 'NOT EXPECTED VALUE TYPE'; + if (constObject === null) { + return { + type: 'Literal', + value: null, + }; } - + return { + type: 'ObjectExpression', + properties: Object.entries(constObject).map(([key, value]) => { + return { + type: 'Property', + key: { + type: 'Literal', + value: key, + }, + value: generateObjectExpression(value), + } as estree.Property; + }), + }; + } else if (constObject === undefined) { + return { + type: 'Identifier', + name: 'undefined', + }; + } else { + console.log(constObject); + throw 'NOT EXPECTED VALUE TYPE'; + } } -function generateConditionExpression(condition: VariantCondition): estree.Expression { - return ensureAccessable({ +function generateConditionExpression( + condition: VariantCondition +): estree.Expression { + return ensureAccessable( + { + type: 'MemberExpression', + object: { + type: 'Identifier', + name: 'c', + }, + property: { + type: 'Literal', + value: condition.property, + }, + computed: true, + optional: false, + }, + (() => { + const operatee = { type: 'MemberExpression', object: { - type: 'Identifier', - name: 'c' + type: 'Identifier', + name: 'c', }, property: { - type: 'Literal', - value: condition.property + type: 'Literal', + value: condition.property, }, computed: true, - optional: false - }, (() => { - const operatee = { - type: 'MemberExpression', - object: { - type: 'Identifier', - name: 'c' - }, - property: { - type: 'Literal', - value: condition.property - }, - computed: true, - optional: false - } as estree.MemberExpression; - // TODO: allow extension! - if (CUSTEM_CONDITION_EXPRESSION_GENERATOR[condition.method]) { - CUSTEM_CONDITION_EXPRESSION_GENERATOR[condition.method](operatee, condition.method, condition.target); - } - if (BINARY_OPERATIONS_MAP[condition.method]) { - return { - type: 'BinaryExpression', - operator: BINARY_OPERATIONS_MAP[condition.method], - left: operatee, - right: { - type: 'Literal', - value: condition.target - } as estree.Literal, - } as estree.BinaryExpression - } else { - return generateStringConditionExpression(operatee, condition.method, condition.target); - } - })()); -} - -function generateVariantConditions(conditions: VariantCondition[]): estree.Expression { - if (conditions.length == 0) { + optional: false, + } as estree.MemberExpression; + // TODO: allow extension! + if (CUSTEM_CONDITION_EXPRESSION_GENERATOR[condition.method]) { + CUSTEM_CONDITION_EXPRESSION_GENERATOR[condition.method]( + operatee, + condition.method, + condition.target + ); + } + if (BINARY_OPERATIONS_MAP[condition.method]) { return { + type: 'BinaryExpression', + operator: BINARY_OPERATIONS_MAP[condition.method], + left: operatee, + right: { type: 'Literal', - value: true - } - } else if (conditions.length == 1) { - return generateConditionExpression(conditions[0]); - } + value: condition.target, + } as estree.Literal, + } as estree.BinaryExpression; + } else { + return generateStringConditionExpression( + operatee, + condition.method, + condition.target + ); + } + })() + ); +} + +function generateVariantConditions( + conditions: VariantCondition[] +): estree.Expression { + if (conditions.length == 0) { return { - type: 'LogicalExpression', - operator: '&&', - left: generateConditionExpression(conditions[0]), - right: generateVariantConditions(conditions.slice(1)) - } + type: 'Literal', + value: true, + }; + } else if (conditions.length == 1) { + return generateConditionExpression(conditions[0]); + } + return { + type: 'LogicalExpression', + operator: '&&', + left: generateConditionExpression(conditions[0]), + right: generateVariantConditions(conditions.slice(1)), + }; } -function generateVariantStatements(variants: { - condition: VariantCondition[], - properties: SafeAny -}[]) { - return variants.map(variant => { - return { - type: 'IfStatement', - test: generateVariantConditions(variant.condition), - consequent: { - type: 'ExpressionStatement', - expression: { - type: 'CallExpression', - callee: { - type: 'MemberExpression', - object: { - type: 'Identifier', - name: 'Object' - }, - property: { - type: 'Identifier', - name: 'assign' - } - }, - arguments: [ - { - type: 'Identifier', - name: 'r' - }, - generateObjectExpression(variant.properties) - ] - } - } - } as estree.IfStatement - }); +function generateVariantStatements( + variants: { + condition: VariantCondition[]; + properties: SafeAny; + }[] +) { + return variants.map((variant) => { + return { + type: 'IfStatement', + test: generateVariantConditions(variant.condition), + consequent: { + type: 'ExpressionStatement', + expression: { + type: 'CallExpression', + callee: { + type: 'MemberExpression', + object: { + type: 'Identifier', + name: 'Object', + }, + property: { + type: 'Identifier', + name: 'assign', + }, + }, + arguments: [ + { + type: 'Identifier', + name: 'r', + }, + generateObjectExpression(variant.properties), + ], + }, + }, + } as estree.IfStatement; + }); } export function generateCode(encode: { - default: SafeAny, - variants: { - condition: VariantCondition[], - properties: SafeAny - }[] + default: SafeAny; + variants: { + condition: VariantCondition[]; + properties: SafeAny; + }[]; }) { - const statement = [ + const statement = [ + { + type: 'VariableDeclaration', + declarations: [ { - type: 'VariableDeclaration', - declarations: [{ - type: 'VariableDeclarator', - id: { - type: 'Identifier', - name: 'r' - }, - init: generateObjectExpression(encode.default) - }], - kind: 'var' + type: 'VariableDeclarator', + id: { + type: 'Identifier', + name: 'r', + }, + init: generateObjectExpression(encode.default), }, - ...generateVariantStatements(encode.variants), - { - type: 'ReturnStatement', - argument: { - type: 'Identifier', - name: 'r' - } - } - ].map(s => esgen.generate(s, { format: { compact: true } })).join(''); - return statement; -} \ No newline at end of file + ], + kind: 'var', + }, + ...generateVariantStatements(encode.variants), + { + type: 'ReturnStatement', + argument: { + type: 'Identifier', + name: 'r', + }, + }, + ] + .map((s) => esgen.generate(s, { format: { compact: true } })) + .join(''); + return statement; +} diff --git a/libs/editor/tsconfig.json b/libs/editor/tsconfig.json index c2666de..97c774d 100644 --- a/libs/editor/tsconfig.json +++ b/libs/editor/tsconfig.json @@ -1,16 +1,16 @@ { - "extends": "../../tsconfig.base.json", - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "angularCompilerOptions": { - "fullTemplateTypeCheck": true + "extends": "../../tsconfig.base.json", + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" } + ], + "angularCompilerOptions": { + "fullTemplateTypeCheck": true + } } diff --git a/libs/gamma/README.md b/libs/gamma/README.md index 5635cce..773a0d8 100644 --- a/libs/gamma/README.md +++ b/libs/gamma/README.md @@ -1,3 +1,3 @@ -# Gamma +# Gamma -Gamma is a youtube-live-ish comment renderer of comen project. This is the third generation of renderer (from previous project "bilichat") so called "gamma". \ No newline at end of file +Gamma is a youtube-live-ish comment renderer of comen project. This is the third generation of renderer (from previous project "bilichat") so called "gamma". diff --git a/libs/gamma/src/index.ts b/libs/gamma/src/index.ts index a58c321..f271473 100644 --- a/libs/gamma/src/index.ts +++ b/libs/gamma/src/index.ts @@ -2,4 +2,4 @@ export * from './lib/gamma.module'; export * from './lib/gamma-config.service'; export * from './lib/gamma.app'; export * from './lib/consts'; -export * from './lib/metadata'; \ No newline at end of file +export * from './lib/metadata'; diff --git a/libs/gamma/src/lib/animations.ts b/libs/gamma/src/lib/animations.ts index 10d1ba5..d6a9ee9 100644 --- a/libs/gamma/src/lib/animations.ts +++ b/libs/gamma/src/lib/animations.ts @@ -1,14 +1,17 @@ import { animate, style, transition, trigger } from '@angular/animations'; -export const SLIDEDOWN = trigger('slideDown',[ - transition(':leave',[ - style({ - transform: 'translateY(0)', - opacity:1 - }), - animate('0.2s cubic-bezier(0.4, 0, 1, 1)',style({ - opacity: 0.5, - transform: 'translateY(44px)' - })) - ]) -]) \ No newline at end of file +export const SLIDEDOWN = trigger('slideDown', [ + transition(':leave', [ + style({ + transform: 'translateY(0)', + opacity: 1, + }), + animate( + '0.2s cubic-bezier(0.4, 0, 1, 1)', + style({ + opacity: 0.5, + transform: 'translateY(44px)', + }) + ), + ]), +]); diff --git a/libs/gamma/src/lib/consts.ts b/libs/gamma/src/lib/consts.ts index 08f8446..a93de03 100644 --- a/libs/gamma/src/lib/consts.ts +++ b/libs/gamma/src/lib/consts.ts @@ -20,98 +20,98 @@ * sponsor: linear-gradient(90deg,0,1,2,3,4); 15 157 88 11 / 11 128 67 1 */ export type ColorInfo = { - primary: string; - secondary: string; - header: string; - authorName: string; - timestamp: string; - message: string; + primary: string; + secondary: string; + header: string; + authorName: string; + timestamp: string; + message: string; - sticker_size: number; - ticker_timeout?: number; - price_limit: number; -} + sticker_size: number; + ticker_timeout?: number; + price_limit: number; +}; export const BLUE: ColorInfo = { - primary: 'rgba(30,136,229,1)', - secondary: 'rgba(21,101,192,1)', - header: 'rgba(255,255,255,1)', - authorName: 'rgba(255,255,255,0.7)', - timestamp: 'rgba(255,255,255,0.5)', - message: 'rgba(255,255,255,1)', - sticker_size: 40, - ticker_timeout: 0, - price_limit: 0 -} + primary: 'rgba(30,136,229,1)', + secondary: 'rgba(21,101,192,1)', + header: 'rgba(255,255,255,1)', + authorName: 'rgba(255,255,255,0.7)', + timestamp: 'rgba(255,255,255,0.5)', + message: 'rgba(255,255,255,1)', + sticker_size: 40, + ticker_timeout: 0, + price_limit: 0, +}; export const CYAN: ColorInfo = { - primary: 'rgba(0,229,255,1)', - secondary: 'rgba(0,184,212,1)', - header: 'rgba(0,0,0,1)', - authorName: 'rgba(0,0,0,0.7)', - timestamp: 'rgba(0,0,0,0.5)', - message: 'rgba(0,0,0,1)', - sticker_size: 72, - ticker_timeout: 60, - price_limit: 30 -} + primary: 'rgba(0,229,255,1)', + secondary: 'rgba(0,184,212,1)', + header: 'rgba(0,0,0,1)', + authorName: 'rgba(0,0,0,0.7)', + timestamp: 'rgba(0,0,0,0.5)', + message: 'rgba(0,0,0,1)', + sticker_size: 72, + ticker_timeout: 60, + price_limit: 30, +}; export const YELLOW_GREEN: ColorInfo = { - primary: 'rgba(29,233,182,1)', - secondary: 'rgba(0,191,165,1)', - header: 'rgba(0,0,0,1)', - authorName: 'rgba(0,0,0,0.5)', - timestamp: 'rgba(0,0,0,0.5)', - message: 'rgba(0,0,0,1)', - sticker_size: 88, - ticker_timeout: 120, - price_limit: 50 -} + primary: 'rgba(29,233,182,1)', + secondary: 'rgba(0,191,165,1)', + header: 'rgba(0,0,0,1)', + authorName: 'rgba(0,0,0,0.5)', + timestamp: 'rgba(0,0,0,0.5)', + message: 'rgba(0,0,0,1)', + sticker_size: 88, + ticker_timeout: 120, + price_limit: 50, +}; export const YELLOW: ColorInfo = { - primary: 'rgba(255,202,40,1)', - secondary: 'rgba(255,179,0,1)', - header: 'rgba(0,0,0,0.87)', - authorName: 'rgba(0,0,0,0.5)', - timestamp: 'rgba(0,0,0,0.5)', - message: 'rgba(0,0,0,0.87)', - sticker_size: 104, - ticker_timeout: 300, - price_limit: 100 -} + primary: 'rgba(255,202,40,1)', + secondary: 'rgba(255,179,0,1)', + header: 'rgba(0,0,0,0.87)', + authorName: 'rgba(0,0,0,0.5)', + timestamp: 'rgba(0,0,0,0.5)', + message: 'rgba(0,0,0,0.87)', + sticker_size: 104, + ticker_timeout: 300, + price_limit: 100, +}; export const ORANGE: ColorInfo = { - primary: 'rgba(245,124,0,1)', - secondary: 'rgba(230,81,0,1)', - header: 'rgba(255,255,255,0.87)', - authorName: 'rgba(255,255,255,0.7)', - timestamp: 'rgba(255,255,255,0.5)', - message: 'rgba(255,255,255,0.87)', - sticker_size: 120, - ticker_timeout: 1800, - price_limit: 500 -} + primary: 'rgba(245,124,0,1)', + secondary: 'rgba(230,81,0,1)', + header: 'rgba(255,255,255,0.87)', + authorName: 'rgba(255,255,255,0.7)', + timestamp: 'rgba(255,255,255,0.5)', + message: 'rgba(255,255,255,0.87)', + sticker_size: 120, + ticker_timeout: 1800, + price_limit: 500, +}; export const MAGNET: ColorInfo = { - primary: 'rgba(233,30,99,1)', - secondary: 'rgba(194,24,91,1)', - header: 'rgba(255,255,255,1)', - authorName: 'rgba(255,255,255,0.7)', - timestamp: 'rgba(255,255,255,0.5)', - message: 'rgba(255,255,255,1)', - sticker_size: 144, - ticker_timeout: 3600, - price_limit: 1000 -} + primary: 'rgba(233,30,99,1)', + secondary: 'rgba(194,24,91,1)', + header: 'rgba(255,255,255,1)', + authorName: 'rgba(255,255,255,0.7)', + timestamp: 'rgba(255,255,255,0.5)', + message: 'rgba(255,255,255,1)', + sticker_size: 144, + ticker_timeout: 3600, + price_limit: 1000, +}; export const RED: ColorInfo = { - primary: 'rgba(230,33,23,1)', - secondary: 'rgba(208,0,0,1)', - header: 'rgba(255,255,255,1)', - authorName: 'rgba(255,255,255,0.7)', - timestamp: 'rgba(255,255,255,0.5)', - message: 'rgba(255,255,255,1)', - sticker_size: 144, - ticker_timeout: 7200, - price_limit: 2000 -} \ No newline at end of file + primary: 'rgba(230,33,23,1)', + secondary: 'rgba(208,0,0,1)', + header: 'rgba(255,255,255,1)', + authorName: 'rgba(255,255,255,0.7)', + timestamp: 'rgba(255,255,255,0.5)', + message: 'rgba(255,255,255,1)', + sticker_size: 144, + ticker_timeout: 7200, + price_limit: 2000, +}; diff --git a/libs/gamma/src/lib/gamma-config.service.ts b/libs/gamma/src/lib/gamma-config.service.ts index 11b3777..aa2b728 100644 --- a/libs/gamma/src/lib/gamma-config.service.ts +++ b/libs/gamma/src/lib/gamma-config.service.ts @@ -2,64 +2,85 @@ import { Injectable, OnDestroy } from '@angular/core'; import { ComenEnvironmentHost } from '@comen/common'; import { BehaviorSubject, Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; -import { BLUE, ColorInfo, CYAN, MAGNET, ORANGE, RED, YELLOW, YELLOW_GREEN } from './consts'; +import { + BLUE, + ColorInfo, + CYAN, + MAGNET, + ORANGE, + RED, + YELLOW, + YELLOW_GREEN, +} from './consts'; export interface GammaConfiguration { - hideTimestamp: boolean; - tickerDisplayThreshold: number; - disableSmoother: boolean; - maxDanmakuNumber: number; + hideTimestamp: boolean; + tickerDisplayThreshold: number; + disableSmoother: boolean; + maxDanmakuNumber: number; } export const DEFAULT_GAMMA_CONFIGURATION: GammaConfiguration = { - hideTimestamp: false, - tickerDisplayThreshold: 50, - disableSmoother: false, - maxDanmakuNumber: 100 -} + hideTimestamp: false, + tickerDisplayThreshold: 50, + disableSmoother: false, + maxDanmakuNumber: 100, +}; /** * Legacy configuration */ @Injectable() export class GammaConfigService implements OnDestroy { + destroy$ = new Subject(); + //mutable :ascending order + private colorInfoList = [ + CYAN, + YELLOW_GREEN, + YELLOW, + ORANGE, + MAGNET, + RED, + ].sort((a, b) => a.price_limit - b.price_limit); + // TODO: remove + current$: BehaviorSubject = new BehaviorSubject( + DEFAULT_GAMMA_CONFIGURATION + ); - destroy$ = new Subject(); - //mutable :ascending order - private colorInfoList = [CYAN, YELLOW_GREEN, YELLOW, ORANGE, MAGNET, RED].sort((a, b) => a.price_limit - b.price_limit); - - // TODO: remove - current$: BehaviorSubject = new BehaviorSubject(DEFAULT_GAMMA_CONFIGURATION); - - constructor(host: ComenEnvironmentHost) { - host.config('__legacy__').pipe(takeUntil(this.destroy$)).subscribe(config => { - // TODO: validate - this.current$.next({ - ...DEFAULT_GAMMA_CONFIGURATION, - ...config, - }); + constructor(host: ComenEnvironmentHost) { + host + .config('__legacy__') + .pipe(takeUntil(this.destroy$)) + .subscribe((config) => { + // TODO: validate + this.current$.next({ + ...DEFAULT_GAMMA_CONFIGURATION, + ...config, }); - } + }); + } - ngOnDestroy() { - this.destroy$.next(); - this.destroy$.complete(); - } + ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); + } - getColorInfo(value: number) { - let lastColorInfo: ColorInfo = BLUE; - for (const info of this.colorInfoList) { - if (value >= info.price_limit) { - lastColorInfo = info; - } else { - break; - } - } - return lastColorInfo; + getColorInfo(value: number) { + let lastColorInfo: ColorInfo = BLUE; + for (const info of this.colorInfoList) { + if (value >= info.price_limit) { + lastColorInfo = info; + } else { + break; + } } + return lastColorInfo; + } - setColorInfos(colorInfos: ColorInfo[]) { - this.colorInfoList = colorInfos.sort((a, b) => a.price_limit - b.price_limit); - } -} \ No newline at end of file + setColorInfos(colorInfos: ColorInfo[]) { + this.colorInfoList = colorInfos.sort( + (a, b) => a.price_limit - b.price_limit + ); + } +} diff --git a/libs/gamma/src/lib/gamma.app.css b/libs/gamma/src/lib/gamma.app.css index 45314c0..bfb0d52 100644 --- a/libs/gamma/src/lib/gamma.app.css +++ b/libs/gamma/src/lib/gamma.app.css @@ -1,14276 +1,14118 @@ :not(.style-scope)[hidden] { - display: none !important; + display: none !important; } #data::after { - display: none; + display: none; } body { - margin: 0; + margin: 0; } 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; + --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; } html:not(.style-scope) { - --google-red-100: #f4c7c3; - --google-red-300: #e67c73; - --google-red-500: #db4437; - --google-red-700: #c53929; - - --google-blue-100: #c6dafc; - --google-blue-300: #7baaf7; - --google-blue-500: #4285f4; - --google-blue-700: #3367d6; - - --google-green-100: #b7e1cd; - --google-green-300: #57bb8a; - --google-green-500: #0f9d58; - --google-green-700: #0b8043; - - --google-yellow-100: #fce8b2; - --google-yellow-300: #f7cb4d; - --google-yellow-500: #f4b400; - --google-yellow-700: #f09300; - - --google-grey-100: #f5f5f5; - --google-grey-300: #e0e0e0; - --google-grey-500: #9e9e9e; - --google-grey-700: #616161; - - --paper-red-50: #ffebee; - --paper-red-100: #ffcdd2; - --paper-red-200: #ef9a9a; - --paper-red-300: #e57373; - --paper-red-400: #ef5350; - --paper-red-500: #f44336; - --paper-red-600: #e53935; - --paper-red-700: #d32f2f; - --paper-red-800: #c62828; - --paper-red-900: #b71c1c; - --paper-red-a100: #ff8a80; - --paper-red-a200: #ff5252; - --paper-red-a400: #ff1744; - --paper-red-a700: #d50000; - - --paper-pink-50: #fce4ec; - --paper-pink-100: #f8bbd0; - --paper-pink-200: #f48fb1; - --paper-pink-300: #f06292; - --paper-pink-400: #ec407a; - --paper-pink-500: #e91e63; - --paper-pink-600: #d81b60; - --paper-pink-700: #c2185b; - --paper-pink-800: #ad1457; - --paper-pink-900: #880e4f; - --paper-pink-a100: #ff80ab; - --paper-pink-a200: #ff4081; - --paper-pink-a400: #f50057; - --paper-pink-a700: #c51162; - - --paper-purple-50: #f3e5f5; - --paper-purple-100: #e1bee7; - --paper-purple-200: #ce93d8; - --paper-purple-300: #ba68c8; - --paper-purple-400: #ab47bc; - --paper-purple-500: #9c27b0; - --paper-purple-600: #8e24aa; - --paper-purple-700: #7b1fa2; - --paper-purple-800: #6a1b9a; - --paper-purple-900: #4a148c; - --paper-purple-a100: #ea80fc; - --paper-purple-a200: #e040fb; - --paper-purple-a400: #d500f9; - --paper-purple-a700: #aa00ff; - - --paper-deep-purple-50: #ede7f6; - --paper-deep-purple-100: #d1c4e9; - --paper-deep-purple-200: #b39ddb; - --paper-deep-purple-300: #9575cd; - --paper-deep-purple-400: #7e57c2; - --paper-deep-purple-500: #673ab7; - --paper-deep-purple-600: #5e35b1; - --paper-deep-purple-700: #512da8; - --paper-deep-purple-800: #4527a0; - --paper-deep-purple-900: #311b92; - --paper-deep-purple-a100: #b388ff; - --paper-deep-purple-a200: #7c4dff; - --paper-deep-purple-a400: #651fff; - --paper-deep-purple-a700: #6200ea; - - --paper-indigo-50: #e8eaf6; - --paper-indigo-100: #c5cae9; - --paper-indigo-200: #9fa8da; - --paper-indigo-300: #7986cb; - --paper-indigo-400: #5c6bc0; - --paper-indigo-500: #3f51b5; - --paper-indigo-600: #3949ab; - --paper-indigo-700: #303f9f; - --paper-indigo-800: #283593; - --paper-indigo-900: #1a237e; - --paper-indigo-a100: #8c9eff; - --paper-indigo-a200: #536dfe; - --paper-indigo-a400: #3d5afe; - --paper-indigo-a700: #304ffe; - - --paper-blue-50: #e3f2fd; - --paper-blue-100: #bbdefb; - --paper-blue-200: #90caf9; - --paper-blue-300: #64b5f6; - --paper-blue-400: #42a5f5; - --paper-blue-500: #2196f3; - --paper-blue-600: #1e88e5; - --paper-blue-700: #1976d2; - --paper-blue-800: #1565c0; - --paper-blue-900: #0d47a1; - --paper-blue-a100: #82b1ff; - --paper-blue-a200: #448aff; - --paper-blue-a400: #2979ff; - --paper-blue-a700: #2962ff; - - --paper-light-blue-50: #e1f5fe; - --paper-light-blue-100: #b3e5fc; - --paper-light-blue-200: #81d4fa; - --paper-light-blue-300: #4fc3f7; - --paper-light-blue-400: #29b6f6; - --paper-light-blue-500: #03a9f4; - --paper-light-blue-600: #039be5; - --paper-light-blue-700: #0288d1; - --paper-light-blue-800: #0277bd; - --paper-light-blue-900: #01579b; - --paper-light-blue-a100: #80d8ff; - --paper-light-blue-a200: #40c4ff; - --paper-light-blue-a400: #00b0ff; - --paper-light-blue-a700: #0091ea; - - --paper-cyan-50: #e0f7fa; - --paper-cyan-100: #b2ebf2; - --paper-cyan-200: #80deea; - --paper-cyan-300: #4dd0e1; - --paper-cyan-400: #26c6da; - --paper-cyan-500: #00bcd4; - --paper-cyan-600: #00acc1; - --paper-cyan-700: #0097a7; - --paper-cyan-800: #00838f; - --paper-cyan-900: #006064; - --paper-cyan-a100: #84ffff; - --paper-cyan-a200: #18ffff; - --paper-cyan-a400: #00e5ff; - --paper-cyan-a700: #00b8d4; - - --paper-teal-50: #e0f2f1; - --paper-teal-100: #b2dfdb; - --paper-teal-200: #80cbc4; - --paper-teal-300: #4db6ac; - --paper-teal-400: #26a69a; - --paper-teal-500: #009688; - --paper-teal-600: #00897b; - --paper-teal-700: #00796b; - --paper-teal-800: #00695c; - --paper-teal-900: #004d40; - --paper-teal-a100: #a7ffeb; - --paper-teal-a200: #64ffda; - --paper-teal-a400: #1de9b6; - --paper-teal-a700: #00bfa5; - - --paper-green-50: #e8f5e9; - --paper-green-100: #c8e6c9; - --paper-green-200: #a5d6a7; - --paper-green-300: #81c784; - --paper-green-400: #66bb6a; - --paper-green-500: #4caf50; - --paper-green-600: #43a047; - --paper-green-700: #388e3c; - --paper-green-800: #2e7d32; - --paper-green-900: #1b5e20; - --paper-green-a100: #b9f6ca; - --paper-green-a200: #69f0ae; - --paper-green-a400: #00e676; - --paper-green-a700: #00c853; - - --paper-light-green-50: #f1f8e9; - --paper-light-green-100: #dcedc8; - --paper-light-green-200: #c5e1a5; - --paper-light-green-300: #aed581; - --paper-light-green-400: #9ccc65; - --paper-light-green-500: #8bc34a; - --paper-light-green-600: #7cb342; - --paper-light-green-700: #689f38; - --paper-light-green-800: #558b2f; - --paper-light-green-900: #33691e; - --paper-light-green-a100: #ccff90; - --paper-light-green-a200: #b2ff59; - --paper-light-green-a400: #76ff03; - --paper-light-green-a700: #64dd17; - - --paper-lime-50: #f9fbe7; - --paper-lime-100: #f0f4c3; - --paper-lime-200: #e6ee9c; - --paper-lime-300: #dce775; - --paper-lime-400: #d4e157; - --paper-lime-500: #cddc39; - --paper-lime-600: #c0ca33; - --paper-lime-700: #afb42b; - --paper-lime-800: #9e9d24; - --paper-lime-900: #827717; - --paper-lime-a100: #f4ff81; - --paper-lime-a200: #eeff41; - --paper-lime-a400: #c6ff00; - --paper-lime-a700: #aeea00; - - --paper-yellow-50: #fffde7; - --paper-yellow-100: #fff9c4; - --paper-yellow-200: #fff59d; - --paper-yellow-300: #fff176; - --paper-yellow-400: #ffee58; - --paper-yellow-500: #ffeb3b; - --paper-yellow-600: #fdd835; - --paper-yellow-700: #fbc02d; - --paper-yellow-800: #f9a825; - --paper-yellow-900: #f57f17; - --paper-yellow-a100: #ffff8d; - --paper-yellow-a200: #ffff00; - --paper-yellow-a400: #ffea00; - --paper-yellow-a700: #ffd600; - - --paper-amber-50: #fff8e1; - --paper-amber-100: #ffecb3; - --paper-amber-200: #ffe082; - --paper-amber-300: #ffd54f; - --paper-amber-400: #ffca28; - --paper-amber-500: #ffc107; - --paper-amber-600: #ffb300; - --paper-amber-700: #ffa000; - --paper-amber-800: #ff8f00; - --paper-amber-900: #ff6f00; - --paper-amber-a100: #ffe57f; - --paper-amber-a200: #ffd740; - --paper-amber-a400: #ffc400; - --paper-amber-a700: #ffab00; - - --paper-orange-50: #fff3e0; - --paper-orange-100: #ffe0b2; - --paper-orange-200: #ffcc80; - --paper-orange-300: #ffb74d; - --paper-orange-400: #ffa726; - --paper-orange-500: #ff9800; - --paper-orange-600: #fb8c00; - --paper-orange-700: #f57c00; - --paper-orange-800: #ef6c00; - --paper-orange-900: #e65100; - --paper-orange-a100: #ffd180; - --paper-orange-a200: #ffab40; - --paper-orange-a400: #ff9100; - --paper-orange-a700: #ff6500; - - --paper-deep-orange-50: #fbe9e7; - --paper-deep-orange-100: #ffccbc; - --paper-deep-orange-200: #ffab91; - --paper-deep-orange-300: #ff8a65; - --paper-deep-orange-400: #ff7043; - --paper-deep-orange-500: #ff5722; - --paper-deep-orange-600: #f4511e; - --paper-deep-orange-700: #e64a19; - --paper-deep-orange-800: #d84315; - --paper-deep-orange-900: #bf360c; - --paper-deep-orange-a100: #ff9e80; - --paper-deep-orange-a200: #ff6e40; - --paper-deep-orange-a400: #ff3d00; - --paper-deep-orange-a700: #dd2c00; - - --paper-brown-50: #efebe9; - --paper-brown-100: #d7ccc8; - --paper-brown-200: #bcaaa4; - --paper-brown-300: #a1887f; - --paper-brown-400: #8d6e63; - --paper-brown-500: #795548; - --paper-brown-600: #6d4c41; - --paper-brown-700: #5d4037; - --paper-brown-800: #4e342e; - --paper-brown-900: #3e2723; - - --paper-grey-50: #fafafa; - --paper-grey-100: #f5f5f5; - --paper-grey-200: #eeeeee; - --paper-grey-300: #e0e0e0; - --paper-grey-400: #bdbdbd; - --paper-grey-500: #9e9e9e; - --paper-grey-600: #757575; - --paper-grey-700: #616161; - --paper-grey-800: #424242; - --paper-grey-900: #212121; - - --paper-blue-grey-50: #eceff1; - --paper-blue-grey-100: #cfd8dc; - --paper-blue-grey-200: #b0bec5; - --paper-blue-grey-300: #90a4ae; - --paper-blue-grey-400: #78909c; - --paper-blue-grey-500: #607d8b; - --paper-blue-grey-600: #546e7a; - --paper-blue-grey-700: #455a64; - --paper-blue-grey-800: #37474f; - --paper-blue-grey-900: #263238; - - --dark-divider-opacity: 0.12; - --dark-disabled-opacity: 0.38; - --dark-secondary-opacity: 0.54; - --dark-primary-opacity: 0.87; - - --light-divider-opacity: 0.12; - --light-disabled-opacity: 0.3; - --light-secondary-opacity: 0.7; - --light-primary-opacity: 1; + --google-red-100: #f4c7c3; + --google-red-300: #e67c73; + --google-red-500: #db4437; + --google-red-700: #c53929; + + --google-blue-100: #c6dafc; + --google-blue-300: #7baaf7; + --google-blue-500: #4285f4; + --google-blue-700: #3367d6; + + --google-green-100: #b7e1cd; + --google-green-300: #57bb8a; + --google-green-500: #0f9d58; + --google-green-700: #0b8043; + + --google-yellow-100: #fce8b2; + --google-yellow-300: #f7cb4d; + --google-yellow-500: #f4b400; + --google-yellow-700: #f09300; + + --google-grey-100: #f5f5f5; + --google-grey-300: #e0e0e0; + --google-grey-500: #9e9e9e; + --google-grey-700: #616161; + + --paper-red-50: #ffebee; + --paper-red-100: #ffcdd2; + --paper-red-200: #ef9a9a; + --paper-red-300: #e57373; + --paper-red-400: #ef5350; + --paper-red-500: #f44336; + --paper-red-600: #e53935; + --paper-red-700: #d32f2f; + --paper-red-800: #c62828; + --paper-red-900: #b71c1c; + --paper-red-a100: #ff8a80; + --paper-red-a200: #ff5252; + --paper-red-a400: #ff1744; + --paper-red-a700: #d50000; + + --paper-pink-50: #fce4ec; + --paper-pink-100: #f8bbd0; + --paper-pink-200: #f48fb1; + --paper-pink-300: #f06292; + --paper-pink-400: #ec407a; + --paper-pink-500: #e91e63; + --paper-pink-600: #d81b60; + --paper-pink-700: #c2185b; + --paper-pink-800: #ad1457; + --paper-pink-900: #880e4f; + --paper-pink-a100: #ff80ab; + --paper-pink-a200: #ff4081; + --paper-pink-a400: #f50057; + --paper-pink-a700: #c51162; + + --paper-purple-50: #f3e5f5; + --paper-purple-100: #e1bee7; + --paper-purple-200: #ce93d8; + --paper-purple-300: #ba68c8; + --paper-purple-400: #ab47bc; + --paper-purple-500: #9c27b0; + --paper-purple-600: #8e24aa; + --paper-purple-700: #7b1fa2; + --paper-purple-800: #6a1b9a; + --paper-purple-900: #4a148c; + --paper-purple-a100: #ea80fc; + --paper-purple-a200: #e040fb; + --paper-purple-a400: #d500f9; + --paper-purple-a700: #aa00ff; + + --paper-deep-purple-50: #ede7f6; + --paper-deep-purple-100: #d1c4e9; + --paper-deep-purple-200: #b39ddb; + --paper-deep-purple-300: #9575cd; + --paper-deep-purple-400: #7e57c2; + --paper-deep-purple-500: #673ab7; + --paper-deep-purple-600: #5e35b1; + --paper-deep-purple-700: #512da8; + --paper-deep-purple-800: #4527a0; + --paper-deep-purple-900: #311b92; + --paper-deep-purple-a100: #b388ff; + --paper-deep-purple-a200: #7c4dff; + --paper-deep-purple-a400: #651fff; + --paper-deep-purple-a700: #6200ea; + + --paper-indigo-50: #e8eaf6; + --paper-indigo-100: #c5cae9; + --paper-indigo-200: #9fa8da; + --paper-indigo-300: #7986cb; + --paper-indigo-400: #5c6bc0; + --paper-indigo-500: #3f51b5; + --paper-indigo-600: #3949ab; + --paper-indigo-700: #303f9f; + --paper-indigo-800: #283593; + --paper-indigo-900: #1a237e; + --paper-indigo-a100: #8c9eff; + --paper-indigo-a200: #536dfe; + --paper-indigo-a400: #3d5afe; + --paper-indigo-a700: #304ffe; + + --paper-blue-50: #e3f2fd; + --paper-blue-100: #bbdefb; + --paper-blue-200: #90caf9; + --paper-blue-300: #64b5f6; + --paper-blue-400: #42a5f5; + --paper-blue-500: #2196f3; + --paper-blue-600: #1e88e5; + --paper-blue-700: #1976d2; + --paper-blue-800: #1565c0; + --paper-blue-900: #0d47a1; + --paper-blue-a100: #82b1ff; + --paper-blue-a200: #448aff; + --paper-blue-a400: #2979ff; + --paper-blue-a700: #2962ff; + + --paper-light-blue-50: #e1f5fe; + --paper-light-blue-100: #b3e5fc; + --paper-light-blue-200: #81d4fa; + --paper-light-blue-300: #4fc3f7; + --paper-light-blue-400: #29b6f6; + --paper-light-blue-500: #03a9f4; + --paper-light-blue-600: #039be5; + --paper-light-blue-700: #0288d1; + --paper-light-blue-800: #0277bd; + --paper-light-blue-900: #01579b; + --paper-light-blue-a100: #80d8ff; + --paper-light-blue-a200: #40c4ff; + --paper-light-blue-a400: #00b0ff; + --paper-light-blue-a700: #0091ea; + + --paper-cyan-50: #e0f7fa; + --paper-cyan-100: #b2ebf2; + --paper-cyan-200: #80deea; + --paper-cyan-300: #4dd0e1; + --paper-cyan-400: #26c6da; + --paper-cyan-500: #00bcd4; + --paper-cyan-600: #00acc1; + --paper-cyan-700: #0097a7; + --paper-cyan-800: #00838f; + --paper-cyan-900: #006064; + --paper-cyan-a100: #84ffff; + --paper-cyan-a200: #18ffff; + --paper-cyan-a400: #00e5ff; + --paper-cyan-a700: #00b8d4; + + --paper-teal-50: #e0f2f1; + --paper-teal-100: #b2dfdb; + --paper-teal-200: #80cbc4; + --paper-teal-300: #4db6ac; + --paper-teal-400: #26a69a; + --paper-teal-500: #009688; + --paper-teal-600: #00897b; + --paper-teal-700: #00796b; + --paper-teal-800: #00695c; + --paper-teal-900: #004d40; + --paper-teal-a100: #a7ffeb; + --paper-teal-a200: #64ffda; + --paper-teal-a400: #1de9b6; + --paper-teal-a700: #00bfa5; + + --paper-green-50: #e8f5e9; + --paper-green-100: #c8e6c9; + --paper-green-200: #a5d6a7; + --paper-green-300: #81c784; + --paper-green-400: #66bb6a; + --paper-green-500: #4caf50; + --paper-green-600: #43a047; + --paper-green-700: #388e3c; + --paper-green-800: #2e7d32; + --paper-green-900: #1b5e20; + --paper-green-a100: #b9f6ca; + --paper-green-a200: #69f0ae; + --paper-green-a400: #00e676; + --paper-green-a700: #00c853; + + --paper-light-green-50: #f1f8e9; + --paper-light-green-100: #dcedc8; + --paper-light-green-200: #c5e1a5; + --paper-light-green-300: #aed581; + --paper-light-green-400: #9ccc65; + --paper-light-green-500: #8bc34a; + --paper-light-green-600: #7cb342; + --paper-light-green-700: #689f38; + --paper-light-green-800: #558b2f; + --paper-light-green-900: #33691e; + --paper-light-green-a100: #ccff90; + --paper-light-green-a200: #b2ff59; + --paper-light-green-a400: #76ff03; + --paper-light-green-a700: #64dd17; + + --paper-lime-50: #f9fbe7; + --paper-lime-100: #f0f4c3; + --paper-lime-200: #e6ee9c; + --paper-lime-300: #dce775; + --paper-lime-400: #d4e157; + --paper-lime-500: #cddc39; + --paper-lime-600: #c0ca33; + --paper-lime-700: #afb42b; + --paper-lime-800: #9e9d24; + --paper-lime-900: #827717; + --paper-lime-a100: #f4ff81; + --paper-lime-a200: #eeff41; + --paper-lime-a400: #c6ff00; + --paper-lime-a700: #aeea00; + + --paper-yellow-50: #fffde7; + --paper-yellow-100: #fff9c4; + --paper-yellow-200: #fff59d; + --paper-yellow-300: #fff176; + --paper-yellow-400: #ffee58; + --paper-yellow-500: #ffeb3b; + --paper-yellow-600: #fdd835; + --paper-yellow-700: #fbc02d; + --paper-yellow-800: #f9a825; + --paper-yellow-900: #f57f17; + --paper-yellow-a100: #ffff8d; + --paper-yellow-a200: #ffff00; + --paper-yellow-a400: #ffea00; + --paper-yellow-a700: #ffd600; + + --paper-amber-50: #fff8e1; + --paper-amber-100: #ffecb3; + --paper-amber-200: #ffe082; + --paper-amber-300: #ffd54f; + --paper-amber-400: #ffca28; + --paper-amber-500: #ffc107; + --paper-amber-600: #ffb300; + --paper-amber-700: #ffa000; + --paper-amber-800: #ff8f00; + --paper-amber-900: #ff6f00; + --paper-amber-a100: #ffe57f; + --paper-amber-a200: #ffd740; + --paper-amber-a400: #ffc400; + --paper-amber-a700: #ffab00; + + --paper-orange-50: #fff3e0; + --paper-orange-100: #ffe0b2; + --paper-orange-200: #ffcc80; + --paper-orange-300: #ffb74d; + --paper-orange-400: #ffa726; + --paper-orange-500: #ff9800; + --paper-orange-600: #fb8c00; + --paper-orange-700: #f57c00; + --paper-orange-800: #ef6c00; + --paper-orange-900: #e65100; + --paper-orange-a100: #ffd180; + --paper-orange-a200: #ffab40; + --paper-orange-a400: #ff9100; + --paper-orange-a700: #ff6500; + + --paper-deep-orange-50: #fbe9e7; + --paper-deep-orange-100: #ffccbc; + --paper-deep-orange-200: #ffab91; + --paper-deep-orange-300: #ff8a65; + --paper-deep-orange-400: #ff7043; + --paper-deep-orange-500: #ff5722; + --paper-deep-orange-600: #f4511e; + --paper-deep-orange-700: #e64a19; + --paper-deep-orange-800: #d84315; + --paper-deep-orange-900: #bf360c; + --paper-deep-orange-a100: #ff9e80; + --paper-deep-orange-a200: #ff6e40; + --paper-deep-orange-a400: #ff3d00; + --paper-deep-orange-a700: #dd2c00; + + --paper-brown-50: #efebe9; + --paper-brown-100: #d7ccc8; + --paper-brown-200: #bcaaa4; + --paper-brown-300: #a1887f; + --paper-brown-400: #8d6e63; + --paper-brown-500: #795548; + --paper-brown-600: #6d4c41; + --paper-brown-700: #5d4037; + --paper-brown-800: #4e342e; + --paper-brown-900: #3e2723; + + --paper-grey-50: #fafafa; + --paper-grey-100: #f5f5f5; + --paper-grey-200: #eeeeee; + --paper-grey-300: #e0e0e0; + --paper-grey-400: #bdbdbd; + --paper-grey-500: #9e9e9e; + --paper-grey-600: #757575; + --paper-grey-700: #616161; + --paper-grey-800: #424242; + --paper-grey-900: #212121; + + --paper-blue-grey-50: #eceff1; + --paper-blue-grey-100: #cfd8dc; + --paper-blue-grey-200: #b0bec5; + --paper-blue-grey-300: #90a4ae; + --paper-blue-grey-400: #78909c; + --paper-blue-grey-500: #607d8b; + --paper-blue-grey-600: #546e7a; + --paper-blue-grey-700: #455a64; + --paper-blue-grey-800: #37474f; + --paper-blue-grey-900: #263238; + + --dark-divider-opacity: 0.12; + --dark-disabled-opacity: 0.38; + --dark-secondary-opacity: 0.54; + --dark-primary-opacity: 0.87; + + --light-divider-opacity: 0.12; + --light-disabled-opacity: 0.3; + --light-secondary-opacity: 0.7; + --light-primary-opacity: 1; } html:not(.style-scope) { - --primary-text-color: var(--light-theme-text-color); - --primary-background-color: var(--light-theme-background-color); - --secondary-text-color: var(--light-theme-secondary-color); - --disabled-text-color: var(--light-theme-disabled-color); - --divider-color: var(--light-theme-divider-color); - --error-color: var(--paper-deep-orange-a700); - - --primary-color: var(--paper-indigo-500); - --light-primary-color: var(--paper-indigo-100); - --dark-primary-color: var(--paper-indigo-700); - - --accent-color: var(--paper-pink-a200); - --light-accent-color: var(--paper-pink-a100); - --dark-accent-color: var(--paper-pink-a400); - - --light-theme-background-color: #ffffff; - --light-theme-base-color: #000000; - --light-theme-text-color: var(--paper-grey-900); - --light-theme-secondary-color: #737373; - --light-theme-disabled-color: #9b9b9b; - --light-theme-divider-color: #dbdbdb; - - --dark-theme-background-color: var(--paper-grey-900); - --dark-theme-base-color: #ffffff; - --dark-theme-text-color: #ffffff; - --dark-theme-secondary-color: #bcbcbc; - --dark-theme-disabled-color: #646464; - --dark-theme-divider-color: #3c3c3c; - - --text-primary-color: var(--dark-theme-text-color); - --default-primary-color: var(--primary-color); + --primary-text-color: var(--light-theme-text-color); + --primary-background-color: var(--light-theme-background-color); + --secondary-text-color: var(--light-theme-secondary-color); + --disabled-text-color: var(--light-theme-disabled-color); + --divider-color: var(--light-theme-divider-color); + --error-color: var(--paper-deep-orange-a700); + + --primary-color: var(--paper-indigo-500); + --light-primary-color: var(--paper-indigo-100); + --dark-primary-color: var(--paper-indigo-700); + + --accent-color: var(--paper-pink-a200); + --light-accent-color: var(--paper-pink-a100); + --dark-accent-color: var(--paper-pink-a400); + + --light-theme-background-color: #ffffff; + --light-theme-base-color: #000000; + --light-theme-text-color: var(--paper-grey-900); + --light-theme-secondary-color: #737373; + --light-theme-disabled-color: #9b9b9b; + --light-theme-divider-color: #dbdbdb; + + --dark-theme-background-color: var(--paper-grey-900); + --dark-theme-base-color: #ffffff; + --dark-theme-text-color: #ffffff; + --dark-theme-secondary-color: #bcbcbc; + --dark-theme-disabled-color: #646464; + --dark-theme-divider-color: #3c3c3c; + + --text-primary-color: var(--dark-theme-text-color); + --default-primary-color: var(--primary-color); } html:not(.style-scope) { - --paper-font-common-base_-_font-family: "Roboto", "Noto", sans-serif; - --paper-font-common-base_-_-webkit-font-smoothing: antialiased; - --paper-font-common-code_-_font-family: "Roboto Mono", "Consolas", "Menlo", - monospace; - --paper-font-common-code_-_-webkit-font-smoothing: antialiased; - --paper-font-common-expensive-kerning_-_text-rendering: optimizeLegibility; - --paper-font-common-nowrap_-_white-space: nowrap; - --paper-font-common-nowrap_-_overflow: hidden; - --paper-font-common-nowrap_-_text-overflow: ellipsis; - --paper-font-display4_-_font-family: var( - --paper-font-common-base_-_font-family - ); - --paper-font-display4_-_-webkit-font-smoothing: var( - --paper-font-common-base_-_-webkit-font-smoothing - ); - --paper-font-display4_-_white-space: var( - --paper-font-common-nowrap_-_white-space - ); - --paper-font-display4_-_overflow: var( - --paper-font-common-nowrap_-_overflow - ); - --paper-font-display4_-_text-overflow: var( - --paper-font-common-nowrap_-_text-overflow - ); - --paper-font-display4_-_font-size: 112px; - --paper-font-display4_-_font-weight: 300; - --paper-font-display4_-_letter-spacing: -0.044em; - --paper-font-display4_-_line-height: 120px; - --paper-font-display3_-_font-family: var( - --paper-font-common-base_-_font-family - ); - --paper-font-display3_-_-webkit-font-smoothing: var( - --paper-font-common-base_-_-webkit-font-smoothing - ); - --paper-font-display3_-_white-space: var( - --paper-font-common-nowrap_-_white-space - ); - --paper-font-display3_-_overflow: var( - --paper-font-common-nowrap_-_overflow - ); - --paper-font-display3_-_text-overflow: var( - --paper-font-common-nowrap_-_text-overflow - ); - --paper-font-display3_-_font-size: 56px; - --paper-font-display3_-_font-weight: 400; - --paper-font-display3_-_letter-spacing: -0.026em; - --paper-font-display3_-_line-height: 60px; - --paper-font-display2_-_font-family: var( - --paper-font-common-base_-_font-family - ); - --paper-font-display2_-_-webkit-font-smoothing: var( - --paper-font-common-base_-_-webkit-font-smoothing - ); - --paper-font-display2_-_font-size: 45px; - --paper-font-display2_-_font-weight: 400; - --paper-font-display2_-_letter-spacing: -0.018em; - --paper-font-display2_-_line-height: 48px; - --paper-font-display1_-_font-family: var( - --paper-font-common-base_-_font-family - ); - --paper-font-display1_-_-webkit-font-smoothing: var( - --paper-font-common-base_-_-webkit-font-smoothing - ); - --paper-font-display1_-_font-size: 34px; - --paper-font-display1_-_font-weight: 400; - --paper-font-display1_-_letter-spacing: -0.01em; - --paper-font-display1_-_line-height: 40px; - --paper-font-headline_-_font-family: var( - --paper-font-common-base_-_font-family - ); - --paper-font-headline_-_-webkit-font-smoothing: var( - --paper-font-common-base_-_-webkit-font-smoothing - ); - --paper-font-headline_-_font-size: 24px; - --paper-font-headline_-_font-weight: 400; - --paper-font-headline_-_letter-spacing: -0.012em; - --paper-font-headline_-_line-height: 32px; - --paper-font-title_-_font-family: var( - --paper-font-common-base_-_font-family - ); - --paper-font-title_-_-webkit-font-smoothing: var( - --paper-font-common-base_-_-webkit-font-smoothing - ); - --paper-font-title_-_white-space: var( - --paper-font-common-nowrap_-_white-space - ); - --paper-font-title_-_overflow: var(--paper-font-common-nowrap_-_overflow); - --paper-font-title_-_text-overflow: var( - --paper-font-common-nowrap_-_text-overflow - ); - --paper-font-title_-_font-size: 20px; - --paper-font-title_-_font-weight: 500; - --paper-font-title_-_line-height: 28px; - --paper-font-subhead_-_font-family: var( - --paper-font-common-base_-_font-family - ); - --paper-font-subhead_-_-webkit-font-smoothing: var( - --paper-font-common-base_-_-webkit-font-smoothing - ); - --paper-font-subhead_-_font-size: 16px; - --paper-font-subhead_-_font-weight: 400; - --paper-font-subhead_-_line-height: 24px; - --paper-font-body2_-_font-family: var( - --paper-font-common-base_-_font-family - ); - --paper-font-body2_-_-webkit-font-smoothing: var( - --paper-font-common-base_-_-webkit-font-smoothing - ); - --paper-font-body2_-_font-size: 14px; - --paper-font-body2_-_font-weight: 500; - --paper-font-body2_-_line-height: 24px; - --paper-font-body1_-_font-family: var( - --paper-font-common-base_-_font-family - ); - --paper-font-body1_-_-webkit-font-smoothing: var( - --paper-font-common-base_-_-webkit-font-smoothing - ); - --paper-font-body1_-_font-size: 14px; - --paper-font-body1_-_font-weight: 400; - --paper-font-body1_-_line-height: 20px; - --paper-font-caption_-_font-family: var( - --paper-font-common-base_-_font-family - ); - --paper-font-caption_-_-webkit-font-smoothing: var( - --paper-font-common-base_-_-webkit-font-smoothing - ); - --paper-font-caption_-_white-space: var( - --paper-font-common-nowrap_-_white-space - ); - --paper-font-caption_-_overflow: var(--paper-font-common-nowrap_-_overflow); - --paper-font-caption_-_text-overflow: var( - --paper-font-common-nowrap_-_text-overflow - ); - --paper-font-caption_-_font-size: 12px; - --paper-font-caption_-_font-weight: 400; - --paper-font-caption_-_letter-spacing: 0.011em; - --paper-font-caption_-_line-height: 20px; - --paper-font-menu_-_font-family: var( - --paper-font-common-base_-_font-family - ); - --paper-font-menu_-_-webkit-font-smoothing: var( - --paper-font-common-base_-_-webkit-font-smoothing - ); - --paper-font-menu_-_white-space: var( - --paper-font-common-nowrap_-_white-space - ); - --paper-font-menu_-_overflow: var(--paper-font-common-nowrap_-_overflow); - --paper-font-menu_-_text-overflow: var( - --paper-font-common-nowrap_-_text-overflow - ); - --paper-font-menu_-_font-size: 13px; - --paper-font-menu_-_font-weight: 500; - --paper-font-menu_-_line-height: 24px; - --paper-font-button_-_font-family: var( - --paper-font-common-base_-_font-family - ); - --paper-font-button_-_-webkit-font-smoothing: var( - --paper-font-common-base_-_-webkit-font-smoothing - ); - --paper-font-button_-_white-space: var( - --paper-font-common-nowrap_-_white-space - ); - --paper-font-button_-_overflow: var(--paper-font-common-nowrap_-_overflow); - --paper-font-button_-_text-overflow: var( - --paper-font-common-nowrap_-_text-overflow - ); - --paper-font-button_-_font-size: 14px; - --paper-font-button_-_font-weight: 500; - --paper-font-button_-_letter-spacing: 0.018em; - --paper-font-button_-_line-height: 24px; - --paper-font-button_-_text-transform: uppercase; - --paper-font-code2_-_font-family: var( - --paper-font-common-code_-_font-family - ); - --paper-font-code2_-_-webkit-font-smoothing: var( - --paper-font-common-code_-_-webkit-font-smoothing - ); - --paper-font-code2_-_font-size: 14px; - --paper-font-code2_-_font-weight: 700; - --paper-font-code2_-_line-height: 20px; - --paper-font-code1_-_font-family: var( - --paper-font-common-code_-_font-family - ); - --paper-font-code1_-_-webkit-font-smoothing: var( - --paper-font-common-code_-_-webkit-font-smoothing - ); - --paper-font-code1_-_font-size: 14px; - --paper-font-code1_-_font-weight: 500; - --paper-font-code1_-_line-height: 20px; + --paper-font-common-base_-_font-family: 'Roboto', 'Noto', sans-serif; + --paper-font-common-base_-_-webkit-font-smoothing: antialiased; + --paper-font-common-code_-_font-family: 'Roboto Mono', 'Consolas', 'Menlo', + monospace; + --paper-font-common-code_-_-webkit-font-smoothing: antialiased; + --paper-font-common-expensive-kerning_-_text-rendering: optimizeLegibility; + --paper-font-common-nowrap_-_white-space: nowrap; + --paper-font-common-nowrap_-_overflow: hidden; + --paper-font-common-nowrap_-_text-overflow: ellipsis; + --paper-font-display4_-_font-family: var( + --paper-font-common-base_-_font-family + ); + --paper-font-display4_-_-webkit-font-smoothing: var( + --paper-font-common-base_-_-webkit-font-smoothing + ); + --paper-font-display4_-_white-space: var( + --paper-font-common-nowrap_-_white-space + ); + --paper-font-display4_-_overflow: var(--paper-font-common-nowrap_-_overflow); + --paper-font-display4_-_text-overflow: var( + --paper-font-common-nowrap_-_text-overflow + ); + --paper-font-display4_-_font-size: 112px; + --paper-font-display4_-_font-weight: 300; + --paper-font-display4_-_letter-spacing: -0.044em; + --paper-font-display4_-_line-height: 120px; + --paper-font-display3_-_font-family: var( + --paper-font-common-base_-_font-family + ); + --paper-font-display3_-_-webkit-font-smoothing: var( + --paper-font-common-base_-_-webkit-font-smoothing + ); + --paper-font-display3_-_white-space: var( + --paper-font-common-nowrap_-_white-space + ); + --paper-font-display3_-_overflow: var(--paper-font-common-nowrap_-_overflow); + --paper-font-display3_-_text-overflow: var( + --paper-font-common-nowrap_-_text-overflow + ); + --paper-font-display3_-_font-size: 56px; + --paper-font-display3_-_font-weight: 400; + --paper-font-display3_-_letter-spacing: -0.026em; + --paper-font-display3_-_line-height: 60px; + --paper-font-display2_-_font-family: var( + --paper-font-common-base_-_font-family + ); + --paper-font-display2_-_-webkit-font-smoothing: var( + --paper-font-common-base_-_-webkit-font-smoothing + ); + --paper-font-display2_-_font-size: 45px; + --paper-font-display2_-_font-weight: 400; + --paper-font-display2_-_letter-spacing: -0.018em; + --paper-font-display2_-_line-height: 48px; + --paper-font-display1_-_font-family: var( + --paper-font-common-base_-_font-family + ); + --paper-font-display1_-_-webkit-font-smoothing: var( + --paper-font-common-base_-_-webkit-font-smoothing + ); + --paper-font-display1_-_font-size: 34px; + --paper-font-display1_-_font-weight: 400; + --paper-font-display1_-_letter-spacing: -0.01em; + --paper-font-display1_-_line-height: 40px; + --paper-font-headline_-_font-family: var( + --paper-font-common-base_-_font-family + ); + --paper-font-headline_-_-webkit-font-smoothing: var( + --paper-font-common-base_-_-webkit-font-smoothing + ); + --paper-font-headline_-_font-size: 24px; + --paper-font-headline_-_font-weight: 400; + --paper-font-headline_-_letter-spacing: -0.012em; + --paper-font-headline_-_line-height: 32px; + --paper-font-title_-_font-family: var(--paper-font-common-base_-_font-family); + --paper-font-title_-_-webkit-font-smoothing: var( + --paper-font-common-base_-_-webkit-font-smoothing + ); + --paper-font-title_-_white-space: var( + --paper-font-common-nowrap_-_white-space + ); + --paper-font-title_-_overflow: var(--paper-font-common-nowrap_-_overflow); + --paper-font-title_-_text-overflow: var( + --paper-font-common-nowrap_-_text-overflow + ); + --paper-font-title_-_font-size: 20px; + --paper-font-title_-_font-weight: 500; + --paper-font-title_-_line-height: 28px; + --paper-font-subhead_-_font-family: var( + --paper-font-common-base_-_font-family + ); + --paper-font-subhead_-_-webkit-font-smoothing: var( + --paper-font-common-base_-_-webkit-font-smoothing + ); + --paper-font-subhead_-_font-size: 16px; + --paper-font-subhead_-_font-weight: 400; + --paper-font-subhead_-_line-height: 24px; + --paper-font-body2_-_font-family: var(--paper-font-common-base_-_font-family); + --paper-font-body2_-_-webkit-font-smoothing: var( + --paper-font-common-base_-_-webkit-font-smoothing + ); + --paper-font-body2_-_font-size: 14px; + --paper-font-body2_-_font-weight: 500; + --paper-font-body2_-_line-height: 24px; + --paper-font-body1_-_font-family: var(--paper-font-common-base_-_font-family); + --paper-font-body1_-_-webkit-font-smoothing: var( + --paper-font-common-base_-_-webkit-font-smoothing + ); + --paper-font-body1_-_font-size: 14px; + --paper-font-body1_-_font-weight: 400; + --paper-font-body1_-_line-height: 20px; + --paper-font-caption_-_font-family: var( + --paper-font-common-base_-_font-family + ); + --paper-font-caption_-_-webkit-font-smoothing: var( + --paper-font-common-base_-_-webkit-font-smoothing + ); + --paper-font-caption_-_white-space: var( + --paper-font-common-nowrap_-_white-space + ); + --paper-font-caption_-_overflow: var(--paper-font-common-nowrap_-_overflow); + --paper-font-caption_-_text-overflow: var( + --paper-font-common-nowrap_-_text-overflow + ); + --paper-font-caption_-_font-size: 12px; + --paper-font-caption_-_font-weight: 400; + --paper-font-caption_-_letter-spacing: 0.011em; + --paper-font-caption_-_line-height: 20px; + --paper-font-menu_-_font-family: var(--paper-font-common-base_-_font-family); + --paper-font-menu_-_-webkit-font-smoothing: var( + --paper-font-common-base_-_-webkit-font-smoothing + ); + --paper-font-menu_-_white-space: var( + --paper-font-common-nowrap_-_white-space + ); + --paper-font-menu_-_overflow: var(--paper-font-common-nowrap_-_overflow); + --paper-font-menu_-_text-overflow: var( + --paper-font-common-nowrap_-_text-overflow + ); + --paper-font-menu_-_font-size: 13px; + --paper-font-menu_-_font-weight: 500; + --paper-font-menu_-_line-height: 24px; + --paper-font-button_-_font-family: var( + --paper-font-common-base_-_font-family + ); + --paper-font-button_-_-webkit-font-smoothing: var( + --paper-font-common-base_-_-webkit-font-smoothing + ); + --paper-font-button_-_white-space: var( + --paper-font-common-nowrap_-_white-space + ); + --paper-font-button_-_overflow: var(--paper-font-common-nowrap_-_overflow); + --paper-font-button_-_text-overflow: var( + --paper-font-common-nowrap_-_text-overflow + ); + --paper-font-button_-_font-size: 14px; + --paper-font-button_-_font-weight: 500; + --paper-font-button_-_letter-spacing: 0.018em; + --paper-font-button_-_line-height: 24px; + --paper-font-button_-_text-transform: uppercase; + --paper-font-code2_-_font-family: var(--paper-font-common-code_-_font-family); + --paper-font-code2_-_-webkit-font-smoothing: var( + --paper-font-common-code_-_-webkit-font-smoothing + ); + --paper-font-code2_-_font-size: 14px; + --paper-font-code2_-_font-weight: 700; + --paper-font-code2_-_line-height: 20px; + --paper-font-code1_-_font-family: var(--paper-font-common-code_-_font-family); + --paper-font-code1_-_-webkit-font-smoothing: var( + --paper-font-common-code_-_-webkit-font-smoothing + ); + --paper-font-code1_-_font-size: 14px; + --paper-font-code1_-_font-weight: 500; + --paper-font-code1_-_line-height: 20px; } html:not(.style-scope) { - --shadow-transition_-_transition: box-shadow 0.28s - cubic-bezier(0.4, 0, 0.2, 1); - --shadow-none_-_box-shadow: none; - --shadow-elevation-2dp_-_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); - --shadow-elevation-3dp_-_box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), - 0 1px 8px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.4); - --shadow-elevation-4dp_-_box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), - 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4); - --shadow-elevation-6dp_-_box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), - 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4); - --shadow-elevation-8dp_-_box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4); - --shadow-elevation-12dp_-_box-shadow: 0 12px 16px 1px rgba(0, 0, 0, 0.14), - 0 4px 22px 3px rgba(0, 0, 0, 0.12), 0 6px 7px -4px rgba(0, 0, 0, 0.4); - --shadow-elevation-16dp_-_box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), - 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4); - --shadow-elevation-24dp_-_box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), - 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.4); + --shadow-transition_-_transition: box-shadow 0.28s + cubic-bezier(0.4, 0, 0.2, 1); + --shadow-none_-_box-shadow: none; + --shadow-elevation-2dp_-_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); + --shadow-elevation-3dp_-_box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), + 0 1px 8px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.4); + --shadow-elevation-4dp_-_box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), + 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4); + --shadow-elevation-6dp_-_box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), + 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4); + --shadow-elevation-8dp_-_box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), + 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4); + --shadow-elevation-12dp_-_box-shadow: 0 12px 16px 1px rgba(0, 0, 0, 0.14), + 0 4px 22px 3px rgba(0, 0, 0, 0.12), 0 6px 7px -4px rgba(0, 0, 0, 0.4); + --shadow-elevation-16dp_-_box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), + 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4); + --shadow-elevation-24dp_-_box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), + 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.4); } html:not(.style-scope) { - --yt-live-chat-background-color: var(--yt-white); - --yt-live-chat-secondary-background-color: var(--yt-opalescence-soft-grey); - --yt-live-chat-action-panel-background-color: var( - --yt-opalescence-soft-grey-opacity-lighten-3 - ); - --yt-live-chat-action-panel-background-color-transparent: hsla( - 0, - 0%, - 97%, - 0.8 - ); - --yt-live-chat-mode-change-background-color: var( - --yt-opalescence-soft-grey-opacity-lighten-3 - ); - --yt-live-chat-primary-text-color: var(--yt-luna-black); - --yt-live-chat-secondary-text-color: var(--yt-luna-black-opacity-lighten-2); - --yt-live-chat-tertiary-text-color: var(--yt-luna-black-opacity-lighten-3); - --yt-live-chat-text-input-field-inactive-underline-color: #b8b8b8; - --yt-live-chat-text-input-field-placeholder-color: var( - --yt-luna-black-opacity-lighten-2 - ); - --yt-live-chat-text-input-field-underline-transition-duration: 0.25s; - --yt-live-chat-icon-button-color: var(--yt-luna-black-opacity-lighten-3); - --yt-live-chat-enabled-send-button-color: #4285f4; - --yt-live-chat-disabled-icon-button-color: var( - --yt-luna-black-opacity-lighten-4 - ); - --yt-live-chat-picker-button-color: var(--yt-luna-black-opacity-lighten-3); - --yt-live-chat-picker-button-active-color: var( - --yt-luna-black-opacity-lighten-1 - ); - --yt-live-chat-picker-button-disabled-color: var( - --yt-live-chat-disabled-icon-button-color - ); - --yt-live-chat-picker-button-hover-color: var( - --yt-luna-black-opacity-lighten-2 - ); - --yt-live-chat-mention-background-color: #ff5722; - --yt-live-chat-mention-text-color: var(--yt-white); - --yt-live-chat-deleted-message-color: rgba(0, 0, 0, 0.5); - --yt-live-chat-deleted-message-bar-color: rgba(11, 11, 11, 0.2); - --yt-live-chat-disabled-button-background-color: var( - --yt-opalescence-soft-grey - ); - --yt-live-chat-disabled-button-text-color: var( - --yt-luna-black-opacity-lighten-3 - ); - --yt-live-chat-sub-panel-background-color: var(--yt-opalescence-soft-grey); - --yt-live-chat-sub-panel-background-color-transparent: hsla( - 0, - 0%, - 93%, - 0.7 - ); - --yt-live-chat-header-background-color: var( - --yt-opalescence-soft-grey-opacity-lighten-3 - ); - --yt-live-chat-header-button-color: var(--yt-luna-black); - --yt-live-chat-count-color-early-warning: hsl(40, 76%, 55%); - --yt-live-chat-count-color-error: hsl(10, 51%, 49%); - --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-background-color: #ffd600; - --yt-live-chat-author-chip-owner-text-color: rgba(0, 0, 0, 0.87); - --yt-live-chat-author-chip-verified-background-color: var(--yt-spec-grey-1); - --yt-live-chat-author-chip-verified-text-color: var(--yt-spec-grey-5); - --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: var(--yt-white); - --yt-live-chat-dialog-text-color: var(--yt-luna-black-opacity-lighten-2); - - --yt-live-chat-banner-border-color: var(--yt-spec-10-percent-layer); - --yt-live-chat-banner-animation-duration: 0.35s; - --yt-live-chat-banner-animation-fast-duration: 0.25s; - --yt-live-chat-banner-gradient-scrim: linear-gradient( - rgba(255, 255, 255, 0.95), - transparent - ); - --yt-live-chat-banner-indeterminate-bar-background: repeating-linear-gradient( - 90deg, - #fff, - #fff 6px, - #aaa 6px, - #aaa 9px - ); - --yt-live-chat-banner-bar-animation-duration: 1s; - - --yt-live-chat-action-panel-gradient-scrim: linear-gradient( - to top, - rgba(255, 255, 255, 0.95), - transparent - ); - --yt-live-chat-poll-primary-text-color: var( - --yt-spec-static-overlay-text-primary - ); - --yt-live-chat-poll-secondary-text-color: var( - --yt-spec-static-overlay-text-secondary - ); - --yt-live-chat-poll-tertiary-text-color: var( - --yt-spec-static-overlay-text-disabled - ); - --yt-live-chat-poll-choice-text-color: var( - --yt-live-chat-poll-primary-text-color - ); - --yt-live-chat-poll-choice-background-color: transparent; - --yt-live-chat-poll-choice-border-radius: 2px; - --yt-live-chat-poll-choice-border: 1px solid - var(--yt-live-chat-poll-tertiary-text-color); - --yt-live-chat-poll-choice-min-height: 16px; - --yt-live-chat-poll-choice-vote-bar-background-color: var( - --yt-spec-static-overlay-button-secondary - ); - --yt-live-chat-poll-choice-hover-color: rgba(17, 17, 16, 0.1); - --yt-live-chat-poll-choice-animation-duration: 0.5s; - --yt-live-chat-poll-choice-text-padding: 0 16px; - --yt-live-chat-poll-editor-panel-header-border-color: var( - --yt-spec-10-percent-layer - ); - --yt-live-chat-poll-editor-start-button-color: var( - --yt-spec-general-background-b - ); - --yt-live-chat-poll-editor-start-button-background-color: var( - --yt-spec-call-to-action - ); - --yt-live-chat-poll-editor-start-button-background-color-disabled: var( - --yt-spec-icon-disabled - ); - - --yt-live-interactivity-component-background-color: #264c8a; - - --yt-live-chat-panel-animation-duration: 0.5s; - - --yt-live-chat-universal-motion-curve: cubic-bezier(0.05, 0, 0, 1); - - --yt-live-chat-moderation-mode-hover-background-color: var( - --yt-luna-black-opacity-lighten-4 - ); - --yt-live-chat-additional-inline-action-button-color: var(--yt-white); - --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 - ); - - --yt-formatted-string-emoji-size: 24px; - --yt-live-chat-emoji-size: 24px; - - --yt-live-chat-text-input-field-suggestion-background-color: var( - --yt-white - ); - --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: var( - --yt-white-opacity-lighten-2 - ); - --yt-emoji-picker-search-color: var(--yt-luna-black-opacity-lighten-1); - --yt-emoji-picker-search-placeholder-color: var( - --yt-luna-black-opacity-lighten-2 - ); - - --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-action-color: #2196f3; - --yt-live-chat-toast-background-color: var(--yt-opalescence-dark-grey); - --yt-live-chat-toast-text-color: var(--yt-white); - - --yt-live-chat-automod-button-background-color: var( - --yt-opalescence-soft-grey - ); - --yt-live-chat-automod-button-background-color-hover: var( - --yt-luna-black-opacity-lighten-4 - ); - - --yt-live-chat-creator-support-button-border-radius: 2px; - --yt-live-chat-creator-support-button-padding: 10px 16px; - --yt-live-chat-creator-support-button-font-size: inherit; - - --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: var(--yt-opalescence-soft-grey); - - --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: var(--yt-spec-dark-blue); - --yt-pdg-paid-stickers-author-name-font-size: 14px; - --yt-pdg-paid-stickers-author-subtext-font-size: 13px; - --yt-pdg-paid-stickers-margin-left: 38px; - --yt-live-chat-ninja-message-background-color: transparent; + --yt-live-chat-background-color: var(--yt-white); + --yt-live-chat-secondary-background-color: var(--yt-opalescence-soft-grey); + --yt-live-chat-action-panel-background-color: var( + --yt-opalescence-soft-grey-opacity-lighten-3 + ); + --yt-live-chat-action-panel-background-color-transparent: hsla( + 0, + 0%, + 97%, + 0.8 + ); + --yt-live-chat-mode-change-background-color: var( + --yt-opalescence-soft-grey-opacity-lighten-3 + ); + --yt-live-chat-primary-text-color: var(--yt-luna-black); + --yt-live-chat-secondary-text-color: var(--yt-luna-black-opacity-lighten-2); + --yt-live-chat-tertiary-text-color: var(--yt-luna-black-opacity-lighten-3); + --yt-live-chat-text-input-field-inactive-underline-color: #b8b8b8; + --yt-live-chat-text-input-field-placeholder-color: var( + --yt-luna-black-opacity-lighten-2 + ); + --yt-live-chat-text-input-field-underline-transition-duration: 0.25s; + --yt-live-chat-icon-button-color: var(--yt-luna-black-opacity-lighten-3); + --yt-live-chat-enabled-send-button-color: #4285f4; + --yt-live-chat-disabled-icon-button-color: var( + --yt-luna-black-opacity-lighten-4 + ); + --yt-live-chat-picker-button-color: var(--yt-luna-black-opacity-lighten-3); + --yt-live-chat-picker-button-active-color: var( + --yt-luna-black-opacity-lighten-1 + ); + --yt-live-chat-picker-button-disabled-color: var( + --yt-live-chat-disabled-icon-button-color + ); + --yt-live-chat-picker-button-hover-color: var( + --yt-luna-black-opacity-lighten-2 + ); + --yt-live-chat-mention-background-color: #ff5722; + --yt-live-chat-mention-text-color: var(--yt-white); + --yt-live-chat-deleted-message-color: rgba(0, 0, 0, 0.5); + --yt-live-chat-deleted-message-bar-color: rgba(11, 11, 11, 0.2); + --yt-live-chat-disabled-button-background-color: var( + --yt-opalescence-soft-grey + ); + --yt-live-chat-disabled-button-text-color: var( + --yt-luna-black-opacity-lighten-3 + ); + --yt-live-chat-sub-panel-background-color: var(--yt-opalescence-soft-grey); + --yt-live-chat-sub-panel-background-color-transparent: hsla(0, 0%, 93%, 0.7); + --yt-live-chat-header-background-color: var( + --yt-opalescence-soft-grey-opacity-lighten-3 + ); + --yt-live-chat-header-button-color: var(--yt-luna-black); + --yt-live-chat-count-color-early-warning: hsl(40, 76%, 55%); + --yt-live-chat-count-color-error: hsl(10, 51%, 49%); + --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-background-color: #ffd600; + --yt-live-chat-author-chip-owner-text-color: rgba(0, 0, 0, 0.87); + --yt-live-chat-author-chip-verified-background-color: var(--yt-spec-grey-1); + --yt-live-chat-author-chip-verified-text-color: var(--yt-spec-grey-5); + --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: var(--yt-white); + --yt-live-chat-dialog-text-color: var(--yt-luna-black-opacity-lighten-2); + + --yt-live-chat-banner-border-color: var(--yt-spec-10-percent-layer); + --yt-live-chat-banner-animation-duration: 0.35s; + --yt-live-chat-banner-animation-fast-duration: 0.25s; + --yt-live-chat-banner-gradient-scrim: linear-gradient( + rgba(255, 255, 255, 0.95), + transparent + ); + --yt-live-chat-banner-indeterminate-bar-background: repeating-linear-gradient( + 90deg, + #fff, + #fff 6px, + #aaa 6px, + #aaa 9px + ); + --yt-live-chat-banner-bar-animation-duration: 1s; + + --yt-live-chat-action-panel-gradient-scrim: linear-gradient( + to top, + rgba(255, 255, 255, 0.95), + transparent + ); + --yt-live-chat-poll-primary-text-color: var( + --yt-spec-static-overlay-text-primary + ); + --yt-live-chat-poll-secondary-text-color: var( + --yt-spec-static-overlay-text-secondary + ); + --yt-live-chat-poll-tertiary-text-color: var( + --yt-spec-static-overlay-text-disabled + ); + --yt-live-chat-poll-choice-text-color: var( + --yt-live-chat-poll-primary-text-color + ); + --yt-live-chat-poll-choice-background-color: transparent; + --yt-live-chat-poll-choice-border-radius: 2px; + --yt-live-chat-poll-choice-border: 1px solid + var(--yt-live-chat-poll-tertiary-text-color); + --yt-live-chat-poll-choice-min-height: 16px; + --yt-live-chat-poll-choice-vote-bar-background-color: var( + --yt-spec-static-overlay-button-secondary + ); + --yt-live-chat-poll-choice-hover-color: rgba(17, 17, 16, 0.1); + --yt-live-chat-poll-choice-animation-duration: 0.5s; + --yt-live-chat-poll-choice-text-padding: 0 16px; + --yt-live-chat-poll-editor-panel-header-border-color: var( + --yt-spec-10-percent-layer + ); + --yt-live-chat-poll-editor-start-button-color: var( + --yt-spec-general-background-b + ); + --yt-live-chat-poll-editor-start-button-background-color: var( + --yt-spec-call-to-action + ); + --yt-live-chat-poll-editor-start-button-background-color-disabled: var( + --yt-spec-icon-disabled + ); + + --yt-live-interactivity-component-background-color: #264c8a; + + --yt-live-chat-panel-animation-duration: 0.5s; + + --yt-live-chat-universal-motion-curve: cubic-bezier(0.05, 0, 0, 1); + + --yt-live-chat-moderation-mode-hover-background-color: var( + --yt-luna-black-opacity-lighten-4 + ); + --yt-live-chat-additional-inline-action-button-color: var(--yt-white); + --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 + ); + + --yt-formatted-string-emoji-size: 24px; + --yt-live-chat-emoji-size: 24px; + + --yt-live-chat-text-input-field-suggestion-background-color: var(--yt-white); + --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: var(--yt-white-opacity-lighten-2); + --yt-emoji-picker-search-color: var(--yt-luna-black-opacity-lighten-1); + --yt-emoji-picker-search-placeholder-color: var( + --yt-luna-black-opacity-lighten-2 + ); + + --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-action-color: #2196f3; + --yt-live-chat-toast-background-color: var(--yt-opalescence-dark-grey); + --yt-live-chat-toast-text-color: var(--yt-white); + + --yt-live-chat-automod-button-background-color: var( + --yt-opalescence-soft-grey + ); + --yt-live-chat-automod-button-background-color-hover: var( + --yt-luna-black-opacity-lighten-4 + ); + + --yt-live-chat-creator-support-button-border-radius: 2px; + --yt-live-chat-creator-support-button-padding: 10px 16px; + --yt-live-chat-creator-support-button-font-size: inherit; + + --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: var(--yt-opalescence-soft-grey); + + --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: var(--yt-spec-dark-blue); + --yt-pdg-paid-stickers-author-name-font-size: 14px; + --yt-pdg-paid-stickers-author-subtext-font-size: 13px; + --yt-pdg-paid-stickers-margin-left: 38px; + --yt-live-chat-ninja-message-background-color: transparent; } html:not(.style-scope)[dark] { - --yt-live-chat-background-color: #191919; - --yt-live-chat-action-panel-background-color: #282828; - --yt-live-chat-action-panel-background-color-transparent: rgba( - 40, - 40, - 40, - 0.8 - ); - --yt-live-chat-secondary-background-color: #282828; - --yt-live-chat-toast-text-color: var(--yt-white); - --yt-live-chat-toast-background-color: #323232; - --yt-live-chat-mode-change-background-color: #333; - --yt-live-chat-primary-text-color: var(--yt-white); - --yt-live-chat-secondary-text-color: rgba(255, 255, 255, 0.7); - --yt-live-chat-tertiary-text-color: rgba(255, 255, 255, 0.54); - --yt-live-chat-text-input-field-inactive-underline-color: #666; - --yt-live-chat-text-input-field-placeholder-color: #666; - --yt-live-chat-icon-button-color: var(--yt-live-chat-primary-text-color); - --yt-live-chat-enabled-send-button-color: #fff; - --yt-live-chat-disabled-icon-button-color: rgba(255, 255, 255, 0.3); - --yt-live-chat-picker-button-color: var(--yt-live-chat-tertiary-text-color); - --yt-live-chat-picker-button-active-color: var(--yt-white); - --yt-live-chat-picker-button-disabled-color: var( - --yt-live-chat-disabled-icon-button-color - ); - --yt-live-chat-picker-button-hover-color: rgba(255, 255, 255, 0.74); - --yt-live-chat-mention-background-color: #ff5722; - --yt-live-chat-mention-text-color: #fff; - --yt-live-chat-deleted-message-color: rgba(255, 255, 255, 0.5); - --yt-live-chat-deleted-message-bar-color: rgba(255, 255, 255, 0.5); - --yt-live-chat-error-message-color: var(--yt-spec-brand-link-text); - --yt-live-chat-reconnect-message-color: #fff; - --yt-live-chat-disabled-button-background-color: #444; - --yt-live-chat-disabled-button-text-color: var( - --yt-live-chat-secondary-text-color - ); - --yt-live-chat-sub-panel-background-color: #3e3e3e; - --yt-live-chat-sub-panel-background-color-transparent: rgba( - 62, - 62, - 62, - 0.7 - ); - --yt-live-chat-header-background-color: var( - --yt-live-chat-action-panel-background-color - ); - --yt-live-chat-header-button-color: var( - --yt-live-chat-secondary-text-color - ); - --yt-live-chat-moderator-color: #5e84f1; - --yt-live-chat-owner-color: #ffd600; - --yt-live-chat-message-highlight-background-color: #282828; - --yt-live-chat-author-chip-owner-text-color: var(--yt-luna-black); - --yt-live-chat-author-chip-verified-background-color: var(--yt-spec-grey-5); - --yt-live-chat-author-chip-verified-text-color: var(--yt-spec-white-4); - --yt-live-chat-sponsor-color: #2ba640; - --yt-live-chat-overlay-color: rgba(0, 0, 0, 0.5); - --yt-live-chat-dialog-background-color: #424242; - --yt-live-chat-dialog-text-color: var(--yt-white); - - --yt-live-chat-button-default-text-color: var(--yt-white); - --yt-live-chat-button-default-background-color: var( - --yt-white-opacity-lighten-4 - ); - --yt-live-chat-button-dark-text-color: var(--yt-white); - --yt-live-chat-button-dark-background-color: var( - --yt-white-opacity-lighten-4 - ); - - --yt-live-chat-moderation-mode-hover-background-color: rgba( - 255, - 255, - 255, - 0.3 - ); - --yt-live-chat-additional-inline-action-button-color: var(--yt-grey); - --yt-live-chat-additional-inline-action-button-background-color: var( - --yt-opalescence-soft-grey-opacity-lighten-1 - ); - --yt-live-chat-additional-inline-action-button-background-color-hover: var( - --yt-opalescence-soft-grey - ); - - --yt-formatted-string-emoji-size: 24px; - --yt-live-chat-emoji-size: 24px; - - --yt-live-chat-text-input-field-suggestion-background-color: #3e3e3e; - --yt-live-chat-text-input-field-suggestion-background-color-hover: #343434; - --yt-live-chat-text-input-field-suggestion-text-color: var(--yt-white); - --yt-live-chat-text-input-field-suggestion-text-color-hover: var( - --yt-white - ); - --yt-live-chat-text-input-field-placeholder-color: var( - --yt-live-chat-secondary-text-color - ); - - --yt-live-chat-ticker-arrow-background: var( - --yt-live-chat-action-panel-background-color - ); - - --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: #444; - --yt-emoji-picker-search-color: #fff; - --yt-emoji-picker-search-placeholder-color: #999; - - --yt-live-chat-slider-active-color: #2196f3; - --yt-live-chat-slider-container-color: #515151; - --yt-live-chat-slider-markers-color: #fff; - - --yt-live-chat-banner-gradient-scrim: linear-gradient( - rgba(40, 40, 40, 0.95), - transparent - ); - --yt-live-chat-action-panel-gradient-scrim: linear-gradient( - to top, - rgba(40, 40, 40, 0.95), - transparent - ); - --yt-live-chat-poll-editor-start-button-color: var( - --yt-spec-icon-active-other - ); - --yt-live-chat-poll-editor-start-button-background-color-disabled: var( - --yt-spec-grey-1 - ); - - --yt-live-chat-automod-button-background-color: var( - --yt-opalescence-grey-opacity-lighten-3 - ); - --yt-live-chat-automod-button-background-color-hover: rgba( - 255, - 255, - 255, - 0.5 - ); - --yt-live-chat-automod-button-explanation-color: rgba(255, 255, 255, 0.7); - - --yt-live-chat-countdown-opacity: 0.5; - --yt-live-chat-shimmer-background-color: rgba(17, 17, 17, 0.4); - --yt-live-chat-shimmer-linear-gradient: linear-gradient( - 0deg, - rgba(0, 0, 0, 0.1) 40%, - rgba(100, 100, 100, 0.3) 50%, - rgba(0, 0, 0, 0.1) 60% - ); - - --yt-live-chat-vem-background-color: #3e3e3e; - - --yt-live-chat-product-picker-icon-color: rgba(255, 255, 255, 0.5); - --yt-live-chat-product-picker-hover-color: rgba(68, 68, 68, 1); - --yt-live-chat-product-picker-disabled-icon-color: rgba(255, 255, 255, 0.3); - - --yt-pdg-paid-stickers-tab-selection-bar-color: var(--yt-spec-light-blue); + --yt-live-chat-background-color: #191919; + --yt-live-chat-action-panel-background-color: #282828; + --yt-live-chat-action-panel-background-color-transparent: rgba( + 40, + 40, + 40, + 0.8 + ); + --yt-live-chat-secondary-background-color: #282828; + --yt-live-chat-toast-text-color: var(--yt-white); + --yt-live-chat-toast-background-color: #323232; + --yt-live-chat-mode-change-background-color: #333; + --yt-live-chat-primary-text-color: var(--yt-white); + --yt-live-chat-secondary-text-color: rgba(255, 255, 255, 0.7); + --yt-live-chat-tertiary-text-color: rgba(255, 255, 255, 0.54); + --yt-live-chat-text-input-field-inactive-underline-color: #666; + --yt-live-chat-text-input-field-placeholder-color: #666; + --yt-live-chat-icon-button-color: var(--yt-live-chat-primary-text-color); + --yt-live-chat-enabled-send-button-color: #fff; + --yt-live-chat-disabled-icon-button-color: rgba(255, 255, 255, 0.3); + --yt-live-chat-picker-button-color: var(--yt-live-chat-tertiary-text-color); + --yt-live-chat-picker-button-active-color: var(--yt-white); + --yt-live-chat-picker-button-disabled-color: var( + --yt-live-chat-disabled-icon-button-color + ); + --yt-live-chat-picker-button-hover-color: rgba(255, 255, 255, 0.74); + --yt-live-chat-mention-background-color: #ff5722; + --yt-live-chat-mention-text-color: #fff; + --yt-live-chat-deleted-message-color: rgba(255, 255, 255, 0.5); + --yt-live-chat-deleted-message-bar-color: rgba(255, 255, 255, 0.5); + --yt-live-chat-error-message-color: var(--yt-spec-brand-link-text); + --yt-live-chat-reconnect-message-color: #fff; + --yt-live-chat-disabled-button-background-color: #444; + --yt-live-chat-disabled-button-text-color: var( + --yt-live-chat-secondary-text-color + ); + --yt-live-chat-sub-panel-background-color: #3e3e3e; + --yt-live-chat-sub-panel-background-color-transparent: rgba(62, 62, 62, 0.7); + --yt-live-chat-header-background-color: var( + --yt-live-chat-action-panel-background-color + ); + --yt-live-chat-header-button-color: var(--yt-live-chat-secondary-text-color); + --yt-live-chat-moderator-color: #5e84f1; + --yt-live-chat-owner-color: #ffd600; + --yt-live-chat-message-highlight-background-color: #282828; + --yt-live-chat-author-chip-owner-text-color: var(--yt-luna-black); + --yt-live-chat-author-chip-verified-background-color: var(--yt-spec-grey-5); + --yt-live-chat-author-chip-verified-text-color: var(--yt-spec-white-4); + --yt-live-chat-sponsor-color: #2ba640; + --yt-live-chat-overlay-color: rgba(0, 0, 0, 0.5); + --yt-live-chat-dialog-background-color: #424242; + --yt-live-chat-dialog-text-color: var(--yt-white); + + --yt-live-chat-button-default-text-color: var(--yt-white); + --yt-live-chat-button-default-background-color: var( + --yt-white-opacity-lighten-4 + ); + --yt-live-chat-button-dark-text-color: var(--yt-white); + --yt-live-chat-button-dark-background-color: var( + --yt-white-opacity-lighten-4 + ); + + --yt-live-chat-moderation-mode-hover-background-color: rgba( + 255, + 255, + 255, + 0.3 + ); + --yt-live-chat-additional-inline-action-button-color: var(--yt-grey); + --yt-live-chat-additional-inline-action-button-background-color: var( + --yt-opalescence-soft-grey-opacity-lighten-1 + ); + --yt-live-chat-additional-inline-action-button-background-color-hover: var( + --yt-opalescence-soft-grey + ); + + --yt-formatted-string-emoji-size: 24px; + --yt-live-chat-emoji-size: 24px; + + --yt-live-chat-text-input-field-suggestion-background-color: #3e3e3e; + --yt-live-chat-text-input-field-suggestion-background-color-hover: #343434; + --yt-live-chat-text-input-field-suggestion-text-color: var(--yt-white); + --yt-live-chat-text-input-field-suggestion-text-color-hover: var(--yt-white); + --yt-live-chat-text-input-field-placeholder-color: var( + --yt-live-chat-secondary-text-color + ); + + --yt-live-chat-ticker-arrow-background: var( + --yt-live-chat-action-panel-background-color + ); + + --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: #444; + --yt-emoji-picker-search-color: #fff; + --yt-emoji-picker-search-placeholder-color: #999; + + --yt-live-chat-slider-active-color: #2196f3; + --yt-live-chat-slider-container-color: #515151; + --yt-live-chat-slider-markers-color: #fff; + + --yt-live-chat-banner-gradient-scrim: linear-gradient( + rgba(40, 40, 40, 0.95), + transparent + ); + --yt-live-chat-action-panel-gradient-scrim: linear-gradient( + to top, + rgba(40, 40, 40, 0.95), + transparent + ); + --yt-live-chat-poll-editor-start-button-color: var( + --yt-spec-icon-active-other + ); + --yt-live-chat-poll-editor-start-button-background-color-disabled: var( + --yt-spec-grey-1 + ); + + --yt-live-chat-automod-button-background-color: var( + --yt-opalescence-grey-opacity-lighten-3 + ); + --yt-live-chat-automod-button-background-color-hover: rgba( + 255, + 255, + 255, + 0.5 + ); + --yt-live-chat-automod-button-explanation-color: rgba(255, 255, 255, 0.7); + + --yt-live-chat-countdown-opacity: 0.5; + --yt-live-chat-shimmer-background-color: rgba(17, 17, 17, 0.4); + --yt-live-chat-shimmer-linear-gradient: linear-gradient( + 0deg, + rgba(0, 0, 0, 0.1) 40%, + rgba(100, 100, 100, 0.3) 50%, + rgba(0, 0, 0, 0.1) 60% + ); + + --yt-live-chat-vem-background-color: #3e3e3e; + + --yt-live-chat-product-picker-icon-color: rgba(255, 255, 255, 0.5); + --yt-live-chat-product-picker-hover-color: rgba(68, 68, 68, 1); + --yt-live-chat-product-picker-disabled-icon-color: rgba(255, 255, 255, 0.3); + + --yt-pdg-paid-stickers-tab-selection-bar-color: var(--yt-spec-light-blue); } html:not(.style-scope)[watch-color-update] { - --yt-live-chat-background-color: var(--yt-spec-general-background-a); - --yt-live-chat-header-background-color: var( - --yt-spec-brand-background-primary - ); - --yt-live-chat-action-panel-background-color: var( - --yt-spec-brand-background-primary - ); - --yt-live-chat-message-highlight-background-color: var( - --yt-spec-brand-background-primary - ); - --yt-live-chat-ninja-message-background-color: var( - --yt-spec-brand-background-primary - ); + --yt-live-chat-background-color: var(--yt-spec-general-background-a); + --yt-live-chat-header-background-color: var( + --yt-spec-brand-background-primary + ); + --yt-live-chat-action-panel-background-color: var( + --yt-spec-brand-background-primary + ); + --yt-live-chat-message-highlight-background-color: var( + --yt-spec-brand-background-primary + ); + --yt-live-chat-ninja-message-background-color: var( + --yt-spec-brand-background-primary + ); } html:not(.style-scope)[creator-page-styling], yt-live-chat-app:not(.style-scope)[creator-page-styling] { - --yt-live-chat-upsell-dialog-renderer-border: 1px solid #d4d4d4; - --yt-live-chat-upsell-dialog-renderer-box-shadow: 0 4px 8px 0 - rgba(0, 0, 0, 0.1); - - --live-chat-upsell-dialog-renderer-content_-_padding: 24px 24px 0; - --live-chat-upsell-dialog-renderer-title_-_font-size: 15px; - --live-chat-upsell-dialog-renderer-title_-_font-weight: 500; - --live-chat-upsell-dialog-renderer-title_-_line-height: 20px; - --live-chat-upsell-dialog-renderer-title_-_margin-bottom: 17px; - --live-chat-upsell-dialog-renderer-text_-_font-size: 12px; - --live-chat-upsell-dialog-renderer-text_-_line-height: 17px; - --live-chat-upsell-dialog-renderer-button-container_-_padding: 16px 16px - 19px 24px; - --yt-live-chat-upsell-dialog-renderer-button-padding: 7px 15px; - --live-chat-upsell-dialog-renderer-button-font-size: 11px; - --live-chat-upsell-dialog-renderer-button-text-transform: none; - - --yt-live-chat-upsell-dialog-renderer-action-button-color: var(--yt-white); - --yt-live-chat-upsell-dialog-renderer-action-button-background: var( - --yt-blue-light - ); + --yt-live-chat-upsell-dialog-renderer-border: 1px solid #d4d4d4; + --yt-live-chat-upsell-dialog-renderer-box-shadow: 0 4px 8px 0 + rgba(0, 0, 0, 0.1); + + --live-chat-upsell-dialog-renderer-content_-_padding: 24px 24px 0; + --live-chat-upsell-dialog-renderer-title_-_font-size: 15px; + --live-chat-upsell-dialog-renderer-title_-_font-weight: 500; + --live-chat-upsell-dialog-renderer-title_-_line-height: 20px; + --live-chat-upsell-dialog-renderer-title_-_margin-bottom: 17px; + --live-chat-upsell-dialog-renderer-text_-_font-size: 12px; + --live-chat-upsell-dialog-renderer-text_-_line-height: 17px; + --live-chat-upsell-dialog-renderer-button-container_-_padding: 16px 16px 19px + 24px; + --yt-live-chat-upsell-dialog-renderer-button-padding: 7px 15px; + --live-chat-upsell-dialog-renderer-button-font-size: 11px; + --live-chat-upsell-dialog-renderer-button-text-transform: none; + + --yt-live-chat-upsell-dialog-renderer-action-button-color: var(--yt-white); + --yt-live-chat-upsell-dialog-renderer-action-button-background: var( + --yt-blue-light + ); } yt-live-chat-app:not(.style-scope)[live-dashboard] { - --yt-live-chat-header-text-color: var(--yt-opalescence-dark-grey); - --yt-live-chat-header-background-color: var(--yt-white); - --yt-live-chat-header-bottom-border: 1px solid - var(--yt-opalescence-soft-grey); - --yt-live-chat-header-button-color: var(--yt-opalescence-dark-grey); - --yt-live-chat-action-panel-top-border: 1px solid - var(--yt-opalescence-soft-grey); + --yt-live-chat-header-text-color: var(--yt-opalescence-dark-grey); + --yt-live-chat-header-background-color: var(--yt-white); + --yt-live-chat-header-bottom-border: 1px solid var(--yt-opalescence-soft-grey); + --yt-live-chat-header-button-color: var(--yt-opalescence-dark-grey); + --yt-live-chat-action-panel-top-border: 1px solid + var(--yt-opalescence-soft-grey); } html:not(.style-scope)[dashboard-money-feed], yt-live-chat-app:not(.style-scope)[dashboard-money-feed] { - --yt-live-chat-item-list-renderer-padding: 0; - --yt-live-chat-item-list-item-border: 1px solid #e2e2e2; - --yt-live-chat-item-timestamp-margin: 0; - --yt-live-chat-paid-message-timestamp-display: inline; - --yt-live-chat-server-error-message-display: none; + --yt-live-chat-item-list-renderer-padding: 0; + --yt-live-chat-item-list-item-border: 1px solid #e2e2e2; + --yt-live-chat-item-timestamp-margin: 0; + --yt-live-chat-paid-message-timestamp-display: inline; + --yt-live-chat-server-error-message-display: none; } html:not(.style-scope)[dark]:not(.style-scope)[dashboard-money-feed], html:not(.style-scope)[dark] - yt-live-chat-app:not(.style-scope)[dashboard-money-feed] { - --yt-live-chat-item-list-item-border: none; + yt-live-chat-app:not(.style-scope)[dashboard-money-feed] { + --yt-live-chat-item-list-item-border: none; } html:not(.style-scope) { - --yt-spec-brand-background-solid: #fff; - --yt-spec-brand-background-primary: rgba(255, 255, 255, 0.98); - --yt-spec-brand-background-secondary: rgba(255, 255, 255, 0.95); - --yt-spec-general-background-a: #f9f9f9; - --yt-spec-general-background-b: #f1f1f1; - --yt-spec-general-background-c: #e9e9e9; - --yt-spec-error-background: #181818; - --yt-spec-text-primary: #030303; - --yt-spec-text-primary-inverse: #fff; - --yt-spec-text-secondary: #606060; - --yt-spec-text-disabled: #909090; - --yt-spec-call-to-action: #065fd4; - --yt-spec-icon-active-other: #606060; - --yt-spec-icon-inactive: #909090; - --yt-spec-icon-disabled: #ccc; - --yt-spec-badge-chip-background: rgba(0, 0, 0, 0.05); - --yt-spec-verified-badge-background: rgba(0, 0, 0, 0.15); - --yt-spec-suggested-action: #f2f8ff; - --yt-spec-button-chip-background-hover: rgba(0, 0, 0, 0.1); - --yt-spec-touch-response: #000; - --yt-spec-paper-tab-ink: rgba(0, 0, 0, 0.3); - --yt-spec-filled-button-text: #fff; - --yt-spec-call-to-action-inverse: #3ea6ff; - --yt-spec-brand-icon-active: #f00; - --yt-spec-brand-icon-inactive: #606060; - --yt-spec-brand-button-background: #c00; - --yt-spec-brand-link-text: #c00; - --yt-spec-filled-button-focus-outline: rgba(0, 0, 0, 0.6); - --yt-spec-call-to-action-button-focus-outline: rgba(6, 95, 212, 0.3); - --yt-spec-brand-text-button-focus-outline: rgba(204, 0, 0, 0.3); - --yt-spec-inactive-text-button-focus-outline: #ccc; - --yt-spec-ad-indicator: #00716c; - --yt-spec-brand-subscribe-button-background: var( - --yt-spec-brand-button-background - ); - --yt-spec-wordmark-text: #212121; - --yt-spec-10-percent-layer: rgba(0, 0, 0, 0.1); - --yt-spec-snackbar-background: #212121; - --yt-spec-selected-nav-text: #c00; - --yt-spec-themed-blue: #065fd4; - --yt-spec-themed-green: #107516; - --yt-spec-themed-overlay-background: rgba(255, 255, 255, 0.7); - --yt-spec-static-brand-red: #f00; - --yt-spec-static-brand-white: #fff; - --yt-spec-static-brand-black: #212121; - --yt-spec-static-ad-yellow: #fbc02d; - --yt-spec-static-overlay-background-solid: #000; - --yt-spec-static-overlay-background-heavy: rgba(0, 0, 0, 0.8); - --yt-spec-static-overlay-background-medium: rgba(0, 0, 0, 0.6); - --yt-spec-static-overlay-background-medium-light: rgba(0, 0, 0, 0.3); - --yt-spec-static-overlay-background-light: rgba(0, 0, 0, 0.1); - --yt-spec-static-overlay-text-primary: #fff; - --yt-spec-static-overlay-text-secondary: rgba(255, 255, 255, 0.7); - --yt-spec-static-overlay-text-disabled: rgba(255, 255, 255, 0.3); - --yt-spec-static-overlay-call-to-action: #3ea6ff; - --yt-spec-static-overlay-icon-active-other: #fff; - --yt-spec-static-overlay-icon-inactive: rgba(255, 255, 255, 0.7); - --yt-spec-static-overlay-icon-disabled: rgba(255, 255, 255, 0.3); - --yt-spec-static-overlay-button-primary: rgba(255, 255, 255, 0.3); - --yt-spec-static-overlay-button-secondary: rgba(255, 255, 255, 0.1); - --yt-spec-static-overlay-background-brand: rgba(204, 0, 0, 0.9); + --yt-spec-brand-background-solid: #fff; + --yt-spec-brand-background-primary: rgba(255, 255, 255, 0.98); + --yt-spec-brand-background-secondary: rgba(255, 255, 255, 0.95); + --yt-spec-general-background-a: #f9f9f9; + --yt-spec-general-background-b: #f1f1f1; + --yt-spec-general-background-c: #e9e9e9; + --yt-spec-error-background: #181818; + --yt-spec-text-primary: #030303; + --yt-spec-text-primary-inverse: #fff; + --yt-spec-text-secondary: #606060; + --yt-spec-text-disabled: #909090; + --yt-spec-call-to-action: #065fd4; + --yt-spec-icon-active-other: #606060; + --yt-spec-icon-inactive: #909090; + --yt-spec-icon-disabled: #ccc; + --yt-spec-badge-chip-background: rgba(0, 0, 0, 0.05); + --yt-spec-verified-badge-background: rgba(0, 0, 0, 0.15); + --yt-spec-suggested-action: #f2f8ff; + --yt-spec-button-chip-background-hover: rgba(0, 0, 0, 0.1); + --yt-spec-touch-response: #000; + --yt-spec-paper-tab-ink: rgba(0, 0, 0, 0.3); + --yt-spec-filled-button-text: #fff; + --yt-spec-call-to-action-inverse: #3ea6ff; + --yt-spec-brand-icon-active: #f00; + --yt-spec-brand-icon-inactive: #606060; + --yt-spec-brand-button-background: #c00; + --yt-spec-brand-link-text: #c00; + --yt-spec-filled-button-focus-outline: rgba(0, 0, 0, 0.6); + --yt-spec-call-to-action-button-focus-outline: rgba(6, 95, 212, 0.3); + --yt-spec-brand-text-button-focus-outline: rgba(204, 0, 0, 0.3); + --yt-spec-inactive-text-button-focus-outline: #ccc; + --yt-spec-ad-indicator: #00716c; + --yt-spec-brand-subscribe-button-background: var( + --yt-spec-brand-button-background + ); + --yt-spec-wordmark-text: #212121; + --yt-spec-10-percent-layer: rgba(0, 0, 0, 0.1); + --yt-spec-snackbar-background: #212121; + --yt-spec-selected-nav-text: #c00; + --yt-spec-themed-blue: #065fd4; + --yt-spec-themed-green: #107516; + --yt-spec-themed-overlay-background: rgba(255, 255, 255, 0.7); + --yt-spec-static-brand-red: #f00; + --yt-spec-static-brand-white: #fff; + --yt-spec-static-brand-black: #212121; + --yt-spec-static-ad-yellow: #fbc02d; + --yt-spec-static-overlay-background-solid: #000; + --yt-spec-static-overlay-background-heavy: rgba(0, 0, 0, 0.8); + --yt-spec-static-overlay-background-medium: rgba(0, 0, 0, 0.6); + --yt-spec-static-overlay-background-medium-light: rgba(0, 0, 0, 0.3); + --yt-spec-static-overlay-background-light: rgba(0, 0, 0, 0.1); + --yt-spec-static-overlay-text-primary: #fff; + --yt-spec-static-overlay-text-secondary: rgba(255, 255, 255, 0.7); + --yt-spec-static-overlay-text-disabled: rgba(255, 255, 255, 0.3); + --yt-spec-static-overlay-call-to-action: #3ea6ff; + --yt-spec-static-overlay-icon-active-other: #fff; + --yt-spec-static-overlay-icon-inactive: rgba(255, 255, 255, 0.7); + --yt-spec-static-overlay-icon-disabled: rgba(255, 255, 255, 0.3); + --yt-spec-static-overlay-button-primary: rgba(255, 255, 255, 0.3); + --yt-spec-static-overlay-button-secondary: rgba(255, 255, 255, 0.1); + --yt-spec-static-overlay-background-brand: rgba(204, 0, 0, 0.9); } html:not(.style-scope)[dark], :not(.style-scope)[dark] { - --yt-spec-brand-background-solid: #212121; - --yt-spec-brand-background-primary: rgba(33, 33, 33, 0.98); - --yt-spec-brand-background-secondary: rgba(33, 33, 33, 0.95); - --yt-spec-general-background-a: #181818; - --yt-spec-general-background-b: #0f0f0f; - --yt-spec-general-background-c: #030303; - --yt-spec-error-background: #f9f9f9; - --yt-spec-text-primary: #fff; - --yt-spec-text-primary-inverse: #030303; - --yt-spec-text-secondary: #aaa; - --yt-spec-text-disabled: #717171; - --yt-spec-call-to-action: #3ea6ff; - --yt-spec-icon-active-other: #fff; - --yt-spec-icon-inactive: #909090; - --yt-spec-icon-disabled: #606060; - --yt-spec-badge-chip-background: rgba(255, 255, 255, 0.1); - --yt-spec-verified-badge-background: rgba(255, 255, 255, 0.25); - --yt-spec-suggested-action: #252a3a; - --yt-spec-button-chip-background-hover: rgba(255, 255, 255, 0.2); - --yt-spec-touch-response: #fff; - --yt-spec-paper-tab-ink: rgba(255, 255, 255, 0.3); - --yt-spec-filled-button-text: #030303; - --yt-spec-call-to-action-inverse: #065fd4; - --yt-spec-brand-icon-active: #fff; - --yt-spec-brand-icon-inactive: #909090; - --yt-spec-brand-button-background: #c00; - --yt-spec-brand-link-text: #ff4e45; - --yt-spec-filled-button-focus-outline: rgba(255, 255, 255, 0.7); - --yt-spec-call-to-action-button-focus-outline: rgba(62, 166, 255, 0.3); - --yt-spec-brand-text-button-focus-outline: rgba(255, 78, 69, 0.3); - --yt-spec-inactive-text-button-focus-outline: #606060; - --yt-spec-ad-indicator: #00aaa7; - --yt-spec-brand-subscribe-button-background: var( - --yt-spec-brand-button-background - ); - --yt-spec-wordmark-text: #fff; - --yt-spec-10-percent-layer: rgba(255, 255, 255, 0.1); - --yt-spec-snackbar-background: #030303; - --yt-spec-selected-nav-text: #fff; - --yt-spec-themed-blue: #3ea6ff; - --yt-spec-themed-green: #2ba640; - --yt-spec-themed-overlay-background: rgba(0, 0, 0, 0.8); + --yt-spec-brand-background-solid: #212121; + --yt-spec-brand-background-primary: rgba(33, 33, 33, 0.98); + --yt-spec-brand-background-secondary: rgba(33, 33, 33, 0.95); + --yt-spec-general-background-a: #181818; + --yt-spec-general-background-b: #0f0f0f; + --yt-spec-general-background-c: #030303; + --yt-spec-error-background: #f9f9f9; + --yt-spec-text-primary: #fff; + --yt-spec-text-primary-inverse: #030303; + --yt-spec-text-secondary: #aaa; + --yt-spec-text-disabled: #717171; + --yt-spec-call-to-action: #3ea6ff; + --yt-spec-icon-active-other: #fff; + --yt-spec-icon-inactive: #909090; + --yt-spec-icon-disabled: #606060; + --yt-spec-badge-chip-background: rgba(255, 255, 255, 0.1); + --yt-spec-verified-badge-background: rgba(255, 255, 255, 0.25); + --yt-spec-suggested-action: #252a3a; + --yt-spec-button-chip-background-hover: rgba(255, 255, 255, 0.2); + --yt-spec-touch-response: #fff; + --yt-spec-paper-tab-ink: rgba(255, 255, 255, 0.3); + --yt-spec-filled-button-text: #030303; + --yt-spec-call-to-action-inverse: #065fd4; + --yt-spec-brand-icon-active: #fff; + --yt-spec-brand-icon-inactive: #909090; + --yt-spec-brand-button-background: #c00; + --yt-spec-brand-link-text: #ff4e45; + --yt-spec-filled-button-focus-outline: rgba(255, 255, 255, 0.7); + --yt-spec-call-to-action-button-focus-outline: rgba(62, 166, 255, 0.3); + --yt-spec-brand-text-button-focus-outline: rgba(255, 78, 69, 0.3); + --yt-spec-inactive-text-button-focus-outline: #606060; + --yt-spec-ad-indicator: #00aaa7; + --yt-spec-brand-subscribe-button-background: var( + --yt-spec-brand-button-background + ); + --yt-spec-wordmark-text: #fff; + --yt-spec-10-percent-layer: rgba(255, 255, 255, 0.1); + --yt-spec-snackbar-background: #030303; + --yt-spec-selected-nav-text: #fff; + --yt-spec-themed-blue: #3ea6ff; + --yt-spec-themed-green: #2ba640; + --yt-spec-themed-overlay-background: rgba(0, 0, 0, 0.8); } html:not(.style-scope) { - --yt-spec-white-1: #ffffff; - --yt-spec-white-2: #f9f9f9; - --yt-spec-white-3: #f1f1f1; - --yt-spec-white-4: #e9e9e9; - - --yt-spec-black-1: #282828; - --yt-spec-black-2: #1f1f1f; - --yt-spec-black-3: #161616; - --yt-spec-black-4: #0d0d0d; - --yt-spec-black-pure: #000000; - - --yt-spec-grey-1: #cccccc; - --yt-spec-grey-2: #aaaaaa; - --yt-spec-grey-3: #909090; - --yt-spec-grey-4: #717171; - --yt-spec-grey-5: #606060; - - --yt-brand-youtube-red: #ff0000; - --yt-brand-medium-red: #cc0000; - --yt-brand-light-red: #ff4e45; - --yt-spec-red-30: #ff8983; - --yt-spec-red-70: #990412; - - --yt-spec-pale-blue: #f2f8ff; - --yt-spec-light-blue: #3ea6ff; - --yt-spec-dark-blue: #065fd4; - --yt-spec-navy-blue: #252a3a; - --yt-spec-light-green: #2ba640; - --yt-spec-dark-green: #107516; - --yt-spec-yellow: #fbc02d; - - --yt-spec-black-pure-alpha-5: rgba(0, 0, 0, 0.05); - --yt-spec-black-pure-alpha-10: rgba(0, 0, 0, 0.1); - --yt-spec-black-pure-alpha-15: rgba(0, 0, 0, 0.15); - --yt-spec-black-pure-alpha-30: rgba(0, 0, 0, 0.3); - --yt-spec-black-pure-alpha-60: rgba(0, 0, 0, 0.6); - --yt-spec-black-pure-alpha-80: rgba(0, 0, 0, 0.8); - - --yt-spec-black-1-alpha-98: rgba(40, 40, 40, 0.98); - --yt-spec-black-1-alpha-95: rgba(40, 40, 40, 0.95); - - --yt-spec-white-1-alpha-10: rgba(255, 255, 255, 0.1); - --yt-spec-white-1-alpha-20: rgba(255, 255, 255, 0.2); - --yt-spec-white-1-alpha-25: rgba(255, 255, 255, 0.25); - --yt-spec-white-1-alpha-30: rgba(255, 255, 255, 0.3); - --yt-spec-white-1-alpha-70: rgba(255, 255, 255, 0.7); - --yt-spec-white-1-alpha-95: rgba(255, 255, 255, 0.95); - --yt-spec-white-1-alpha-98: rgba(255, 255, 255, 0.98); - - --yt-brand-medium-red-alpha-90: rgba(204, 0, 0, 0.9); - --yt-brand-medium-red-alpha-30: rgba(204, 0, 0, 0.3); - - --yt-brand-light-red-alpha-30: rgba(255, 78, 69, 0.3); - - --yt-spec-light-blue-alpha-30: rgba(62, 166, 255, 0.3); - - --yt-spec-dark-blue-alpha-30: rgba(6, 95, 212, 0.3); + --yt-spec-white-1: #ffffff; + --yt-spec-white-2: #f9f9f9; + --yt-spec-white-3: #f1f1f1; + --yt-spec-white-4: #e9e9e9; + + --yt-spec-black-1: #282828; + --yt-spec-black-2: #1f1f1f; + --yt-spec-black-3: #161616; + --yt-spec-black-4: #0d0d0d; + --yt-spec-black-pure: #000000; + + --yt-spec-grey-1: #cccccc; + --yt-spec-grey-2: #aaaaaa; + --yt-spec-grey-3: #909090; + --yt-spec-grey-4: #717171; + --yt-spec-grey-5: #606060; + + --yt-brand-youtube-red: #ff0000; + --yt-brand-medium-red: #cc0000; + --yt-brand-light-red: #ff4e45; + --yt-spec-red-30: #ff8983; + --yt-spec-red-70: #990412; + + --yt-spec-pale-blue: #f2f8ff; + --yt-spec-light-blue: #3ea6ff; + --yt-spec-dark-blue: #065fd4; + --yt-spec-navy-blue: #252a3a; + --yt-spec-light-green: #2ba640; + --yt-spec-dark-green: #107516; + --yt-spec-yellow: #fbc02d; + + --yt-spec-black-pure-alpha-5: rgba(0, 0, 0, 0.05); + --yt-spec-black-pure-alpha-10: rgba(0, 0, 0, 0.1); + --yt-spec-black-pure-alpha-15: rgba(0, 0, 0, 0.15); + --yt-spec-black-pure-alpha-30: rgba(0, 0, 0, 0.3); + --yt-spec-black-pure-alpha-60: rgba(0, 0, 0, 0.6); + --yt-spec-black-pure-alpha-80: rgba(0, 0, 0, 0.8); + + --yt-spec-black-1-alpha-98: rgba(40, 40, 40, 0.98); + --yt-spec-black-1-alpha-95: rgba(40, 40, 40, 0.95); + + --yt-spec-white-1-alpha-10: rgba(255, 255, 255, 0.1); + --yt-spec-white-1-alpha-20: rgba(255, 255, 255, 0.2); + --yt-spec-white-1-alpha-25: rgba(255, 255, 255, 0.25); + --yt-spec-white-1-alpha-30: rgba(255, 255, 255, 0.3); + --yt-spec-white-1-alpha-70: rgba(255, 255, 255, 0.7); + --yt-spec-white-1-alpha-95: rgba(255, 255, 255, 0.95); + --yt-spec-white-1-alpha-98: rgba(255, 255, 255, 0.98); + + --yt-brand-medium-red-alpha-90: rgba(204, 0, 0, 0.9); + --yt-brand-medium-red-alpha-30: rgba(204, 0, 0, 0.3); + + --yt-brand-light-red-alpha-30: rgba(255, 78, 69, 0.3); + + --yt-spec-light-blue-alpha-30: rgba(62, 166, 255, 0.3); + + --yt-spec-dark-blue-alpha-30: rgba(6, 95, 212, 0.3); } html:not(.style-scope) { - --yt-luna-black: #111111; - --yt-opalescence-grey: #888888; - --yt-opalescence-soft-grey: #eeeeee; - --yt-opalescence-dark-grey: #333333; - --yt-red: #e62117; - --yt-white: white; - --yt-blue: #2793e6; - --ad-yellow: #e6bc27; - --yt-surface-100: white; - --yt-surface-200: #fafafa; - --yt-surface-300: whitesmoke; - --yt-surface-400: #ededed; - --yt-body-500: rgba(0, 0, 0, 0.87); - --yt-body-400: rgba(0, 0, 0, 0.74); - --yt-body-300: rgba(0, 0, 0, 0.54); - --yt-body-200: rgba(0, 0, 0, 0.26); - --yt-body-100: rgba(0, 0, 0, 0.04); - --yt-opacity-lighten-1: 0.8; - --yt-opacity-lighten-2: 0.6; - --yt-opacity-lighten-3: 0.4; - --yt-opacity-lighten-4: 0.2; - --yt-opacity-lighten-5: 0.1; - --yt-luna-black-opacity-lighten-1: hsla( - 0, - 0%, - 6.7%, - var(--yt-opacity-lighten-1) - ); - --yt-luna-black-opacity-lighten-2: hsla( - 0, - 0%, - 6.7%, - var(--yt-opacity-lighten-2) - ); - --yt-luna-black-opacity-lighten-2-hex: #707070; - --yt-luna-black-opacity-lighten-3: hsla( - 0, - 0%, - 6.7%, - var(--yt-opacity-lighten-3) - ); - --yt-luna-black-opacity-lighten-4: hsla( - 0, - 0%, - 6.7%, - var(--yt-opacity-lighten-4) - ); - --yt-opalescence-grey-opacity-lighten-1: hsla( - 0, - 0%, - 53.3%, - var(--yt-opacity-lighten-1) - ); - --yt-opalescence-grey-opacity-lighten-2: hsla( - 0, - 0%, - 53.3%, - var(--yt-opacity-lighten-2) - ); - --yt-opalescence-grey-opacity-lighten-3: hsla( - 0, - 0%, - 53.3%, - var(--yt-opacity-lighten-3) - ); - --yt-opalescence-grey-opacity-lighten-4: hsla( - 0, - 0%, - 53.3%, - var(--yt-opacity-lighten-4) - ); - --yt-opalescence-grey-opacity-lighten-5: hsla( - 0, - 0%, - 53.3%, - var(--yt-opacity-lighten-5) - ); - --yt-opalescence-soft-grey-opacity-lighten-1: hsla( - 0, - 0%, - 93.3%, - var(--yt-opacity-lighten-1) - ); - --yt-opalescence-soft-grey-opacity-lighten-2: hsla( - 0, - 0%, - 93.3%, - var(--yt-opacity-lighten-2) - ); - --yt-opalescence-soft-grey-opacity-lighten-3: hsla( - 0, - 0%, - 93.3%, - var(--yt-opacity-lighten-3) - ); - --yt-opalescence-soft-grey-opacity-lighten-4: hsla( - 0, - 0%, - 93.3%, - var(--yt-opacity-lighten-4) - ); - --yt-white-opacity-lighten-1: hsla( - 0, - 0%, - 100%, - var(--yt-opacity-lighten-1) - ); - --yt-white-opacity-lighten-2: hsla( - 0, - 0%, - 100%, - var(--yt-opacity-lighten-2) - ); - --yt-white-opacity-lighten-3: hsla( - 0, - 0%, - 100%, - var(--yt-opacity-lighten-3) - ); - --yt-white-opacity-lighten-4: hsla( - 0, - 0%, - 100%, - var(--yt-opacity-lighten-4) - ); - --yt-blue-opacity-lighten-2: hsla( - 206.1, - 79.3%, - 52.7%, - var(--yt-opacity-lighten-2) - ); - --yt-blue-opacity-lighten-4: hsla( - 206.1, - 79.3%, - 52.7%, - var(--yt-opacity-lighten-4) - ); - --yt-playability-button-color: #262626; - --yt-blue-light: #167ac6; - --yt-blue-suggestive: #f2f8ff; - --yt-grey: #222222; - --yt-section-4-light: #e3e3e3; - --yt-dark-surface-100: #121212; - --yt-dark-surface-200: #1c1c1c; - --yt-dark-surface-200-lighten-1: rgba(28, 28, 28, 0.8); - --yt-dark-surface-300: #242424; - --yt-dark-surface-400: #292929; - --yt-dark-body-500: rgba(255, 255, 255, 0.88); - --yt-dark-body-400: rgba(255, 255, 255, 0.74); - --yt-dark-body-300: rgba(255, 255, 255, 0.5); - --yt-dark-body-200: rgba(255, 255, 255, 0.26); - --yt-dark-body-100: rgba(255, 255, 255, 0.08); - --yt-section-4-dark: #292929; - --yt-subscribe-button-count: rgba(255, 255, 255, 0.85); + --yt-luna-black: #111111; + --yt-opalescence-grey: #888888; + --yt-opalescence-soft-grey: #eeeeee; + --yt-opalescence-dark-grey: #333333; + --yt-red: #e62117; + --yt-white: white; + --yt-blue: #2793e6; + --ad-yellow: #e6bc27; + --yt-surface-100: white; + --yt-surface-200: #fafafa; + --yt-surface-300: whitesmoke; + --yt-surface-400: #ededed; + --yt-body-500: rgba(0, 0, 0, 0.87); + --yt-body-400: rgba(0, 0, 0, 0.74); + --yt-body-300: rgba(0, 0, 0, 0.54); + --yt-body-200: rgba(0, 0, 0, 0.26); + --yt-body-100: rgba(0, 0, 0, 0.04); + --yt-opacity-lighten-1: 0.8; + --yt-opacity-lighten-2: 0.6; + --yt-opacity-lighten-3: 0.4; + --yt-opacity-lighten-4: 0.2; + --yt-opacity-lighten-5: 0.1; + --yt-luna-black-opacity-lighten-1: hsla( + 0, + 0%, + 6.7%, + var(--yt-opacity-lighten-1) + ); + --yt-luna-black-opacity-lighten-2: hsla( + 0, + 0%, + 6.7%, + var(--yt-opacity-lighten-2) + ); + --yt-luna-black-opacity-lighten-2-hex: #707070; + --yt-luna-black-opacity-lighten-3: hsla( + 0, + 0%, + 6.7%, + var(--yt-opacity-lighten-3) + ); + --yt-luna-black-opacity-lighten-4: hsla( + 0, + 0%, + 6.7%, + var(--yt-opacity-lighten-4) + ); + --yt-opalescence-grey-opacity-lighten-1: hsla( + 0, + 0%, + 53.3%, + var(--yt-opacity-lighten-1) + ); + --yt-opalescence-grey-opacity-lighten-2: hsla( + 0, + 0%, + 53.3%, + var(--yt-opacity-lighten-2) + ); + --yt-opalescence-grey-opacity-lighten-3: hsla( + 0, + 0%, + 53.3%, + var(--yt-opacity-lighten-3) + ); + --yt-opalescence-grey-opacity-lighten-4: hsla( + 0, + 0%, + 53.3%, + var(--yt-opacity-lighten-4) + ); + --yt-opalescence-grey-opacity-lighten-5: hsla( + 0, + 0%, + 53.3%, + var(--yt-opacity-lighten-5) + ); + --yt-opalescence-soft-grey-opacity-lighten-1: hsla( + 0, + 0%, + 93.3%, + var(--yt-opacity-lighten-1) + ); + --yt-opalescence-soft-grey-opacity-lighten-2: hsla( + 0, + 0%, + 93.3%, + var(--yt-opacity-lighten-2) + ); + --yt-opalescence-soft-grey-opacity-lighten-3: hsla( + 0, + 0%, + 93.3%, + var(--yt-opacity-lighten-3) + ); + --yt-opalescence-soft-grey-opacity-lighten-4: hsla( + 0, + 0%, + 93.3%, + var(--yt-opacity-lighten-4) + ); + --yt-white-opacity-lighten-1: hsla(0, 0%, 100%, var(--yt-opacity-lighten-1)); + --yt-white-opacity-lighten-2: hsla(0, 0%, 100%, var(--yt-opacity-lighten-2)); + --yt-white-opacity-lighten-3: hsla(0, 0%, 100%, var(--yt-opacity-lighten-3)); + --yt-white-opacity-lighten-4: hsla(0, 0%, 100%, var(--yt-opacity-lighten-4)); + --yt-blue-opacity-lighten-2: hsla( + 206.1, + 79.3%, + 52.7%, + var(--yt-opacity-lighten-2) + ); + --yt-blue-opacity-lighten-4: hsla( + 206.1, + 79.3%, + 52.7%, + var(--yt-opacity-lighten-4) + ); + --yt-playability-button-color: #262626; + --yt-blue-light: #167ac6; + --yt-blue-suggestive: #f2f8ff; + --yt-grey: #222222; + --yt-section-4-light: #e3e3e3; + --yt-dark-surface-100: #121212; + --yt-dark-surface-200: #1c1c1c; + --yt-dark-surface-200-lighten-1: rgba(28, 28, 28, 0.8); + --yt-dark-surface-300: #242424; + --yt-dark-surface-400: #292929; + --yt-dark-body-500: rgba(255, 255, 255, 0.88); + --yt-dark-body-400: rgba(255, 255, 255, 0.74); + --yt-dark-body-300: rgba(255, 255, 255, 0.5); + --yt-dark-body-200: rgba(255, 255, 255, 0.26); + --yt-dark-body-100: rgba(255, 255, 255, 0.08); + --yt-section-4-dark: #292929; + --yt-subscribe-button-count: rgba(255, 255, 255, 0.85); } html:not(.style-scope) { - --yt-std-body-200: var(--yt-body-200); - --yt-std-body-300: var(--yt-body-300); - --yt-std-surface-200: var(--yt-surface-200); - --yt-std-surface-300: var(--yt-surface-300); - --yt-std-surface-400: var(--yt-surface-400); - --yt-primary-color: var(--yt-luna-black); - --yt-primary-text-color: var(--yt-luna-black); - --yt-secondary-text-color: var(--yt-luna-black-opacity-lighten-1); - --yt-tertiary-text-color: var(--yt-luna-black-opacity-lighten-2); - --yt-placeholder-text-color: var(--yt-luna-black-opacity-lighten-2); - --yt-border-color: var(--yt-opalescence-soft-grey); - --yt-commentbox-border-inactive: var(--yt-opalescence-soft-grey); - --yt-commentbox-border-active: var(--yt-luna-black-opacity-lighten-2); - --yt-primary-disabled-button-text-color: var(--yt-white); - --yt-paper-radio-button-checked-color: var(--yt-opalescence-grey); - --yt-paper-button-ink-color: var(--yt-opalescence-grey); - --yt-icon-color: var(--yt-luna-black-opacity-lighten-3); - --yt-icon-hover-color: var(--yt-luna-black-opacity-lighten-1); - --yt-icon-disabled-color: var(--yt-luna-black-opacity-lighten-2); - --yt-icon-active-color: var(--yt-luna-black); - --yt-expand-color: var(--yt-luna-black-opacity-lighten-2); - --yt-metadata-color: var(--yt-luna-black-opacity-lighten-2); - --yt-placeholder-text: var(--yt-luna-black-opacity-lighten-2); - --yt-playlist-background-header: var(--yt-opalescence-soft-grey); - --yt-playlist-background-item: var( - --yt-opalescence-soft-grey-opacity-lighten-2 - ); - --yt-playlist-title-text: var(--yt-luna-black); - --yt-playlist-message-text: var(--yt-luna-black-opacity-lighten-2); - --yt-subscribe-button-text-color: var(--yt-white); - --yt-button-text-color: var(--yt-luna-black-opacity-lighten-2); - --yt-button-payment-text-color: var(--yt-white); - --yt-button-active-color: var(--yt-luna-black); - --yt-copyright-text: var(--yt-luna-black-opacity-lighten-2); - --yt-guide-entry-text-color: var(--yt-luna-black-opacity-lighten-1); - --yt-thumbnail-placeholder-color: var(--yt-section-4-light); - --yt-featured-channel-title-text-color: var(--yt-body-300); - --yt-formatted-string-deemphasize-color: var(--yt-opalescence-grey); - --yt-alert-background: var(--yt-opalescence-soft-grey-opacity-lighten-3); - --yt-video-secondary-info-description-background: var( - --yt-opalescence-soft-grey-opacity-lighten-2 - ); - --yt-searchbox-text-color: var(--yt-primary-text-color); - --yt-simple-menu-header-background: var(--yt-opalescence-soft-grey); - --yt-item-section-header-color: var(--yt-luna-black-opacity-lighten-2); - --yt-menu-hover-backgound-color: var(--yt-opalescence-soft-grey); - --yt-menu-focus-background-color: var(--yt-luna-black-opacity-lighten-4); - --yt-app-background: var(--yt-white); - --yt-main-app-background: var(--yt-surface-200); - --yt-main-app-background-tmp: var(--yt-surface-100); - --yt-guide-background: var(--yt-surface-300); - --yt-dialog-background: var(--yt-white); - --yt-searchbox-background: var(--yt-white); - --yt-channel-header-background: var(--yt-surface-200); - --yt-sidebar-background: var(--yt-surface-200); - --yt-transcript-background: var(--yt-white); + --yt-std-body-200: var(--yt-body-200); + --yt-std-body-300: var(--yt-body-300); + --yt-std-surface-200: var(--yt-surface-200); + --yt-std-surface-300: var(--yt-surface-300); + --yt-std-surface-400: var(--yt-surface-400); + --yt-primary-color: var(--yt-luna-black); + --yt-primary-text-color: var(--yt-luna-black); + --yt-secondary-text-color: var(--yt-luna-black-opacity-lighten-1); + --yt-tertiary-text-color: var(--yt-luna-black-opacity-lighten-2); + --yt-placeholder-text-color: var(--yt-luna-black-opacity-lighten-2); + --yt-border-color: var(--yt-opalescence-soft-grey); + --yt-commentbox-border-inactive: var(--yt-opalescence-soft-grey); + --yt-commentbox-border-active: var(--yt-luna-black-opacity-lighten-2); + --yt-primary-disabled-button-text-color: var(--yt-white); + --yt-paper-radio-button-checked-color: var(--yt-opalescence-grey); + --yt-paper-button-ink-color: var(--yt-opalescence-grey); + --yt-icon-color: var(--yt-luna-black-opacity-lighten-3); + --yt-icon-hover-color: var(--yt-luna-black-opacity-lighten-1); + --yt-icon-disabled-color: var(--yt-luna-black-opacity-lighten-2); + --yt-icon-active-color: var(--yt-luna-black); + --yt-expand-color: var(--yt-luna-black-opacity-lighten-2); + --yt-metadata-color: var(--yt-luna-black-opacity-lighten-2); + --yt-placeholder-text: var(--yt-luna-black-opacity-lighten-2); + --yt-playlist-background-header: var(--yt-opalescence-soft-grey); + --yt-playlist-background-item: var( + --yt-opalescence-soft-grey-opacity-lighten-2 + ); + --yt-playlist-title-text: var(--yt-luna-black); + --yt-playlist-message-text: var(--yt-luna-black-opacity-lighten-2); + --yt-subscribe-button-text-color: var(--yt-white); + --yt-button-text-color: var(--yt-luna-black-opacity-lighten-2); + --yt-button-payment-text-color: var(--yt-white); + --yt-button-active-color: var(--yt-luna-black); + --yt-copyright-text: var(--yt-luna-black-opacity-lighten-2); + --yt-guide-entry-text-color: var(--yt-luna-black-opacity-lighten-1); + --yt-thumbnail-placeholder-color: var(--yt-section-4-light); + --yt-featured-channel-title-text-color: var(--yt-body-300); + --yt-formatted-string-deemphasize-color: var(--yt-opalescence-grey); + --yt-alert-background: var(--yt-opalescence-soft-grey-opacity-lighten-3); + --yt-video-secondary-info-description-background: var( + --yt-opalescence-soft-grey-opacity-lighten-2 + ); + --yt-searchbox-text-color: var(--yt-primary-text-color); + --yt-simple-menu-header-background: var(--yt-opalescence-soft-grey); + --yt-item-section-header-color: var(--yt-luna-black-opacity-lighten-2); + --yt-menu-hover-backgound-color: var(--yt-opalescence-soft-grey); + --yt-menu-focus-background-color: var(--yt-luna-black-opacity-lighten-4); + --yt-app-background: var(--yt-white); + --yt-main-app-background: var(--yt-surface-200); + --yt-main-app-background-tmp: var(--yt-surface-100); + --yt-guide-background: var(--yt-surface-300); + --yt-dialog-background: var(--yt-white); + --yt-searchbox-background: var(--yt-white); + --yt-channel-header-background: var(--yt-surface-200); + --yt-sidebar-background: var(--yt-surface-200); + --yt-transcript-background: var(--yt-white); } html:not(.style-scope)[dark], :not(.style-scope)[dark] { - --yt-std-body-200: var(--yt-dark-body-200); - --yt-std-body-300: var(--yt-dark-body-300); - --yt-std-surface-200: var(--yt-dark-surface-200); - --yt-std-surface-300: var(--yt-dark-surface-300); - --yt-std-surface-400: var(--yt-dark-surface-400); - --yt-primary-color: var(--yt-dark-body-500); - --yt-primary-text-color: var(--yt-dark-body-500); - --yt-secondary-text-color: var(--yt-dark-body-300); - --yt-tertiary-text-color: var(--yt-dark-body-300); - --yt-disabled-text-color: var(--yt-dark-body-200); - --yt-placeholder-text-color: var(--yt-dark-body-300); - --yt-border-color: var(--yt-dark-body-100); - --yt-commentbox-border-inactive: var(--yt-dark-body-300); - --yt-commentbox-border-active: var(--yt-dark-body-500); - --yt-alert-background: var(--yt-dark-body-200); - --yt-paper-button-ink-color: var(--yt-white-opacity-lighten-4); - --yt-icon-color: var(--yt-dark-body-300); - --yt-icon-hover-color: var(--yt-dark-body-400); - --yt-icon-active-color: var(--yt-dark-body-500); - --yt-icon-disabled-color: var(--yt-dark-body-200); - --yt-expand-color: var(--yt-white-opacity-lighten-2); - --yt-metadata-color: var(--yt-opalescence-grey); - --yt-channel-owner: var(--yt-dark-body-500); - --yt-placeholder-text: var(--yt-opalescence-soft-grey); - --yt-playlist-background-header: var( - --yt-opalescence-grey-opacity-lighten-3 - ); - --yt-playlist-background-item: var(--yt-opalescence-grey-opacity-lighten-4); - --yt-playlist-title-text: var(--yt-dark-body-500); - --yt-playlist-message-text: var(--yt-opalescence-soft-grey); - --yt-subscribe-button-text-color: var(--yt-dark-body-500); - --yt-button-text-color: var(--yt-dark-body-300); - --yt-button-active-color: var(--yt-dark-body-500); - --yt-button-payment-text-color: var(--yt-dark-body-500); - --yt-copyright-text: var(--yt-white-opacity-lighten-2); - --yt-guide-entry-text-color: var(--yt-dark-body-500); - --yt-thumbnail-placeholder-color: var(--yt-section-4-dark); - --yt-primary-disabled-button-text-color: var(--yt-white-opacity-lighten-4); - --yt-featured-channel-title-text-color: var(--yt-dark-body-300); - --yt-formatted-string-deemphasize-color: var(--yt-opalescence-grey); - --yt-video-secondary-info-description-background: var( - --yt-opalescence-grey-opacity-lighten-4 - ); - --yt-simple-menu-header-background: var( - --yt-opalescence-grey-opacity-lighten-3 - ); - --yt-item-section-header-color: var(--yt-opalescence-soft-grey); - --yt-menu-hover-backgound-color: var(--yt-dark-body-100); - --yt-menu-focus-background-color: var(--yt-dark-body-200); - --yt-searchbox-text-color: var(--yt-primary-text-color); - --yt-app-background: var(--yt-dark-surface-100); - --yt-main-app-background: var(--yt-dark-surface-100); - --yt-main-app-background-tmp: var(--yt-dark-surface-100); - --yt-guide-background: var(--yt-dark-surface-200); - --yt-dialog-background: var(--yt-dark-surface-300); - --yt-searchbox-background: var(--yt-dark-surface-100); - --yt-channel-header-background: var(--yt-dark-surface-200-lighten-1); - --yt-sidebar-background: var(--yt-dark-surface-200-lighten-1); - --yt-transcript-background: var(--yt-dark-surface-200); - --yt-blue-suggestive: transparent; + --yt-std-body-200: var(--yt-dark-body-200); + --yt-std-body-300: var(--yt-dark-body-300); + --yt-std-surface-200: var(--yt-dark-surface-200); + --yt-std-surface-300: var(--yt-dark-surface-300); + --yt-std-surface-400: var(--yt-dark-surface-400); + --yt-primary-color: var(--yt-dark-body-500); + --yt-primary-text-color: var(--yt-dark-body-500); + --yt-secondary-text-color: var(--yt-dark-body-300); + --yt-tertiary-text-color: var(--yt-dark-body-300); + --yt-disabled-text-color: var(--yt-dark-body-200); + --yt-placeholder-text-color: var(--yt-dark-body-300); + --yt-border-color: var(--yt-dark-body-100); + --yt-commentbox-border-inactive: var(--yt-dark-body-300); + --yt-commentbox-border-active: var(--yt-dark-body-500); + --yt-alert-background: var(--yt-dark-body-200); + --yt-paper-button-ink-color: var(--yt-white-opacity-lighten-4); + --yt-icon-color: var(--yt-dark-body-300); + --yt-icon-hover-color: var(--yt-dark-body-400); + --yt-icon-active-color: var(--yt-dark-body-500); + --yt-icon-disabled-color: var(--yt-dark-body-200); + --yt-expand-color: var(--yt-white-opacity-lighten-2); + --yt-metadata-color: var(--yt-opalescence-grey); + --yt-channel-owner: var(--yt-dark-body-500); + --yt-placeholder-text: var(--yt-opalescence-soft-grey); + --yt-playlist-background-header: var(--yt-opalescence-grey-opacity-lighten-3); + --yt-playlist-background-item: var(--yt-opalescence-grey-opacity-lighten-4); + --yt-playlist-title-text: var(--yt-dark-body-500); + --yt-playlist-message-text: var(--yt-opalescence-soft-grey); + --yt-subscribe-button-text-color: var(--yt-dark-body-500); + --yt-button-text-color: var(--yt-dark-body-300); + --yt-button-active-color: var(--yt-dark-body-500); + --yt-button-payment-text-color: var(--yt-dark-body-500); + --yt-copyright-text: var(--yt-white-opacity-lighten-2); + --yt-guide-entry-text-color: var(--yt-dark-body-500); + --yt-thumbnail-placeholder-color: var(--yt-section-4-dark); + --yt-primary-disabled-button-text-color: var(--yt-white-opacity-lighten-4); + --yt-featured-channel-title-text-color: var(--yt-dark-body-300); + --yt-formatted-string-deemphasize-color: var(--yt-opalescence-grey); + --yt-video-secondary-info-description-background: var( + --yt-opalescence-grey-opacity-lighten-4 + ); + --yt-simple-menu-header-background: var( + --yt-opalescence-grey-opacity-lighten-3 + ); + --yt-item-section-header-color: var(--yt-opalescence-soft-grey); + --yt-menu-hover-backgound-color: var(--yt-dark-body-100); + --yt-menu-focus-background-color: var(--yt-dark-body-200); + --yt-searchbox-text-color: var(--yt-primary-text-color); + --yt-app-background: var(--yt-dark-surface-100); + --yt-main-app-background: var(--yt-dark-surface-100); + --yt-main-app-background-tmp: var(--yt-dark-surface-100); + --yt-guide-background: var(--yt-dark-surface-200); + --yt-dialog-background: var(--yt-dark-surface-300); + --yt-searchbox-background: var(--yt-dark-surface-100); + --yt-channel-header-background: var(--yt-dark-surface-200-lighten-1); + --yt-sidebar-background: var(--yt-dark-surface-200-lighten-1); + --yt-transcript-background: var(--yt-dark-surface-200); + --yt-blue-suggestive: transparent; } .theme-tester:not(.style-scope)[dark] { - background-color: var(--yt-dark-surface-100); + background-color: var(--yt-dark-surface-100); } html:not(.style-scope) { - --ytd-searchbox-border-color: var(--yt-opalescence-grey-opacity-lighten-4); - --ytd-searchbox-legacy-border-color: #ccc; - --ytd-searchbox-legacy-border-shadow-color: #eee; - --ytd-searchbox-legacy-button-color: #f8f8f8; - --ytd-searchbox-legacy-button-border-color: #d3d3d3; - --ytd-searchbox-legacy-button-focus-color: #e9e9e9; - --ytd-searchbox-legacy-button-hover-color: #f0f0f0; - --ytd-searchbox-legacy-button-hover-border-color: #c6c6c6; - --ytd-searchbox-legacy-button-icon-color: #333; - --ytd-moderation-panel-background: var( - --yt-opalescence-soft-grey-opacity-lighten-2 - ); - --ytd-moderation-panel-hover: var( - --yt-opalescence-soft-grey-opacity-lighten-1 - ); - --ytd-moderation-panel-comment-text: var(--yt-luna-black); - --ytd-moderation-panel-comment-metadata-text: var( - --yt-luna-black-opacity-lighten-2 - ); - --ytd-moderation-icon-color: var(--yt-luna-black-opacity-lighten-2); - --ytd-moderation-icon-hover-color: var(--yt-luna-black); - --ytd-moderation-panel-likely-spam-divider: var( - --yt-opalescence-grey-opacity-lighten-5 - ); - --ytd-comment-text-color: var(--yt-luna-black); - --ytd-comment-metadata-text-color: var(--yt-spec-text-secondary); - --ytd-watch-card-secondary-text-color: var(--yt-opalescence-grey); - --ytd-watch-card-album-header-background: var(--yt-white); - --ytd-watch-header-background: var(--yt-surface-300); - --ytd-backstage-metadata-text-color: var(--yt-opalescence-grey); - --ytd-backstage-video-link-background-color: var( - --yt-opalescence-soft-grey-opacity-lighten-3 - ); - --ytd-backstage-image-alert-color: var(--yt-luna-black-opacity-lighten-2); - --ytd-backstage-cancel-background-color: var(--yt-white); - --ytd-backstage-cancel-color: var(--yt-luna-black-opacity-lighten-3); - --ytd-backstage-attachment-background-color: var(--yt-surface-100); - --ytd-backstage-creationbox-inactive-color: var(--yt-body-200); - --ytd-backstage-creationbox-text-color: var(--yt-body-300); - --ytd-backstage-creationbox-input-text-color: var(--yt-body-500); - --ytd-backstage-creationbox-disabled-button-color: var(--yt-body-100); - --ytd-backstage-creationbox-disabled-button-text-color: var(--yt-white); - --ytd-backstage-attachment-icon-hover-color: var(--yt-body-400); - --ytd-sponsorships-background-color-focus: var( - --yt-opalescence-soft-grey-opacity-lighten-3 - ); - --ytd-badge-disabled-color: var(--yt-opalescence-grey-opacity-lighten-3); - --ytd-collection-badge-color: var(--yt-luna-black-opacity-lighten-1); - --ytd-owner-badge-color: var(--yt-luna-black-opacity-lighten-3); - --ytd-simple-badge-color: var(--yt-luna-black-opacity-lighten-2); - --ytd-shopping-product-info: var(--yt-luna-black-opacity-lighten-1); - --ytd-transcript-cue-hover-background-color: var( - --yt-opalescence-soft-grey - ); - --ytd-transcript-toolbar-background-color: var(--yt-opalescence-soft-grey); - --ytd-transcript-toolbar-text: var(--yt-luna-black); - --ytd-video-publish-date-color: var(--yt-luna-black-opacity-lighten-2); - --ytd-vat-notice-text: var(--yt-luna-black-opacity-lighten-2); - --ytd-offer-background-color: var( - --yt-opalescence-soft-grey-opacity-lighten-3 - ); - --ytd-video-game-watch-card-logo-color: var(--yt-luna-black); - --ytd-watch-split-pane-sidebar-background-color: var(--yt-surface-200); + --ytd-searchbox-border-color: var(--yt-opalescence-grey-opacity-lighten-4); + --ytd-searchbox-legacy-border-color: #ccc; + --ytd-searchbox-legacy-border-shadow-color: #eee; + --ytd-searchbox-legacy-button-color: #f8f8f8; + --ytd-searchbox-legacy-button-border-color: #d3d3d3; + --ytd-searchbox-legacy-button-focus-color: #e9e9e9; + --ytd-searchbox-legacy-button-hover-color: #f0f0f0; + --ytd-searchbox-legacy-button-hover-border-color: #c6c6c6; + --ytd-searchbox-legacy-button-icon-color: #333; + --ytd-moderation-panel-background: var( + --yt-opalescence-soft-grey-opacity-lighten-2 + ); + --ytd-moderation-panel-hover: var( + --yt-opalescence-soft-grey-opacity-lighten-1 + ); + --ytd-moderation-panel-comment-text: var(--yt-luna-black); + --ytd-moderation-panel-comment-metadata-text: var( + --yt-luna-black-opacity-lighten-2 + ); + --ytd-moderation-icon-color: var(--yt-luna-black-opacity-lighten-2); + --ytd-moderation-icon-hover-color: var(--yt-luna-black); + --ytd-moderation-panel-likely-spam-divider: var( + --yt-opalescence-grey-opacity-lighten-5 + ); + --ytd-comment-text-color: var(--yt-luna-black); + --ytd-comment-metadata-text-color: var(--yt-spec-text-secondary); + --ytd-watch-card-secondary-text-color: var(--yt-opalescence-grey); + --ytd-watch-card-album-header-background: var(--yt-white); + --ytd-watch-header-background: var(--yt-surface-300); + --ytd-backstage-metadata-text-color: var(--yt-opalescence-grey); + --ytd-backstage-video-link-background-color: var( + --yt-opalescence-soft-grey-opacity-lighten-3 + ); + --ytd-backstage-image-alert-color: var(--yt-luna-black-opacity-lighten-2); + --ytd-backstage-cancel-background-color: var(--yt-white); + --ytd-backstage-cancel-color: var(--yt-luna-black-opacity-lighten-3); + --ytd-backstage-attachment-background-color: var(--yt-surface-100); + --ytd-backstage-creationbox-inactive-color: var(--yt-body-200); + --ytd-backstage-creationbox-text-color: var(--yt-body-300); + --ytd-backstage-creationbox-input-text-color: var(--yt-body-500); + --ytd-backstage-creationbox-disabled-button-color: var(--yt-body-100); + --ytd-backstage-creationbox-disabled-button-text-color: var(--yt-white); + --ytd-backstage-attachment-icon-hover-color: var(--yt-body-400); + --ytd-sponsorships-background-color-focus: var( + --yt-opalescence-soft-grey-opacity-lighten-3 + ); + --ytd-badge-disabled-color: var(--yt-opalescence-grey-opacity-lighten-3); + --ytd-collection-badge-color: var(--yt-luna-black-opacity-lighten-1); + --ytd-owner-badge-color: var(--yt-luna-black-opacity-lighten-3); + --ytd-simple-badge-color: var(--yt-luna-black-opacity-lighten-2); + --ytd-shopping-product-info: var(--yt-luna-black-opacity-lighten-1); + --ytd-transcript-cue-hover-background-color: var(--yt-opalescence-soft-grey); + --ytd-transcript-toolbar-background-color: var(--yt-opalescence-soft-grey); + --ytd-transcript-toolbar-text: var(--yt-luna-black); + --ytd-video-publish-date-color: var(--yt-luna-black-opacity-lighten-2); + --ytd-vat-notice-text: var(--yt-luna-black-opacity-lighten-2); + --ytd-offer-background-color: var( + --yt-opalescence-soft-grey-opacity-lighten-3 + ); + --ytd-video-game-watch-card-logo-color: var(--yt-luna-black); + --ytd-watch-split-pane-sidebar-background-color: var(--yt-surface-200); } html:not(.style-scope)[dark], :not(.style-scope)[dark] { - --ytd-searchbox-border-color: var(--yt-opalescence-grey-opacity-lighten-4); - --ytd-searchbox-legacy-border-color: #303030; - --ytd-searchbox-legacy-border-shadow-color: rgba(0, 0, 0, 0); - --ytd-searchbox-legacy-button-color: rgba(255, 255, 255, 0.08); - --ytd-searchbox-legacy-button-border-color: #303030; - --ytd-searchbox-legacy-button-focus-color: rgba(255, 255, 255, 0.08); - --ytd-searchbox-legacy-button-hover-color: rgba(255, 255, 255, 0.08); - --ytd-searchbox-legacy-button-hover-border-color: #303030; - --ytd-searchbox-legacy-button-icon-color: var(--yt-dark-body-300); - --ytd-moderation-panel-background: var(--yt-dark-surface-200-lighten-1); - --ytd-moderation-panel-hover: var(--yt-dark-surface-200); - --ytd-moderation-panel-comment-text: var(--yt-dark-body-300); - --ytd-moderation-panel-comment-metadata-text: var(--yt-dark-body-300); - --ytd-moderation-icon-color: var(--yt-dark-body-300); - --ytd-moderation-icon-hover-color: var(--yt-dark-body-400); - --ytd-comment-text-color: var(--yt-dark-body-500); - --ytd-comment-metadata-text-color: var(--yt-opalescence-grey); - --ytd-watch-card-secondary-text-color: var(--yt-opalescence-soft-grey); - --ytd-watch-card-album-header-background: var(--yt-luna-black); - --ytd-watch-header-background: var(--yt-dark-surface-200); - --ytd-backstage-metadata-text-color: var(--yt-dark-body-500); - --ytd-backstage-video-link-background-color: var(--yt-dark-surface-300); - --ytd-backstage-image-alert-color: var(--yt-dark-body-500); - --ytd-backstage-cancel-background-color: var(--yt-dark-surface-300); - --ytd-backstage-cancel-color: var(--yt-white); - --ytd-backstage-attachment-background-color: var(--yt-dark-surface-100); - --ytd-backstage-creationbox-inactive-color: var(--yt-dark-body-200); - --ytd-backstage-creationbox-text-color: var(--yt-dark-body-300); - --ytd-backstage-creationbox-input-text-color: var(--yt-dark-body-500); - --ytd-backstage-creationbox-disabled-button-color: var(--yt-dark-body-100); - --ytd-backstage-creationbox-disabled-button-text-color: var( - --yt-dark-body-200 - ); - --ytd-backstage-attachment-icon-hover-color: var(--yt-dark-body-400); - --ytd-sponsorships-background-color-focus: var(--yt-dark-surface-200); - --ytd-badge-disabled-color: var(--yt-white-opacity-lighten-3); - --ytd-collection-badge-color: var(--yt-white-opacity-lighten-1); - --ytd-owner-badge-color: var(--yt-white-opacity-lighten-3); - --ytd-simple-badge-color: var(--yt-white-opacity-lighten-2); - --ytd-shopping-product-info: var(--yt-dark-body-400); - --ytd-transcript-cue-hover-background-color: var( - --yt-opalescence-grey-opacity-lighten-3 - ); - --ytd-transcript-toolbar-background-color: var( - --yt-opalescence-grey-opacity-lighten-3 - ); - --ytd-transcript-toolbar-text: var(--yt-dark-body-500); - --ytd-video-publish-date-color: var(--yt-white-opacity-lighten-2); - --ytd-vat-notice-text: var(--yt-white-opacity-lighten-2); - --ytd-offer-background-color: var(--yt-dark-surface-300); - --ytd-video-game-watch-card-logo-color: var(--yt-white); - --ytd-watch-split-pane-sidebar-background-color: var(--yt-dark-surface-200); + --ytd-searchbox-border-color: var(--yt-opalescence-grey-opacity-lighten-4); + --ytd-searchbox-legacy-border-color: #303030; + --ytd-searchbox-legacy-border-shadow-color: rgba(0, 0, 0, 0); + --ytd-searchbox-legacy-button-color: rgba(255, 255, 255, 0.08); + --ytd-searchbox-legacy-button-border-color: #303030; + --ytd-searchbox-legacy-button-focus-color: rgba(255, 255, 255, 0.08); + --ytd-searchbox-legacy-button-hover-color: rgba(255, 255, 255, 0.08); + --ytd-searchbox-legacy-button-hover-border-color: #303030; + --ytd-searchbox-legacy-button-icon-color: var(--yt-dark-body-300); + --ytd-moderation-panel-background: var(--yt-dark-surface-200-lighten-1); + --ytd-moderation-panel-hover: var(--yt-dark-surface-200); + --ytd-moderation-panel-comment-text: var(--yt-dark-body-300); + --ytd-moderation-panel-comment-metadata-text: var(--yt-dark-body-300); + --ytd-moderation-icon-color: var(--yt-dark-body-300); + --ytd-moderation-icon-hover-color: var(--yt-dark-body-400); + --ytd-comment-text-color: var(--yt-dark-body-500); + --ytd-comment-metadata-text-color: var(--yt-opalescence-grey); + --ytd-watch-card-secondary-text-color: var(--yt-opalescence-soft-grey); + --ytd-watch-card-album-header-background: var(--yt-luna-black); + --ytd-watch-header-background: var(--yt-dark-surface-200); + --ytd-backstage-metadata-text-color: var(--yt-dark-body-500); + --ytd-backstage-video-link-background-color: var(--yt-dark-surface-300); + --ytd-backstage-image-alert-color: var(--yt-dark-body-500); + --ytd-backstage-cancel-background-color: var(--yt-dark-surface-300); + --ytd-backstage-cancel-color: var(--yt-white); + --ytd-backstage-attachment-background-color: var(--yt-dark-surface-100); + --ytd-backstage-creationbox-inactive-color: var(--yt-dark-body-200); + --ytd-backstage-creationbox-text-color: var(--yt-dark-body-300); + --ytd-backstage-creationbox-input-text-color: var(--yt-dark-body-500); + --ytd-backstage-creationbox-disabled-button-color: var(--yt-dark-body-100); + --ytd-backstage-creationbox-disabled-button-text-color: var( + --yt-dark-body-200 + ); + --ytd-backstage-attachment-icon-hover-color: var(--yt-dark-body-400); + --ytd-sponsorships-background-color-focus: var(--yt-dark-surface-200); + --ytd-badge-disabled-color: var(--yt-white-opacity-lighten-3); + --ytd-collection-badge-color: var(--yt-white-opacity-lighten-1); + --ytd-owner-badge-color: var(--yt-white-opacity-lighten-3); + --ytd-simple-badge-color: var(--yt-white-opacity-lighten-2); + --ytd-shopping-product-info: var(--yt-dark-body-400); + --ytd-transcript-cue-hover-background-color: var( + --yt-opalescence-grey-opacity-lighten-3 + ); + --ytd-transcript-toolbar-background-color: var( + --yt-opalescence-grey-opacity-lighten-3 + ); + --ytd-transcript-toolbar-text: var(--yt-dark-body-500); + --ytd-video-publish-date-color: var(--yt-white-opacity-lighten-2); + --ytd-vat-notice-text: var(--yt-white-opacity-lighten-2); + --ytd-offer-background-color: var(--yt-dark-surface-300); + --ytd-video-game-watch-card-logo-color: var(--yt-white); + --ytd-watch-split-pane-sidebar-background-color: var(--yt-dark-surface-200); } html:not(.style-scope) { - --ytd-z-index-report-form-overlay: 100; - --ytd-z-index-watch-fixie-secondary-section-detached: 500; - --ytd-z-index-engagement-panel-scrim: 600; - --ytd-z-index-engagement-panel-scrimmed: 601; - --ytd-z-index-toggle-button-tooltip: 2300; - --ytd-z-index-miniplayer-bar: 2008; - --ytd-z-index-masthead: 2020; - --ytd-z-index-user-mention-suggestions-container: 2022; - --ytd-z-index-notification: 2024; - --ytd-z-index-miniplayer: 2025; - --ytd-z-index-channel-name: 300; - --ytd-thumbnail-height: 118px; - --ytd-grid-1-columns-width: 214px; - --ytd-grid-2-columns-width: 428px; - --ytd-grid-3-columns-width: 642px; - --ytd-grid-4-columns-width: 856px; - --ytd-grid-5-columns-width: 1070px; - --ytd-grid-6-columns-width: 1284px; - --ytd-grid-max-width: 1284px; - --ytd-grid-thumbnail_-_height: 118px; - --ytd-grid-thumbnail_-_width: 210px; - --ytd-grid-section_-_margin-bottom: 24px; - --ytd-grid-video-item_-_display: inline-block; - --ytd-grid-video-item_-_width: 210px; - --ytd-grid-subheader_-_margin: 24px 0; - --ytd-grid-video-title_-_display: var( - --ytd-link-two-lines_-_display, - block - ); - --ytd-grid-video-title_-_margin: 8px 0 8px; - --ytd-grid-video-title_-_max-height: var(--ytd-link-two-lines_-_max-height); - --ytd-grid-video-title_-_overflow: var(--ytd-link-two-lines_-_overflow); - --ytd-grid-video-title_-_font-size: var(--ytd-link-two-lines_-_font-size); - --ytd-grid-video-title_-_font-weight: var( - --ytd-link-two-lines_-_font-weight - ); - --ytd-grid-video-title_-_line-height: var( - --ytd-link-two-lines_-_line-height - ); - --ytd-grid-video-title_-_letter-spacing: var( - --ytd-link-two-lines_-_letter-spacing - ); - --ytd-grid-info-container_-_padding-right: 24px; - --ytd-scrollbar-width: 8px; - --ytd-scrollbar-scrubber_-_height: 56px; - --ytd-scrollbar-scrubber_-_background: var( - --yt-opalescence-grey-opacity-lighten-3 - ); - --ytd-fixed-width-container_-_position: relative; - --ytd-fixed-width-container_-_overflow: hidden; - --ytd-fixed-width-container_-_display: block; - --ytd-default-promo-panel-renderer-height: 600px; + --ytd-z-index-report-form-overlay: 100; + --ytd-z-index-watch-fixie-secondary-section-detached: 500; + --ytd-z-index-engagement-panel-scrim: 600; + --ytd-z-index-engagement-panel-scrimmed: 601; + --ytd-z-index-toggle-button-tooltip: 2300; + --ytd-z-index-miniplayer-bar: 2008; + --ytd-z-index-masthead: 2020; + --ytd-z-index-user-mention-suggestions-container: 2022; + --ytd-z-index-notification: 2024; + --ytd-z-index-miniplayer: 2025; + --ytd-z-index-channel-name: 300; + --ytd-thumbnail-height: 118px; + --ytd-grid-1-columns-width: 214px; + --ytd-grid-2-columns-width: 428px; + --ytd-grid-3-columns-width: 642px; + --ytd-grid-4-columns-width: 856px; + --ytd-grid-5-columns-width: 1070px; + --ytd-grid-6-columns-width: 1284px; + --ytd-grid-max-width: 1284px; + --ytd-grid-thumbnail_-_height: 118px; + --ytd-grid-thumbnail_-_width: 210px; + --ytd-grid-section_-_margin-bottom: 24px; + --ytd-grid-video-item_-_display: inline-block; + --ytd-grid-video-item_-_width: 210px; + --ytd-grid-subheader_-_margin: 24px 0; + --ytd-grid-video-title_-_display: var(--ytd-link-two-lines_-_display, block); + --ytd-grid-video-title_-_margin: 8px 0 8px; + --ytd-grid-video-title_-_max-height: var(--ytd-link-two-lines_-_max-height); + --ytd-grid-video-title_-_overflow: var(--ytd-link-two-lines_-_overflow); + --ytd-grid-video-title_-_font-size: var(--ytd-link-two-lines_-_font-size); + --ytd-grid-video-title_-_font-weight: var(--ytd-link-two-lines_-_font-weight); + --ytd-grid-video-title_-_line-height: var(--ytd-link-two-lines_-_line-height); + --ytd-grid-video-title_-_letter-spacing: var( + --ytd-link-two-lines_-_letter-spacing + ); + --ytd-grid-info-container_-_padding-right: 24px; + --ytd-scrollbar-width: 8px; + --ytd-scrollbar-scrubber_-_height: 56px; + --ytd-scrollbar-scrubber_-_background: var( + --yt-opalescence-grey-opacity-lighten-3 + ); + --ytd-fixed-width-container_-_position: relative; + --ytd-fixed-width-container_-_overflow: hidden; + --ytd-fixed-width-container_-_display: block; + --ytd-default-promo-panel-renderer-height: 600px; } body:not(.style-scope)[no-y-overflow] { - overflow-y: hidden; + overflow-y: hidden; } html:not(.style-scope)[offline], :not(.style-scope)[offline] { - --ytd-offline-opacity: 0.5; - --ytd-offline-pointer-events: none; + --ytd-offline-opacity: 0.5; + --ytd-offline-pointer-events: none; } html:not(.style-scope) { - --ytd-grid-base: 103px; - --ytd-margin-base: 4px; - --ytd-avatar-size: 32px; - --ytd-toolbar-height: 56px; - --ytd-margin-2x: 8px; - --ytd-margin-3x: 12px; - --ytd-margin-4x: 16px; - --ytd-margin-5x: 20px; - --ytd-margin-6x: 24px; - --ytd-margin-7x: 28px; - --ytd-margin-8x: 32px; - --ytd-margin-9x: 36px; - --ytd-margin-10x: 40px; - --ytd-margin-11x: 44px; - --ytd-margin-12x: 48px; - --ytd-margin-14x: 56px; - --ytd-margin-16x: 64px; - --ytd-margin-17x: 68px; - --ytd-margin-24x: 96px; - --ytd-margin-25x: 100px; - --ytd-margin-35x: 140px; - --ytd-neg-margin-base: -4px; - --ytd-neg-margin-2x: -8px; - --ytd-neg-margin-3x: -12px; - --ytd-neg-margin-4x: -16px; - --ytd-neg-margin-5x: -20px; - --ytd-neg-margin-6x: -24px; - --ytd-neg-margin-7x: -28px; - --ytd-neg-margin-8x: -32px; - --ytd-neg-margin-10x: -40px; - --ytd-neg-margin-11x: -44px; - --ytd-neg-margin-12x: -48px; - --ytd-neg-margin-14x: -56px; - --ytd-neg-margin-16x: -64px; - --ytd-neg-margin-24x: -96px; - --ytd-neg-margin-25x: -100px; - --ytd-grid-1x1_-_height: 103px; - --ytd-grid-1x1_-_width: 103px; - --ytd-safari-layout-fix_-_-ms-flex: var(--layout-flex-none_-_-ms-flex); - --ytd-safari-layout-fix_-_-webkit-flex: var( - --layout-flex-none_-_-webkit-flex - ); - --ytd-safari-layout-fix_-_flex: var(--layout-flex-none_-_flex); - --yt-report-form-modal-renderer-min-width: 250px; - --yt-legal-report-details-form-renderer-min-width: 250px; - --yt-circular_-_border-radius: 50%; - --yt-circular_-_background-color: transparent; - --yt-circular_-_overflow: hidden; - --yt-multi-line-ellipsis_-_-webkit-box-orient: vertical; - --yt-multi-line-ellipsis_-_text-overflow: ellipsis; - --yt-multi-line-ellipsis_-_white-space: normal; - --yt-multi-line-ellipsis_-_display: -webkit-box; - --yt-upsell-dialog-layout-vertical-width: 400px; - --yt-upsell-dialog-layout-horizontal-width: 800px; + --ytd-grid-base: 103px; + --ytd-margin-base: 4px; + --ytd-avatar-size: 32px; + --ytd-toolbar-height: 56px; + --ytd-margin-2x: 8px; + --ytd-margin-3x: 12px; + --ytd-margin-4x: 16px; + --ytd-margin-5x: 20px; + --ytd-margin-6x: 24px; + --ytd-margin-7x: 28px; + --ytd-margin-8x: 32px; + --ytd-margin-9x: 36px; + --ytd-margin-10x: 40px; + --ytd-margin-11x: 44px; + --ytd-margin-12x: 48px; + --ytd-margin-14x: 56px; + --ytd-margin-16x: 64px; + --ytd-margin-17x: 68px; + --ytd-margin-24x: 96px; + --ytd-margin-25x: 100px; + --ytd-margin-35x: 140px; + --ytd-neg-margin-base: -4px; + --ytd-neg-margin-2x: -8px; + --ytd-neg-margin-3x: -12px; + --ytd-neg-margin-4x: -16px; + --ytd-neg-margin-5x: -20px; + --ytd-neg-margin-6x: -24px; + --ytd-neg-margin-7x: -28px; + --ytd-neg-margin-8x: -32px; + --ytd-neg-margin-10x: -40px; + --ytd-neg-margin-11x: -44px; + --ytd-neg-margin-12x: -48px; + --ytd-neg-margin-14x: -56px; + --ytd-neg-margin-16x: -64px; + --ytd-neg-margin-24x: -96px; + --ytd-neg-margin-25x: -100px; + --ytd-grid-1x1_-_height: 103px; + --ytd-grid-1x1_-_width: 103px; + --ytd-safari-layout-fix_-_-ms-flex: var(--layout-flex-none_-_-ms-flex); + --ytd-safari-layout-fix_-_-webkit-flex: var( + --layout-flex-none_-_-webkit-flex + ); + --ytd-safari-layout-fix_-_flex: var(--layout-flex-none_-_flex); + --yt-report-form-modal-renderer-min-width: 250px; + --yt-legal-report-details-form-renderer-min-width: 250px; + --yt-circular_-_border-radius: 50%; + --yt-circular_-_background-color: transparent; + --yt-circular_-_overflow: hidden; + --yt-multi-line-ellipsis_-_-webkit-box-orient: vertical; + --yt-multi-line-ellipsis_-_text-overflow: ellipsis; + --yt-multi-line-ellipsis_-_white-space: normal; + --yt-multi-line-ellipsis_-_display: -webkit-box; + --yt-upsell-dialog-layout-vertical-width: 400px; + --yt-upsell-dialog-layout-horizontal-width: 800px; } html:not(.style-scope) { - --yt-redeem-code-title_-_font-size: 2.4rem; - --yt-redeem-code-title_-_font-weight: 400; - --yt-redeem-code-title_-_line-height: 2.8rem; - --yt-redeem-input-text_-_font-size: 1.6rem; - --yt-redeem-input-text_-_font-weight: 400; - --yt-redeem-input-text_-_line-height: 1.6rem; - --yt-redeem-error-message_-_font-size: 1.2rem; - --yt-redeem-error-message_-_font-weight: 400; - --yt-redeem-error-message_-_line-height: 2rem; - --yt-post-redemption-section-title_-_font-size: 2.6rem; - --yt-post-redemption-section-title_-_font-weight: 400; - --yt-post-redemption-section-title_-_font-family: "YT Sans"; - --yt-post-redemption-section-title_-_line-height: 3rem; - --yt-post-redemption-section-title_-_-moz-osx-font-smoothing: grayscale; - --yt-post-redemption-section-title_-_-webkit-font-smoothing: antialiased; + --yt-redeem-code-title_-_font-size: 2.4rem; + --yt-redeem-code-title_-_font-weight: 400; + --yt-redeem-code-title_-_line-height: 2.8rem; + --yt-redeem-input-text_-_font-size: 1.6rem; + --yt-redeem-input-text_-_font-weight: 400; + --yt-redeem-input-text_-_line-height: 1.6rem; + --yt-redeem-error-message_-_font-size: 1.2rem; + --yt-redeem-error-message_-_font-weight: 400; + --yt-redeem-error-message_-_line-height: 2rem; + --yt-post-redemption-section-title_-_font-size: 2.6rem; + --yt-post-redemption-section-title_-_font-weight: 400; + --yt-post-redemption-section-title_-_font-family: 'YT Sans'; + --yt-post-redemption-section-title_-_line-height: 3rem; + --yt-post-redemption-section-title_-_-moz-osx-font-smoothing: grayscale; + --yt-post-redemption-section-title_-_-webkit-font-smoothing: antialiased; } html:not(.style-scope)[noto] { - --paper-font-common-base_-_font-family: "Roboto", "Noto Sans KR", - "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", "Arial", sans-serif; - --paper-font-common-base_-_-webkit-font-smoothing: antialiased; + --paper-font-common-base_-_font-family: 'Roboto', 'Noto Sans KR', + 'Noto Sans JP', 'Noto Sans TC', 'Noto Sans SC', 'Arial', sans-serif; + --paper-font-common-base_-_-webkit-font-smoothing: antialiased; } html:not(.style-scope)[typography] { - --yt-channel-line-height: 3.4rem; - --yt-navbar-title-line-height: 2.6rem; - --yt-subheadline-line-height: 2.2rem; - --yt-subheadline-letter-spacing: 0.1px; - --yt-subheadline-link-letter-spacing: 0.15px; - --yt-link-line-height: 2rem; - --yt-link-letter-spacing: 0.25px; - --yt-thumbnail-attribution-font-size: 1.2rem; - --yt-thumbnail-attribution-line-height: 1.8rem; - --yt-thumbnail-attribution-letter-spacing: 0.3px; - --yt-user-comment-line-height: 2rem; - --yt-user-comment-letter-spacing: 0.2px; - --yt-guide-highlight-line-height: 2rem; - --yt-guide-highlight-letter-spacing: 0.25px; - --yt-caption-font-size: 1.2rem; - --yt-caption-line-height: 1.8rem; - --yt-caption-letter-spacing: 0.35px; + --yt-channel-line-height: 3.4rem; + --yt-navbar-title-line-height: 2.6rem; + --yt-subheadline-line-height: 2.2rem; + --yt-subheadline-letter-spacing: 0.1px; + --yt-subheadline-link-letter-spacing: 0.15px; + --yt-link-line-height: 2rem; + --yt-link-letter-spacing: 0.25px; + --yt-thumbnail-attribution-font-size: 1.2rem; + --yt-thumbnail-attribution-line-height: 1.8rem; + --yt-thumbnail-attribution-letter-spacing: 0.3px; + --yt-user-comment-line-height: 2rem; + --yt-user-comment-letter-spacing: 0.2px; + --yt-guide-highlight-line-height: 2rem; + --yt-guide-highlight-letter-spacing: 0.25px; + --yt-caption-font-size: 1.2rem; + --yt-caption-line-height: 1.8rem; + --yt-caption-letter-spacing: 0.35px; } html:not(.style-scope) { - --ytd-channel-title_-_font-size: var(--yt-channel-title-font-size, 2.4rem); - --ytd-channel-title_-_font-weight: 400; - --ytd-channel-title_-_line-height: var( - --yt-channel-title-line-height, - 3rem - ); - --yt-navbar-title-font-size: 1.8rem; - - --ytd-navbar-title_-_font-size: var(--yt-navbar-title-font-size); - --ytd-navbar-title_-_font-weight: 400; - --ytd-navbar-title_-_line-height: var( - --yt-navbar-title-line-height, - 2.4rem - ); - --ytd-navbar-title-two-lines_-_display: block; - --ytd-navbar-title-two-lines_-_max-height: calc( - 2 * var(--yt-navbar-title-line-height, 2.4rem) - ); - --ytd-navbar-title-two-lines_-_overflow: hidden; - --ytd-navbar-title-two-lines_-_font-size: var( - --ytd-navbar-title_-_font-size - ); - --ytd-navbar-title-two-lines_-_font-weight: var( - --ytd-navbar-title_-_font-weight - ); - --ytd-navbar-title-two-lines_-_line-height: var( - --ytd-navbar-title_-_line-height - ); - --ytd-subheadline_-_font-size: var(--yt-subheadline-font-size, 1.6rem); - --ytd-subheadline_-_font-weight: 400; - --ytd-subheadline_-_line-height: var(--yt-subheadline-line-height, 2rem); - --ytd-subheadline_-_letter-spacing: var( - --yt-subheadline-letter-spacing, - normal - ); - --ytd-subheadline-one-line_-_display: block; - --ytd-subheadline-one-line_-_max-height: var( - --yt-subheadline-line-height, - 2rem - ); - --ytd-subheadline-one-line_-_overflow: hidden; - --ytd-subheadline-one-line_-_font-size: var(--ytd-subheadline_-_font-size); - --ytd-subheadline-one-line_-_font-weight: var( - --ytd-subheadline_-_font-weight - ); - --ytd-subheadline-one-line_-_line-height: var( - --ytd-subheadline_-_line-height - ); - --ytd-subheadline-one-line_-_letter-spacing: var( - --ytd-subheadline_-_letter-spacing - ); - --ytd-subheadline-one-line-ellipsis_-_white-space: nowrap; - --ytd-subheadline-one-line-ellipsis_-_text-overflow: ellipsis; - --ytd-subheadline-one-line-ellipsis_-_display: var( - --ytd-subheadline-one-line_-_display - ); - --ytd-subheadline-one-line-ellipsis_-_max-height: var( - --ytd-subheadline-one-line_-_max-height - ); - --ytd-subheadline-one-line-ellipsis_-_overflow: var( - --ytd-subheadline-one-line_-_overflow - ); - --ytd-subheadline-one-line-ellipsis_-_font-size: var( - --ytd-subheadline-one-line_-_font-size - ); - --ytd-subheadline-one-line-ellipsis_-_font-weight: var( - --ytd-subheadline-one-line_-_font-weight - ); - --ytd-subheadline-one-line-ellipsis_-_line-height: var( - --ytd-subheadline-one-line_-_line-height - ); - --ytd-subheadline-one-line-ellipsis_-_letter-spacing: var( - --ytd-subheadline-one-line_-_letter-spacing - ); - --ytd-subheadline-link_-_font-size: var(--yt-subheadline-font-size, 1.6rem); - --ytd-subheadline-link_-_font-weight: 500; - --ytd-subheadline-link_-_line-height: var( - --yt-subheadline-line-height, - 2rem - ); - --ytd-subheadline-link_-_letter-spacing: var( - --yt-subheadline-link-letter-spacing, - normal - ); - --ytd-link_-_font-size: var(--yt-link-font-size, 1.4rem); - --ytd-link_-_font-weight: 500; - --ytd-link_-_line-height: var(--yt-link-line-height, 1.6rem); - --ytd-link_-_letter-spacing: var(--yt-link-letter-spacing, normal); - --ytd-link-one-line_-_display: block; - --ytd-link-one-line_-_max-height: var(--yt-link-line-height, 1.6rem); - --ytd-link-one-line_-_white-space: nowrap; - --ytd-link-one-line_-_overflow: hidden; - --ytd-link-one-line_-_font-size: var(--ytd-link_-_font-size); - --ytd-link-one-line_-_font-weight: var(--ytd-link_-_font-weight); - --ytd-link-one-line_-_line-height: var(--ytd-link_-_line-height); - --ytd-link-one-line_-_letter-spacing: var(--ytd-link_-_letter-spacing); - --ytd-link-two-lines_-_display: block; - --ytd-link-two-lines_-_max-height: calc( - 2 * var(--yt-link-line-height, 1.6rem) - ); - --ytd-link-two-lines_-_overflow: hidden; - --ytd-link-two-lines_-_font-size: var(--ytd-link_-_font-size); - --ytd-link-two-lines_-_font-weight: var(--ytd-link_-_font-weight); - --ytd-link-two-lines_-_line-height: var(--ytd-link_-_line-height); - --ytd-link-two-lines_-_letter-spacing: var(--ytd-link_-_letter-spacing); - --ytd-thumbnail-attribution_-_font-size: var( - --yt-thumbnail-attribution-font-size, - 1.3rem - ); - --ytd-thumbnail-attribution_-_font-weight: 400; - --ytd-thumbnail-attribution_-_line-height: var( - --yt-thumbnail-attribution-line-height, - 1.8rem - ); - --ytd-thumbnail-attribution_-_letter-spacing: var( - --yt-thumbnail-attribution-letter-spacing, - inherit - ); - --ytd-thumbnail-attribution_-_text-transform: none; - --ytd-thumbnail-attribution-one-line_-_display: block; - --ytd-thumbnail-attribution-one-line_-_max-height: var( - --yt-thumbnail-attribution-line-height, - 1.8rem - ); - --ytd-thumbnail-attribution-one-line_-_overflow: hidden; - --ytd-thumbnail-attribution-one-line_-_font-size: var( - --ytd-thumbnail-attribution_-_font-size - ); - --ytd-thumbnail-attribution-one-line_-_font-weight: var( - --ytd-thumbnail-attribution_-_font-weight - ); - --ytd-thumbnail-attribution-one-line_-_line-height: var( - --ytd-thumbnail-attribution_-_line-height - ); - --ytd-thumbnail-attribution-one-line_-_letter-spacing: var( - --ytd-thumbnail-attribution_-_letter-spacing - ); - --ytd-thumbnail-attribution-one-line_-_text-transform: var( - --ytd-thumbnail-attribution_-_text-transform - ); - --ytd-thumbnail-attribution-two-line_-_display: block; - --ytd-thumbnail-attribution-two-line_-_max-height: calc( - 2 * var(--yt-thumbnail-attribution-line-height, 1.8rem) - ); - --ytd-thumbnail-attribution-two-line_-_overflow: hidden; - --ytd-thumbnail-attribution-two-line_-_font-size: var( - --ytd-thumbnail-attribution_-_font-size - ); - --ytd-thumbnail-attribution-two-line_-_font-weight: var( - --ytd-thumbnail-attribution_-_font-weight - ); - --ytd-thumbnail-attribution-two-line_-_line-height: var( - --ytd-thumbnail-attribution_-_line-height - ); - --ytd-thumbnail-attribution-two-line_-_letter-spacing: var( - --ytd-thumbnail-attribution_-_letter-spacing - ); - --ytd-thumbnail-attribution-two-line_-_text-transform: var( - --ytd-thumbnail-attribution_-_text-transform - ); - --ytd-thumbnail-attribution-two-line-ellipsis_-_display: -webkit-box; - --ytd-thumbnail-attribution-two-line-ellipsis_-_-webkit-box-orient: vertical; - --ytd-thumbnail-attribution-two-line-ellipsis_-_max-height: calc( - 2 * var(--yt-thumbnail-attribution-line-height, 1.8rem) - ); - --ytd-thumbnail-attribution-two-line-ellipsis_-_overflow: hidden; - --ytd-thumbnail-attribution-two-line-ellipsis_-_text-overflow: ellipsis; - --ytd-thumbnail-attribution-two-line-ellipsis_-_white-space: normal; - --ytd-thumbnail-attribution-two-line-ellipsis_-_-webkit-line-clamp: 2; - --ytd-thumbnail-attribution-two-line-ellipsis_-_font-size: var( - --ytd-thumbnail-attribution_-_font-size - ); - --ytd-thumbnail-attribution-two-line-ellipsis_-_font-weight: var( - --ytd-thumbnail-attribution_-_font-weight - ); - --ytd-thumbnail-attribution-two-line-ellipsis_-_line-height: var( - --ytd-thumbnail-attribution_-_line-height - ); - --ytd-thumbnail-attribution-two-line-ellipsis_-_letter-spacing: var( - --ytd-thumbnail-attribution_-_letter-spacing - ); - --ytd-thumbnail-attribution-two-line-ellipsis_-_text-transform: var( - --ytd-thumbnail-attribution_-_text-transform - ); - --ytd-user-comment_-_font-size: var(--yt-user-comment-font-size, 1.4rem); - --ytd-user-comment_-_font-weight: 400; - --ytd-user-comment_-_line-height: var( - --yt-user-comment-line-height, - 2.1rem - ); - --ytd-user-comment_-_letter-spacing: var( - --yt-user-comment-letter-spacing, - normal - ); - --ytd-user-comment-two-line_-_display: block; - --ytd-user-comment-two-line_-_max-height: calc( - 2 * var(--yt-user-comment-line-height, 2.1rem) - ); - --ytd-user-comment-two-line_-_overflow: hidden; - --ytd-user-comment-two-line_-_font-size: var( - --ytd-user-comment_-_font-size - ); - --ytd-user-comment-two-line_-_font-weight: var( - --ytd-user-comment_-_font-weight - ); - --ytd-user-comment-two-line_-_line-height: var( - --ytd-user-comment_-_line-height - ); - --ytd-user-comment-two-line_-_letter-spacing: var( - --ytd-user-comment_-_letter-spacing - ); - --ytd-tab-system_-_font-size: var(--yt-tab-system-font-size, 1.4rem); - --ytd-tab-system_-_font-weight: 500; - --ytd-tab-system_-_letter-spacing: 0.007px; - --ytd-tab-system_-_text-transform: uppercase; - --ytd-caption_-_font-size: var(--yt-caption-font-size, 1.3rem); - --ytd-caption_-_line-height: var(--yt-caption-line-height, normal); - --ytd-caption_-_font-weight: 500; - --ytd-caption_-_letter-spacing: var(--yt-caption-letter-spacing, 0.007px); - --ytd-caption_-_text-transform: uppercase; - --ytd-floating-input-thumbnail-attribution_-_font-size: 1.7rem; - --ytd-floating-input-thumbnail-attribution_-_font-weight: 400; - --ytd-floating-input-thumbnail-attribution_-_line-height: 2.4rem; - --ytd-badge_-_font-size: var(--yt-badge-font-size, 1.2rem); - --ytd-badge_-_font-weight: 500; - --ytd-badge_-_line-height: var(--yt-badge-line-height, 1.2rem); - --ytd-comment-link_-_font-size: 1.3rem; - --ytd-comment-link_-_font-weight: 500; - --ytd-comment-link_-_line-height: 1.8rem; - --ytd-mini-attribution_-_font-size: 1.2rem; - --ytd-mini-attribution_-_font-weight: 400; - --ytd-mini-attribution_-_line-height: 1.5rem; - --ytd-mini-attribution-endpoint_-_font-size: 1.2rem; - --ytd-mini-attribution-endpoint_-_font-weight: 500; - --ytd-mini-attribution-endpoint_-_line-height: 1.5rem; - --ytd-label_-_font-size: 1rem; - --ytd-label_-_font-weight: 400; - --ytd-label_-_line-height: 1.4rem; - --ytd-label-one-line-ellipsis_-_display: block; - --ytd-label-one-line-ellipsis_-_max-height: 1.4rem; - --ytd-label-one-line-ellipsis_-_overflow: hidden; - --ytd-label-one-line-ellipsis_-_text-overflow: ellipsis; - --ytd-label-one-line-ellipsis_-_white-space: nowrap; - --ytd-label-one-line-ellipsis_-_font-size: var(--ytd-label_-_font-size); - --ytd-label-one-line-ellipsis_-_font-weight: var(--ytd-label_-_font-weight); - --ytd-label-one-line-ellipsis_-_line-height: var(--ytd-label_-_line-height); - --ytd-code-snippet_-_font-family: "Roboto Mono", monospace; - --ytd-code-snippet_-_font-size: 1.4rem; - --ytd-code-snippet_-_font-weight: 400; - --ytd-code-snippet_-_line-height: 2.4rem; - --ytd-conversation-metadata_-_font-size: 1.2rem; - --ytd-conversation-metadata_-_font-weight: 400; - --ytd-conversation-metadata_-_line-height: 1.6rem; - --yt-code_-_font-family: "Roboto Mono", monospace; - --yt-code_-_font-size: 1.4rem; - --yt-code_-_font-weight: 500; - --yt-code_-_line-height: 2.1rem; - --ytd-guide-highlight_-_font-size: 1.4rem; - --ytd-guide-highlight_-_font-weight: 500; - --ytd-guide-highlight_-_line-height: var( - --yt-guide-highlight-line-height, - 1.8rem - ); - --ytd-guide-highlight_-_letter-spacing: var( - --yt-guide-highlight-letter-spacing, - normal - ); - --ytd-item-section-header-title_-_font-size: 1.6em; - --ytd-item-section-header-title_-_line-height: 1.4em; - --ytd-item-section-header-title_-_font-weight: 500; + --ytd-channel-title_-_font-size: var(--yt-channel-title-font-size, 2.4rem); + --ytd-channel-title_-_font-weight: 400; + --ytd-channel-title_-_line-height: var(--yt-channel-title-line-height, 3rem); + --yt-navbar-title-font-size: 1.8rem; + + --ytd-navbar-title_-_font-size: var(--yt-navbar-title-font-size); + --ytd-navbar-title_-_font-weight: 400; + --ytd-navbar-title_-_line-height: var(--yt-navbar-title-line-height, 2.4rem); + --ytd-navbar-title-two-lines_-_display: block; + --ytd-navbar-title-two-lines_-_max-height: calc( + 2 * var(--yt-navbar-title-line-height, 2.4rem) + ); + --ytd-navbar-title-two-lines_-_overflow: hidden; + --ytd-navbar-title-two-lines_-_font-size: var(--ytd-navbar-title_-_font-size); + --ytd-navbar-title-two-lines_-_font-weight: var( + --ytd-navbar-title_-_font-weight + ); + --ytd-navbar-title-two-lines_-_line-height: var( + --ytd-navbar-title_-_line-height + ); + --ytd-subheadline_-_font-size: var(--yt-subheadline-font-size, 1.6rem); + --ytd-subheadline_-_font-weight: 400; + --ytd-subheadline_-_line-height: var(--yt-subheadline-line-height, 2rem); + --ytd-subheadline_-_letter-spacing: var( + --yt-subheadline-letter-spacing, + normal + ); + --ytd-subheadline-one-line_-_display: block; + --ytd-subheadline-one-line_-_max-height: var( + --yt-subheadline-line-height, + 2rem + ); + --ytd-subheadline-one-line_-_overflow: hidden; + --ytd-subheadline-one-line_-_font-size: var(--ytd-subheadline_-_font-size); + --ytd-subheadline-one-line_-_font-weight: var( + --ytd-subheadline_-_font-weight + ); + --ytd-subheadline-one-line_-_line-height: var( + --ytd-subheadline_-_line-height + ); + --ytd-subheadline-one-line_-_letter-spacing: var( + --ytd-subheadline_-_letter-spacing + ); + --ytd-subheadline-one-line-ellipsis_-_white-space: nowrap; + --ytd-subheadline-one-line-ellipsis_-_text-overflow: ellipsis; + --ytd-subheadline-one-line-ellipsis_-_display: var( + --ytd-subheadline-one-line_-_display + ); + --ytd-subheadline-one-line-ellipsis_-_max-height: var( + --ytd-subheadline-one-line_-_max-height + ); + --ytd-subheadline-one-line-ellipsis_-_overflow: var( + --ytd-subheadline-one-line_-_overflow + ); + --ytd-subheadline-one-line-ellipsis_-_font-size: var( + --ytd-subheadline-one-line_-_font-size + ); + --ytd-subheadline-one-line-ellipsis_-_font-weight: var( + --ytd-subheadline-one-line_-_font-weight + ); + --ytd-subheadline-one-line-ellipsis_-_line-height: var( + --ytd-subheadline-one-line_-_line-height + ); + --ytd-subheadline-one-line-ellipsis_-_letter-spacing: var( + --ytd-subheadline-one-line_-_letter-spacing + ); + --ytd-subheadline-link_-_font-size: var(--yt-subheadline-font-size, 1.6rem); + --ytd-subheadline-link_-_font-weight: 500; + --ytd-subheadline-link_-_line-height: var(--yt-subheadline-line-height, 2rem); + --ytd-subheadline-link_-_letter-spacing: var( + --yt-subheadline-link-letter-spacing, + normal + ); + --ytd-link_-_font-size: var(--yt-link-font-size, 1.4rem); + --ytd-link_-_font-weight: 500; + --ytd-link_-_line-height: var(--yt-link-line-height, 1.6rem); + --ytd-link_-_letter-spacing: var(--yt-link-letter-spacing, normal); + --ytd-link-one-line_-_display: block; + --ytd-link-one-line_-_max-height: var(--yt-link-line-height, 1.6rem); + --ytd-link-one-line_-_white-space: nowrap; + --ytd-link-one-line_-_overflow: hidden; + --ytd-link-one-line_-_font-size: var(--ytd-link_-_font-size); + --ytd-link-one-line_-_font-weight: var(--ytd-link_-_font-weight); + --ytd-link-one-line_-_line-height: var(--ytd-link_-_line-height); + --ytd-link-one-line_-_letter-spacing: var(--ytd-link_-_letter-spacing); + --ytd-link-two-lines_-_display: block; + --ytd-link-two-lines_-_max-height: calc( + 2 * var(--yt-link-line-height, 1.6rem) + ); + --ytd-link-two-lines_-_overflow: hidden; + --ytd-link-two-lines_-_font-size: var(--ytd-link_-_font-size); + --ytd-link-two-lines_-_font-weight: var(--ytd-link_-_font-weight); + --ytd-link-two-lines_-_line-height: var(--ytd-link_-_line-height); + --ytd-link-two-lines_-_letter-spacing: var(--ytd-link_-_letter-spacing); + --ytd-thumbnail-attribution_-_font-size: var( + --yt-thumbnail-attribution-font-size, + 1.3rem + ); + --ytd-thumbnail-attribution_-_font-weight: 400; + --ytd-thumbnail-attribution_-_line-height: var( + --yt-thumbnail-attribution-line-height, + 1.8rem + ); + --ytd-thumbnail-attribution_-_letter-spacing: var( + --yt-thumbnail-attribution-letter-spacing, + inherit + ); + --ytd-thumbnail-attribution_-_text-transform: none; + --ytd-thumbnail-attribution-one-line_-_display: block; + --ytd-thumbnail-attribution-one-line_-_max-height: var( + --yt-thumbnail-attribution-line-height, + 1.8rem + ); + --ytd-thumbnail-attribution-one-line_-_overflow: hidden; + --ytd-thumbnail-attribution-one-line_-_font-size: var( + --ytd-thumbnail-attribution_-_font-size + ); + --ytd-thumbnail-attribution-one-line_-_font-weight: var( + --ytd-thumbnail-attribution_-_font-weight + ); + --ytd-thumbnail-attribution-one-line_-_line-height: var( + --ytd-thumbnail-attribution_-_line-height + ); + --ytd-thumbnail-attribution-one-line_-_letter-spacing: var( + --ytd-thumbnail-attribution_-_letter-spacing + ); + --ytd-thumbnail-attribution-one-line_-_text-transform: var( + --ytd-thumbnail-attribution_-_text-transform + ); + --ytd-thumbnail-attribution-two-line_-_display: block; + --ytd-thumbnail-attribution-two-line_-_max-height: calc( + 2 * var(--yt-thumbnail-attribution-line-height, 1.8rem) + ); + --ytd-thumbnail-attribution-two-line_-_overflow: hidden; + --ytd-thumbnail-attribution-two-line_-_font-size: var( + --ytd-thumbnail-attribution_-_font-size + ); + --ytd-thumbnail-attribution-two-line_-_font-weight: var( + --ytd-thumbnail-attribution_-_font-weight + ); + --ytd-thumbnail-attribution-two-line_-_line-height: var( + --ytd-thumbnail-attribution_-_line-height + ); + --ytd-thumbnail-attribution-two-line_-_letter-spacing: var( + --ytd-thumbnail-attribution_-_letter-spacing + ); + --ytd-thumbnail-attribution-two-line_-_text-transform: var( + --ytd-thumbnail-attribution_-_text-transform + ); + --ytd-thumbnail-attribution-two-line-ellipsis_-_display: -webkit-box; + --ytd-thumbnail-attribution-two-line-ellipsis_-_-webkit-box-orient: vertical; + --ytd-thumbnail-attribution-two-line-ellipsis_-_max-height: calc( + 2 * var(--yt-thumbnail-attribution-line-height, 1.8rem) + ); + --ytd-thumbnail-attribution-two-line-ellipsis_-_overflow: hidden; + --ytd-thumbnail-attribution-two-line-ellipsis_-_text-overflow: ellipsis; + --ytd-thumbnail-attribution-two-line-ellipsis_-_white-space: normal; + --ytd-thumbnail-attribution-two-line-ellipsis_-_-webkit-line-clamp: 2; + --ytd-thumbnail-attribution-two-line-ellipsis_-_font-size: var( + --ytd-thumbnail-attribution_-_font-size + ); + --ytd-thumbnail-attribution-two-line-ellipsis_-_font-weight: var( + --ytd-thumbnail-attribution_-_font-weight + ); + --ytd-thumbnail-attribution-two-line-ellipsis_-_line-height: var( + --ytd-thumbnail-attribution_-_line-height + ); + --ytd-thumbnail-attribution-two-line-ellipsis_-_letter-spacing: var( + --ytd-thumbnail-attribution_-_letter-spacing + ); + --ytd-thumbnail-attribution-two-line-ellipsis_-_text-transform: var( + --ytd-thumbnail-attribution_-_text-transform + ); + --ytd-user-comment_-_font-size: var(--yt-user-comment-font-size, 1.4rem); + --ytd-user-comment_-_font-weight: 400; + --ytd-user-comment_-_line-height: var(--yt-user-comment-line-height, 2.1rem); + --ytd-user-comment_-_letter-spacing: var( + --yt-user-comment-letter-spacing, + normal + ); + --ytd-user-comment-two-line_-_display: block; + --ytd-user-comment-two-line_-_max-height: calc( + 2 * var(--yt-user-comment-line-height, 2.1rem) + ); + --ytd-user-comment-two-line_-_overflow: hidden; + --ytd-user-comment-two-line_-_font-size: var(--ytd-user-comment_-_font-size); + --ytd-user-comment-two-line_-_font-weight: var( + --ytd-user-comment_-_font-weight + ); + --ytd-user-comment-two-line_-_line-height: var( + --ytd-user-comment_-_line-height + ); + --ytd-user-comment-two-line_-_letter-spacing: var( + --ytd-user-comment_-_letter-spacing + ); + --ytd-tab-system_-_font-size: var(--yt-tab-system-font-size, 1.4rem); + --ytd-tab-system_-_font-weight: 500; + --ytd-tab-system_-_letter-spacing: 0.007px; + --ytd-tab-system_-_text-transform: uppercase; + --ytd-caption_-_font-size: var(--yt-caption-font-size, 1.3rem); + --ytd-caption_-_line-height: var(--yt-caption-line-height, normal); + --ytd-caption_-_font-weight: 500; + --ytd-caption_-_letter-spacing: var(--yt-caption-letter-spacing, 0.007px); + --ytd-caption_-_text-transform: uppercase; + --ytd-floating-input-thumbnail-attribution_-_font-size: 1.7rem; + --ytd-floating-input-thumbnail-attribution_-_font-weight: 400; + --ytd-floating-input-thumbnail-attribution_-_line-height: 2.4rem; + --ytd-badge_-_font-size: var(--yt-badge-font-size, 1.2rem); + --ytd-badge_-_font-weight: 500; + --ytd-badge_-_line-height: var(--yt-badge-line-height, 1.2rem); + --ytd-comment-link_-_font-size: 1.3rem; + --ytd-comment-link_-_font-weight: 500; + --ytd-comment-link_-_line-height: 1.8rem; + --ytd-mini-attribution_-_font-size: 1.2rem; + --ytd-mini-attribution_-_font-weight: 400; + --ytd-mini-attribution_-_line-height: 1.5rem; + --ytd-mini-attribution-endpoint_-_font-size: 1.2rem; + --ytd-mini-attribution-endpoint_-_font-weight: 500; + --ytd-mini-attribution-endpoint_-_line-height: 1.5rem; + --ytd-label_-_font-size: 1rem; + --ytd-label_-_font-weight: 400; + --ytd-label_-_line-height: 1.4rem; + --ytd-label-one-line-ellipsis_-_display: block; + --ytd-label-one-line-ellipsis_-_max-height: 1.4rem; + --ytd-label-one-line-ellipsis_-_overflow: hidden; + --ytd-label-one-line-ellipsis_-_text-overflow: ellipsis; + --ytd-label-one-line-ellipsis_-_white-space: nowrap; + --ytd-label-one-line-ellipsis_-_font-size: var(--ytd-label_-_font-size); + --ytd-label-one-line-ellipsis_-_font-weight: var(--ytd-label_-_font-weight); + --ytd-label-one-line-ellipsis_-_line-height: var(--ytd-label_-_line-height); + --ytd-code-snippet_-_font-family: 'Roboto Mono', monospace; + --ytd-code-snippet_-_font-size: 1.4rem; + --ytd-code-snippet_-_font-weight: 400; + --ytd-code-snippet_-_line-height: 2.4rem; + --ytd-conversation-metadata_-_font-size: 1.2rem; + --ytd-conversation-metadata_-_font-weight: 400; + --ytd-conversation-metadata_-_line-height: 1.6rem; + --yt-code_-_font-family: 'Roboto Mono', monospace; + --yt-code_-_font-size: 1.4rem; + --yt-code_-_font-weight: 500; + --yt-code_-_line-height: 2.1rem; + --ytd-guide-highlight_-_font-size: 1.4rem; + --ytd-guide-highlight_-_font-weight: 500; + --ytd-guide-highlight_-_line-height: var( + --yt-guide-highlight-line-height, + 1.8rem + ); + --ytd-guide-highlight_-_letter-spacing: var( + --yt-guide-highlight-letter-spacing, + normal + ); + --ytd-item-section-header-title_-_font-size: 1.6em; + --ytd-item-section-header-title_-_line-height: 1.4em; + --ytd-item-section-header-title_-_font-weight: 500; } html:not(.style-scope) { - --paper-tooltip_-_margin: 8px; - --paper-tooltip_-_font-size: var(--ytd-thumbnail-attribution_-_font-size); - --paper-tooltip_-_font-weight: var( - --ytd-thumbnail-attribution_-_font-weight - ); - --paper-tooltip_-_line-height: var( - --ytd-thumbnail-attribution_-_line-height - ); - --paper-tooltip_-_letter-spacing: var( - --ytd-thumbnail-attribution_-_letter-spacing - ); - --paper-tooltip_-_text-transform: var( - --ytd-thumbnail-attribution_-_text-transform - ); - --paper-tooltip-delay-in: 1ms; - --paper-tooltip-delay-out: 0; - --paper-tooltip-duration-in: 150ms; - --paper-tooltip-duration-out: 75ms; - --iron-overlay-backdrop-opacity: 0.8; - --paper-tab-content-focused_-_font-weight: 500; + --paper-tooltip_-_margin: 8px; + --paper-tooltip_-_font-size: var(--ytd-thumbnail-attribution_-_font-size); + --paper-tooltip_-_font-weight: var(--ytd-thumbnail-attribution_-_font-weight); + --paper-tooltip_-_line-height: var(--ytd-thumbnail-attribution_-_line-height); + --paper-tooltip_-_letter-spacing: var( + --ytd-thumbnail-attribution_-_letter-spacing + ); + --paper-tooltip_-_text-transform: var( + --ytd-thumbnail-attribution_-_text-transform + ); + --paper-tooltip-delay-in: 1ms; + --paper-tooltip-delay-out: 0; + --paper-tooltip-duration-in: 150ms; + --paper-tooltip-duration-out: 75ms; + --iron-overlay-backdrop-opacity: 0.8; + --paper-tab-content-focused_-_font-weight: 500; } html:not(.style-scope) { - --paper-dialog-background-color: var(--yt-spec-brand-background-solid); - --paper-listbox-background-color: var(--yt-spec-brand-background-solid); - --paper-listbox-color: var(--yt-spec-text-primary); - --paper-spinner-layer-1-color: var(--yt-spec-icon-inactive); - --paper-spinner-layer-2-color: var(--yt-spec-icon-inactive); - --paper-spinner-layer-3-color: var(--yt-spec-icon-inactive); - --paper-spinner-layer-4-color: var(--yt-spec-icon-inactive); - --paper-spinner-color: var(--yt-spec-icon-inactive); - --paper-input-container-focus-color: var(--yt-spec-themed-blue); - --paper-input-container-input-color: var(--yt-spec-text-primary); - --paper-input-container-label-floating_-_font-size: var( - --ytd-floating-input-thumbnail-attribution_-_font-size - ); - --paper-input-container-label-floating_-_font-weight: var( - --ytd-floating-input-thumbnail-attribution_-_font-weight - ); - --paper-input-container-label-floating_-_line-height: var( - --ytd-floating-input-thumbnail-attribution_-_line-height - ); - --paper-input-container-invalid-color: var(--yt-spec-brand-link-text); - --paper-checkbox-unchecked-color: var(--yt-spec-icon-inactive); - --paper-checkbox-unchecked-ink-color: var(--yt-spec-icon-inactive); - --paper-checkbox-checked-color: var(--yt-spec-call-to-action); - --paper-checkbox-checked-ink-color: var(--yt-spec-call-to-action); - --paper-checkbox-label-color: var(--yt-spec-text-primary); - --paper-checkbox-label-spacing: 16px; - --paper-checkbox-size: 20px; - --paper-checkbox-checkmark-color: var(--yt-spec-text-primary-inverse); - --paper-radio-button-unchecked-color: var(--yt-spec-icon-inactive); - --paper-radio-button-unchecked-ink-color: var(--yt-spec-icon-inactive); - --paper-radio-button-checked-color: var(--yt-spec-call-to-action); - --paper-radio-button-checked-ink-color: var(--yt-spec-call-to-action); - --paper-radio-button-label-spacing: 16px; - --paper-radio-button-label-color: var(--yt-spec-text-primary); - --paper-radio-button-size: 20px; - --paper-item_-_white-space: nowrap; - --paper-item_-_font-size: initial; - --paper-item_-_font-weight: initial; - --paper-item_-_line-height: initial; - --paper-item_-_letter-spacing: initial; - --paper-input-error_-_overflow: hidden; - --paper-toggle-button-unchecked-bar-color: var(--yt-spec-icon-disabled); - --paper-toggle-button-unchecked-button-color: var(--yt-spec-icon-inactive); - --paper-toggle-button-checked-bar-color: var(--yt-spec-icon-disabled); - --paper-toggle-button-checked-button-color: var(--yt-spec-call-to-action); - --paper-toggle-button-checked-ink-color: var(--yt-spec-call-to-action); - --paper-toggle-button-unchecked-ink-color: var(--yt-spec-touch-response); - --paper-tab-content-unselected_-_opacity: 1; - --paper-menu-disabled-color: var(--yt-spec-text-primary); - --paper-menu-background-color: var(--yt-spec-brand-background-solid); - --paper-menu-color: var(--yt-spec-text-primary); - --yt-icon-width: 40px; - --yt-icon-height: 40px; - --yt-search-correction_-_margin-top: 24px; - --yt-search-correction-corrected_-_color: var(--yt-spec-text-primary); - --yt-search-correction-corrected_-_font-size: var( - --ytd-thumbnail-attribution_-_font-size - ); - --yt-search-correction-corrected_-_font-weight: var( - --ytd-thumbnail-attribution_-_font-weight - ); - --yt-search-correction-corrected_-_line-height: var( - --ytd-thumbnail-attribution_-_line-height - ); - --yt-search-correction-corrected_-_letter-spacing: var( - --ytd-thumbnail-attribution_-_letter-spacing - ); - --yt-search-correction-corrected_-_text-transform: var( - --ytd-thumbnail-attribution_-_text-transform - ); - --yt-search-correction-corrected-link_-_font-size: var( - --ytd-link_-_font-size - ); - --yt-search-correction-corrected-link_-_font-weight: var( - --ytd-link_-_font-weight - ); - --yt-search-correction-corrected-link_-_line-height: var( - --ytd-link_-_line-height - ); - --yt-search-correction-corrected-link_-_letter-spacing: var( - --ytd-link_-_letter-spacing - ); - --yt-search-correction-original_-_padding-left: 8px; - --yt-search-correction-original_-_color: var(--yt-spec-text-primary); - --yt-search-correction-original_-_font-size: var( - --ytd-thumbnail-attribution_-_font-size - ); - --yt-search-correction-original_-_font-weight: var( - --ytd-thumbnail-attribution_-_font-weight - ); - --yt-search-correction-original_-_line-height: var( - --ytd-thumbnail-attribution_-_line-height - ); - --yt-search-correction-original_-_letter-spacing: var( - --ytd-thumbnail-attribution_-_letter-spacing - ); - --yt-search-correction-original_-_text-transform: var( - --ytd-thumbnail-attribution_-_text-transform - ); - --yt-search-correction-original-link_-_font-size: var( - --ytd-link_-_font-size - ); - --yt-search-correction-original-link_-_font-weight: var( - --ytd-link_-_font-weight - ); - --yt-search-correction-original-link_-_line-height: var( - --ytd-link_-_line-height - ); - --yt-search-correction-original-link_-_letter-spacing: var( - --ytd-link_-_letter-spacing - ); - --yt-endpoint_-_display: inline-block; - --yt-endpoint_-_cursor: pointer; - --yt-endpoint_-_text-decoration: none; - --yt-endpoint_-_color: var( - --yt-endpoint-color, - var(--yt-spec-text-primary) - ); - --yt-endpoint-hover_-_color: var( - --yt-endpoint-hover-color, - var(--yt-spec-text-primary) - ); - --yt-endpoint-hover_-_text-decoration: var( - --yt-endpoint-text-decoration, - none - ); - --yt-notification-button-bubble_-_color: var( - --yt-swatch-important-text, - var(--yt-white) - ); - --yt-notification-button-bubble_-_background-color: var( - --yt-spec-brand-button-background - ); - --yt-notification-button-bubble_-_width: 18px; - --yt-notification-button-bubble_-_height: 18px; - --yt-notification-button-bubble_-_border-radius: 50%; - --yt-notification-button-bubble_-_line-height: 18px; - --yt-notification-button-bubble_-_font-size: 10px; - --yt-notification-button-bubble_-_text-align: center; - --yt-notification-button-bubble_-_cursor: pointer; + --paper-dialog-background-color: var(--yt-spec-brand-background-solid); + --paper-listbox-background-color: var(--yt-spec-brand-background-solid); + --paper-listbox-color: var(--yt-spec-text-primary); + --paper-spinner-layer-1-color: var(--yt-spec-icon-inactive); + --paper-spinner-layer-2-color: var(--yt-spec-icon-inactive); + --paper-spinner-layer-3-color: var(--yt-spec-icon-inactive); + --paper-spinner-layer-4-color: var(--yt-spec-icon-inactive); + --paper-spinner-color: var(--yt-spec-icon-inactive); + --paper-input-container-focus-color: var(--yt-spec-themed-blue); + --paper-input-container-input-color: var(--yt-spec-text-primary); + --paper-input-container-label-floating_-_font-size: var( + --ytd-floating-input-thumbnail-attribution_-_font-size + ); + --paper-input-container-label-floating_-_font-weight: var( + --ytd-floating-input-thumbnail-attribution_-_font-weight + ); + --paper-input-container-label-floating_-_line-height: var( + --ytd-floating-input-thumbnail-attribution_-_line-height + ); + --paper-input-container-invalid-color: var(--yt-spec-brand-link-text); + --paper-checkbox-unchecked-color: var(--yt-spec-icon-inactive); + --paper-checkbox-unchecked-ink-color: var(--yt-spec-icon-inactive); + --paper-checkbox-checked-color: var(--yt-spec-call-to-action); + --paper-checkbox-checked-ink-color: var(--yt-spec-call-to-action); + --paper-checkbox-label-color: var(--yt-spec-text-primary); + --paper-checkbox-label-spacing: 16px; + --paper-checkbox-size: 20px; + --paper-checkbox-checkmark-color: var(--yt-spec-text-primary-inverse); + --paper-radio-button-unchecked-color: var(--yt-spec-icon-inactive); + --paper-radio-button-unchecked-ink-color: var(--yt-spec-icon-inactive); + --paper-radio-button-checked-color: var(--yt-spec-call-to-action); + --paper-radio-button-checked-ink-color: var(--yt-spec-call-to-action); + --paper-radio-button-label-spacing: 16px; + --paper-radio-button-label-color: var(--yt-spec-text-primary); + --paper-radio-button-size: 20px; + --paper-item_-_white-space: nowrap; + --paper-item_-_font-size: initial; + --paper-item_-_font-weight: initial; + --paper-item_-_line-height: initial; + --paper-item_-_letter-spacing: initial; + --paper-input-error_-_overflow: hidden; + --paper-toggle-button-unchecked-bar-color: var(--yt-spec-icon-disabled); + --paper-toggle-button-unchecked-button-color: var(--yt-spec-icon-inactive); + --paper-toggle-button-checked-bar-color: var(--yt-spec-icon-disabled); + --paper-toggle-button-checked-button-color: var(--yt-spec-call-to-action); + --paper-toggle-button-checked-ink-color: var(--yt-spec-call-to-action); + --paper-toggle-button-unchecked-ink-color: var(--yt-spec-touch-response); + --paper-tab-content-unselected_-_opacity: 1; + --paper-menu-disabled-color: var(--yt-spec-text-primary); + --paper-menu-background-color: var(--yt-spec-brand-background-solid); + --paper-menu-color: var(--yt-spec-text-primary); + --yt-icon-width: 40px; + --yt-icon-height: 40px; + --yt-search-correction_-_margin-top: 24px; + --yt-search-correction-corrected_-_color: var(--yt-spec-text-primary); + --yt-search-correction-corrected_-_font-size: var( + --ytd-thumbnail-attribution_-_font-size + ); + --yt-search-correction-corrected_-_font-weight: var( + --ytd-thumbnail-attribution_-_font-weight + ); + --yt-search-correction-corrected_-_line-height: var( + --ytd-thumbnail-attribution_-_line-height + ); + --yt-search-correction-corrected_-_letter-spacing: var( + --ytd-thumbnail-attribution_-_letter-spacing + ); + --yt-search-correction-corrected_-_text-transform: var( + --ytd-thumbnail-attribution_-_text-transform + ); + --yt-search-correction-corrected-link_-_font-size: var( + --ytd-link_-_font-size + ); + --yt-search-correction-corrected-link_-_font-weight: var( + --ytd-link_-_font-weight + ); + --yt-search-correction-corrected-link_-_line-height: var( + --ytd-link_-_line-height + ); + --yt-search-correction-corrected-link_-_letter-spacing: var( + --ytd-link_-_letter-spacing + ); + --yt-search-correction-original_-_padding-left: 8px; + --yt-search-correction-original_-_color: var(--yt-spec-text-primary); + --yt-search-correction-original_-_font-size: var( + --ytd-thumbnail-attribution_-_font-size + ); + --yt-search-correction-original_-_font-weight: var( + --ytd-thumbnail-attribution_-_font-weight + ); + --yt-search-correction-original_-_line-height: var( + --ytd-thumbnail-attribution_-_line-height + ); + --yt-search-correction-original_-_letter-spacing: var( + --ytd-thumbnail-attribution_-_letter-spacing + ); + --yt-search-correction-original_-_text-transform: var( + --ytd-thumbnail-attribution_-_text-transform + ); + --yt-search-correction-original-link_-_font-size: var(--ytd-link_-_font-size); + --yt-search-correction-original-link_-_font-weight: var( + --ytd-link_-_font-weight + ); + --yt-search-correction-original-link_-_line-height: var( + --ytd-link_-_line-height + ); + --yt-search-correction-original-link_-_letter-spacing: var( + --ytd-link_-_letter-spacing + ); + --yt-endpoint_-_display: inline-block; + --yt-endpoint_-_cursor: pointer; + --yt-endpoint_-_text-decoration: none; + --yt-endpoint_-_color: var(--yt-endpoint-color, var(--yt-spec-text-primary)); + --yt-endpoint-hover_-_color: var( + --yt-endpoint-hover-color, + var(--yt-spec-text-primary) + ); + --yt-endpoint-hover_-_text-decoration: var( + --yt-endpoint-text-decoration, + none + ); + --yt-notification-button-bubble_-_color: var( + --yt-swatch-important-text, + var(--yt-white) + ); + --yt-notification-button-bubble_-_background-color: var( + --yt-spec-brand-button-background + ); + --yt-notification-button-bubble_-_width: 18px; + --yt-notification-button-bubble_-_height: 18px; + --yt-notification-button-bubble_-_border-radius: 50%; + --yt-notification-button-bubble_-_line-height: 18px; + --yt-notification-button-bubble_-_font-size: 10px; + --yt-notification-button-bubble_-_text-align: center; + --yt-notification-button-bubble_-_cursor: pointer; } html:not(.style-scope) { - --ytd-rich-grid-items-per-row: 4; - --ytd-rich-grid-posts-per-row: 3; - --ytd-rich-grid-movies-per-row: 6; - --ytd-rich-grid-item-margin: 16px; - --ytd-rich-grid-item-min-width: 320px; - --ytd-rich-grid-item-max-width: 360px; - --ytd-rich-grid-mini-item-min-width: 240px; - --ytd-rich-grid-mini-item-max-width: 320px; - --ytd-rich-grid-movie-max-width: 220px; + --ytd-rich-grid-items-per-row: 4; + --ytd-rich-grid-posts-per-row: 3; + --ytd-rich-grid-movies-per-row: 6; + --ytd-rich-grid-item-margin: 16px; + --ytd-rich-grid-item-min-width: 320px; + --ytd-rich-grid-item-max-width: 360px; + --ytd-rich-grid-mini-item-min-width: 240px; + --ytd-rich-grid-mini-item-max-width: 320px; + --ytd-rich-grid-movie-max-width: 220px; } html:not(.style-scope) { - --paper-input-container-shared-input-style_-_position: relative; - --paper-input-container-shared-input-style_-_outline: none; - --paper-input-container-shared-input-style_-_box-shadow: none; - --paper-input-container-shared-input-style_-_padding: 0; - --paper-input-container-shared-input-style_-_margin: 0; - --paper-input-container-shared-input-style_-_width: 100%; - --paper-input-container-shared-input-style_-_max-width: 100%; - --paper-input-container-shared-input-style_-_background: transparent; - --paper-input-container-shared-input-style_-_border: none; - --paper-input-container-shared-input-style_-_color: var( - --paper-input-container-input-color, - var(--primary-text-color) - ); - --paper-input-container-shared-input-style_-_-webkit-appearance: none; - --paper-input-container-shared-input-style_-_text-align: apply-shim-inherit; - --paper-input-container-shared-input-style_-_vertical-align: var( - --paper-input-container-input-align, - bottom - ); - --paper-input-container-shared-input-style_-_font-family: var( - --paper-font-subhead_-_font-family - ); - --paper-input-container-shared-input-style_-_-webkit-font-smoothing: var( - --paper-font-subhead_-_-webkit-font-smoothing - ); - --paper-input-container-shared-input-style_-_font-size: var( - --paper-font-subhead_-_font-size - ); - --paper-input-container-shared-input-style_-_font-weight: var( - --paper-font-subhead_-_font-weight - ); - --paper-input-container-shared-input-style_-_line-height: var( - --paper-font-subhead_-_line-height - ); + --paper-input-container-shared-input-style_-_position: relative; + --paper-input-container-shared-input-style_-_outline: none; + --paper-input-container-shared-input-style_-_box-shadow: none; + --paper-input-container-shared-input-style_-_padding: 0; + --paper-input-container-shared-input-style_-_margin: 0; + --paper-input-container-shared-input-style_-_width: 100%; + --paper-input-container-shared-input-style_-_max-width: 100%; + --paper-input-container-shared-input-style_-_background: transparent; + --paper-input-container-shared-input-style_-_border: none; + --paper-input-container-shared-input-style_-_color: var( + --paper-input-container-input-color, + var(--primary-text-color) + ); + --paper-input-container-shared-input-style_-_-webkit-appearance: none; + --paper-input-container-shared-input-style_-_text-align: apply-shim-inherit; + --paper-input-container-shared-input-style_-_vertical-align: var( + --paper-input-container-input-align, + bottom + ); + --paper-input-container-shared-input-style_-_font-family: var( + --paper-font-subhead_-_font-family + ); + --paper-input-container-shared-input-style_-_-webkit-font-smoothing: var( + --paper-font-subhead_-_-webkit-font-smoothing + ); + --paper-input-container-shared-input-style_-_font-size: var( + --paper-font-subhead_-_font-size + ); + --paper-input-container-shared-input-style_-_font-weight: var( + --paper-font-subhead_-_font-weight + ); + --paper-input-container-shared-input-style_-_line-height: var( + --paper-font-subhead_-_line-height + ); } html:not(.style-scope) { - --yt-live-chat-32px-icon-button_-_width: 40px; - --yt-live-chat-32px-icon-button_-_height: 40px; - --yt-live-chat-32px-icon-button_-_padding: 8px; + --yt-live-chat-32px-icon-button_-_width: 40px; + --yt-live-chat-32px-icon-button_-_height: 40px; + --yt-live-chat-32px-icon-button_-_padding: 8px; } html:not(.style-scope) { - --yt-button-margin: 0; - --yt-button-padding: 10px 16px; + --yt-button-margin: 0; + --yt-button-padding: 10px 16px; - --yt-button-padding-minus-border: 9px 15px; - --yt-button-padding-minus-focus-outline: 8px 14px; - --yt-button-padding-minus-focus-outline-width: 2px; - --yt-button-with-icon-padding-minus-focus-outline: 4px 14px; - --yt-button-border-radius: 2px; + --yt-button-padding-minus-border: 9px 15px; + --yt-button-padding-minus-focus-outline: 8px 14px; + --yt-button-padding-minus-focus-outline-width: 2px; + --yt-button-with-icon-padding-minus-focus-outline: 4px 14px; + --yt-button-border-radius: 2px; } iron-overlay-backdrop { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: var(--iron-overlay-backdrop-background-color, #000); - opacity: 0; - transition: opacity 0.2s; - pointer-events: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--iron-overlay-backdrop-background-color, #000); + opacity: 0; + transition: opacity 0.2s; + pointer-events: none; } iron-overlay-backdrop.opened { - opacity: var(--iron-overlay-backdrop-opacity, 0.6); - pointer-events: auto; + opacity: var(--iron-overlay-backdrop-opacity, 0.6); + pointer-events: auto; } paper-item, .paper-item.paper-item { - display: block; - position: relative; - min-height: var(--paper-item-min-height, 48px); - padding: 0px 16px; + display: block; + position: relative; + min-height: var(--paper-item-min-height, 48px); + padding: 0px 16px; } .paper-item.paper-item { - font-family: var(--paper-font-subhead_-_font-family); - -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); - font-size: var(--paper-font-subhead_-_font-size); - font-weight: var(--paper-font-subhead_-_font-weight); - line-height: var(--paper-font-subhead_-_line-height); - border: none; - outline: none; - background: white; - width: 100%; - text-align: left; + font-family: var(--paper-font-subhead_-_font-family); + -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); + font-size: var(--paper-font-subhead_-_font-size); + font-weight: var(--paper-font-subhead_-_font-weight); + line-height: var(--paper-font-subhead_-_line-height); + border: none; + outline: none; + background: white; + width: 100%; + text-align: left; } paper-item[hidden], .paper-item.paper-item[hidden] { - display: none !important; + display: none !important; } paper-item.iron-selected, .paper-item.iron-selected.paper-item { - font-weight: var(--paper-item-selected-weight, bold); + font-weight: var(--paper-item-selected-weight, bold); } paper-item[disabled], .paper-item.paper-item[disabled] { - color: var(--paper-item-disabled-color, var(--disabled-text-color)); + color: var(--paper-item-disabled-color, var(--disabled-text-color)); } paper-item:focus, .paper-item.paper-item:focus { - position: relative; - outline: 0; + position: relative; + outline: 0; } paper-item:focus:before, .paper-item.paper-item:focus:before { - position: var(--layout-fit_-_position); - top: var(--layout-fit_-_top); - right: var(--layout-fit_-_right); - bottom: var(--layout-fit_-_bottom); - left: var(--layout-fit_-_left); + position: var(--layout-fit_-_position); + top: var(--layout-fit_-_top); + right: var(--layout-fit_-_right); + bottom: var(--layout-fit_-_bottom); + left: var(--layout-fit_-_left); - background: currentColor; - content: ""; - opacity: var(--dark-divider-opacity); - pointer-events: none; + background: currentColor; + content: ''; + opacity: var(--dark-divider-opacity); + pointer-events: none; } paper-item { - 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); - font-family: var(--paper-font-subhead_-_font-family); - -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); - font-size: var(--paper-font-subhead_-_font-size); - font-weight: var(--paper-font-subhead_-_font-weight); - line-height: var(--paper-font-subhead_-_line-height); - - white-space: var(--paper-item_-_white-space); - font-size: var( - --paper-item_-_font-size, - var(--paper-font-subhead_-_font-size) - ); - font-weight: var( - --paper-item_-_font-weight, - var(--paper-font-subhead_-_font-weight) - ); - line-height: var( - --paper-item_-_line-height, - var(--paper-font-subhead_-_line-height) - ); - letter-spacing: var(--paper-item_-_letter-spacing); - - min-height: var(--paper-item-min-height, 48px); + 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); + font-family: var(--paper-font-subhead_-_font-family); + -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); + font-size: var(--paper-font-subhead_-_font-size); + font-weight: var(--paper-font-subhead_-_font-weight); + line-height: var(--paper-font-subhead_-_line-height); + + white-space: var(--paper-item_-_white-space); + font-size: var( + --paper-item_-_font-size, + var(--paper-font-subhead_-_font-size) + ); + font-weight: var( + --paper-item_-_font-weight, + var(--paper-font-subhead_-_font-weight) + ); + line-height: var( + --paper-item_-_line-height, + var(--paper-font-subhead_-_line-height) + ); + letter-spacing: var(--paper-item_-_letter-spacing); + + min-height: var(--paper-item-min-height, 48px); } paper-listbox { - display: block; - padding: 8px 0; + display: block; + padding: 8px 0; - background: var( - --paper-listbox-background-color, - var(--primary-background-color) - ); - color: var(--paper-listbox-color, var(--primary-text-color)); + background: var( + --paper-listbox-background-color, + var(--primary-background-color) + ); + color: var(--paper-listbox-color, var(--primary-text-color)); } a.ytd-menu-navigation-item-renderer { - display: block; + display: block; } paper-item.ytd-menu-navigation-item-renderer { - --yt-endpoint-force-cursor: pointer; - --paper-item-min-height: 36px; - padding: 0 36px 0 16px; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -ms-flex-direction: row; - -webkit-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; - -webkit-align-items: center; - align-items: center; + --yt-endpoint-force-cursor: pointer; + --paper-item-min-height: 36px; + padding: 0 36px 0 16px; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; } paper-item.ytd-menu-navigation-item-renderer:hover { - background-color: var(--yt-spec-10-percent-layer); + background-color: var(--yt-spec-10-percent-layer); } paper-item.ytd-menu-navigation-item-renderer:focus { - background-color: var(--yt-spec-badge-chip-background); - outline: 0; - position: relative; + background-color: var(--yt-spec-badge-chip-background); + outline: 0; + position: relative; } yt-formatted-string.ytd-menu-navigation-item-renderer { - color: var(--yt-spec-text-primary); - white-space: nowrap; - font-size: var(--ytd-user-comment_-_font-size); - font-weight: var(--ytd-user-comment_-_font-weight); - line-height: var(--ytd-user-comment_-_line-height); - letter-spacing: var(--ytd-user-comment_-_letter-spacing); + color: var(--yt-spec-text-primary); + white-space: nowrap; + font-size: var(--ytd-user-comment_-_font-size); + font-weight: var(--ytd-user-comment_-_font-weight); + line-height: var(--ytd-user-comment_-_line-height); + letter-spacing: var(--ytd-user-comment_-_letter-spacing); } yt-icon.ytd-menu-navigation-item-renderer { - display: var(--yt-menu-item-icon-display, none); - margin-right: 16px; - width: 24px; - height: 24px; - color: var(--yt-spec-icon-inactive); - -ms-flex: none; - -webkit-flex: none; - flex: none; + display: var(--yt-menu-item-icon-display, none); + margin-right: 16px; + width: 24px; + height: 24px; + color: var(--yt-spec-icon-inactive); + -ms-flex: none; + -webkit-flex: none; + flex: none; } ytd-menu-navigation-item-renderer[use-icons] { - --yt-menu-item-icon-display: inline-block; + --yt-menu-item-icon-display: inline-block; } ytd-menu-navigation-item-renderer[has-separator]:not(:last-child)::after { - content: ""; - display: block; - height: 1px; - background-color: var(--yt-spec-10-percent-layer); - margin: 8px 0; + content: ''; + display: block; + height: 1px; + background-color: var(--yt-spec-10-percent-layer); + margin: 8px 0; } paper-item.ytd-menu-navigation-item-renderer[disabled] - yt-formatted-string.ytd-menu-navigation-item-renderer { - color: var(--yt-spec-text-disabled); + yt-formatted-string.ytd-menu-navigation-item-renderer { + color: var(--yt-spec-text-disabled); } paper-item.ytd-menu-navigation-item-renderer[disabled] - yt-icon.ytd-menu-navigation-item-renderer { - color: var(--yt-spec-icon-disabled); + yt-icon.ytd-menu-navigation-item-renderer { + color: var(--yt-spec-icon-disabled); } ytd-menu-navigation-item-renderer, .paper-item.ytd-menu-navigation-item-renderer { - display: block; - position: relative; - min-height: var(--paper-item-min-height, 48px); - padding: 0px 16px; + display: block; + position: relative; + min-height: var(--paper-item-min-height, 48px); + padding: 0px 16px; } .paper-item.ytd-menu-navigation-item-renderer { - font-family: var(--paper-font-subhead_-_font-family); - -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); - font-size: var(--paper-font-subhead_-_font-size); - font-weight: var(--paper-font-subhead_-_font-weight); - line-height: var(--paper-font-subhead_-_line-height); - border: none; - outline: none; - background: white; - width: 100%; - text-align: left; + font-family: var(--paper-font-subhead_-_font-family); + -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); + font-size: var(--paper-font-subhead_-_font-size); + font-weight: var(--paper-font-subhead_-_font-weight); + line-height: var(--paper-font-subhead_-_line-height); + border: none; + outline: none; + background: white; + width: 100%; + text-align: left; } ytd-menu-navigation-item-renderer[hidden], .paper-item.ytd-menu-navigation-item-renderer[hidden] { - display: none !important; + display: none !important; } ytd-menu-navigation-item-renderer.iron-selected, .paper-item.iron-selected.ytd-menu-navigation-item-renderer { - font-weight: var(--paper-item-selected-weight, bold); + font-weight: var(--paper-item-selected-weight, bold); } ytd-menu-navigation-item-renderer[disabled], .paper-item.ytd-menu-navigation-item-renderer[disabled] { - color: var(--paper-item-disabled-color, var(--disabled-text-color)); + color: var(--paper-item-disabled-color, var(--disabled-text-color)); } ytd-menu-navigation-item-renderer:focus, .paper-item.ytd-menu-navigation-item-renderer:focus { - position: relative; - outline: 0; + position: relative; + outline: 0; } ytd-menu-navigation-item-renderer:focus:before, .paper-item.ytd-menu-navigation-item-renderer:focus:before { - position: var(--layout-fit_-_position); - top: var(--layout-fit_-_top); - right: var(--layout-fit_-_right); - bottom: var(--layout-fit_-_bottom); - left: var(--layout-fit_-_left); + position: var(--layout-fit_-_position); + top: var(--layout-fit_-_top); + right: var(--layout-fit_-_right); + bottom: var(--layout-fit_-_bottom); + left: var(--layout-fit_-_left); - background: currentColor; - content: ""; - opacity: var(--dark-divider-opacity); - pointer-events: none; + background: currentColor; + content: ''; + opacity: var(--dark-divider-opacity); + pointer-events: none; } ytd-menu-navigation-item-renderer { - min-height: 0; - padding: 0; + min-height: 0; + padding: 0; } yt-icon, .yt-icon-container.yt-icon { - display: -ms-inline-flexbox; - display: -webkit-inline-flex; - 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: var(--iron-icon-fill-color, currentcolor); - stroke: var(--iron-icon-stroke-color, none); - width: var(--iron-icon-width, 24px); - height: var(--iron-icon-height, 24px); + display: -ms-inline-flexbox; + display: -webkit-inline-flex; + 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: var(--iron-icon-fill-color, currentcolor); + stroke: var(--iron-icon-stroke-color, none); + width: var(--iron-icon-width, 24px); + height: var(--iron-icon-height, 24px); } yt-icon.external-container { - display: none !important; + display: none !important; } yt-formatted-string:not(.use-shadow):empty { - display: none; + display: none; } yt-formatted-string span.yt-formatted-string:empty { - display: none; + display: none; } -yt-formatted-string[dir="auto"] { - text-align: right; +yt-formatted-string[dir='auto'] { + text-align: right; } .bold.yt-formatted-string { - font-weight: var(--yt-formatted-string-bold-font-weight, 500); - font-size: var(--yt-formatted-string-bold_-_font-size); - font-weight: var( - --yt-formatted-string-bold_-_font-weight, - var(--yt-formatted-string-bold-font-weight, 500) - ); - line-height: var(--yt-formatted-string-bold_-_line-height); - letter-spacing: var(--yt-formatted-string-bold_-_letter-spacing); + font-weight: var(--yt-formatted-string-bold-font-weight, 500); + font-size: var(--yt-formatted-string-bold_-_font-size); + font-weight: var( + --yt-formatted-string-bold_-_font-weight, + var(--yt-formatted-string-bold-font-weight, 500) + ); + line-height: var(--yt-formatted-string-bold_-_line-height); + letter-spacing: var(--yt-formatted-string-bold_-_letter-spacing); } .yt-formatted-string:not(a).bold { - color: var(--yt-formatted-string-bold-color, inherit); + color: var(--yt-formatted-string-bold-color, inherit); } .deemphasize.yt-formatted-string { - color: var(--yt-formatted-string-deemphasize-color); - margin-left: var(--yt-formatted-string-deemphasize_-_margin-left); + color: var(--yt-formatted-string-deemphasize-color); + margin-left: var(--yt-formatted-string-deemphasize_-_margin-left); } .italic.yt-formatted-string { - font-style: italic; + font-style: italic; } .strikethrough.yt-formatted-string { - text-decoration: line-through; + text-decoration: line-through; } yt-formatted-string > .emoji, yt-formatted-string > .small-emoji { - margin: -1px 2px 1px 2px; - vertical-align: middle; + margin: -1px 2px 1px 2px; + vertical-align: middle; } yt-formatted-string > .emoji { - width: var(--yt-formatted-string-emoji-size, 24px); - height: var(--yt-formatted-string-emoji-size, 24px); + width: var(--yt-formatted-string-emoji-size, 24px); + height: var(--yt-formatted-string-emoji-size, 24px); } yt-formatted-string > .emoji.small-emoji { - width: var(--yt-formatted-string-small-emoji-size, 16px); - height: var(--yt-formatted-string-small-emoji-size, 16px); + width: var(--yt-formatted-string-small-emoji-size, 16px); + height: var(--yt-formatted-string-small-emoji-size, 16px); } a.yt-formatted-string { - color: var(--yt-spec-call-to-action); + color: var(--yt-spec-call-to-action); } a.yt-simple-endpoint.yt-formatted-string { - color: var(--yt-endpoint-color, var(--yt-spec-call-to-action)); - display: var(--yt-endpoint-display, inline-block); - text-decoration: var(--yt-endpoint-text-regular-decoration, none); + color: var(--yt-endpoint-color, var(--yt-spec-call-to-action)); + display: var(--yt-endpoint-display, inline-block); + text-decoration: var(--yt-endpoint-text-regular-decoration, none); } a.yt-simple-endpoint.yt-formatted-string:visited { - color: var(--yt-endpoint-visited-color, var(--yt-spec-call-to-action)); + color: var(--yt-endpoint-visited-color, var(--yt-spec-call-to-action)); } a.yt-simple-endpoint.yt-formatted-string:hover { - color: var(--yt-endpoint-hover-color, var(--yt-spec-call-to-action)); - text-decoration: var(--yt-endpoint-text-decoration, none); + color: var(--yt-endpoint-hover-color, var(--yt-spec-call-to-action)); + text-decoration: var(--yt-endpoint-text-decoration, none); } yt-formatted-string[has-link-only_]:not([force-default-style]) - a.yt-simple-endpoint.yt-formatted-string { - color: var(--yt-endpoint-color, var(--yt-spec-text-primary)); + a.yt-simple-endpoint.yt-formatted-string { + color: var(--yt-endpoint-color, var(--yt-spec-text-primary)); } yt-formatted-string[has-link-only_]:not([force-default-style]) - a.yt-simple-endpoint.yt-formatted-string:visited { - color: var(--yt-endpoint-visited-color, var(--yt-spec-text-primary)); + a.yt-simple-endpoint.yt-formatted-string:visited { + color: var(--yt-endpoint-visited-color, var(--yt-spec-text-primary)); } yt-formatted-string[has-link-only_]:not([force-default-style]) - a.yt-simple-endpoint.yt-formatted-string:hover { - color: var(--yt-endpoint-hover-color, var(--yt-spec-text-primary)); + a.yt-simple-endpoint.yt-formatted-string:hover { + color: var(--yt-endpoint-hover-color, var(--yt-spec-text-primary)); } yt-formatted-string[split-lines] { - white-space: pre-wrap; + white-space: pre-wrap; } yt-formatted-string[ellipsis-truncate].complex-string { - white-space: pre; - 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); + white-space: pre; + 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); } -yt-formatted-string[dir="auto"][ellipsis-truncate].complex-string { - display: inline-block; +yt-formatted-string[dir='auto'][ellipsis-truncate].complex-string { + display: inline-block; } -yt-formatted-string[dir="auto"][ellipsis-truncate].complex-string - > *.yt-formatted-string:not(style) { - display: inline; +yt-formatted-string[dir='auto'][ellipsis-truncate].complex-string + > *.yt-formatted-string:not(style) { + display: inline; } yt-formatted-string[ellipsis-truncate] { - display: block; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; + display: block; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; } yt-formatted-string[ellipsis-truncate] a.yt-formatted-string { - display: block; + display: block; - margin-right: -0.1em; - padding-right: 0.1em; + margin-right: -0.1em; + padding-right: 0.1em; } yt-formatted-string[ellipsis-truncate] a.yt-formatted-string:last-child { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } yt-formatted-string::-webkit-scrollbar-thumb { - height: var(--ytd-scrollbar-scrubber_-_height); - background: var(--ytd-scrollbar-scrubber_-_background); + height: var(--ytd-scrollbar-scrubber_-_height); + background: var(--ytd-scrollbar-scrubber_-_background); } yt-formatted-string::-webkit-scrollbar { - width: var(--ytd-scrollbar-width); + width: var(--ytd-scrollbar-width); } ytd-menu-service-item-download-renderer { - cursor: pointer; - --yt-menu-item-icon-display: inline-block; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -ms-flex-direction: column; - -webkit-flex-direction: column; - flex-direction: column; + cursor: pointer; + --yt-menu-item-icon-display: inline-block; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; } paper-item.ytd-menu-service-item-download-renderer { - --paper-item-min-height: 36px; - padding: 0 36px 0 16px; + --paper-item-min-height: 36px; + padding: 0 36px 0 16px; } paper-item.ytd-menu-service-item-download-renderer:hover { - background-color: var(--yt-spec-10-percent-layer); + background-color: var(--yt-spec-10-percent-layer); } yt-formatted-string.ytd-menu-service-item-download-renderer { - color: var(--yt-spec-text-primary); - white-space: nowrap; - font-size: var(--ytd-user-comment_-_font-size); - font-weight: var(--ytd-user-comment_-_font-weight); - line-height: var(--ytd-user-comment_-_line-height); - letter-spacing: var(--ytd-user-comment_-_letter-spacing); + color: var(--yt-spec-text-primary); + white-space: nowrap; + font-size: var(--ytd-user-comment_-_font-size); + font-weight: var(--ytd-user-comment_-_font-weight); + line-height: var(--ytd-user-comment_-_line-height); + letter-spacing: var(--ytd-user-comment_-_letter-spacing); } yt-icon.ytd-menu-service-item-download-renderer { - margin-right: 16px; - width: 24px; - height: 24px; - color: var(--yt-spec-icon-inactive); - display: var(--yt-menu-item-icon-display, none); - -ms-flex: none; - -webkit-flex: none; - flex: none; + margin-right: 16px; + width: 24px; + height: 24px; + color: var(--yt-spec-icon-inactive); + display: var(--yt-menu-item-icon-display, none); + -ms-flex: none; + -webkit-flex: none; + flex: none; } ytd-menu-service-item-renderer { - cursor: pointer; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -ms-flex-direction: column; - -webkit-flex-direction: column; - flex-direction: column; + cursor: pointer; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; } paper-item.ytd-menu-service-item-renderer { - --paper-item-min-height: 36px; - padding: 0 36px 0 16px; + --paper-item-min-height: 36px; + padding: 0 36px 0 16px; } paper-item.ytd-menu-service-item-renderer:hover { - background-color: var(--yt-spec-10-percent-layer); + background-color: var(--yt-spec-10-percent-layer); } yt-formatted-string.ytd-menu-service-item-renderer { - color: var(--yt-spec-text-primary); - white-space: nowrap; - font-size: var(--ytd-user-comment_-_font-size); - font-weight: var(--ytd-user-comment_-_font-weight); - line-height: var(--ytd-user-comment_-_line-height); - letter-spacing: var(--ytd-user-comment_-_letter-spacing); + color: var(--yt-spec-text-primary); + white-space: nowrap; + font-size: var(--ytd-user-comment_-_font-size); + font-weight: var(--ytd-user-comment_-_font-weight); + line-height: var(--ytd-user-comment_-_line-height); + letter-spacing: var(--ytd-user-comment_-_letter-spacing); } yt-icon.ytd-menu-service-item-renderer { - margin-right: 16px; - width: 24px; - height: 24px; - color: var(--yt-spec-icon-inactive); - display: var(--yt-menu-item-icon-display, none); - -ms-flex: none; - -webkit-flex: none; - flex: none; + margin-right: 16px; + width: 24px; + height: 24px; + color: var(--yt-spec-icon-inactive); + display: var(--yt-menu-item-icon-display, none); + -ms-flex: none; + -webkit-flex: none; + flex: none; } ytd-menu-service-item-renderer[is-selected] { - background-color: var(--yt-spec-10-percent-layer); + background-color: var(--yt-spec-10-percent-layer); } ytd-menu-service-item-renderer[is-selected] - paper-item.ytd-menu-service-item-renderer:hover { - background-color: var(--yt-spec-badge-chip-background); + paper-item.ytd-menu-service-item-renderer:hover { + background-color: var(--yt-spec-badge-chip-background); } ytd-menu-service-item-renderer[use-icons] { - --yt-menu-item-icon-display: inline-block; + --yt-menu-item-icon-display: inline-block; } ytd-menu-service-item-renderer[has-separator_]:not(:last-child)::after { - content: ""; - display: block; - height: 1px; - background-color: var(--yt-spec-10-percent-layer); - margin: 8px 0; + content: ''; + display: block; + height: 1px; + background-color: var(--yt-spec-10-percent-layer); + margin: 8px 0; } paper-item.ytd-menu-service-item-renderer[disabled] - yt-formatted-string.ytd-menu-service-item-renderer { - color: var(--yt-spec-text-disabled); + yt-formatted-string.ytd-menu-service-item-renderer { + color: var(--yt-spec-text-disabled); } paper-item.ytd-menu-service-item-renderer[disabled] - yt-icon.ytd-menu-service-item-renderer { - color: var(--yt-spec-icon-disabled); + yt-icon.ytd-menu-service-item-renderer { + color: var(--yt-spec-icon-disabled); } ytd-menu-popup-renderer { - display: inline-grid; - grid-template-columns: min-content; - background-color: var(--yt-spec-brand-background-primary); - border-radius: 4px; - box-shadow: var(--shadow-elevation-2dp_-_box-shadow); + display: inline-grid; + grid-template-columns: min-content; + background-color: var(--yt-spec-brand-background-primary); + border-radius: 4px; + box-shadow: var(--shadow-elevation-2dp_-_box-shadow); } ytd-menu-popup-tip-renderer { - display: inline-block; - background-color: var(--yt-spec-brand-background-solid); - color: var(--yt-spec-text-primary); - padding: 10px 16px; - border-top: 1px solid var(--yt-spec-10-percent-layer); - font-size: 1.2rem; - font-weight: 400; - line-height: 1.5rem; + display: inline-block; + background-color: var(--yt-spec-brand-background-solid); + color: var(--yt-spec-text-primary); + padding: 10px 16px; + border-top: 1px solid var(--yt-spec-10-percent-layer); + font-size: 1.2rem; + font-weight: 400; + line-height: 1.5rem; } ytd-toggle-menu-service-item-renderer { - cursor: pointer; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -ms-flex-direction: column; - -webkit-flex-direction: column; - flex-direction: column; + cursor: pointer; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; } span.ytd-toggle-menu-service-item-renderer { - color: var(--yt-spec-text-primary); - white-space: nowrap; - font-size: var(--ytd-user-comment_-_font-size); - font-weight: var(--ytd-user-comment_-_font-weight); - line-height: var(--ytd-user-comment_-_line-height); - letter-spacing: var(--ytd-user-comment_-_letter-spacing); + color: var(--yt-spec-text-primary); + white-space: nowrap; + font-size: var(--ytd-user-comment_-_font-size); + font-weight: var(--ytd-user-comment_-_font-weight); + line-height: var(--ytd-user-comment_-_line-height); + letter-spacing: var(--ytd-user-comment_-_letter-spacing); } ytd-toggle-menu-service-item-renderer:hover { - background-color: var(--yt-spec-10-percent-layer); + background-color: var(--yt-spec-10-percent-layer); } yt-icon.ytd-toggle-menu-service-item-renderer { - margin-right: 16px; - width: 24px; - height: 24px; - color: var(--yt-spec-icon-inactive); - display: var(--yt-menu-item-icon-display, none); - -ms-flex: none; - -webkit-flex: none; - flex: none; + margin-right: 16px; + width: 24px; + height: 24px; + color: var(--yt-spec-icon-inactive); + display: var(--yt-menu-item-icon-display, none); + -ms-flex: none; + -webkit-flex: none; + flex: none; } ytd-toggle-menu-service-item-renderer[use-icons] { - --yt-menu-item-icon-display: inline-block; + --yt-menu-item-icon-display: inline-block; } paper-item.ytd-toggle-menu-service-item-renderer { - --paper-item-min-height: 36px; - padding: 0 36px 0 16px; + --paper-item-min-height: 36px; + padding: 0 36px 0 16px; } ytd-menu-custom-icon-item-renderer { - cursor: pointer; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -ms-flex-direction: column; - -webkit-flex-direction: column; - flex-direction: column; + cursor: pointer; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; } paper-item.ytd-menu-custom-icon-item-renderer { - --paper-item-min-height: 40px; + --paper-item-min-height: 40px; } paper-item.ytd-menu-custom-icon-item-renderer:hover { - background-color: var(--yt-spec-10-percent-layer); + background-color: var(--yt-spec-10-percent-layer); } .custom-icon.ytd-menu-custom-icon-item-renderer { - height: 24px; - width: 24px; - margin-right: 16px; + height: 24px; + width: 24px; + margin-right: 16px; } .action-text.ytd-menu-custom-icon-item-renderer { - color: var(--yt-spec-text-primary); - text-decoration: none; - -ms-flex: none; - -webkit-flex: none; - flex: none; - font-size: var(--ytd-user-comment_-_font-size); - font-weight: var(--ytd-user-comment_-_font-weight); - line-height: var(--ytd-user-comment_-_line-height); - letter-spacing: var(--ytd-user-comment_-_letter-spacing); + color: var(--yt-spec-text-primary); + text-decoration: none; + -ms-flex: none; + -webkit-flex: none; + flex: none; + font-size: var(--ytd-user-comment_-_font-size); + font-weight: var(--ytd-user-comment_-_font-weight); + line-height: var(--ytd-user-comment_-_line-height); + letter-spacing: var(--ytd-user-comment_-_letter-spacing); } .launch-icon.ytd-menu-custom-icon-item-renderer { - color: var(--yt-spec-call-to-action); - height: 16px; - padding-bottom: 2px; - width: 16px; + color: var(--yt-spec-call-to-action); + height: 16px; + padding-bottom: 2px; + width: 16px; } yt-live-chat-vc-balance-renderer { - display: block; + display: block; } yt-live-chat-vc-balance-renderer:hover { - cursor: pointer; + cursor: pointer; } yt-img-shadow { - display: inline-block; - opacity: 0; - transition: opacity 0.2s; - -ms-flex: var(--layout-flex-none_-_-ms-flex); - -webkit-flex: var(--layout-flex-none_-_-webkit-flex); - flex: var(--layout-flex-none_-_flex); + display: inline-block; + opacity: 0; + transition: opacity 0.2s; + -ms-flex: var(--layout-flex-none_-_-ms-flex); + -webkit-flex: var(--layout-flex-none_-_-webkit-flex); + flex: var(--layout-flex-none_-_flex); } yt-img-shadow.no-transition { - opacity: 1; - transition: none; + opacity: 1; + transition: none; } yt-img-shadow.with-placeholder { - background-color: var(--yt-img-shadow-placeholder-color, transparent); + background-color: var(--yt-img-shadow-placeholder-color, transparent); - min-height: var(--yt-img-shadow-min-height, unset); - min-width: var(--yt-img-shadow-min-width, unset); + min-height: var(--yt-img-shadow-min-height, unset); + min-width: var(--yt-img-shadow-min-width, unset); } yt-img-shadow[loaded] { - opacity: 1; + opacity: 1; } yt-img-shadow.empty img.yt-img-shadow { - visibility: hidden; + visibility: hidden; } yt-img-shadow[fit-height] img.yt-img-shadow { - height: 100%; - width: auto; + height: 100%; + width: auto; } -yt-img-shadow[object-fit="FILL"] img.yt-img-shadow, +yt-img-shadow[object-fit='FILL'] img.yt-img-shadow, yt-img-shadow[fit] img.yt-img-shadow { - width: 100%; - height: 100%; + 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='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-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; +yt-img-shadow[object-position='LEFT'] img.yt-img-shadow { + object-position: left; } img.yt-img-shadow { - display: block; - margin-left: var(--yt-img-margin-left, auto); - margin-right: var(--yt-img-margin-right, auto); - max-height: var(--yt-img-max-height, none); - max-width: var(--yt-img-max-width, 100%); - border-radius: var(--yt-img-border-radius, none); + display: block; + margin-left: var(--yt-img-margin-left, auto); + margin-right: var(--yt-img-margin-right, auto); + max-height: var(--yt-img-max-height, none); + max-width: var(--yt-img-max-width, 100%); + border-radius: var(--yt-img-border-radius, none); } yt-themed-image-renderer { - --yt-img-margin-left: 0; - --yt-img-margin-right: 0; + --yt-img-margin-left: 0; + --yt-img-margin-right: 0; - display: block; + display: block; } yt-themed-image-renderer[is-circular_] yt-img-shadow.yt-themed-image-renderer, yt-themed-image-renderer[is-circular_] yt-icon.yt-themed-image-renderer { - border-radius: var(--yt-circular_-_border-radius); - background-color: var(--yt-circular_-_background-color); - overflow: var(--yt-circular_-_overflow); + border-radius: var(--yt-circular_-_border-radius); + background-color: var(--yt-circular_-_background-color); + overflow: var(--yt-circular_-_overflow); } #image.yt-themed-image-renderer { - display: block; + display: block; } -yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_1"], -.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_1"] { - margin-top: var(--ytd-margin-base); +yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_1'], +.yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_1'] { + margin-top: var(--ytd-margin-base); } -yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_1"], -.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_1"] { - margin-bottom: var(--ytd-margin-base); +yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_1'], +.yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_1'] { + margin-bottom: var(--ytd-margin-base); } -yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_1"], -.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_1"] { - margin-left: var(--ytd-margin-base); +yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_1'], +.yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_1'] { + margin-left: var(--ytd-margin-base); } -yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_1"], -.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_1"] { - margin-right: var(--ytd-margin-base); +yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_1'], +.yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_1'] { + margin-right: var(--ytd-margin-base); } -yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_2"], -.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_2"] { - margin-top: var(--ytd-margin-2x); +yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_2'], +.yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_2'] { + margin-top: var(--ytd-margin-2x); } -yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_2"], -.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_2"] { - margin-bottom: var(--ytd-margin-2x); +yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_2'], +.yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_2'] { + margin-bottom: var(--ytd-margin-2x); } -yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_2"], -.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_2"] { - margin-left: var(--ytd-margin-2x); +yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_2'], +.yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_2'] { + margin-left: var(--ytd-margin-2x); } -yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_2"], -.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_2"] { - margin-right: var(--ytd-margin-2x); +yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_2'], +.yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_2'] { + margin-right: var(--ytd-margin-2x); } -yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_3"], -.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_3"] { - margin-top: var(--ytd-margin-3x); +yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_3'], +.yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_3'] { + margin-top: var(--ytd-margin-3x); } -yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_3"], -.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_3"] { - margin-bottom: var(--ytd-margin-3x); +yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_3'], +.yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_3'] { + margin-bottom: var(--ytd-margin-3x); } -yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_3"], -.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_3"] { - margin-left: var(--ytd-margin-3x); +yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_3'], +.yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_3'] { + margin-left: var(--ytd-margin-3x); } -yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_3"], -.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_3"] { - margin-right: var(--ytd-margin-3x); +yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_3'], +.yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_3'] { + margin-right: var(--ytd-margin-3x); } -yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_4"], -.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_4"] { - margin-top: var(--ytd-margin-4x); +yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_4'], +.yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_4'] { + margin-top: var(--ytd-margin-4x); } -yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_4"], -.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_4"] { - margin-bottom: var(--ytd-margin-4x); +yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_4'], +.yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_4'] { + margin-bottom: var(--ytd-margin-4x); } -yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_4"], -.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_4"] { - margin-left: var(--ytd-margin-4x); +yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_4'], +.yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_4'] { + margin-left: var(--ytd-margin-4x); } -yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_4"], -.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_4"] { - margin-right: var(--ytd-margin-4x); +yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_4'], +.yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_4'] { + margin-right: var(--ytd-margin-4x); } -yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_5"], -.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_5"] { - margin-top: var(--ytd-margin-5x); +yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_5'], +.yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_5'] { + margin-top: var(--ytd-margin-5x); } -yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_5"], -.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_5"] { - margin-bottom: var(--ytd-margin-5x); +yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_5'], +.yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_5'] { + margin-bottom: var(--ytd-margin-5x); } -yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_5"], -.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_5"] { - margin-left: var(--ytd-margin-5x); +yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_5'], +.yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_5'] { + margin-left: var(--ytd-margin-5x); } -yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_5"], -.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_5"] { - margin-right: var(--ytd-margin-5x); +yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_5'], +.yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_5'] { + margin-right: var(--ytd-margin-5x); } -yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_6"], -.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_6"] { - margin-top: var(--ytd-margin-6x); +yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_6'], +.yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_6'] { + margin-top: var(--ytd-margin-6x); } -yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_6"], -.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_6"] { - margin-bottom: var(--ytd-margin-6x); +yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_6'], +.yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_6'] { + margin-bottom: var(--ytd-margin-6x); } -yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_6"], -.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_6"] { - margin-left: var(--ytd-margin-6x); +yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_6'], +.yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_6'] { + margin-left: var(--ytd-margin-6x); } -yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_6"], -.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_6"] { - margin-right: var(--ytd-margin-6x); +yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_6'], +.yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_6'] { + margin-right: var(--ytd-margin-6x); } -yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_7"], -.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_7"] { - margin-top: var(--ytd-margin-7x); +yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_7'], +.yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_7'] { + margin-top: var(--ytd-margin-7x); } -yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_7"], -.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_7"] { - margin-bottom: var(--ytd-margin-7x); +yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_7'], +.yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_7'] { + margin-bottom: var(--ytd-margin-7x); } -yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_7"], -.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_7"] { - margin-left: var(--ytd-margin-7x); +yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_7'], +.yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_7'] { + margin-left: var(--ytd-margin-7x); } -yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_7"], -.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_7"] { - margin-right: var(--ytd-margin-7x); +yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_7'], +.yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_7'] { + margin-right: var(--ytd-margin-7x); } -yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_8"], -.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_8"] { - margin-top: var(--ytd-margin-8x); +yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_8'], +.yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_8'] { + margin-top: var(--ytd-margin-8x); } -yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_8"], -.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_8"] { - margin-bottom: var(--ytd-margin-8x); +yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_8'], +.yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_8'] { + margin-bottom: var(--ytd-margin-8x); } -yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_8"], -.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_8"] { - margin-left: var(--ytd-margin-8x); +yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_8'], +.yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_8'] { + margin-left: var(--ytd-margin-8x); } -yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_8"], -.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_8"] { - margin-right: var(--ytd-margin-8x); +yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_8'], +.yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_8'] { + margin-right: var(--ytd-margin-8x); } -yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_9"], -.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_9"] { - margin-top: var(--ytd-margin-9x); +yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_9'], +.yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_9'] { + margin-top: var(--ytd-margin-9x); } -yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_9"], -.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_9"] { - margin-bottom: var(--ytd-margin-9x); +yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_9'], +.yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_9'] { + margin-bottom: var(--ytd-margin-9x); } -yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_9"], -.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_9"] { - margin-left: var(--ytd-margin-9x); +yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_9'], +.yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_9'] { + margin-left: var(--ytd-margin-9x); } -yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_9"], -.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_9"] { - margin-right: var(--ytd-margin-9x); +yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_9'], +.yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_9'] { + margin-right: var(--ytd-margin-9x); } -yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_10"], -.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_10"] { - margin-top: var(--ytd-margin-10x); +yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_10'], +.yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_10'] { + margin-top: var(--ytd-margin-10x); } -yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_10"], -.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_10"] { - margin-bottom: var(--ytd-margin-10x); +yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_10'], +.yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_10'] { + margin-bottom: var(--ytd-margin-10x); } -yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_10"], -.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_10"] { - margin-left: var(--ytd-margin-10x); +yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_10'], +.yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_10'] { + margin-left: var(--ytd-margin-10x); } -yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_10"], -.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_10"] { - margin-right: var(--ytd-margin-10x); +yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_10'], +.yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_10'] { + margin-right: var(--ytd-margin-10x); } -yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_11"], -.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_11"] { - margin-top: var(--ytd-margin-11x); +yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_11'], +.yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_11'] { + margin-top: var(--ytd-margin-11x); } -yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_11"], -.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_11"] { - margin-bottom: var(--ytd-margin-11x); +yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_11'], +.yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_11'] { + margin-bottom: var(--ytd-margin-11x); } -yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_11"], -.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_11"] { - margin-left: var(--ytd-margin-11x); +yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_11'], +.yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_11'] { + margin-left: var(--ytd-margin-11x); } -yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_11"], -.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_10"] { - margin-right: var(--ytd-margin-11x); +yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_11'], +.yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_10'] { + margin-right: var(--ytd-margin-11x); } -yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_12"], -.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_12"] { - margin-top: var(--ytd-margin-12x); +yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_12'], +.yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_12'] { + margin-top: var(--ytd-margin-12x); } -yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_12"], -.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_12"] { - margin-bottom: var(--ytd-margin-12x); +yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_12'], +.yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_12'] { + margin-bottom: var(--ytd-margin-12x); } -yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_12"], -.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_12"] { - margin-left: var(--ytd-margin-12x); +yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_12'], +.yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_12'] { + margin-left: var(--ytd-margin-12x); } -yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_12"], -.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_10"] { - margin-right: var(--ytd-margin-12x); +yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_12'], +.yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_10'] { + margin-right: var(--ytd-margin-12x); } -yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_13"], -.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_13"] { - margin-top: var(--ytd-margin-13x); +yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_13'], +.yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_13'] { + margin-top: var(--ytd-margin-13x); } -yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_13"], -.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_13"] { - margin-bottom: var(--ytd-margin-13x); +yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_13'], +.yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_13'] { + margin-bottom: var(--ytd-margin-13x); } -yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_13"], -.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_13"] { - margin-left: var(--ytd-margin-13x); +yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_13'], +.yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_13'] { + margin-left: var(--ytd-margin-13x); } -yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_13"], -.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_10"] { - margin-right: var(--ytd-margin-13x); +yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_13'], +.yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_10'] { + margin-right: var(--ytd-margin-13x); } -yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_14"], -.yt-themed-image-renderer[top-margin="CARD_ITEM_UX_SPACE_14"] { - margin-top: var(--ytd-margin-14x); +yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_14'], +.yt-themed-image-renderer[top-margin='CARD_ITEM_UX_SPACE_14'] { + margin-top: var(--ytd-margin-14x); } -yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_14"], -.yt-themed-image-renderer[bottom-margin="CARD_ITEM_UX_SPACE_14"] { - margin-bottom: var(--ytd-margin-14x); +yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_14'], +.yt-themed-image-renderer[bottom-margin='CARD_ITEM_UX_SPACE_14'] { + margin-bottom: var(--ytd-margin-14x); } -yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_14"], -.yt-themed-image-renderer[left-margin="CARD_ITEM_UX_SPACE_14"] { - margin-left: var(--ytd-margin-14x); +yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_14'], +.yt-themed-image-renderer[left-margin='CARD_ITEM_UX_SPACE_14'] { + margin-left: var(--ytd-margin-14x); } -yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_14"], -.yt-themed-image-renderer[right-margin="CARD_ITEM_UX_SPACE_10"] { - margin-right: var(--ytd-margin-14x); +yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_14'], +.yt-themed-image-renderer[right-margin='CARD_ITEM_UX_SPACE_10'] { + margin-right: var(--ytd-margin-14x); } -yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_1"], -.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_1"] { - padding-top: var(--ytd-margin-base); +yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_1'], +.yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_1'] { + padding-top: var(--ytd-margin-base); } -yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_1"], -.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_1"] { - padding-bottom: var(--ytd-margin-base); +yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_1'], +.yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_1'] { + padding-bottom: var(--ytd-margin-base); } -yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_1"], -.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_1"] { - padding-left: var(--ytd-margin-base); +yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_1'], +.yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_1'] { + padding-left: var(--ytd-margin-base); } -yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_1"], -.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_1"] { - padding-right: var(--ytd-margin-base); +yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_1'], +.yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_1'] { + padding-right: var(--ytd-margin-base); } -yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_2"], -.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_2"] { - padding-top: var(--ytd-margin-2x); +yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_2'], +.yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_2'] { + padding-top: var(--ytd-margin-2x); } -yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_2"], -.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_2"] { - padding-bottom: var(--ytd-margin-2x); +yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_2'], +.yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_2'] { + padding-bottom: var(--ytd-margin-2x); } -yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_2"], -.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_2"] { - padding-left: var(--ytd-margin-2x); +yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_2'], +.yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_2'] { + padding-left: var(--ytd-margin-2x); } -yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_2"], -.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_2"] { - padding-right: var(--ytd-margin-2x); +yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_2'], +.yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_2'] { + padding-right: var(--ytd-margin-2x); } -yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_3"], -.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_3"] { - padding-top: var(--ytd-margin-3x); +yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_3'], +.yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_3'] { + padding-top: var(--ytd-margin-3x); } -yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_3"], -.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_3"] { - padding-bottom: var(--ytd-margin-3x); +yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_3'], +.yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_3'] { + padding-bottom: var(--ytd-margin-3x); } -yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_3"], -.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_3"] { - padding-left: var(--ytd-margin-3x); +yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_3'], +.yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_3'] { + padding-left: var(--ytd-margin-3x); } -yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_3"], -.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_3"] { - padding-right: var(--ytd-margin-3x); +yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_3'], +.yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_3'] { + padding-right: var(--ytd-margin-3x); } -yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_4"], -.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_4"] { - padding-top: var(--ytd-margin-4x); +yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_4'], +.yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_4'] { + padding-top: var(--ytd-margin-4x); } -yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_4"], -.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_4"] { - padding-bottom: var(--ytd-margin-4x); +yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_4'], +.yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_4'] { + padding-bottom: var(--ytd-margin-4x); } -yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_4"], -.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_4"] { - padding-left: var(--ytd-margin-4x); +yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_4'], +.yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_4'] { + padding-left: var(--ytd-margin-4x); } -yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_4"], -.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_4"] { - padding-right: var(--ytd-margin-4x); +yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_4'], +.yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_4'] { + padding-right: var(--ytd-margin-4x); } -yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_5"], -.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_5"] { - padding-top: var(--ytd-margin-5x); +yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_5'], +.yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_5'] { + padding-top: var(--ytd-margin-5x); } -yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_5"], -.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_5"] { - padding-bottom: var(--ytd-margin-5x); +yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_5'], +.yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_5'] { + padding-bottom: var(--ytd-margin-5x); } -yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_5"], -.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_5"] { - padding-left: var(--ytd-margin-5x); +yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_5'], +.yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_5'] { + padding-left: var(--ytd-margin-5x); } -yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_5"], -.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_5"] { - padding-right: var(--ytd-margin-5x); +yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_5'], +.yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_5'] { + padding-right: var(--ytd-margin-5x); } -yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_6"], -.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_6"] { - padding-top: var(--ytd-margin-6x); +yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_6'], +.yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_6'] { + padding-top: var(--ytd-margin-6x); } -yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_6"], -.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_6"] { - padding-bottom: var(--ytd-margin-6x); +yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_6'], +.yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_6'] { + padding-bottom: var(--ytd-margin-6x); } -yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_6"], -.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_6"] { - padding-left: var(--ytd-margin-6x); +yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_6'], +.yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_6'] { + padding-left: var(--ytd-margin-6x); } -yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_6"], -.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_6"] { - padding-right: var(--ytd-margin-6x); +yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_6'], +.yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_6'] { + padding-right: var(--ytd-margin-6x); } -yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_7"], -.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_7"] { - padding-top: var(--ytd-margin-7x); +yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_7'], +.yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_7'] { + padding-top: var(--ytd-margin-7x); } -yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_7"], -.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_7"] { - padding-bottom: var(--ytd-margin-7x); +yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_7'], +.yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_7'] { + padding-bottom: var(--ytd-margin-7x); } -yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_7"], -.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_7"] { - padding-left: var(--ytd-margin-7x); +yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_7'], +.yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_7'] { + padding-left: var(--ytd-margin-7x); } -yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_7"], -.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_7"] { - padding-right: var(--ytd-margin-7x); +yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_7'], +.yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_7'] { + padding-right: var(--ytd-margin-7x); } -yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_8"], -.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_8"] { - padding-top: var(--ytd-margin-8x); +yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_8'], +.yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_8'] { + padding-top: var(--ytd-margin-8x); } -yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_8"], -.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_8"] { - padding-bottom: var(--ytd-margin-8x); +yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_8'], +.yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_8'] { + padding-bottom: var(--ytd-margin-8x); } -yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_8"], -.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_8"] { - padding-left: var(--ytd-margin-8x); +yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_8'], +.yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_8'] { + padding-left: var(--ytd-margin-8x); } -yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_8"], -.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_8"] { - padding-right: var(--ytd-margin-8x); +yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_8'], +.yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_8'] { + padding-right: var(--ytd-margin-8x); } -yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_9"], -.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_9"] { - padding-top: var(--ytd-margin-9x); +yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_9'], +.yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_9'] { + padding-top: var(--ytd-margin-9x); } -yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_9"], -.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_9"] { - padding-bottom: var(--ytd-margin-9x); +yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_9'], +.yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_9'] { + padding-bottom: var(--ytd-margin-9x); } -yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_9"], -.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_9"] { - padding-left: var(--ytd-margin-9x); +yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_9'], +.yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_9'] { + padding-left: var(--ytd-margin-9x); } -yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_9"], -.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_9"] { - padding-right: var(--ytd-margin-9x); +yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_9'], +.yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_9'] { + padding-right: var(--ytd-margin-9x); } -yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_10"], -.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_10"] { - padding-top: var(--ytd-margin-10x); +yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_10'], +.yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_10'] { + padding-top: var(--ytd-margin-10x); } -yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_10"], -.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_10"] { - padding-bottom: var(--ytd-margin-10x); +yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_10'], +.yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_10'] { + padding-bottom: var(--ytd-margin-10x); } -yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_10"], -.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_10"] { - padding-left: var(--ytd-margin-10x); +yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_10'], +.yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_10'] { + padding-left: var(--ytd-margin-10x); } -yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_10"], -.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_10"] { - padding-right: var(--ytd-margin-10x); +yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_10'], +.yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_10'] { + padding-right: var(--ytd-margin-10x); } -yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_11"], -.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_11"] { - padding-top: var(--ytd-margin-11x); +yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_11'], +.yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_11'] { + padding-top: var(--ytd-margin-11x); } -yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_11"], -.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_11"] { - padding-bottom: var(--ytd-margin-11x); +yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_11'], +.yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_11'] { + padding-bottom: var(--ytd-margin-11x); } -yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_11"], -.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_11"] { - padding-left: var(--ytd-margin-11x); +yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_11'], +.yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_11'] { + padding-left: var(--ytd-margin-11x); } -yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_11"], -.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_11"] { - padding-right: var(--ytd-margin-11x); +yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_11'], +.yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_11'] { + padding-right: var(--ytd-margin-11x); } -yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_12"], -.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_12"] { - padding-top: var(--ytd-margin-12x); +yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_12'], +.yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_12'] { + padding-top: var(--ytd-margin-12x); } -yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_12"], -.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_12"] { - padding-bottom: var(--ytd-margin-12x); +yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_12'], +.yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_12'] { + padding-bottom: var(--ytd-margin-12x); } -yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_12"], -.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_12"] { - padding-left: var(--ytd-margin-12x); +yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_12'], +.yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_12'] { + padding-left: var(--ytd-margin-12x); } -yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_12"], -.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_12"] { - padding-right: var(--ytd-margin-12x); +yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_12'], +.yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_12'] { + padding-right: var(--ytd-margin-12x); } -yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_13"], -.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_13"] { - padding-top: var(--ytd-margin-13x); +yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_13'], +.yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_13'] { + padding-top: var(--ytd-margin-13x); } -yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_13"], -.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_13"] { - padding-bottom: var(--ytd-margin-13x); +yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_13'], +.yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_13'] { + padding-bottom: var(--ytd-margin-13x); } -yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_13"], -.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_13"] { - padding-left: var(--ytd-margin-13x); +yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_13'], +.yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_13'] { + padding-left: var(--ytd-margin-13x); } -yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_13"], -.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_13"] { - padding-right: var(--ytd-margin-13x); +yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_13'], +.yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_13'] { + padding-right: var(--ytd-margin-13x); } -yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_14"], -.yt-themed-image-renderer[top-padding="CARD_ITEM_UX_SPACE_14"] { - padding-top: var(--ytd-margin-14x); +yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_14'], +.yt-themed-image-renderer[top-padding='CARD_ITEM_UX_SPACE_14'] { + padding-top: var(--ytd-margin-14x); } -yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_14"], -.yt-themed-image-renderer[bottom-padding="CARD_ITEM_UX_SPACE_14"] { - padding-bottom: var(--ytd-margin-14x); +yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_14'], +.yt-themed-image-renderer[bottom-padding='CARD_ITEM_UX_SPACE_14'] { + padding-bottom: var(--ytd-margin-14x); } -yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_14"], -.yt-themed-image-renderer[left-padding="CARD_ITEM_UX_SPACE_14"] { - padding-left: var(--ytd-margin-14x); +yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_14'], +.yt-themed-image-renderer[left-padding='CARD_ITEM_UX_SPACE_14'] { + padding-left: var(--ytd-margin-14x); } -yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_14"], -.yt-themed-image-renderer[right-padding="CARD_ITEM_UX_SPACE_14"] { - padding-right: var(--ytd-margin-14x); +yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_14'], +.yt-themed-image-renderer[right-padding='CARD_ITEM_UX_SPACE_14'] { + padding-right: var(--ytd-margin-14x); } yt-vc-balance-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-align: var(--layout-center_-_-ms-flex-align); - -webkit-align-items: var(--layout-center_-_-webkit-align-items); - align-items: var(--layout-center_-_align-items); + 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-vc-balance-renderer[vc-balance-widget-style="VC_BALANCE_WIDGET_STYLE_UNKNOWN"] - #vc-icon.yt-vc-balance-renderer, -yt-vc-balance-renderer[vc-balance-widget-style="VC_BALANCE_WIDGET_STYLE_PRIMARY_TEXT"] - #vc-icon.yt-vc-balance-renderer { - margin-right: var(--ytd-margin-2x); +yt-vc-balance-renderer[vc-balance-widget-style='VC_BALANCE_WIDGET_STYLE_UNKNOWN'] + #vc-icon.yt-vc-balance-renderer, +yt-vc-balance-renderer[vc-balance-widget-style='VC_BALANCE_WIDGET_STYLE_PRIMARY_TEXT'] + #vc-icon.yt-vc-balance-renderer { + margin-right: var(--ytd-margin-2x); } #vc-balance.yt-vc-balance-renderer { - position: relative; - top: 1px; + position: relative; + top: 1px; } -yt-vc-balance-renderer[vc-balance-widget-style="VC_BALANCE_WIDGET_STYLE_UNKNOWN"] - #vc-balance.yt-vc-balance-renderer, -yt-vc-balance-renderer[vc-balance-widget-style="VC_BALANCE_WIDGET_STYLE_PRIMARY_TEXT"] - #vc-balance.yt-vc-balance-renderer { - color: var(--yt-spec-text-primary); +yt-vc-balance-renderer[vc-balance-widget-style='VC_BALANCE_WIDGET_STYLE_UNKNOWN'] + #vc-balance.yt-vc-balance-renderer, +yt-vc-balance-renderer[vc-balance-widget-style='VC_BALANCE_WIDGET_STYLE_PRIMARY_TEXT'] + #vc-balance.yt-vc-balance-renderer { + color: var(--yt-spec-text-primary); - font-size: var(--ytd-subheadline-link_-_font-size); - font-weight: var(--ytd-subheadline-link_-_font-weight); - line-height: var(--ytd-subheadline-link_-_line-height); - letter-spacing: var(--ytd-subheadline-link_-_letter-spacing); - line-height: 1.8rem; + font-size: var(--ytd-subheadline-link_-_font-size); + font-weight: var(--ytd-subheadline-link_-_font-weight); + line-height: var(--ytd-subheadline-link_-_line-height); + letter-spacing: var(--ytd-subheadline-link_-_letter-spacing); + line-height: 1.8rem; } -yt-vc-balance-renderer[vc-balance-widget-style="VC_BALANCE_WIDGET_STYLE_SECONDARY_TEXT"] - #vc-icon.yt-vc-balance-renderer { - margin-right: var(--ytd-margin-base); +yt-vc-balance-renderer[vc-balance-widget-style='VC_BALANCE_WIDGET_STYLE_SECONDARY_TEXT'] + #vc-icon.yt-vc-balance-renderer { + margin-right: var(--ytd-margin-base); } -yt-vc-balance-renderer[vc-balance-widget-style="VC_BALANCE_WIDGET_STYLE_SECONDARY_TEXT"] - #vc-balance.yt-vc-balance-renderer { - color: var(--yt-spec-text-disabled); +yt-vc-balance-renderer[vc-balance-widget-style='VC_BALANCE_WIDGET_STYLE_SECONDARY_TEXT'] + #vc-balance.yt-vc-balance-renderer { + color: var(--yt-spec-text-disabled); - font-size: var(--ytd-subheadline-link_-_font-size); - font-weight: var(--ytd-subheadline-link_-_font-weight); - line-height: var(--ytd-subheadline-link_-_line-height); - letter-spacing: var(--ytd-subheadline-link_-_letter-spacing); - line-height: 1.8rem; + font-size: var(--ytd-subheadline-link_-_font-size); + font-weight: var(--ytd-subheadline-link_-_font-weight); + line-height: var(--ytd-subheadline-link_-_line-height); + letter-spacing: var(--ytd-subheadline-link_-_letter-spacing); + line-height: 1.8rem; } iron-a11y-announcer { - display: inline-block; - position: fixed; - clip: rect(0px, 0px, 0px, 0px); + display: inline-block; + position: fixed; + clip: rect(0px, 0px, 0px, 0px); } iron-autogrow-textarea { - display: inline-block; - position: relative; - width: 400px; - border: 1px solid; - padding: 2px; - -moz-appearance: textarea; - -webkit-appearance: textarea; - overflow: hidden; + display: inline-block; + position: relative; + width: 400px; + border: 1px solid; + padding: 2px; + -moz-appearance: textarea; + -webkit-appearance: textarea; + overflow: hidden; } .mirror-text.iron-autogrow-textarea { - visibility: hidden; - word-wrap: break-word; - white-space: pre-wrap; + visibility: hidden; + word-wrap: break-word; + white-space: pre-wrap; } .fit.iron-autogrow-textarea { - position: var(--layout-fit_-_position); - top: var(--layout-fit_-_top); - right: var(--layout-fit_-_right); - bottom: var(--layout-fit_-_bottom); - left: var(--layout-fit_-_left); + position: var(--layout-fit_-_position); + top: var(--layout-fit_-_top); + right: var(--layout-fit_-_right); + bottom: var(--layout-fit_-_bottom); + left: var(--layout-fit_-_left); } textarea.iron-autogrow-textarea { - position: relative; - outline: none; - border: none; - resize: none; - background: inherit; - color: inherit; + position: relative; + outline: none; + border: none; + resize: none; + background: inherit; + color: inherit; - width: 100%; - height: 100%; - font-size: inherit; - font-family: inherit; - line-height: inherit; - text-align: inherit; + width: 100%; + height: 100%; + font-size: inherit; + font-family: inherit; + line-height: inherit; + text-align: inherit; } textarea.iron-autogrow-textarea::-webkit-input-placeholder { - padding: var(--iron-autogrow-textarea-placeholder_-_padding); + padding: var(--iron-autogrow-textarea-placeholder_-_padding); } textarea.iron-autogrow-textarea:-moz-placeholder { - padding: var(--iron-autogrow-textarea-placeholder_-_padding); + padding: var(--iron-autogrow-textarea-placeholder_-_padding); } textarea.iron-autogrow-textarea::-moz-placeholder { - padding: var(--iron-autogrow-textarea-placeholder_-_padding); + padding: var(--iron-autogrow-textarea-placeholder_-_padding); } textarea.iron-autogrow-textarea:-ms-input-placeholder { - padding: var(--iron-autogrow-textarea-placeholder_-_padding); + padding: var(--iron-autogrow-textarea-placeholder_-_padding); } iron-dropdown { - position: fixed; + position: fixed; } #contentWrapper.iron-dropdown > * { - overflow: auto; + overflow: auto; } #contentWrapper.animating.iron-dropdown > * { - overflow: hidden; - pointer-events: none; + overflow: hidden; + pointer-events: none; } iron-icon { - display: var(--layout-inline_-_display); - -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); - position: relative; + display: var(--layout-inline_-_display); + -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); + position: relative; - vertical-align: middle; + vertical-align: middle; - fill: var(--iron-icon-fill-color, currentcolor); - stroke: var(--iron-icon-stroke-color, none); + fill: var(--iron-icon-fill-color, currentcolor); + stroke: var(--iron-icon-stroke-color, none); - width: var(--iron-icon-width, 24px); - height: var(--iron-icon-height, 24px); + width: var(--iron-icon-width, 24px); + height: var(--iron-icon-height, 24px); } iron-icon[hidden] { - display: none; + display: none; } iron-input { - display: inline-block; + display: inline-block; } iron-pages { - display: block; + display: block; } iron-pages > :not(slot):not(.iron-selected) { - display: none !important; + display: none !important; } paper-ripple { - display: block; - position: absolute; - border-radius: inherit; - overflow: hidden; - top: 0; - left: 0; - right: 0; - bottom: 0; + display: block; + position: absolute; + border-radius: inherit; + overflow: hidden; + top: 0; + left: 0; + right: 0; + bottom: 0; - pointer-events: none; + pointer-events: none; } paper-ripple[animating] { - -webkit-transform: translate(0, 0); - transform: translate3d(0, 0, 0); + -webkit-transform: translate(0, 0); + transform: translate3d(0, 0, 0); } #background.paper-ripple, #waves.paper-ripple, .wave-container.paper-ripple, .wave.paper-ripple { - pointer-events: none; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; + pointer-events: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } #background.paper-ripple, .wave.paper-ripple { - opacity: 0; + opacity: 0; } #waves.paper-ripple, .wave.paper-ripple { - overflow: hidden; + overflow: hidden; } .wave-container.paper-ripple, .wave.paper-ripple { - border-radius: 50%; + border-radius: 50%; } paper-ripple.circle #background.paper-ripple, paper-ripple.circle #waves.paper-ripple { - border-radius: 50%; + border-radius: 50%; } paper-ripple.circle .wave-container.paper-ripple { - overflow: hidden; + overflow: hidden; } paper-button, html.paper-button { - --paper-material_-_display: block; - --paper-material_-_position: relative; - --paper-material-elevation-1_-_box-shadow: var( - --shadow-elevation-2dp_-_box-shadow - ); - --paper-material-elevation-2_-_box-shadow: var( - --shadow-elevation-4dp_-_box-shadow - ); - --paper-material-elevation-3_-_box-shadow: var( - --shadow-elevation-6dp_-_box-shadow - ); - --paper-material-elevation-4_-_box-shadow: var( - --shadow-elevation-8dp_-_box-shadow - ); - --paper-material-elevation-5_-_box-shadow: var( - --shadow-elevation-16dp_-_box-shadow - ); + --paper-material_-_display: block; + --paper-material_-_position: relative; + --paper-material-elevation-1_-_box-shadow: var( + --shadow-elevation-2dp_-_box-shadow + ); + --paper-material-elevation-2_-_box-shadow: var( + --shadow-elevation-4dp_-_box-shadow + ); + --paper-material-elevation-3_-_box-shadow: var( + --shadow-elevation-6dp_-_box-shadow + ); + --paper-material-elevation-4_-_box-shadow: var( + --shadow-elevation-8dp_-_box-shadow + ); + --paper-material-elevation-5_-_box-shadow: var( + --shadow-elevation-16dp_-_box-shadow + ); } paper-button.paper-material, .paper-material.paper-button { - display: var(--paper-material_-_display); - position: var(--paper-material_-_position); + display: var(--paper-material_-_display); + position: var(--paper-material_-_position); } -paper-button.paper-material[elevation="1"], -.paper-material.paper-button[elevation="1"] { - box-shadow: var(--paper-material-elevation-1_-_box-shadow); +paper-button.paper-material[elevation='1'], +.paper-material.paper-button[elevation='1'] { + box-shadow: var(--paper-material-elevation-1_-_box-shadow); } -paper-button.paper-material[elevation="2"], -.paper-material.paper-button[elevation="2"] { - box-shadow: var(--paper-material-elevation-2_-_box-shadow); +paper-button.paper-material[elevation='2'], +.paper-material.paper-button[elevation='2'] { + box-shadow: var(--paper-material-elevation-2_-_box-shadow); } -paper-button.paper-material[elevation="3"], -.paper-material.paper-button[elevation="3"] { - box-shadow: var(--paper-material-elevation-3_-_box-shadow); +paper-button.paper-material[elevation='3'], +.paper-material.paper-button[elevation='3'] { + box-shadow: var(--paper-material-elevation-3_-_box-shadow); } -paper-button.paper-material[elevation="4"], -.paper-material.paper-button[elevation="4"] { - box-shadow: var(--paper-material-elevation-4_-_box-shadow); +paper-button.paper-material[elevation='4'], +.paper-material.paper-button[elevation='4'] { + box-shadow: var(--paper-material-elevation-4_-_box-shadow); } -paper-button.paper-material[elevation="5"], -.paper-material.paper-button[elevation="5"] { - box-shadow: var(--paper-material-elevation-5_-_box-shadow); +paper-button.paper-material[elevation='5'], +.paper-material.paper-button[elevation='5'] { + box-shadow: var(--paper-material-elevation-5_-_box-shadow); } paper-button { - display: var(--layout-inline_-_display); - -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); - position: relative; - box-sizing: border-box; - min-width: 5.14em; - margin: 0 0.29em; - background: transparent; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-tap-highlight-color: transparent; - font: inherit; - text-transform: uppercase; - outline-width: 0; - border-radius: 3px; - -moz-user-select: none; - -ms-user-select: none; - -webkit-user-select: none; - user-select: none; - cursor: pointer; - z-index: 0; - padding: 0.7em 0.57em; + display: var(--layout-inline_-_display); + -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); + position: relative; + box-sizing: border-box; + min-width: 5.14em; + margin: 0 0.29em; + background: transparent; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: transparent; + font: inherit; + text-transform: uppercase; + outline-width: 0; + border-radius: 3px; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; + cursor: pointer; + z-index: 0; + padding: 0.7em 0.57em; - font-family: var(--paper-font-common-base_-_font-family); - -webkit-font-smoothing: var( - --paper-font-common-base_-_-webkit-font-smoothing - ); - min-width: var(--paper-button_-_min-width, 5.14em); + font-family: var(--paper-font-common-base_-_font-family); + -webkit-font-smoothing: var( + --paper-font-common-base_-_-webkit-font-smoothing + ); + min-width: var(--paper-button_-_min-width, 5.14em); } -paper-button[elevation="1"] { - box-shadow: var(--paper-material-elevation-1_-_box-shadow); +paper-button[elevation='1'] { + box-shadow: var(--paper-material-elevation-1_-_box-shadow); } -paper-button[elevation="2"] { - box-shadow: var(--paper-material-elevation-2_-_box-shadow); +paper-button[elevation='2'] { + box-shadow: var(--paper-material-elevation-2_-_box-shadow); } -paper-button[elevation="3"] { - box-shadow: var(--paper-material-elevation-3_-_box-shadow); +paper-button[elevation='3'] { + box-shadow: var(--paper-material-elevation-3_-_box-shadow); } -paper-button[elevation="4"] { - box-shadow: var(--paper-material-elevation-4_-_box-shadow); +paper-button[elevation='4'] { + box-shadow: var(--paper-material-elevation-4_-_box-shadow); } -paper-button[elevation="5"] { - box-shadow: var(--paper-material-elevation-5_-_box-shadow); +paper-button[elevation='5'] { + box-shadow: var(--paper-material-elevation-5_-_box-shadow); } paper-button[hidden] { - display: none !important; + display: none !important; } paper-button[raised].keyboard-focus { - font-weight: bold; + font-weight: bold; } paper-button:not([raised]).keyboard-focus { - font-weight: bold; + font-weight: bold; } paper-button[disabled] { - background: none; - color: #a8a8a8; - cursor: auto; - pointer-events: none; + background: none; + color: #a8a8a8; + cursor: auto; + pointer-events: none; } paper-button[disabled][raised] { - background: #eaeaea; + background: #eaeaea; } paper-button[animated] { - transition: var(--shadow-transition_-_transition); + transition: var(--shadow-transition_-_transition); } paper-ripple.paper-button { - color: var(--paper-button-ink-color); + color: var(--paper-button-ink-color); } paper-checkbox { - display: inline-block; - white-space: nowrap; - cursor: pointer; - --calculated-paper-checkbox-size: var(--paper-checkbox-size, 18px); + display: inline-block; + white-space: nowrap; + cursor: pointer; + --calculated-paper-checkbox-size: var(--paper-checkbox-size, 18px); - --calculated-paper-checkbox-ink-size: var(--paper-checkbox-ink-size, -1px); - font-family: var(--paper-font-common-base_-_font-family); - -webkit-font-smoothing: var( - --paper-font-common-base_-_-webkit-font-smoothing - ); - line-height: 0; - -webkit-tap-highlight-color: transparent; + --calculated-paper-checkbox-ink-size: var(--paper-checkbox-ink-size, -1px); + font-family: var(--paper-font-common-base_-_font-family); + -webkit-font-smoothing: var( + --paper-font-common-base_-_-webkit-font-smoothing + ); + line-height: 0; + -webkit-tap-highlight-color: transparent; } paper-checkbox[hidden] { - display: none !important; + display: none !important; } paper-checkbox:focus { - outline: none; + outline: none; } .hidden.paper-checkbox { - display: none; + display: none; } #checkboxContainer.paper-checkbox { - display: inline-block; - position: relative; - width: var(--calculated-paper-checkbox-size); - height: var(--calculated-paper-checkbox-size); - min-width: var(--calculated-paper-checkbox-size); - margin: var(--paper-checkbox-margin, initial); - vertical-align: var(--paper-checkbox-vertical-align, middle); - background-color: var( - --paper-checkbox-unchecked-background-color, - transparent - ); + display: inline-block; + position: relative; + width: var(--calculated-paper-checkbox-size); + height: var(--calculated-paper-checkbox-size); + min-width: var(--calculated-paper-checkbox-size); + margin: var(--paper-checkbox-margin, initial); + vertical-align: var(--paper-checkbox-vertical-align, middle); + background-color: var( + --paper-checkbox-unchecked-background-color, + transparent + ); } #ink.paper-checkbox { - position: absolute; - - top: calc( - 0px - - ( - var(--calculated-paper-checkbox-ink-size) - - var(--calculated-paper-checkbox-size) - ) / 2 - ); - left: calc( - 0px - - ( - var(--calculated-paper-checkbox-ink-size) - - var(--calculated-paper-checkbox-size) - ) / 2 - ); - width: var(--calculated-paper-checkbox-ink-size); - height: var(--calculated-paper-checkbox-ink-size); - color: var(--paper-checkbox-unchecked-ink-color, var(--primary-text-color)); - opacity: 0.6; - pointer-events: none; -} - -[dir="rtl"] #ink.paper-checkbox, -#ink.paper-checkbox[dir="rtl"] { - right: calc( - 0px - - ( - var(--calculated-paper-checkbox-ink-size) - - var(--calculated-paper-checkbox-size) - ) / 2 - ); - left: auto; + position: absolute; + + top: calc( + 0px - + ( + var(--calculated-paper-checkbox-ink-size) - + var(--calculated-paper-checkbox-size) + ) / 2 + ); + left: calc( + 0px - + ( + var(--calculated-paper-checkbox-ink-size) - + var(--calculated-paper-checkbox-size) + ) / 2 + ); + width: var(--calculated-paper-checkbox-ink-size); + height: var(--calculated-paper-checkbox-ink-size); + color: var(--paper-checkbox-unchecked-ink-color, var(--primary-text-color)); + opacity: 0.6; + pointer-events: none; +} + +[dir='rtl'] #ink.paper-checkbox, +#ink.paper-checkbox[dir='rtl'] { + right: calc( + 0px - + ( + var(--calculated-paper-checkbox-ink-size) - + var(--calculated-paper-checkbox-size) + ) / 2 + ); + left: auto; } #ink.paper-checkbox[checked] { - color: var(--paper-checkbox-checked-ink-color, var(--primary-color)); + color: var(--paper-checkbox-checked-ink-color, var(--primary-color)); } #checkbox.paper-checkbox { - position: relative; - box-sizing: border-box; - height: 100%; - border: solid 2px; - border-color: var( - --paper-checkbox-unchecked-color, - var(--primary-text-color) - ); - border-radius: 2px; - pointer-events: none; - -webkit-transition: background-color 140ms, border-color 140ms; - transition: background-color 140ms, border-color 140ms; - - -webkit-transition-duration: var( - --paper-checkbox-animation-duration, - 140ms - ); - transition-duration: var(--paper-checkbox-animation-duration, 140ms); + position: relative; + box-sizing: border-box; + height: 100%; + border: solid 2px; + border-color: var( + --paper-checkbox-unchecked-color, + var(--primary-text-color) + ); + border-radius: 2px; + pointer-events: none; + -webkit-transition: background-color 140ms, border-color 140ms; + transition: background-color 140ms, border-color 140ms; + + -webkit-transition-duration: var(--paper-checkbox-animation-duration, 140ms); + transition-duration: var(--paper-checkbox-animation-duration, 140ms); } #checkbox.checked.paper-checkbox #checkmark.paper-checkbox { - -webkit-animation: checkmark-expand 140ms ease-out forwards; - animation: checkmark-expand 140ms ease-out forwards; + -webkit-animation: checkmark-expand 140ms ease-out forwards; + animation: checkmark-expand 140ms ease-out forwards; - -webkit-animation-duration: var(--paper-checkbox-animation-duration, 140ms); - animation-duration: var(--paper-checkbox-animation-duration, 140ms); + -webkit-animation-duration: var(--paper-checkbox-animation-duration, 140ms); + animation-duration: var(--paper-checkbox-animation-duration, 140ms); } @-webkit-keyframes checkmark-expand { - 0% { - -webkit-transform: scale(0, 0) rotate(45deg); - } + 0% { + -webkit-transform: scale(0, 0) rotate(45deg); + } - 100% { - -webkit-transform: scale(1, 1) rotate(45deg); - } + 100% { + -webkit-transform: scale(1, 1) rotate(45deg); + } } @keyframes checkmark-expand { - 0% { - transform: scale(0, 0) rotate(45deg); - } + 0% { + transform: scale(0, 0) rotate(45deg); + } - 100% { - transform: scale(1, 1) rotate(45deg); - } + 100% { + transform: scale(1, 1) rotate(45deg); + } } #checkbox.checked.paper-checkbox { - background-color: var(--paper-checkbox-checked-color, var(--primary-color)); - border-color: var(--paper-checkbox-checked-color, var(--primary-color)); + background-color: var(--paper-checkbox-checked-color, var(--primary-color)); + border-color: var(--paper-checkbox-checked-color, var(--primary-color)); } #checkmark.paper-checkbox { - position: absolute; - width: 36%; - height: 70%; - border-style: solid; - border-top: none; - border-left: none; - border-right-width: calc(2 / 15 * var(--calculated-paper-checkbox-size)); - border-bottom-width: calc(2 / 15 * var(--calculated-paper-checkbox-size)); - border-color: var(--paper-checkbox-checkmark-color, white); - -webkit-transform-origin: 97% 86%; - transform-origin: 97% 86%; - box-sizing: content-box; -} - -[dir="rtl"] #checkmark.paper-checkbox, -#checkmark.paper-checkbox[dir="rtl"] { - -webkit-transform-origin: 50% 14%; - transform-origin: 50% 14%; + position: absolute; + width: 36%; + height: 70%; + border-style: solid; + border-top: none; + border-left: none; + border-right-width: calc(2 / 15 * var(--calculated-paper-checkbox-size)); + border-bottom-width: calc(2 / 15 * var(--calculated-paper-checkbox-size)); + border-color: var(--paper-checkbox-checkmark-color, white); + -webkit-transform-origin: 97% 86%; + transform-origin: 97% 86%; + box-sizing: content-box; +} + +[dir='rtl'] #checkmark.paper-checkbox, +#checkmark.paper-checkbox[dir='rtl'] { + -webkit-transform-origin: 50% 14%; + transform-origin: 50% 14%; } #checkboxLabel.paper-checkbox { - position: relative; - display: inline-block; - vertical-align: middle; - padding-left: var(--paper-checkbox-label-spacing, 8px); - white-space: normal; - line-height: normal; - color: var(--paper-checkbox-label-color, var(--primary-text-color)); - margin-right: var(--paper-checkbox-label_-_margin-right); + position: relative; + display: inline-block; + vertical-align: middle; + padding-left: var(--paper-checkbox-label-spacing, 8px); + white-space: normal; + line-height: normal; + color: var(--paper-checkbox-label-color, var(--primary-text-color)); + margin-right: var(--paper-checkbox-label_-_margin-right); } paper-checkbox[checked] #checkboxLabel.paper-checkbox { - color: var( - --paper-checkbox-label-checked-color, - var(--paper-checkbox-label-color, var(--primary-text-color)) - ); + color: var( + --paper-checkbox-label-checked-color, + var(--paper-checkbox-label-color, var(--primary-text-color)) + ); } -[dir="rtl"] #checkboxLabel.paper-checkbox, -#checkboxLabel.paper-checkbox[dir="rtl"] { - padding-right: var(--paper-checkbox-label-spacing, 8px); - padding-left: 0; +[dir='rtl'] #checkboxLabel.paper-checkbox, +#checkboxLabel.paper-checkbox[dir='rtl'] { + padding-right: var(--paper-checkbox-label-spacing, 8px); + padding-left: 0; } #checkboxLabel.paper-checkbox[hidden] { - display: none; + display: none; } paper-checkbox[disabled] #checkbox.paper-checkbox { - opacity: 0.5; - border-color: var( - --paper-checkbox-unchecked-color, - var(--primary-text-color) - ); + opacity: 0.5; + border-color: var( + --paper-checkbox-unchecked-color, + var(--primary-text-color) + ); } paper-checkbox[disabled][checked] #checkbox.paper-checkbox { - background-color: var( - --paper-checkbox-unchecked-color, - var(--primary-text-color) - ); - opacity: 0.5; + background-color: var( + --paper-checkbox-unchecked-color, + var(--primary-text-color) + ); + opacity: 0.5; } paper-checkbox[disabled] #checkboxLabel.paper-checkbox { - opacity: 0.65; + opacity: 0.65; } #checkbox.invalid.paper-checkbox:not(.checked) { - border-color: var(--paper-checkbox-error-color, var(--error-color)); + border-color: var(--paper-checkbox-error-color, var(--error-color)); } paper-dialog-scrollable { - display: block; - position: var(--layout-relative_-_position); + display: block; + position: var(--layout-relative_-_position); } paper-dialog-scrollable.is-scrolled:not(:first-child)::before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 1px; - background: var(--divider-color); + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 1px; + background: var(--divider-color); } paper-dialog-scrollable.can-scroll:not(.scrolled-to-bottom):not(:last-child)::after { - content: ""; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 1px; - background: var(--divider-color); + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background: var(--divider-color); } .scrollable.paper-dialog-scrollable { - padding: 0 24px; + padding: 0 24px; - -webkit-overflow-scrolling: var( - --layout-scroll_-_-webkit-overflow-scrolling - ); - overflow: var(--layout-scroll_-_overflow); - padding: var(--paper-dialog-scrollable_-_padding, 0 24px); - min-width: var(--paper-dialog-scrollable_-_min-width); - box-sizing: var(--paper-dialog-scrollable_-_box-sizing); - overflow-x: var(--paper-dialog-scrollable_-_overflow-x); + -webkit-overflow-scrolling: var(--layout-scroll_-_-webkit-overflow-scrolling); + overflow: var(--layout-scroll_-_overflow); + padding: var(--paper-dialog-scrollable_-_padding, 0 24px); + min-width: var(--paper-dialog-scrollable_-_min-width); + box-sizing: var(--paper-dialog-scrollable_-_box-sizing); + overflow-x: var(--paper-dialog-scrollable_-_overflow-x); } .fit.paper-dialog-scrollable { - position: var(--layout-fit_-_position); - top: var(--layout-fit_-_top); - right: var(--layout-fit_-_right); - bottom: var(--layout-fit_-_bottom); - left: var(--layout-fit_-_left); + position: var(--layout-fit_-_position); + top: var(--layout-fit_-_top); + right: var(--layout-fit_-_right); + bottom: var(--layout-fit_-_bottom); + left: var(--layout-fit_-_left); } paper-dialog { - display: block; - margin: 24px 40px; + display: block; + margin: 24px 40px; - background: var( - --paper-dialog-background-color, - var(--primary-background-color) - ); - color: var(--paper-dialog-color, var(--primary-text-color)); + background: var( + --paper-dialog-background-color, + var(--primary-background-color) + ); + color: var(--paper-dialog-color, var(--primary-text-color)); - font-family: var(--paper-font-body1_-_font-family); - -webkit-font-smoothing: var(--paper-font-body1_-_-webkit-font-smoothing); - font-size: var(--paper-font-body1_-_font-size); - font-weight: var(--paper-font-body1_-_font-weight); - line-height: var(--paper-font-body1_-_line-height); - box-shadow: var(--shadow-elevation-16dp_-_box-shadow); + font-family: var(--paper-font-body1_-_font-family); + -webkit-font-smoothing: var(--paper-font-body1_-_-webkit-font-smoothing); + font-size: var(--paper-font-body1_-_font-size); + font-weight: var(--paper-font-body1_-_font-weight); + line-height: var(--paper-font-body1_-_line-height); + box-shadow: var(--shadow-elevation-16dp_-_box-shadow); } paper-dialog > * { - margin-top: 20px; - padding: 0 24px; + margin-top: 20px; + padding: 0 24px; } paper-dialog > .no-padding { - padding: 0; + padding: 0; } paper-dialog > *:first-child { - margin-top: 24px; + margin-top: 24px; } paper-dialog > *:last-child { - margin-bottom: 24px; + margin-bottom: 24px; } paper-dialog > h2 { - position: relative; - margin: 0; + position: relative; + margin: 0; - font-family: var(--paper-font-title_-_font-family); - -webkit-font-smoothing: var(--paper-font-title_-_-webkit-font-smoothing); - white-space: var(--paper-font-title_-_white-space); - overflow: var(--paper-font-title_-_overflow); - text-overflow: var(--paper-font-title_-_text-overflow); - font-size: var(--paper-font-title_-_font-size); - font-weight: var(--paper-font-title_-_font-weight); - line-height: var(--paper-font-title_-_line-height); + font-family: var(--paper-font-title_-_font-family); + -webkit-font-smoothing: var(--paper-font-title_-_-webkit-font-smoothing); + white-space: var(--paper-font-title_-_white-space); + overflow: var(--paper-font-title_-_overflow); + text-overflow: var(--paper-font-title_-_text-overflow); + font-size: var(--paper-font-title_-_font-size); + font-weight: var(--paper-font-title_-_font-weight); + line-height: var(--paper-font-title_-_line-height); } paper-dialog > h2:first-child { - margin-top: 24px; + margin-top: 24px; } paper-dialog > h2:last-child { - margin-bottom: 24px; + margin-bottom: 24px; } paper-dialog > .paper-dialog-buttons, paper-dialog > .buttons { - position: relative; - padding: 8px 8px 8px 24px; - margin: 0; + position: relative; + padding: 8px 8px 8px 24px; + margin: 0; - color: var(--paper-dialog-button-color, var(--primary-color)); + color: var(--paper-dialog-button-color, var(--primary-color)); - 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-end-justified_-_-ms-flex-pack); - -webkit-justify-content: var( - --layout-end-justified_-_-webkit-justify-content - ); - justify-content: var(--layout-end-justified_-_justify-content); + 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-end-justified_-_-ms-flex-pack); + -webkit-justify-content: var( + --layout-end-justified_-_-webkit-justify-content + ); + justify-content: var(--layout-end-justified_-_justify-content); } - @-webkit-keyframes indeterminate-bar { - 0% { - -webkit-transform: scaleX(1) translateX(-100%); - } + 0% { + -webkit-transform: scaleX(1) translateX(-100%); + } - 50% { - -webkit-transform: scaleX(1) translateX(0%); - } + 50% { + -webkit-transform: scaleX(1) translateX(0%); + } - 75% { - -webkit-transform: scaleX(1) translateX(0%); - -webkit-animation-timing-function: cubic-bezier(0.28, 0.62, 0.37, 0.91); - } + 75% { + -webkit-transform: scaleX(1) translateX(0%); + -webkit-animation-timing-function: cubic-bezier(0.28, 0.62, 0.37, 0.91); + } - 100% { - -webkit-transform: scaleX(0) translateX(0%); - } + 100% { + -webkit-transform: scaleX(0) translateX(0%); + } } @-webkit-keyframes indeterminate-splitter { - 0% { - -webkit-transform: scaleX(0.75) translateX(-125%); - } + 0% { + -webkit-transform: scaleX(0.75) translateX(-125%); + } - 30% { - -webkit-transform: scaleX(0.75) translateX(-125%); - -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.6, 0.8); - } + 30% { + -webkit-transform: scaleX(0.75) translateX(-125%); + -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.6, 0.8); + } - 90% { - -webkit-transform: scaleX(0.75) translateX(125%); - } + 90% { + -webkit-transform: scaleX(0.75) translateX(125%); + } - 100% { - -webkit-transform: scaleX(0.75) translateX(125%); - } + 100% { + -webkit-transform: scaleX(0.75) translateX(125%); + } } @keyframes indeterminate-bar { - 0% { - transform: scaleX(1) translateX(-100%); - } + 0% { + transform: scaleX(1) translateX(-100%); + } - 50% { - transform: scaleX(1) translateX(0%); - } + 50% { + transform: scaleX(1) translateX(0%); + } - 75% { - transform: scaleX(1) translateX(0%); - animation-timing-function: cubic-bezier(0.28, 0.62, 0.37, 0.91); - } + 75% { + transform: scaleX(1) translateX(0%); + animation-timing-function: cubic-bezier(0.28, 0.62, 0.37, 0.91); + } - 100% { - transform: scaleX(0) translateX(0%); - } + 100% { + transform: scaleX(0) translateX(0%); + } } @keyframes indeterminate-splitter { - 0% { - transform: scaleX(0.75) translateX(-125%); - } + 0% { + transform: scaleX(0.75) translateX(-125%); + } - 30% { - transform: scaleX(0.75) translateX(-125%); - animation-timing-function: cubic-bezier(0.42, 0, 0.6, 0.8); - } + 30% { + transform: scaleX(0.75) translateX(-125%); + animation-timing-function: cubic-bezier(0.42, 0, 0.6, 0.8); + } - 90% { - transform: scaleX(0.75) translateX(125%); - } + 90% { + transform: scaleX(0.75) translateX(125%); + } - 100% { - transform: scaleX(0.75) translateX(125%); - } + 100% { + transform: scaleX(0.75) translateX(125%); + } } paper-radio-button { - display: inline-block; - line-height: 0; - white-space: nowrap; - cursor: pointer; - font-family: var(--paper-font-common-base_-_font-family); - -webkit-font-smoothing: var( - --paper-font-common-base_-_-webkit-font-smoothing - ); - --calculated-paper-radio-button-size: var(--paper-radio-button-size, 16px); - - --calculated-paper-radio-button-ink-size: var( - --paper-radio-button-ink-size, - -1px - ); + display: inline-block; + line-height: 0; + white-space: nowrap; + cursor: pointer; + font-family: var(--paper-font-common-base_-_font-family); + -webkit-font-smoothing: var( + --paper-font-common-base_-_-webkit-font-smoothing + ); + --calculated-paper-radio-button-size: var(--paper-radio-button-size, 16px); + + --calculated-paper-radio-button-ink-size: var( + --paper-radio-button-ink-size, + -1px + ); } paper-radio-button:focus { - outline: none; + outline: none; } #radioContainer.paper-radio-button { - display: var(--layout-inline_-_display); - -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); - position: relative; - width: var(--calculated-paper-radio-button-size); - height: var(--calculated-paper-radio-button-size); - vertical-align: middle; + display: var(--layout-inline_-_display); + -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); + position: relative; + width: var(--calculated-paper-radio-button-size); + height: var(--calculated-paper-radio-button-size); + vertical-align: middle; } #ink.paper-radio-button { - position: absolute; - top: 50%; - left: 50%; - right: auto; - width: var(--calculated-paper-radio-button-ink-size); - height: var(--calculated-paper-radio-button-ink-size); - color: var( - --paper-radio-button-unchecked-ink-color, - var(--primary-text-color) - ); - opacity: 0.6; - pointer-events: none; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); + position: absolute; + top: 50%; + left: 50%; + right: auto; + width: var(--calculated-paper-radio-button-ink-size); + height: var(--calculated-paper-radio-button-ink-size); + color: var( + --paper-radio-button-unchecked-ink-color, + var(--primary-text-color) + ); + opacity: 0.6; + pointer-events: none; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); } #ink.paper-radio-button[checked] { - color: var(--paper-radio-button-checked-ink-color, var(--primary-color)); + color: var(--paper-radio-button-checked-ink-color, var(--primary-color)); } #offRadio.paper-radio-button, #onRadio.paper-radio-button { - position: absolute; - box-sizing: border-box; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-radius: 50%; + position: absolute; + box-sizing: border-box; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 50%; } #offRadio.paper-radio-button { - border: 2px solid - var(--paper-radio-button-unchecked-color, var(--primary-text-color)); - background-color: var( - --paper-radio-button-unchecked-background-color, - transparent - ); - transition: border-color 0.28s; + border: 2px solid + var(--paper-radio-button-unchecked-color, var(--primary-text-color)); + background-color: var( + --paper-radio-button-unchecked-background-color, + transparent + ); + transition: border-color 0.28s; } #onRadio.paper-radio-button { - background-color: var( - --paper-radio-button-checked-color, - var(--primary-color) - ); - -webkit-transform: scale(0); - transform: scale(0); - transition: -webkit-transform ease 0.28s; - transition: transform ease 0.28s; - will-change: transform; + background-color: var( + --paper-radio-button-checked-color, + var(--primary-color) + ); + -webkit-transform: scale(0); + transform: scale(0); + transition: -webkit-transform ease 0.28s; + transition: transform ease 0.28s; + will-change: transform; } paper-radio-button[checked] #offRadio.paper-radio-button { - border-color: var(--paper-radio-button-checked-color, var(--primary-color)); + border-color: var(--paper-radio-button-checked-color, var(--primary-color)); } paper-radio-button[checked] #onRadio.paper-radio-button { - -webkit-transform: scale(0.5); - transform: scale(0.5); + -webkit-transform: scale(0.5); + transform: scale(0.5); } #radioLabel.paper-radio-button { - line-height: normal; - position: relative; - display: inline-block; - vertical-align: middle; - margin-left: var(--paper-radio-button-label-spacing, 10px); - white-space: normal; - color: var(--paper-radio-button-label-color, var(--primary-text-color)); + line-height: normal; + position: relative; + display: inline-block; + vertical-align: middle; + margin-left: var(--paper-radio-button-label-spacing, 10px); + white-space: normal; + color: var(--paper-radio-button-label-color, var(--primary-text-color)); } -[dir="rtl"] #radioLabel.paper-radio-button, -#radioLabel.paper-radio-button[dir="rtl"] { - margin-left: 0; - margin-right: var(--paper-radio-button-label-spacing, 10px); +[dir='rtl'] #radioLabel.paper-radio-button, +#radioLabel.paper-radio-button[dir='rtl'] { + margin-left: 0; + margin-right: var(--paper-radio-button-label-spacing, 10px); } #radioLabel.paper-radio-button[hidden] { - display: none; + display: none; } paper-radio-button[disabled] #offRadio.paper-radio-button { - border-color: var( - --paper-radio-button-unchecked-color, - var(--primary-text-color) - ); - opacity: 0.5; + border-color: var( + --paper-radio-button-unchecked-color, + var(--primary-text-color) + ); + opacity: 0.5; } paper-radio-button[disabled][checked] #onRadio.paper-radio-button { - background-color: var( - --paper-radio-button-unchecked-color, - var(--primary-text-color) - ); - opacity: 0.5; + background-color: var( + --paper-radio-button-unchecked-color, + var(--primary-text-color) + ); + opacity: 0.5; } paper-radio-button[disabled] #radioLabel.paper-radio-button { - opacity: 0.65; + opacity: 0.65; } paper-radio-group { - display: inline-block; + display: inline-block; } paper-radio-group > * { - padding: var(--paper-radio-group-item-padding, 12px); + padding: var(--paper-radio-group-item-padding, 12px); } paper-slider { - display: var(--layout_-_display); - -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-align: var(--layout-center_-_-ms-flex-align); - -webkit-align-items: var(--layout-center_-_-webkit-align-items); - align-items: var(--layout-center_-_align-items); - width: 200px; - cursor: default; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - --paper-progress-active-color: var( - --paper-slider-active-color, - var(--google-blue-700) - ); - --paper-progress-secondary-color: var( - --paper-slider-secondary-color, - var(--google-blue-300) - ); - --paper-progress-disabled-active-color: var( - --paper-slider-disabled-active-color, - var(--paper-grey-400) - ); - --paper-progress-disabled-secondary-color: var( - --paper-slider-disabled-secondary-color, - var(--paper-grey-400) - ); - --calculated-paper-slider-height: var(--paper-slider-height, 2px); + display: var(--layout_-_display); + -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-align: var(--layout-center_-_-ms-flex-align); + -webkit-align-items: var(--layout-center_-_-webkit-align-items); + align-items: var(--layout-center_-_align-items); + width: 200px; + cursor: default; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + --paper-progress-active-color: var( + --paper-slider-active-color, + var(--google-blue-700) + ); + --paper-progress-secondary-color: var( + --paper-slider-secondary-color, + var(--google-blue-300) + ); + --paper-progress-disabled-active-color: var( + --paper-slider-disabled-active-color, + var(--paper-grey-400) + ); + --paper-progress-disabled-secondary-color: var( + --paper-slider-disabled-secondary-color, + var(--paper-grey-400) + ); + --calculated-paper-slider-height: var(--paper-slider-height, 2px); } paper-slider:focus { - outline: none; + outline: none; } -[dir="rtl"] .paper-slider #sliderContainer.paper-slider, -.paper-slider[dir="rtl"] #sliderContainer.paper-slider { - -webkit-transform: scaleX(-1); - transform: scaleX(-1); +[dir='rtl'] .paper-slider #sliderContainer.paper-slider, +.paper-slider[dir='rtl'] #sliderContainer.paper-slider { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } -paper-slider[dir="rtl"] #sliderContainer.paper-slider { - -webkit-transform: scaleX(-1); - transform: scaleX(-1); +paper-slider[dir='rtl'] #sliderContainer.paper-slider { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); } -paper-slider[dir="ltr"] #sliderContainer.paper-slider { - -webkit-transform: scaleX(1); - transform: scaleX(1); +paper-slider[dir='ltr'] #sliderContainer.paper-slider { + -webkit-transform: scaleX(1); + transform: scaleX(1); } #sliderContainer.paper-slider { - position: relative; - width: 100%; - height: calc(30px + var(--calculated-paper-slider-height)); - margin-left: calc(15px + var(--calculated-paper-slider-height) / 2); - margin-right: calc(15px + var(--calculated-paper-slider-height) / 2); + position: relative; + width: 100%; + height: calc(30px + var(--calculated-paper-slider-height)); + margin-left: calc(15px + var(--calculated-paper-slider-height) / 2); + margin-right: calc(15px + var(--calculated-paper-slider-height) / 2); } #sliderContainer.paper-slider:focus { - outline: 0; + outline: 0; } #sliderContainer.editable.paper-slider { - margin-top: 12px; - margin-bottom: 12px; + margin-top: 12px; + margin-bottom: 12px; } .bar-container.paper-slider { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - overflow: hidden; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + overflow: hidden; } .ring.paper-slider > .bar-container.paper-slider { - left: calc(5px + var(--calculated-paper-slider-height) / 2); - transition: left 0.18s ease; + left: calc(5px + var(--calculated-paper-slider-height) / 2); + transition: left 0.18s ease; } .ring.expand.dragging.paper-slider > .bar-container.paper-slider { - transition: none; + transition: none; } .ring.expand.paper-slider:not(.pin) > .bar-container.paper-slider { - left: calc(8px + var(--calculated-paper-slider-height) / 2); + left: calc(8px + var(--calculated-paper-slider-height) / 2); } #sliderBar.paper-slider { - padding: 15px 0; - width: 100%; - background-color: var(--paper-slider-bar-color, transparent); - --paper-progress-container-color: var( - --paper-slider-container-color, - var(--paper-grey-400) - ); - --paper-progress-height: var(--calculated-paper-slider-height); + padding: 15px 0; + width: 100%; + background-color: var(--paper-slider-bar-color, transparent); + --paper-progress-container-color: var( + --paper-slider-container-color, + var(--paper-grey-400) + ); + --paper-progress-height: var(--calculated-paper-slider-height); } .slider-markers.paper-slider { - position: absolute; + position: absolute; - top: 15px; - height: var(--calculated-paper-slider-height); - left: 0; - right: -1px; - box-sizing: border-box; - pointer-events: none; - 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); + top: 15px; + height: var(--calculated-paper-slider-height); + left: 0; + right: -1px; + box-sizing: border-box; + pointer-events: none; + 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); } .slider-marker.paper-slider { - -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: 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); } .slider-markers.paper-slider::after, .slider-marker.paper-slider::after { - content: ""; - display: block; - margin-left: -1px; - width: 2px; - height: var(--calculated-paper-slider-height); - border-radius: 50%; - background-color: var(--paper-slider-markers-color, #000); + content: ''; + display: block; + margin-left: -1px; + width: 2px; + height: var(--calculated-paper-slider-height); + border-radius: 50%; + background-color: var(--paper-slider-markers-color, #000); } .slider-knob.paper-slider { - position: absolute; - left: 0; - top: 0; - margin-left: calc(-15px - var(--calculated-paper-slider-height) / 2); - width: calc(30px + var(--calculated-paper-slider-height)); - height: calc(30px + var(--calculated-paper-slider-height)); + position: absolute; + left: 0; + top: 0; + margin-left: calc(-15px - var(--calculated-paper-slider-height) / 2); + width: calc(30px + var(--calculated-paper-slider-height)); + height: calc(30px + var(--calculated-paper-slider-height)); } .transiting.paper-slider > .slider-knob.paper-slider { - transition: left 0.08s ease; + transition: left 0.08s ease; } .slider-knob.paper-slider:focus { - outline: none; + outline: none; } .slider-knob.dragging.paper-slider { - transition: none; + transition: none; } .snaps.paper-slider > .slider-knob.dragging.paper-slider { - transition: -webkit-transform 0.08s ease; - transition: transform 0.08s ease; + transition: -webkit-transform 0.08s ease; + transition: transform 0.08s ease; } .slider-knob-inner.paper-slider { - margin: 10px; - width: calc(100% - 20px); - height: calc(100% - 20px); - background-color: var(--paper-slider-knob-color, var(--google-blue-700)); - border: 2px solid var(--paper-slider-knob-color, var(--google-blue-700)); - border-radius: 50%; + margin: 10px; + width: calc(100% - 20px); + height: calc(100% - 20px); + background-color: var(--paper-slider-knob-color, var(--google-blue-700)); + border: 2px solid var(--paper-slider-knob-color, var(--google-blue-700)); + border-radius: 50%; - -moz-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; - transition-property: -webkit-transform, background-color, border; - transition-property: transform, background-color, border; - transition-duration: 0.18s; - transition-timing-function: ease; + transition-property: -webkit-transform, background-color, border; + transition-property: transform, background-color, border; + transition-duration: 0.18s; + transition-timing-function: ease; } .expand.paper-slider:not(.pin) - > .slider-knob.paper-slider - > .slider-knob-inner.paper-slider { - -webkit-transform: scale(1.5); - transform: scale(1.5); + > .slider-knob.paper-slider + > .slider-knob-inner.paper-slider { + -webkit-transform: scale(1.5); + transform: scale(1.5); } .ring.paper-slider - > .slider-knob.paper-slider - > .slider-knob-inner.paper-slider { - background-color: var(--paper-slider-knob-start-color, transparent); - border: 2px solid - var(--paper-slider-knob-start-border-color, var(--paper-grey-400)); + > .slider-knob.paper-slider + > .slider-knob-inner.paper-slider { + background-color: var(--paper-slider-knob-start-color, transparent); + border: 2px solid + var(--paper-slider-knob-start-border-color, var(--paper-grey-400)); } .slider-knob-inner.paper-slider::before { - background-color: var(--paper-slider-pin-color, var(--google-blue-700)); + background-color: var(--paper-slider-pin-color, var(--google-blue-700)); } .pin.paper-slider - > .slider-knob.paper-slider - > .slider-knob-inner.paper-slider::before { - content: ""; - position: absolute; - top: 0; - left: 50%; - margin-left: -13px; - width: 26px; - height: 26px; - border-radius: 50% 50% 50% 0; + > .slider-knob.paper-slider + > .slider-knob-inner.paper-slider::before { + content: ''; + position: absolute; + top: 0; + left: 50%; + margin-left: -13px; + width: 26px; + height: 26px; + border-radius: 50% 50% 50% 0; - -webkit-transform: rotate(-45deg) scale(0) translate(0); - transform: rotate(-45deg) scale(0) translate(0); + -webkit-transform: rotate(-45deg) scale(0) translate(0); + transform: rotate(-45deg) scale(0) translate(0); } .slider-knob-inner.paper-slider::before, .slider-knob-inner.paper-slider::after { - transition: -webkit-transform 0.18s ease, background-color 0.18s ease; - transition: transform 0.18s ease, background-color 0.18s ease; + transition: -webkit-transform 0.18s ease, background-color 0.18s ease; + transition: transform 0.18s ease, background-color 0.18s ease; } .pin.ring.paper-slider - > .slider-knob.paper-slider - > .slider-knob-inner.paper-slider::before { - background-color: var( - --paper-slider-pin-start-color, - var(--paper-grey-400) - ); + > .slider-knob.paper-slider + > .slider-knob-inner.paper-slider::before { + background-color: var(--paper-slider-pin-start-color, var(--paper-grey-400)); } .pin.expand.paper-slider - > .slider-knob.paper-slider - > .slider-knob-inner.paper-slider::before { - -webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px); - transform: rotate(-45deg) scale(1) translate(17px, -17px); + > .slider-knob.paper-slider + > .slider-knob-inner.paper-slider::before { + -webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px); + transform: rotate(-45deg) scale(1) translate(17px, -17px); } .pin.paper-slider - > .slider-knob.paper-slider - > .slider-knob-inner.paper-slider::after { - content: attr(value); - position: absolute; - top: 0; - left: 50%; - margin-left: -16px; - width: 32px; - height: 26px; - text-align: center; - color: var(--paper-slider-font-color, #fff); - font-size: 10px; - - -webkit-transform: scale(0) translate(0); - transform: scale(0) translate(0); + > .slider-knob.paper-slider + > .slider-knob-inner.paper-slider::after { + content: attr(value); + position: absolute; + top: 0; + left: 50%; + margin-left: -16px; + width: 32px; + height: 26px; + text-align: center; + color: var(--paper-slider-font-color, #fff); + font-size: 10px; + + -webkit-transform: scale(0) translate(0); + transform: scale(0) translate(0); } .pin.expand.paper-slider - > .slider-knob.paper-slider - > .slider-knob-inner.paper-slider::after { - -webkit-transform: scale(1) translate(0, -17px); - transform: scale(1) translate(0, -17px); + > .slider-knob.paper-slider + > .slider-knob-inner.paper-slider::after { + -webkit-transform: scale(1) translate(0, -17px); + transform: scale(1) translate(0, -17px); } .slider-input.paper-slider { - width: 50px; - overflow: hidden; - --paper-input-container-input_-_text-align: center; - --paper-input-container-input_-_overflow: initial; - --paper-input-container-input_-_white-space: initial; - --paper-input-container-input_-_text-overflow: initial; - --paper-input-container-input_-_max-width: initial; - --paper-input-container-input_-_box-sizing: initial; - --paper-input-container-input_-_cursor: initial; - --paper-input-container-input_-_font-size: initial; - --paper-input-container-input_-_font-weight: initial; - --paper-input-container-input_-_line-height: initial; - --paper-input-container-input_-_letter-spacing: initial; - --paper-input-container-input_-_color: initial; - --paper-input-container-input_-_padding: initial; - --paper-input-container-input_-_height: initial; + width: 50px; + overflow: hidden; + --paper-input-container-input_-_text-align: center; + --paper-input-container-input_-_overflow: initial; + --paper-input-container-input_-_white-space: initial; + --paper-input-container-input_-_text-overflow: initial; + --paper-input-container-input_-_max-width: initial; + --paper-input-container-input_-_box-sizing: initial; + --paper-input-container-input_-_cursor: initial; + --paper-input-container-input_-_font-size: initial; + --paper-input-container-input_-_font-weight: initial; + --paper-input-container-input_-_line-height: initial; + --paper-input-container-input_-_letter-spacing: initial; + --paper-input-container-input_-_color: initial; + --paper-input-container-input_-_padding: initial; + --paper-input-container-input_-_height: initial; } #sliderContainer.disabled.paper-slider { - pointer-events: none; + pointer-events: none; } .disabled.paper-slider - > .slider-knob.paper-slider - > .slider-knob-inner.paper-slider { - background-color: var( - --paper-slider-disabled-knob-color, - var(--paper-grey-400) - ); - border: 2px solid - var(--paper-slider-disabled-knob-color, var(--paper-grey-400)); - -webkit-transform: scale3d(0.75, 0.75, 1); - transform: scale3d(0.75, 0.75, 1); + > .slider-knob.paper-slider + > .slider-knob-inner.paper-slider { + background-color: var( + --paper-slider-disabled-knob-color, + var(--paper-grey-400) + ); + border: 2px solid + var(--paper-slider-disabled-knob-color, var(--paper-grey-400)); + -webkit-transform: scale3d(0.75, 0.75, 1); + transform: scale3d(0.75, 0.75, 1); } .disabled.ring.paper-slider - > .slider-knob.paper-slider - > .slider-knob-inner.paper-slider { - background-color: var(--paper-slider-knob-start-color, transparent); - border: 2px solid - var(--paper-slider-knob-start-border-color, var(--paper-grey-400)); + > .slider-knob.paper-slider + > .slider-knob-inner.paper-slider { + background-color: var(--paper-slider-knob-start-color, transparent); + border: 2px solid + var(--paper-slider-knob-start-border-color, var(--paper-grey-400)); } paper-ripple.paper-slider { - color: var(--paper-slider-knob-color, var(--google-blue-700)); + color: var(--paper-slider-knob-color, var(--google-blue-700)); } paper-spinner-lite { - display: inline-block; - position: relative; - width: 28px; - height: 28px; + display: inline-block; + position: relative; + width: 28px; + height: 28px; - --paper-spinner-container-rotation-duration: 1568ms; + --paper-spinner-container-rotation-duration: 1568ms; - --paper-spinner-expand-contract-duration: 1333ms; + --paper-spinner-expand-contract-duration: 1333ms; - --paper-spinner-full-cycle-duration: 5332ms; + --paper-spinner-full-cycle-duration: 5332ms; - --paper-spinner-cooldown-duration: 400ms; + --paper-spinner-cooldown-duration: 400ms; } #spinnerContainer.paper-spinner-lite { - width: 100%; - height: 100%; + width: 100%; + height: 100%; - direction: ltr; + direction: ltr; } #spinnerContainer.active.paper-spinner-lite { - -webkit-animation: container-rotate - var(--paper-spinner-container-rotation-duration) linear infinite; - animation: container-rotate var(--paper-spinner-container-rotation-duration) - linear infinite; + -webkit-animation: container-rotate + var(--paper-spinner-container-rotation-duration) linear infinite; + animation: container-rotate var(--paper-spinner-container-rotation-duration) + linear infinite; } @-webkit-keyframes container-rotate { - to { - -webkit-transform: rotate(360deg); - } + to { + -webkit-transform: rotate(360deg); + } } @keyframes container-rotate { - to { - transform: rotate(360deg); - } + to { + transform: rotate(360deg); + } } .spinner-layer.paper-spinner-lite { - position: absolute; - width: 100%; - height: 100%; - opacity: 0; - white-space: nowrap; - color: var(--paper-spinner-color, var(--google-blue-500)); + position: absolute; + width: 100%; + height: 100%; + opacity: 0; + white-space: nowrap; + color: var(--paper-spinner-color, var(--google-blue-500)); } .layer-1.paper-spinner-lite { - color: var(--paper-spinner-layer-1-color, var(--google-blue-500)); + color: var(--paper-spinner-layer-1-color, var(--google-blue-500)); } .layer-2.paper-spinner-lite { - color: var(--paper-spinner-layer-2-color, var(--google-red-500)); + color: var(--paper-spinner-layer-2-color, var(--google-red-500)); } .layer-3.paper-spinner-lite { - color: var(--paper-spinner-layer-3-color, var(--google-yellow-500)); + color: var(--paper-spinner-layer-3-color, var(--google-yellow-500)); } .layer-4.paper-spinner-lite { - color: var(--paper-spinner-layer-4-color, var(--google-green-500)); + color: var(--paper-spinner-layer-4-color, var(--google-green-500)); } .active.paper-spinner-lite .spinner-layer.paper-spinner-lite { - -webkit-animation-name: fill-unfill-rotate; - -webkit-animation-duration: var(--paper-spinner-full-cycle-duration); - -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - -webkit-animation-iteration-count: infinite; - animation-name: fill-unfill-rotate; - animation-duration: var(--paper-spinner-full-cycle-duration); - animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - animation-iteration-count: infinite; - opacity: 1; + -webkit-animation-name: fill-unfill-rotate; + -webkit-animation-duration: var(--paper-spinner-full-cycle-duration); + -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + -webkit-animation-iteration-count: infinite; + animation-name: fill-unfill-rotate; + animation-duration: var(--paper-spinner-full-cycle-duration); + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + animation-iteration-count: infinite; + opacity: 1; } .active.paper-spinner-lite .spinner-layer.layer-1.paper-spinner-lite { - -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out; - animation-name: fill-unfill-rotate, layer-1-fade-in-out; + -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out; + animation-name: fill-unfill-rotate, layer-1-fade-in-out; } .active.paper-spinner-lite .spinner-layer.layer-2.paper-spinner-lite { - -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out; - animation-name: fill-unfill-rotate, layer-2-fade-in-out; + -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out; + animation-name: fill-unfill-rotate, layer-2-fade-in-out; } .active.paper-spinner-lite .spinner-layer.layer-3.paper-spinner-lite { - -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out; - animation-name: fill-unfill-rotate, layer-3-fade-in-out; + -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out; + animation-name: fill-unfill-rotate, layer-3-fade-in-out; } .active.paper-spinner-lite .spinner-layer.layer-4.paper-spinner-lite { - -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out; - animation-name: fill-unfill-rotate, layer-4-fade-in-out; + -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out; + animation-name: fill-unfill-rotate, layer-4-fade-in-out; } @-webkit-keyframes fill-unfill-rotate { - 12.5% { - -webkit-transform: rotate(135deg); - } + 12.5% { + -webkit-transform: rotate(135deg); + } - 25% { - -webkit-transform: rotate(270deg); - } + 25% { + -webkit-transform: rotate(270deg); + } - 37.5% { - -webkit-transform: rotate(405deg); - } + 37.5% { + -webkit-transform: rotate(405deg); + } - 50% { - -webkit-transform: rotate(540deg); - } + 50% { + -webkit-transform: rotate(540deg); + } - 62.5% { - -webkit-transform: rotate(675deg); - } + 62.5% { + -webkit-transform: rotate(675deg); + } - 75% { - -webkit-transform: rotate(810deg); - } + 75% { + -webkit-transform: rotate(810deg); + } - 87.5% { - -webkit-transform: rotate(945deg); - } + 87.5% { + -webkit-transform: rotate(945deg); + } - to { - -webkit-transform: rotate(1080deg); - } + to { + -webkit-transform: rotate(1080deg); + } } @keyframes fill-unfill-rotate { - 12.5% { - transform: rotate(135deg); - } + 12.5% { + transform: rotate(135deg); + } - 25% { - transform: rotate(270deg); - } + 25% { + transform: rotate(270deg); + } - 37.5% { - transform: rotate(405deg); - } + 37.5% { + transform: rotate(405deg); + } - 50% { - transform: rotate(540deg); - } + 50% { + transform: rotate(540deg); + } - 62.5% { - transform: rotate(675deg); - } + 62.5% { + transform: rotate(675deg); + } - 75% { - transform: rotate(810deg); - } + 75% { + transform: rotate(810deg); + } - 87.5% { - transform: rotate(945deg); - } + 87.5% { + transform: rotate(945deg); + } - to { - transform: rotate(1080deg); - } + to { + transform: rotate(1080deg); + } } @-webkit-keyframes layer-1-fade-in-out { - 0% { - opacity: 1; - } + 0% { + opacity: 1; + } - 25% { - opacity: 1; - } + 25% { + opacity: 1; + } - 26% { - opacity: 0; - } + 26% { + opacity: 0; + } - 89% { - opacity: 0; - } + 89% { + opacity: 0; + } - 90% { - opacity: 1; - } + 90% { + opacity: 1; + } - to { - opacity: 1; - } + to { + opacity: 1; + } } @keyframes layer-1-fade-in-out { - 0% { - opacity: 1; - } + 0% { + opacity: 1; + } - 25% { - opacity: 1; - } + 25% { + opacity: 1; + } - 26% { - opacity: 0; - } + 26% { + opacity: 0; + } - 89% { - opacity: 0; - } + 89% { + opacity: 0; + } - 90% { - opacity: 1; - } + 90% { + opacity: 1; + } - to { - opacity: 1; - } + to { + opacity: 1; + } } @-webkit-keyframes layer-2-fade-in-out { - 0% { - opacity: 0; - } + 0% { + opacity: 0; + } - 15% { - opacity: 0; - } + 15% { + opacity: 0; + } - 25% { - opacity: 1; - } + 25% { + opacity: 1; + } - 50% { - opacity: 1; - } + 50% { + opacity: 1; + } - 51% { - opacity: 0; - } + 51% { + opacity: 0; + } - to { - opacity: 0; - } + to { + opacity: 0; + } } @keyframes layer-2-fade-in-out { - 0% { - opacity: 0; - } + 0% { + opacity: 0; + } - 15% { - opacity: 0; - } + 15% { + opacity: 0; + } - 25% { - opacity: 1; - } + 25% { + opacity: 1; + } - 50% { - opacity: 1; - } + 50% { + opacity: 1; + } - 51% { - opacity: 0; - } + 51% { + opacity: 0; + } - to { - opacity: 0; - } + to { + opacity: 0; + } } @-webkit-keyframes layer-3-fade-in-out { - 0% { - opacity: 0; - } + 0% { + opacity: 0; + } - 40% { - opacity: 0; - } + 40% { + opacity: 0; + } - 50% { - opacity: 1; - } + 50% { + opacity: 1; + } - 75% { - opacity: 1; - } + 75% { + opacity: 1; + } - 76% { - opacity: 0; - } + 76% { + opacity: 0; + } - to { - opacity: 0; - } + to { + opacity: 0; + } } @keyframes layer-3-fade-in-out { - 0% { - opacity: 0; - } + 0% { + opacity: 0; + } - 40% { - opacity: 0; - } + 40% { + opacity: 0; + } - 50% { - opacity: 1; - } + 50% { + opacity: 1; + } - 75% { - opacity: 1; - } + 75% { + opacity: 1; + } - 76% { - opacity: 0; - } + 76% { + opacity: 0; + } - to { - opacity: 0; - } + to { + opacity: 0; + } } @-webkit-keyframes layer-4-fade-in-out { - 0% { - opacity: 0; - } + 0% { + opacity: 0; + } - 65% { - opacity: 0; - } + 65% { + opacity: 0; + } - 75% { - opacity: 1; - } + 75% { + opacity: 1; + } - 90% { - opacity: 1; - } + 90% { + opacity: 1; + } - to { - opacity: 0; - } + to { + opacity: 0; + } } @keyframes layer-4-fade-in-out { - 0% { - opacity: 0; - } + 0% { + opacity: 0; + } - 65% { - opacity: 0; - } + 65% { + opacity: 0; + } - 75% { - opacity: 1; - } + 75% { + opacity: 1; + } - 90% { - opacity: 1; - } + 90% { + opacity: 1; + } - to { - opacity: 0; - } + to { + opacity: 0; + } } .circle-clipper.paper-spinner-lite { - display: inline-block; - position: relative; - width: 50%; - height: 100%; - overflow: hidden; + display: inline-block; + position: relative; + width: 50%; + height: 100%; + overflow: hidden; } .spinner-layer.paper-spinner-lite::after { - content: ""; - left: 45%; - width: 10%; - border-top-style: solid; + content: ''; + left: 45%; + width: 10%; + border-top-style: solid; } .spinner-layer.paper-spinner-lite::after, .circle-clipper.paper-spinner-lite .circle.paper-spinner-lite { - box-sizing: border-box; - position: absolute; - top: 0; - border-width: var(--paper-spinner-stroke-width, 3px); - border-radius: 50%; + box-sizing: border-box; + position: absolute; + top: 0; + border-width: var(--paper-spinner-stroke-width, 3px); + border-radius: 50%; } .circle-clipper.paper-spinner-lite .circle.paper-spinner-lite { - bottom: 0; - width: 200%; - border-style: solid; - border-bottom-color: transparent !important; + bottom: 0; + width: 200%; + border-style: solid; + border-bottom-color: transparent !important; } .circle-clipper.left.paper-spinner-lite .circle.paper-spinner-lite { - left: 0; - border-right-color: transparent !important; - -webkit-transform: rotate(129deg); - transform: rotate(129deg); + left: 0; + border-right-color: transparent !important; + -webkit-transform: rotate(129deg); + transform: rotate(129deg); } .circle-clipper.right.paper-spinner-lite .circle.paper-spinner-lite { - left: -100%; - border-left-color: transparent !important; - -webkit-transform: rotate(-129deg); - transform: rotate(-129deg); + left: -100%; + border-left-color: transparent !important; + -webkit-transform: rotate(-129deg); + transform: rotate(-129deg); } .active.paper-spinner-lite .gap-patch.paper-spinner-lite::after, .active.paper-spinner-lite - .circle-clipper.paper-spinner-lite - .circle.paper-spinner-lite { - -webkit-animation-duration: var(--paper-spinner-expand-contract-duration); - -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - -webkit-animation-iteration-count: infinite; - animation-duration: var(--paper-spinner-expand-contract-duration); - animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - animation-iteration-count: infinite; + .circle-clipper.paper-spinner-lite + .circle.paper-spinner-lite { + -webkit-animation-duration: var(--paper-spinner-expand-contract-duration); + -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + -webkit-animation-iteration-count: infinite; + animation-duration: var(--paper-spinner-expand-contract-duration); + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + animation-iteration-count: infinite; } .active.paper-spinner-lite - .circle-clipper.left.paper-spinner-lite - .circle.paper-spinner-lite { - -webkit-animation-name: left-spin; - animation-name: left-spin; + .circle-clipper.left.paper-spinner-lite + .circle.paper-spinner-lite { + -webkit-animation-name: left-spin; + animation-name: left-spin; } .active.paper-spinner-lite - .circle-clipper.right.paper-spinner-lite - .circle.paper-spinner-lite { - -webkit-animation-name: right-spin; - animation-name: right-spin; + .circle-clipper.right.paper-spinner-lite + .circle.paper-spinner-lite { + -webkit-animation-name: right-spin; + animation-name: right-spin; } @-webkit-keyframes left-spin { - 0% { - -webkit-transform: rotate(130deg); - } + 0% { + -webkit-transform: rotate(130deg); + } - 50% { - -webkit-transform: rotate(-5deg); - } + 50% { + -webkit-transform: rotate(-5deg); + } - to { - -webkit-transform: rotate(130deg); - } + to { + -webkit-transform: rotate(130deg); + } } @keyframes left-spin { - 0% { - transform: rotate(130deg); - } + 0% { + transform: rotate(130deg); + } - 50% { - transform: rotate(-5deg); - } + 50% { + transform: rotate(-5deg); + } - to { - transform: rotate(130deg); - } + to { + transform: rotate(130deg); + } } @-webkit-keyframes right-spin { - 0% { - -webkit-transform: rotate(-130deg); - } + 0% { + -webkit-transform: rotate(-130deg); + } - 50% { - -webkit-transform: rotate(5deg); - } + 50% { + -webkit-transform: rotate(5deg); + } - to { - -webkit-transform: rotate(-130deg); - } + to { + -webkit-transform: rotate(-130deg); + } } @keyframes right-spin { - 0% { - transform: rotate(-130deg); - } + 0% { + transform: rotate(-130deg); + } - 50% { - transform: rotate(5deg); - } + 50% { + transform: rotate(5deg); + } - to { - transform: rotate(-130deg); - } + to { + transform: rotate(-130deg); + } } #spinnerContainer.cooldown.paper-spinner-lite { - -webkit-animation: container-rotate - var(--paper-spinner-container-rotation-duration) linear infinite, - fade-out var(--paper-spinner-cooldown-duration) - cubic-bezier(0.4, 0, 0.2, 1); - animation: container-rotate var(--paper-spinner-container-rotation-duration) - linear infinite, - fade-out var(--paper-spinner-cooldown-duration) - cubic-bezier(0.4, 0, 0.2, 1); + -webkit-animation: container-rotate + var(--paper-spinner-container-rotation-duration) linear infinite, + fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0, 0.2, 1); + animation: container-rotate var(--paper-spinner-container-rotation-duration) + linear infinite, + fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0, 0.2, 1); } @-webkit-keyframes fade-out { - 0% { - opacity: 1; - } + 0% { + opacity: 1; + } - to { - opacity: 0; - } + to { + opacity: 0; + } } @keyframes fade-out { - 0% { - opacity: 1; - } + 0% { + opacity: 1; + } - to { - opacity: 0; - } + to { + opacity: 0; + } } paper-spinner { - display: inline-block; - position: relative; - width: 28px; - height: 28px; + display: inline-block; + position: relative; + width: 28px; + height: 28px; - --paper-spinner-container-rotation-duration: 1568ms; + --paper-spinner-container-rotation-duration: 1568ms; - --paper-spinner-expand-contract-duration: 1333ms; + --paper-spinner-expand-contract-duration: 1333ms; - --paper-spinner-full-cycle-duration: 5332ms; + --paper-spinner-full-cycle-duration: 5332ms; - --paper-spinner-cooldown-duration: 400ms; + --paper-spinner-cooldown-duration: 400ms; } #spinnerContainer.paper-spinner { - width: 100%; - height: 100%; + width: 100%; + height: 100%; - direction: ltr; + direction: ltr; } #spinnerContainer.active.paper-spinner { - -webkit-animation: container-rotate - var(--paper-spinner-container-rotation-duration) linear infinite; - animation: container-rotate var(--paper-spinner-container-rotation-duration) - linear infinite; + -webkit-animation: container-rotate + var(--paper-spinner-container-rotation-duration) linear infinite; + animation: container-rotate var(--paper-spinner-container-rotation-duration) + linear infinite; } @-webkit-keyframes container-rotate { - to { - -webkit-transform: rotate(360deg); - } + to { + -webkit-transform: rotate(360deg); + } } @keyframes container-rotate { - to { - transform: rotate(360deg); - } + to { + transform: rotate(360deg); + } } .spinner-layer.paper-spinner { - position: absolute; - width: 100%; - height: 100%; - opacity: 0; - white-space: nowrap; - color: var(--paper-spinner-color, var(--google-blue-500)); + position: absolute; + width: 100%; + height: 100%; + opacity: 0; + white-space: nowrap; + color: var(--paper-spinner-color, var(--google-blue-500)); } .layer-1.paper-spinner { - color: var(--paper-spinner-layer-1-color, var(--google-blue-500)); + color: var(--paper-spinner-layer-1-color, var(--google-blue-500)); } .layer-2.paper-spinner { - color: var(--paper-spinner-layer-2-color, var(--google-red-500)); + color: var(--paper-spinner-layer-2-color, var(--google-red-500)); } .layer-3.paper-spinner { - color: var(--paper-spinner-layer-3-color, var(--google-yellow-500)); + color: var(--paper-spinner-layer-3-color, var(--google-yellow-500)); } .layer-4.paper-spinner { - color: var(--paper-spinner-layer-4-color, var(--google-green-500)); + color: var(--paper-spinner-layer-4-color, var(--google-green-500)); } .active.paper-spinner .spinner-layer.paper-spinner { - -webkit-animation-name: fill-unfill-rotate; - -webkit-animation-duration: var(--paper-spinner-full-cycle-duration); - -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - -webkit-animation-iteration-count: infinite; - animation-name: fill-unfill-rotate; - animation-duration: var(--paper-spinner-full-cycle-duration); - animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - animation-iteration-count: infinite; - opacity: 1; + -webkit-animation-name: fill-unfill-rotate; + -webkit-animation-duration: var(--paper-spinner-full-cycle-duration); + -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + -webkit-animation-iteration-count: infinite; + animation-name: fill-unfill-rotate; + animation-duration: var(--paper-spinner-full-cycle-duration); + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + animation-iteration-count: infinite; + opacity: 1; } .active.paper-spinner .spinner-layer.layer-1.paper-spinner { - -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out; - animation-name: fill-unfill-rotate, layer-1-fade-in-out; + -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out; + animation-name: fill-unfill-rotate, layer-1-fade-in-out; } .active.paper-spinner .spinner-layer.layer-2.paper-spinner { - -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out; - animation-name: fill-unfill-rotate, layer-2-fade-in-out; + -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out; + animation-name: fill-unfill-rotate, layer-2-fade-in-out; } .active.paper-spinner .spinner-layer.layer-3.paper-spinner { - -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out; - animation-name: fill-unfill-rotate, layer-3-fade-in-out; + -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out; + animation-name: fill-unfill-rotate, layer-3-fade-in-out; } .active.paper-spinner .spinner-layer.layer-4.paper-spinner { - -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out; - animation-name: fill-unfill-rotate, layer-4-fade-in-out; + -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out; + animation-name: fill-unfill-rotate, layer-4-fade-in-out; } @-webkit-keyframes fill-unfill-rotate { - 12.5% { - -webkit-transform: rotate(135deg); - } + 12.5% { + -webkit-transform: rotate(135deg); + } - 25% { - -webkit-transform: rotate(270deg); - } + 25% { + -webkit-transform: rotate(270deg); + } - 37.5% { - -webkit-transform: rotate(405deg); - } + 37.5% { + -webkit-transform: rotate(405deg); + } - 50% { - -webkit-transform: rotate(540deg); - } + 50% { + -webkit-transform: rotate(540deg); + } - 62.5% { - -webkit-transform: rotate(675deg); - } + 62.5% { + -webkit-transform: rotate(675deg); + } - 75% { - -webkit-transform: rotate(810deg); - } + 75% { + -webkit-transform: rotate(810deg); + } - 87.5% { - -webkit-transform: rotate(945deg); - } + 87.5% { + -webkit-transform: rotate(945deg); + } - to { - -webkit-transform: rotate(1080deg); - } + to { + -webkit-transform: rotate(1080deg); + } } @keyframes fill-unfill-rotate { - 12.5% { - transform: rotate(135deg); - } + 12.5% { + transform: rotate(135deg); + } - 25% { - transform: rotate(270deg); - } + 25% { + transform: rotate(270deg); + } - 37.5% { - transform: rotate(405deg); - } + 37.5% { + transform: rotate(405deg); + } - 50% { - transform: rotate(540deg); - } + 50% { + transform: rotate(540deg); + } - 62.5% { - transform: rotate(675deg); - } + 62.5% { + transform: rotate(675deg); + } - 75% { - transform: rotate(810deg); - } + 75% { + transform: rotate(810deg); + } - 87.5% { - transform: rotate(945deg); - } + 87.5% { + transform: rotate(945deg); + } - to { - transform: rotate(1080deg); - } + to { + transform: rotate(1080deg); + } } @-webkit-keyframes layer-1-fade-in-out { - 0% { - opacity: 1; - } + 0% { + opacity: 1; + } - 25% { - opacity: 1; - } + 25% { + opacity: 1; + } - 26% { - opacity: 0; - } + 26% { + opacity: 0; + } - 89% { - opacity: 0; - } + 89% { + opacity: 0; + } - 90% { - opacity: 1; - } + 90% { + opacity: 1; + } - to { - opacity: 1; - } + to { + opacity: 1; + } } @keyframes layer-1-fade-in-out { - 0% { - opacity: 1; - } + 0% { + opacity: 1; + } - 25% { - opacity: 1; - } + 25% { + opacity: 1; + } - 26% { - opacity: 0; - } + 26% { + opacity: 0; + } - 89% { - opacity: 0; - } + 89% { + opacity: 0; + } - 90% { - opacity: 1; - } + 90% { + opacity: 1; + } - to { - opacity: 1; - } + to { + opacity: 1; + } } @-webkit-keyframes layer-2-fade-in-out { - 0% { - opacity: 0; - } + 0% { + opacity: 0; + } - 15% { - opacity: 0; - } + 15% { + opacity: 0; + } - 25% { - opacity: 1; - } + 25% { + opacity: 1; + } - 50% { - opacity: 1; - } + 50% { + opacity: 1; + } - 51% { - opacity: 0; - } + 51% { + opacity: 0; + } - to { - opacity: 0; - } + to { + opacity: 0; + } } @keyframes layer-2-fade-in-out { - 0% { - opacity: 0; - } + 0% { + opacity: 0; + } - 15% { - opacity: 0; - } + 15% { + opacity: 0; + } - 25% { - opacity: 1; - } + 25% { + opacity: 1; + } - 50% { - opacity: 1; - } + 50% { + opacity: 1; + } - 51% { - opacity: 0; - } + 51% { + opacity: 0; + } - to { - opacity: 0; - } + to { + opacity: 0; + } } @-webkit-keyframes layer-3-fade-in-out { - 0% { - opacity: 0; - } + 0% { + opacity: 0; + } - 40% { - opacity: 0; - } + 40% { + opacity: 0; + } - 50% { - opacity: 1; - } + 50% { + opacity: 1; + } - 75% { - opacity: 1; - } + 75% { + opacity: 1; + } - 76% { - opacity: 0; - } + 76% { + opacity: 0; + } - to { - opacity: 0; - } + to { + opacity: 0; + } } @keyframes layer-3-fade-in-out { - 0% { - opacity: 0; - } + 0% { + opacity: 0; + } - 40% { - opacity: 0; - } + 40% { + opacity: 0; + } - 50% { - opacity: 1; - } + 50% { + opacity: 1; + } - 75% { - opacity: 1; - } + 75% { + opacity: 1; + } - 76% { - opacity: 0; - } + 76% { + opacity: 0; + } - to { - opacity: 0; - } + to { + opacity: 0; + } } @-webkit-keyframes layer-4-fade-in-out { - 0% { - opacity: 0; - } + 0% { + opacity: 0; + } - 65% { - opacity: 0; - } + 65% { + opacity: 0; + } - 75% { - opacity: 1; - } + 75% { + opacity: 1; + } - 90% { - opacity: 1; - } + 90% { + opacity: 1; + } - to { - opacity: 0; - } + to { + opacity: 0; + } } @keyframes layer-4-fade-in-out { - 0% { - opacity: 0; - } + 0% { + opacity: 0; + } - 65% { - opacity: 0; - } + 65% { + opacity: 0; + } - 75% { - opacity: 1; - } + 75% { + opacity: 1; + } - 90% { - opacity: 1; - } + 90% { + opacity: 1; + } - to { - opacity: 0; - } + to { + opacity: 0; + } } .circle-clipper.paper-spinner { - display: inline-block; - position: relative; - width: 50%; - height: 100%; - overflow: hidden; + display: inline-block; + position: relative; + width: 50%; + height: 100%; + overflow: hidden; } .spinner-layer.paper-spinner::after { - content: ""; - left: 45%; - width: 10%; - border-top-style: solid; + content: ''; + left: 45%; + width: 10%; + border-top-style: solid; } .spinner-layer.paper-spinner::after, .circle-clipper.paper-spinner .circle.paper-spinner { - box-sizing: border-box; - position: absolute; - top: 0; - border-width: var(--paper-spinner-stroke-width, 3px); - border-radius: 50%; + box-sizing: border-box; + position: absolute; + top: 0; + border-width: var(--paper-spinner-stroke-width, 3px); + border-radius: 50%; } .circle-clipper.paper-spinner .circle.paper-spinner { - bottom: 0; - width: 200%; - border-style: solid; - border-bottom-color: transparent !important; + bottom: 0; + width: 200%; + border-style: solid; + border-bottom-color: transparent !important; } .circle-clipper.left.paper-spinner .circle.paper-spinner { - left: 0; - border-right-color: transparent !important; - -webkit-transform: rotate(129deg); - transform: rotate(129deg); + left: 0; + border-right-color: transparent !important; + -webkit-transform: rotate(129deg); + transform: rotate(129deg); } .circle-clipper.right.paper-spinner .circle.paper-spinner { - left: -100%; - border-left-color: transparent !important; - -webkit-transform: rotate(-129deg); - transform: rotate(-129deg); + left: -100%; + border-left-color: transparent !important; + -webkit-transform: rotate(-129deg); + transform: rotate(-129deg); } .active.paper-spinner .gap-patch.paper-spinner::after, .active.paper-spinner .circle-clipper.paper-spinner .circle.paper-spinner { - -webkit-animation-duration: var(--paper-spinner-expand-contract-duration); - -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - -webkit-animation-iteration-count: infinite; - animation-duration: var(--paper-spinner-expand-contract-duration); - animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - animation-iteration-count: infinite; + -webkit-animation-duration: var(--paper-spinner-expand-contract-duration); + -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + -webkit-animation-iteration-count: infinite; + animation-duration: var(--paper-spinner-expand-contract-duration); + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + animation-iteration-count: infinite; } .active.paper-spinner .circle-clipper.left.paper-spinner .circle.paper-spinner { - -webkit-animation-name: left-spin; - animation-name: left-spin; + -webkit-animation-name: left-spin; + animation-name: left-spin; } .active.paper-spinner - .circle-clipper.right.paper-spinner - .circle.paper-spinner { - -webkit-animation-name: right-spin; - animation-name: right-spin; + .circle-clipper.right.paper-spinner + .circle.paper-spinner { + -webkit-animation-name: right-spin; + animation-name: right-spin; } @-webkit-keyframes left-spin { - 0% { - -webkit-transform: rotate(130deg); - } + 0% { + -webkit-transform: rotate(130deg); + } - 50% { - -webkit-transform: rotate(-5deg); - } + 50% { + -webkit-transform: rotate(-5deg); + } - to { - -webkit-transform: rotate(130deg); - } + to { + -webkit-transform: rotate(130deg); + } } @keyframes left-spin { - 0% { - transform: rotate(130deg); - } + 0% { + transform: rotate(130deg); + } - 50% { - transform: rotate(-5deg); - } + 50% { + transform: rotate(-5deg); + } - to { - transform: rotate(130deg); - } + to { + transform: rotate(130deg); + } } @-webkit-keyframes right-spin { - 0% { - -webkit-transform: rotate(-130deg); - } + 0% { + -webkit-transform: rotate(-130deg); + } - 50% { - -webkit-transform: rotate(5deg); - } + 50% { + -webkit-transform: rotate(5deg); + } - to { - -webkit-transform: rotate(-130deg); - } + to { + -webkit-transform: rotate(-130deg); + } } @keyframes right-spin { - 0% { - transform: rotate(-130deg); - } + 0% { + transform: rotate(-130deg); + } - 50% { - transform: rotate(5deg); - } + 50% { + transform: rotate(5deg); + } - to { - transform: rotate(-130deg); - } + to { + transform: rotate(-130deg); + } } #spinnerContainer.cooldown.paper-spinner { - -webkit-animation: container-rotate - var(--paper-spinner-container-rotation-duration) linear infinite, - fade-out var(--paper-spinner-cooldown-duration) - cubic-bezier(0.4, 0, 0.2, 1); - animation: container-rotate var(--paper-spinner-container-rotation-duration) - linear infinite, - fade-out var(--paper-spinner-cooldown-duration) - cubic-bezier(0.4, 0, 0.2, 1); + -webkit-animation: container-rotate + var(--paper-spinner-container-rotation-duration) linear infinite, + fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0, 0.2, 1); + animation: container-rotate var(--paper-spinner-container-rotation-duration) + linear infinite, + fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0, 0.2, 1); } @-webkit-keyframes fade-out { - 0% { - opacity: 1; - } + 0% { + opacity: 1; + } - to { - opacity: 0; - } + to { + opacity: 0; + } } @keyframes fade-out { - 0% { - opacity: 1; - } + 0% { + opacity: 1; + } - to { - opacity: 0; - } + to { + opacity: 0; + } } paper-tab { - display: var(--layout-inline_-_display); - -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-pack: var(--layout-center-justified_-_-ms-flex-pack); - -webkit-justify-content: var( - --layout-center-justified_-_-webkit-justify-content - ); - justify-content: var(--layout-center-justified_-_justify-content); - -ms-flex: var(--layout-flex-auto_-_-ms-flex); - -webkit-flex: var(--layout-flex-auto_-_-webkit-flex); - flex: var(--layout-flex-auto_-_flex); - - position: relative; - padding: 0 12px; - overflow: hidden; - cursor: pointer; - vertical-align: middle; - - font-family: var(--paper-font-common-base_-_font-family); - -webkit-font-smoothing: var( - --paper-font-common-base_-_-webkit-font-smoothing - ); + display: var(--layout-inline_-_display); + -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-pack: var(--layout-center-justified_-_-ms-flex-pack); + -webkit-justify-content: var( + --layout-center-justified_-_-webkit-justify-content + ); + justify-content: var(--layout-center-justified_-_justify-content); + -ms-flex: var(--layout-flex-auto_-_-ms-flex); + -webkit-flex: var(--layout-flex-auto_-_-webkit-flex); + flex: var(--layout-flex-auto_-_flex); + + position: relative; + padding: 0 12px; + overflow: hidden; + cursor: pointer; + vertical-align: middle; + + font-family: var(--paper-font-common-base_-_font-family); + -webkit-font-smoothing: var( + --paper-font-common-base_-_-webkit-font-smoothing + ); } paper-tab:focus { - outline: none; + outline: none; } paper-tab[link] { - padding: 0; + padding: 0; } .tab-content.paper-tab { - height: 100%; - transform: translateZ(0); - -webkit-transform: translateZ(0); - transition: opacity 0.1s cubic-bezier(0.4, 0, 1, 1); - 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-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); - -ms-flex: var(--layout-flex-auto_-_-ms-flex); - -webkit-flex: var(--layout-flex-auto_-_-webkit-flex); - flex: var(--layout-flex-auto_-_flex); + height: 100%; + transform: translateZ(0); + -webkit-transform: translateZ(0); + transition: opacity 0.1s cubic-bezier(0.4, 0, 1, 1); + 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-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); + -ms-flex: var(--layout-flex-auto_-_-ms-flex); + -webkit-flex: var(--layout-flex-auto_-_-webkit-flex); + flex: var(--layout-flex-auto_-_flex); } paper-tab:not(.iron-selected) > .tab-content.paper-tab { - opacity: 0.8; + opacity: 0.8; - opacity: var(--paper-tab-content-unselected_-_opacity, 0.8); + opacity: var(--paper-tab-content-unselected_-_opacity, 0.8); } paper-tab:focus .tab-content.paper-tab { - opacity: 1; - font-weight: 700; + opacity: 1; + font-weight: 700; - font-weight: var(--paper-tab-content-focused_-_font-weight, 700); + font-weight: var(--paper-tab-content-focused_-_font-weight, 700); } paper-ripple.paper-tab { - color: var(--paper-tab-ink, var(--paper-yellow-a100)); + color: var(--paper-tab-ink, var(--paper-yellow-a100)); } .tab-content.paper-tab > a { - -ms-flex: var(--layout-flex-auto_-_-ms-flex); - -webkit-flex: var(--layout-flex-auto_-_-webkit-flex); - flex: var(--layout-flex-auto_-_flex); + -ms-flex: var(--layout-flex-auto_-_-ms-flex); + -webkit-flex: var(--layout-flex-auto_-_-webkit-flex); + flex: var(--layout-flex-auto_-_flex); - height: 100%; + height: 100%; } paper-tabs { - display: var(--layout_-_display); - -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); - - height: 48px; - font-size: 14px; - font-weight: 500; - overflow: hidden; - -moz-user-select: none; - -ms-user-select: none; - -webkit-user-select: none; - user-select: none; - - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-tap-highlight-color: transparent; -} - -[dir="rtl"] paper-tabs, -paper-tabs[dir="rtl"] { - display: var(--layout-horizontal-reverse_-_display); - -ms-flex-direction: var(--layout-horizontal-reverse_-_-ms-flex-direction); - -webkit-flex-direction: var( - --layout-horizontal-reverse_-_-webkit-flex-direction - ); - flex-direction: var(--layout-horizontal-reverse_-_flex-direction); + display: var(--layout_-_display); + -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); + + height: 48px; + font-size: 14px; + font-weight: 500; + overflow: hidden; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; + + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: transparent; +} + +[dir='rtl'] paper-tabs, +paper-tabs[dir='rtl'] { + display: var(--layout-horizontal-reverse_-_display); + -ms-flex-direction: var(--layout-horizontal-reverse_-_-ms-flex-direction); + -webkit-flex-direction: var( + --layout-horizontal-reverse_-_-webkit-flex-direction + ); + flex-direction: var(--layout-horizontal-reverse_-_flex-direction); } #tabsContainer.paper-tabs { - position: relative; - height: 100%; - white-space: nowrap; - overflow: hidden; - -ms-flex: var(--layout-flex-auto_-_-ms-flex); - -webkit-flex: var(--layout-flex-auto_-_-webkit-flex); - flex: var(--layout-flex-auto_-_flex); + position: relative; + height: 100%; + white-space: nowrap; + overflow: hidden; + -ms-flex: var(--layout-flex-auto_-_-ms-flex); + -webkit-flex: var(--layout-flex-auto_-_-webkit-flex); + flex: var(--layout-flex-auto_-_flex); } #tabsContent.paper-tabs { - height: 100%; - -moz-flex-basis: auto; - -ms-flex-basis: auto; - flex-basis: auto; + height: 100%; + -moz-flex-basis: auto; + -ms-flex-basis: auto; + flex-basis: auto; } #tabsContent.scrollable.paper-tabs { - position: absolute; - white-space: nowrap; + position: absolute; + white-space: nowrap; } #tabsContent.paper-tabs:not(.scrollable), #tabsContent.scrollable.fit-container.paper-tabs { - 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(--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); } #tabsContent.scrollable.fit-container.paper-tabs { - min-width: 100%; + min-width: 100%; } #tabsContent.scrollable.fit-container.paper-tabs > * { - -ms-flex: 1 0 auto; - -webkit-flex: 1 0 auto; - flex: 1 0 auto; + -ms-flex: 1 0 auto; + -webkit-flex: 1 0 auto; + flex: 1 0 auto; } .hidden.paper-tabs { - display: none; + display: none; } .not-visible.paper-tabs { - opacity: 0; - cursor: default; + opacity: 0; + cursor: default; } paper-icon-button.paper-tabs { - width: 48px; - height: 48px; - padding: 12px; - margin: 0 4px; + width: 48px; + height: 48px; + padding: 12px; + margin: 0 4px; } #selectionBar.paper-tabs { - position: absolute; - height: 0; - bottom: 0; - left: 0; - right: 0; - border-bottom: 2px solid - var(--paper-tabs-selection-bar-color, var(--paper-yellow-a100)); - -webkit-transform: scale(0); - transform: scale(0); - -webkit-transform-origin: left center; - transform-origin: left center; - transition: -webkit-transform; - transition: transform; + position: absolute; + height: 0; + bottom: 0; + left: 0; + right: 0; + border-bottom: 2px solid + var(--paper-tabs-selection-bar-color, var(--paper-yellow-a100)); + -webkit-transform: scale(0); + transform: scale(0); + -webkit-transform-origin: left center; + transform-origin: left center; + transition: -webkit-transform; + transition: transform; } #selectionBar.align-bottom.paper-tabs { - top: 0; - bottom: auto; + top: 0; + bottom: auto; } #selectionBar.expand.paper-tabs { - transition-duration: 0.15s; - transition-timing-function: cubic-bezier(0.4, 0, 1, 1); + transition-duration: 0.15s; + transition-timing-function: cubic-bezier(0.4, 0, 1, 1); } #selectionBar.contract.paper-tabs { - transition-duration: 0.18s; - transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + transition-duration: 0.18s; + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } #tabsContent.paper-tabs > :not(#selectionBar) { - height: 100%; + height: 100%; } paper-tooltip { - display: block; - position: absolute; - outline: none; - z-index: 1002; - -moz-user-select: none; - -ms-user-select: none; - -webkit-user-select: none; - user-select: none; - cursor: default; + display: block; + position: absolute; + outline: none; + z-index: 1002; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; + cursor: default; } #tooltip.paper-tooltip { - display: block; - outline: none; - font-family: var(--paper-font-common-base_-_font-family); - -webkit-font-smoothing: var( - --paper-font-common-base_-_-webkit-font-smoothing - ); - font-size: 10px; - line-height: 1; - background-color: var(--paper-tooltip-background, #616161); - color: var(--paper-tooltip-text-color, white); - padding: 8px; - border-radius: 2px; - margin: var(--paper-tooltip_-_margin); - font-size: var(--paper-tooltip_-_font-size, 10px); - font-weight: var(--paper-tooltip_-_font-weight); - line-height: var(--paper-tooltip_-_line-height, 1); - letter-spacing: var(--paper-tooltip_-_letter-spacing); - text-transform: var(--paper-tooltip_-_text-transform); + display: block; + outline: none; + font-family: var(--paper-font-common-base_-_font-family); + -webkit-font-smoothing: var( + --paper-font-common-base_-_-webkit-font-smoothing + ); + font-size: 10px; + line-height: 1; + background-color: var(--paper-tooltip-background, #616161); + color: var(--paper-tooltip-text-color, white); + padding: 8px; + border-radius: 2px; + margin: var(--paper-tooltip_-_margin); + font-size: var(--paper-tooltip_-_font-size, 10px); + font-weight: var(--paper-tooltip_-_font-weight); + line-height: var(--paper-tooltip_-_line-height, 1); + letter-spacing: var(--paper-tooltip_-_letter-spacing); + text-transform: var(--paper-tooltip_-_text-transform); } @keyframes keyFrameScaleUp { - 0% { - transform: scale(0); - } + 0% { + transform: scale(0); + } - 100% { - transform: scale(1); - } + 100% { + transform: scale(1); + } } @keyframes keyFrameScaleDown { - 0% { - transform: scale(1); - } + 0% { + transform: scale(1); + } - 100% { - transform: scale(0); - } + 100% { + transform: scale(0); + } } @keyframes keyFrameFadeInOpacity { - 0% { - opacity: 0; - } + 0% { + opacity: 0; + } - 100% { - opacity: var(--paper-tooltip-opacity, 0.9); - } + 100% { + opacity: var(--paper-tooltip-opacity, 0.9); + } } @keyframes keyFrameFadeOutOpacity { - 0% { - opacity: var(--paper-tooltip-opacity, 0.9); - } + 0% { + opacity: var(--paper-tooltip-opacity, 0.9); + } - 100% { - opacity: 0; - } + 100% { + opacity: 0; + } } @keyframes keyFrameSlideDownIn { - 0% { - transform: translateY(-2000px); - opacity: 0; - } + 0% { + transform: translateY(-2000px); + opacity: 0; + } - 10% { - opacity: 0.2; - } + 10% { + opacity: 0.2; + } - 100% { - transform: translateY(0); - opacity: var(--paper-tooltip-opacity, 0.9); - } + 100% { + transform: translateY(0); + opacity: var(--paper-tooltip-opacity, 0.9); + } } @keyframes keyFrameSlideDownOut { - 0% { - transform: translateY(0); - opacity: var(--paper-tooltip-opacity, 0.9); - } + 0% { + transform: translateY(0); + opacity: var(--paper-tooltip-opacity, 0.9); + } - 10% { - opacity: 0.2; - } + 10% { + opacity: 0.2; + } - 100% { - transform: translateY(-2000px); - opacity: 0; - } + 100% { + transform: translateY(-2000px); + opacity: 0; + } } .fade-in-animation.paper-tooltip { - opacity: 0; - animation-delay: var(--paper-tooltip-delay-in, 500ms); - animation-name: keyFrameFadeInOpacity; - animation-iteration-count: 1; - animation-timing-function: ease-in; - animation-duration: var(--paper-tooltip-duration-in, 500ms); - animation-fill-mode: forwards; + opacity: 0; + animation-delay: var(--paper-tooltip-delay-in, 500ms); + animation-name: keyFrameFadeInOpacity; + animation-iteration-count: 1; + animation-timing-function: ease-in; + animation-duration: var(--paper-tooltip-duration-in, 500ms); + animation-fill-mode: forwards; } .fade-out-animation.paper-tooltip { - opacity: var(--paper-tooltip-opacity, 0.9); - animation-delay: var(--paper-tooltip-delay-out, 0ms); - animation-name: keyFrameFadeOutOpacity; - animation-iteration-count: 1; - animation-timing-function: ease-in; - animation-duration: var(--paper-tooltip-duration-out, 500ms); - animation-fill-mode: forwards; + opacity: var(--paper-tooltip-opacity, 0.9); + animation-delay: var(--paper-tooltip-delay-out, 0ms); + animation-name: keyFrameFadeOutOpacity; + animation-iteration-count: 1; + animation-timing-function: ease-in; + animation-duration: var(--paper-tooltip-duration-out, 500ms); + animation-fill-mode: forwards; } .scale-up-animation.paper-tooltip { - transform: scale(0); - opacity: var(--paper-tooltip-opacity, 0.9); - animation-delay: var(--paper-tooltip-delay-in, 500ms); - animation-name: keyFrameScaleUp; - animation-iteration-count: 1; - animation-timing-function: ease-in; - animation-duration: var(--paper-tooltip-duration-in, 500ms); - animation-fill-mode: forwards; + transform: scale(0); + opacity: var(--paper-tooltip-opacity, 0.9); + animation-delay: var(--paper-tooltip-delay-in, 500ms); + animation-name: keyFrameScaleUp; + animation-iteration-count: 1; + animation-timing-function: ease-in; + animation-duration: var(--paper-tooltip-duration-in, 500ms); + animation-fill-mode: forwards; } .scale-down-animation.paper-tooltip { - transform: scale(1); - opacity: var(--paper-tooltip-opacity, 0.9); - animation-delay: var(--paper-tooltip-delay-out, 500ms); - animation-name: keyFrameScaleDown; - animation-iteration-count: 1; - animation-timing-function: ease-in; - animation-duration: var(--paper-tooltip-duration-out, 500ms); - animation-fill-mode: forwards; + transform: scale(1); + opacity: var(--paper-tooltip-opacity, 0.9); + animation-delay: var(--paper-tooltip-delay-out, 500ms); + animation-name: keyFrameScaleDown; + animation-iteration-count: 1; + animation-timing-function: ease-in; + animation-duration: var(--paper-tooltip-duration-out, 500ms); + animation-fill-mode: forwards; } .slide-down-animation.paper-tooltip { - transform: translateY(-2000px); - opacity: 0; - animation-delay: var(--paper-tooltip-delay-out, 500ms); - animation-name: keyFrameSlideDownIn; - animation-iteration-count: 1; - animation-timing-function: cubic-bezier(0, 0, 0.2, 1); - animation-duration: var(--paper-tooltip-duration-out, 500ms); - animation-fill-mode: forwards; + transform: translateY(-2000px); + opacity: 0; + animation-delay: var(--paper-tooltip-delay-out, 500ms); + animation-name: keyFrameSlideDownIn; + animation-iteration-count: 1; + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + animation-duration: var(--paper-tooltip-duration-out, 500ms); + animation-fill-mode: forwards; } .slide-down-animation-out.paper-tooltip { - transform: translateY(0); - opacity: var(--paper-tooltip-opacity, 0.9); - animation-delay: var(--paper-tooltip-delay-out, 500ms); - animation-name: keyFrameSlideDownOut; - animation-iteration-count: 1; - animation-timing-function: cubic-bezier(0.4, 0, 1, 1); - animation-duration: var(--paper-tooltip-duration-out, 500ms); - animation-fill-mode: forwards; + transform: translateY(0); + opacity: var(--paper-tooltip-opacity, 0.9); + animation-delay: var(--paper-tooltip-delay-out, 500ms); + animation-name: keyFrameSlideDownOut; + animation-iteration-count: 1; + animation-timing-function: cubic-bezier(0.4, 0, 1, 1); + animation-duration: var(--paper-tooltip-duration-out, 500ms); + animation-fill-mode: forwards; } .cancel-animation.paper-tooltip { - animation-delay: -30s !important; + animation-delay: -30s !important; } .hidden.paper-tooltip { - display: none !important; + display: none !important; } yt-live-chat-message-buy-flow-heading-renderer { - --yt-endpoint-color: rgb(39, 147, 230); - --yt-endpoint-visited-color: rgb(39, 147, 230); - display: block; - margin: 10px 0 12px; + --yt-endpoint-color: rgb(39, 147, 230); + --yt-endpoint-visited-color: rgb(39, 147, 230); + display: block; + margin: 10px 0 12px; } yt-formatted-string.yt-live-chat-message-buy-flow-heading-renderer { - display: block; + display: block; } #heading-title.yt-live-chat-message-buy-flow-heading-renderer { - font-size: 16px; - font-weight: 500; - line-height: 20px; - color: var(--yt-live-chat-primary-text-color); + font-size: 16px; + font-weight: 500; + line-height: 20px; + color: var(--yt-live-chat-primary-text-color); } #heading-text.yt-live-chat-message-buy-flow-heading-renderer { - margin-top: 4px; - font-size: 14px; - line-height: 17px; + margin-top: 4px; + font-size: 14px; + line-height: 17px; } #container.yt-live-chat-paid-message-footer-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(--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); } #icon.yt-live-chat-paid-message-footer-renderer { - min-width: 40px; - margin-right: 16px; - -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); - -ms-flex: var(--layout-flex-none_-_-ms-flex); - -webkit-flex: var(--layout-flex-none_-_-webkit-flex); - flex: var(--layout-flex-none_-_flex); - display: var(--layout_-_display); + min-width: 40px; + margin-right: 16px; + -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); + -ms-flex: var(--layout-flex-none_-_-ms-flex); + -webkit-flex: var(--layout-flex-none_-_-webkit-flex); + flex: var(--layout-flex-none_-_flex); + display: var(--layout_-_display); } #text.yt-live-chat-paid-message-footer-renderer { - font-size: 12px; - line-height: 16px; - margin-bottom: 3px; - -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); - display: var(--layout_-_display); + font-size: 12px; + line-height: 16px; + margin-bottom: 3px; + -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); + display: var(--layout_-_display); } yt-icon-button { - display: inline-block; - position: relative; - width: 24px; - height: 24px; - box-sizing: border-box; - font-size: 0; + display: inline-block; + position: relative; + width: 24px; + height: 24px; + box-sizing: border-box; + font-size: 0; } button.yt-icon-button { - vertical-align: middle; - color: inherit; - outline: none; - background: none; - margin: 0; - border: none; - padding: 0; - width: 100%; - height: 100%; - line-height: 0; - cursor: pointer; - - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-tap-highlight-color: transparent; + vertical-align: middle; + color: inherit; + outline: none; + background: none; + margin: 0; + border: none; + padding: 0; + width: 100%; + height: 100%; + line-height: 0; + cursor: pointer; + + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: transparent; } button.yt-icon-button > yt-icon { - width: var(--yt-icon-button-icon-width, 100%); - height: var(--yt-icon-button-icon-height, 100%); + width: var(--yt-icon-button-icon-width, 100%); + height: var(--yt-icon-button-icon-height, 100%); } button.yt-icon-button[disabled] { - pointer-events: none; - cursor: auto; + pointer-events: none; + cursor: auto; } paper-ripple.yt-icon-button { - opacity: 0.6; - color: currentColor; + opacity: 0.6; + color: currentColor; } yt-button-renderer { - --paper-button-ink-color: var(--yt-paper-button-ink-color); - --yt-formatted-string-deemphasize-color: var(--yt-spec-static-brand-white); + --paper-button-ink-color: var(--yt-paper-button-ink-color); + --yt-formatted-string-deemphasize-color: var(--yt-spec-static-brand-white); - --yt-formatted-string-deemphasize_-_margin-left: var(--ytd-margin-base); + --yt-formatted-string-deemphasize_-_margin-left: var(--ytd-margin-base); } yt-button-renderer { - vertical-align: middle; - white-space: nowrap; - font-size: var(--ytd-tab-system_-_font-size); - font-weight: var(--ytd-tab-system_-_font-weight); - letter-spacing: var(--ytd-tab-system_-_letter-spacing); - text-transform: var(--ytd-tab-system_-_text-transform); + vertical-align: middle; + white-space: nowrap; + font-size: var(--ytd-tab-system_-_font-size); + font-weight: var(--ytd-tab-system_-_font-weight); + letter-spacing: var(--ytd-tab-system_-_letter-spacing); + text-transform: var(--ytd-tab-system_-_text-transform); } yt-button-renderer[is-paper-button]:not[button-raised], yt-button-renderer[is-paper-button]:not[button-raised] a.yt-button-renderer { - overflow: hidden; + overflow: hidden; } yt-button-renderer[disabled][is-paper-button] a.yt-button-renderer { - cursor: initial; + cursor: initial; } yt-button-renderer[is-paper-button] yt-icon.yt-button-renderer { - -ms-flex: var(--layout-flex-none_-_-ms-flex); - -webkit-flex: var(--layout-flex-none_-_-webkit-flex); - flex: var(--layout-flex-none_-_flex); + -ms-flex: var(--layout-flex-none_-_-ms-flex); + -webkit-flex: var(--layout-flex-none_-_-webkit-flex); + flex: var(--layout-flex-none_-_flex); } yt-button-renderer yt-formatted-string.yt-button-renderer { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } paper-button.yt-button-renderer { - min-width: var( - --yt-paper-button-min-width, - var(--ytd-paper-button-min-width, 5.14em) - ); - font-size: var(--yt-paper-button-font-size, inherit); + min-width: var( + --yt-paper-button-min-width, + var(--ytd-paper-button-min-width, 5.14em) + ); + font-size: var(--yt-paper-button-font-size, inherit); } paper-button.keyboard-focus.yt-button-renderer { - font-weight: inherit; + font-weight: inherit; } yt-button-renderer[is-icon-button]:not([style-action-button]) { - font-size: var(--ytd-caption_-_font-size); - line-height: var(--ytd-caption_-_line-height); - font-weight: var(--ytd-caption_-_font-weight); - letter-spacing: var(--ytd-caption_-_letter-spacing); - text-transform: var(--ytd-caption_-_text-transform); + font-size: var(--ytd-caption_-_font-size); + line-height: var(--ytd-caption_-_line-height); + font-weight: var(--ytd-caption_-_font-weight); + letter-spacing: var(--ytd-caption_-_letter-spacing); + text-transform: var(--ytd-caption_-_text-transform); } yt-button-renderer.force-icon-button a.yt-button-renderer { - padding-right: var(--yt-button-icon-padding, var(--ytd-margin-2x)); + padding-right: var(--yt-button-icon-padding, var(--ytd-margin-2x)); } yt-button-renderer[is-paper-button] { - background-color: var( - --yt-basic-background-color, - var(--yt-button-background-color) - ); - color: var( - --yt-basic-foreground-title-color, - var(--yt-spec-text-secondary) - ); - border-color: var( - --yt-basic-foreground-title-color, - var(--yt-spec-text-secondary) - ); + background-color: var( + --yt-basic-background-color, + var(--yt-button-background-color) + ); + color: var(--yt-basic-foreground-title-color, var(--yt-spec-text-secondary)); + border-color: var( + --yt-basic-foreground-title-color, + var(--yt-spec-text-secondary) + ); } yt-button-renderer[is-paper-button-with-icon] { - --yt-button-padding-minus-focus-outline: var( - --yt-button-with-icon-padding-minus-focus-outline - ); + --yt-button-padding-minus-focus-outline: var( + --yt-button-with-icon-padding-minus-focus-outline + ); } yt-button-renderer.style-suggestive.size-small[is-paper-button-with-icon] { - --yt-button-padding: 6px 12px; - --yt-button-padding-minus-border: 5px 11px; + --yt-button-padding: 6px 12px; + --yt-button-padding-minus-border: 5px 11px; } yt-button-renderer[is-paper-button-with-icon] { - --yt-button-padding: 6px 16px; - --yt-button-padding-minus-border: 5px 15px; + --yt-button-padding: 6px 16px; + --yt-button-padding-minus-border: 5px 15px; } -yt-button-renderer[is-paper-button-with-icon][button-size="size-large"] { - --yt-button-padding: 10px 16px; - --yt-button-padding-minus-border: 9px 15px; - --yt-button-padding-minus-focus-outline: 9px 15px; +yt-button-renderer[is-paper-button-with-icon][button-size='size-large'] { + --yt-button-padding: 10px 16px; + --yt-button-padding-minus-border: 9px 15px; + --yt-button-padding-minus-focus-outline: 9px 15px; } yt-button-renderer[is-icon-button] { - color: var(--yt-button-color, var(--yt-spec-icon-inactive)); + color: var(--yt-button-color, var(--yt-spec-icon-inactive)); } yt-button-renderer.style-text[is-icon-button], yt-button-renderer.style-default[is-icon-button], yt-button-renderer.style-opacity[is-icon-button] { - color: var(--yt-spec-icon-inactive); + color: var(--yt-spec-icon-inactive); } yt-button-renderer.style-text[is-icon-button] #text.yt-button-renderer, yt-button-renderer.style-default[is-icon-button] #text.yt-button-renderer, yt-button-renderer.style-opacity[is-icon-button] #text.yt-button-renderer { - color: var(--yt-spec-text-secondary); + color: var(--yt-spec-text-secondary); } yt-button-renderer.style-black[is-icon-button] { - color: var(--yt-spec-text-primary); + color: var(--yt-spec-text-primary); } yt-button-renderer.style-opacity[is-icon-button][disabled] { - color: var(--yt-spec-icon-disabled); + color: var(--yt-spec-icon-disabled); } yt-button-renderer.style-blue-text[is-icon-button] { - color: var(--yt-spec-call-to-action); + color: var(--yt-spec-call-to-action); } yt-button-renderer.style-visibly-disabled[is-icon-button] { - color: var(--yt-spec-icon-disabled); + color: var(--yt-spec-icon-disabled); } paper-tooltip.yt-button-renderer { - white-space: nowrap; + white-space: nowrap; } yt-button-renderer.style-primary[is-paper-button] { - background-color: var(--yt-spec-call-to-action); - color: var(--yt-spec-text-primary-inverse); + background-color: var(--yt-spec-call-to-action); + color: var(--yt-spec-text-primary-inverse); } yt-button-renderer.style-primary[disabled][is-paper-button] { - background-color: var(--yt-spec-icon-disabled); - color: var(--yt-spec-text-primary-inverse); + background-color: var(--yt-spec-icon-disabled); + color: var(--yt-spec-text-primary-inverse); } yt-button-renderer.style-payment[is-paper-button] { - background-color: var( - --yt-button-payment-background-color, - var(--yt-spec-call-to-action) - ); - color: var(--yt-spec-text-primary-inverse); + background-color: var( + --yt-button-payment-background-color, + var(--yt-spec-call-to-action) + ); + color: var(--yt-spec-text-primary-inverse); } yt-button-renderer.style-payment[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.yt-button-renderer, + paper-button.keyboard-focus.yt-button-renderer, yt-button-renderer.style-primary[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.yt-button-renderer, + paper-button.keyboard-focus.yt-button-renderer, yt-button-renderer.style-payment[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.yt-button-renderer, + paper-button.yt-button-renderer, yt-button-renderer.style-primary[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.yt-button-renderer { - border: var(--yt-button-padding-minus-focus-outline-width) solid - var(--yt-spec-filled-button-focus-outline); - padding: var(--yt-button-padding-minus-focus-outline); + paper-button.yt-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid + var(--yt-spec-filled-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); } yt-button-renderer.style-suggestive[is-paper-button] { - --yt-formatted-string-deemphasize-color: var(--yt-blue-opacity-lighten-2); - background-color: transparent; - color: var(--yt-spec-call-to-action); + --yt-formatted-string-deemphasize-color: var(--yt-blue-opacity-lighten-2); + background-color: transparent; + color: var(--yt-spec-call-to-action); } yt-button-renderer.style-suggestive[is-paper-button] - paper-button.yt-button-renderer { - border: 1px solid var(--yt-spec-call-to-action); - padding: var(--yt-button-padding-minus-border); + paper-button.yt-button-renderer { + border: 1px solid var(--yt-spec-call-to-action); + padding: var(--yt-button-padding-minus-border); } yt-button-renderer.style-suggestive[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.yt-button-renderer, + paper-button.keyboard-focus.yt-button-renderer, yt-button-renderer.style-suggestive[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.yt-button-renderer { - border: var(--yt-button-padding-minus-focus-outline-width) solid - var(--yt-spec-call-to-action); - padding: var(--yt-button-padding-minus-focus-outline); + paper-button.yt-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid + var(--yt-spec-call-to-action); + padding: var(--yt-button-padding-minus-focus-outline); } yt-button-renderer.palette-with-border[is-paper-button] - paper-button.yt-button-renderer { - border-width: 1px; - border-style: solid; - padding: var(--yt-button-padding-minus-border); + paper-button.yt-button-renderer { + border-width: 1px; + border-style: solid; + padding: var(--yt-button-padding-minus-border); } yt-button-renderer.palette-with-border[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.yt-button-renderer, + paper-button.keyboard-focus.yt-button-renderer, yt-button-renderer.palette-with-border[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.yt-button-renderer { - border-width: var(--yt-button-padding-minus-focus-outline-width); - border-style: solid; - padding: var(--yt-button-padding-minus-focus-outline); + paper-button.yt-button-renderer { + border-width: var(--yt-button-padding-minus-focus-outline-width); + border-style: solid; + padding: var(--yt-button-padding-minus-focus-outline); } yt-button-renderer.style-blue-text[is-paper-button] { - --yt-formatted-string-deemphasize-color: var(--yt-spec-icon-disabled); - color: var(--yt-spec-call-to-action); + --yt-formatted-string-deemphasize-color: var(--yt-spec-icon-disabled); + color: var(--yt-spec-call-to-action); } yt-button-renderer.style-blue-text[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.yt-button-renderer, + paper-button.keyboard-focus.yt-button-renderer, yt-button-renderer.style-blue-text[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.yt-button-renderer { - border: var(--yt-button-padding-minus-focus-outline-width) solid - var(--yt-spec-call-to-action-button-focus-outline); - padding: var(--yt-button-padding-minus-focus-outline); + paper-button.yt-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid + var(--yt-spec-call-to-action-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); } yt-button-renderer.style-destructive[is-paper-button] { - background-color: var(--yt-spec-brand-subscribe-button-background); - color: var(--yt-spec-static-brand-white); + background-color: var(--yt-spec-brand-subscribe-button-background); + color: var(--yt-spec-static-brand-white); } yt-button-renderer.style-destructive[new-subscribe-color][is-paper-button] { - background-color: var(--yt-spec-brand-button-background); + background-color: var(--yt-spec-brand-button-background); } yt-button-renderer.style-destructive[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.yt-button-renderer, + paper-button.keyboard-focus.yt-button-renderer, yt-button-renderer.style-destructive[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.yt-button-renderer { - border: var(--yt-button-padding-minus-focus-outline-width) solid - var(--yt-spec-filled-button-focus-outline); - padding: var(--yt-button-padding-minus-focus-outline); + paper-button.yt-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid + var(--yt-spec-filled-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); } yt-button-renderer.style-destructive[disabled][is-paper-button] { - background-color: var( - --yt-button-destructive-background-color, - var(--yt-opalescence-soft-grey) - ); - color: var( - --yt-button-destructive-color, - var(--yt-opalescence-grey-opacity-lighten-2) - ); + background-color: var( + --yt-button-destructive-background-color, + var(--yt-opalescence-soft-grey) + ); + color: var( + --yt-button-destructive-color, + var(--yt-opalescence-grey-opacity-lighten-2) + ); } yt-button-renderer.style-brand[is-paper-button] { - color: var(--yt-spec-brand-link-text); + color: var(--yt-spec-brand-link-text); } yt-button-renderer.style-brand[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.yt-button-renderer, + paper-button.keyboard-focus.yt-button-renderer, yt-button-renderer.style-brand[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.yt-button-renderer { - border: var(--yt-button-padding-minus-focus-outline-width) solid - var(--yt-spec-brand-text-button-focus-outline); - padding: var(--yt-button-padding-minus-focus-outline); + paper-button.yt-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid + var(--yt-spec-brand-text-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); } yt-button-renderer.style-default[is-paper-button] { - background-color: var( - --yt-button-default-background-color, - var(--yt-spec-badge-chip-background) - ); - color: var(--yt-button-default-text-color, var(--yt-spec-text-secondary)); + background-color: var( + --yt-button-default-background-color, + var(--yt-spec-badge-chip-background) + ); + color: var(--yt-button-default-text-color, var(--yt-spec-text-secondary)); } yt-button-renderer.style-default[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.yt-button-renderer, + paper-button.keyboard-focus.yt-button-renderer, yt-button-renderer.style-default[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.yt-button-renderer { - border: var(--yt-button-padding-minus-focus-outline-width) solid - var(--yt-spec-filled-button-focus-outline); - padding: var(--yt-button-padding-minus-focus-outline); + paper-button.yt-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid + var(--yt-spec-filled-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); } yt-button-renderer.style-inactive-outline[is-paper-button] { - color: var(--yt-spec-text-secondary); + color: var(--yt-spec-text-secondary); } yt-button-renderer.style-inactive-outline[is-paper-button] - paper-button.yt-button-renderer { - border: 1px solid var(--yt-spec-text-secondary); - padding: var(--yt-button-padding-minus-border); + paper-button.yt-button-renderer { + border: 1px solid var(--yt-spec-text-secondary); + padding: var(--yt-button-padding-minus-border); } yt-button-renderer.style-inactive-outline[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.yt-button-renderer, + paper-button.keyboard-focus.yt-button-renderer, yt-button-renderer.style-inactive-outline[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.yt-button-renderer { - border: var(--yt-button-padding-minus-focus-outline-width) solid - var(--yt-spec-text-secondary); - padding: var(--yt-button-padding-minus-focus-outline); + paper-button.yt-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid + var(--yt-spec-text-secondary); + padding: var(--yt-button-padding-minus-focus-outline); } yt-button-renderer.style-suggested-action[is-paper-button] { - background-color: var(--yt-spec-suggested-action); - color: var(--yt-spec-call-to-action); + background-color: var(--yt-spec-suggested-action); + color: var(--yt-spec-call-to-action); } yt-button-renderer.style-suggested-action[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.yt-button-renderer, + paper-button.keyboard-focus.yt-button-renderer, yt-button-renderer.style-suggested-action[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.yt-button-renderer { - border: var(--yt-button-padding-minus-focus-outline-width) solid - var(--yt-spec-call-to-action-button-focus-outline); - padding: var(--yt-button-padding-minus-focus-outline); + paper-button.yt-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid + var(--yt-spec-call-to-action-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); } yt-button-renderer.style-compact-gray[is-paper-button] { - background-color: var(--yt-spec-badge-chip-background); - color: var(--yt-spec-text-secondary); + background-color: var(--yt-spec-badge-chip-background); + color: var(--yt-spec-text-secondary); } yt-button-renderer.style-compact-gray[is-paper-button] - paper-button.yt-button-renderer { - padding: var(--ytd-margin-base) var(--ytd-margin-2x); + paper-button.yt-button-renderer { + padding: var(--ytd-margin-base) var(--ytd-margin-2x); } yt-button-renderer.style-text[is-paper-button] { - color: var(--yt-spec-text-secondary); + color: var(--yt-spec-text-secondary); } yt-button-renderer[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.yt-button-renderer, + paper-button.keyboard-focus.yt-button-renderer, yt-button-renderer.style-text[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.yt-button-renderer, + paper-button.keyboard-focus.yt-button-renderer, yt-button-renderer[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.yt-button-renderer, + paper-button.yt-button-renderer, yt-button-renderer.style-text[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.yt-button-renderer { - border: var(--yt-button-padding-minus-focus-outline-width) solid - var(--yt-spec-inactive-text-button-focus-outline); - padding: var(--yt-button-padding-minus-focus-outline); + paper-button.yt-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid + var(--yt-spec-inactive-text-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); } yt-button-renderer.style-overlay[is-paper-button] { - background-color: var(--yt-spec-static-overlay-button-primary); - color: var(--yt-spec-static-overlay-text-primary); + background-color: var(--yt-spec-static-overlay-button-primary); + color: var(--yt-spec-static-overlay-text-primary); } yt-button-renderer.style-overlay[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.yt-button-renderer, + paper-button.keyboard-focus.yt-button-renderer, yt-button-renderer.style-overlay[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.yt-button-renderer { - border: var(--yt-button-padding-minus-focus-outline-width) solid - var(--yt-spec-static-overlay-text-secondary); - padding: var(--yt-button-padding-minus-focus-outline); + paper-button.yt-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid + var(--yt-spec-static-overlay-text-secondary); + padding: var(--yt-button-padding-minus-focus-outline); } yt-button-renderer.style-white-with-border[is-paper-button] { - background-color: transparent; - border: 1px solid var(--yt-spec-static-brand-white); - color: var(--yt-spec-static-brand-white); + background-color: transparent; + border: 1px solid var(--yt-spec-static-brand-white); + color: var(--yt-spec-static-brand-white); } yt-button-renderer.style-white-with-border[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.yt-button-renderer, + paper-button.keyboard-focus.yt-button-renderer, yt-button-renderer.style-white-with-border[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.yt-button-renderer { - border: var(--yt-button-padding-minus-focus-outline-width) solid - var(--yt-spec-static-brand-white); - padding: var(--yt-button-padding-minus-focus-outline); + paper-button.yt-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid + var(--yt-spec-static-brand-white); + padding: var(--yt-button-padding-minus-focus-outline); } yt-button-renderer.style-alert-info[is-paper-button] { - color: var(--yt-blue); + color: var(--yt-blue); } yt-button-renderer.style-alert-info[is-paper-button]:hover { - color: var(--yt-icon-hover-color); + color: var(--yt-icon-hover-color); } yt-button-renderer.style-dark[is-paper-button] { - background-color: var( - --yt-button-dark-background-color, - var(--yt-opalescence-soft-grey) - ); - color: var(--yt-button-dark-text-color, var(--yt-luna-black)); + background-color: var( + --yt-button-dark-background-color, + var(--yt-opalescence-soft-grey) + ); + color: var(--yt-button-dark-text-color, var(--yt-luna-black)); } yt-button-renderer.style-light[is-paper-button] { - background-color: var( - --yt-button-light-background-color, - var(--yt-opalescence-soft-grey) - ); - color: var( - --yt-button-light-text-color, - var(--yt-luna-black-opacity-lighten-2) - ); + background-color: var( + --yt-button-light-background-color, + var(--yt-opalescence-soft-grey) + ); + color: var( + --yt-button-light-text-color, + var(--yt-luna-black-opacity-lighten-2) + ); } yt-button-renderer.style-light-text[is-paper-button] { - color: var(--yt-white); + color: var(--yt-white); } yt-button-renderer.style-black[is-paper-button] { - color: var(--yt-spec-text-primary); + color: var(--yt-spec-text-primary); } yt-button-renderer.style-visibly-disabled[is-paper-button] { - background-color: transparent; - color: var(--yt-spec-text-disabled); + background-color: transparent; + color: var(--yt-spec-text-disabled); } yt-button-renderer.style-black[disabled][is-paper-button] { - color: var( - --yt-button-black-color, - var(--yt-opalescence-soft-grey-opacity-lighten-1) - ); + color: var( + --yt-button-black-color, + var(--yt-opalescence-soft-grey-opacity-lighten-1) + ); } yt-button-renderer.style-dark-on-black[is-paper-button] { - background-color: var(--yt-playability-button-color); - border: none; - color: var(--yt-white-opacity-lighten-1); + background-color: var(--yt-playability-button-color); + border: none; + color: var(--yt-white-opacity-lighten-1); } yt-button-renderer.style-blue-text-with-inverse-theme[is-paper-button] { - color: var(--yt-spec-call-to-action-inverse); + color: var(--yt-spec-call-to-action-inverse); } yt-button-renderer.style-count { - font-size: var(--ytd-thumbnail-attribution_-_font-size); - font-weight: var(--ytd-thumbnail-attribution_-_font-weight); - line-height: var(--ytd-thumbnail-attribution_-_line-height); - letter-spacing: var(--ytd-thumbnail-attribution_-_letter-spacing); - text-transform: var(--ytd-thumbnail-attribution_-_text-transform); + font-size: var(--ytd-thumbnail-attribution_-_font-size); + font-weight: var(--ytd-thumbnail-attribution_-_font-weight); + line-height: var(--ytd-thumbnail-attribution_-_line-height); + letter-spacing: var(--ytd-thumbnail-attribution_-_letter-spacing); + text-transform: var(--ytd-thumbnail-attribution_-_text-transform); } paper-button.yt-button-renderer { - display: inline-block; - text-align: center; - font-family: inherit; + display: inline-block; + text-align: center; + font-family: inherit; } yt-button-renderer { - display: inline-block; - text-transform: uppercase; + display: inline-block; + text-transform: uppercase; } yt-button-renderer.force-icon-button a.yt-button-renderer { - cursor: pointer; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -ms-flex-direction: row; - -webkit-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; - -webkit-align-items: center; - align-items: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; + cursor: pointer; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; } yt-button-renderer[disabled] a.yt-button-renderer:focus { - outline: none; + outline: none; } yt-button-renderer[is-icon-button][has-no-text] { - font-size: 0; + font-size: 0; } a.yt-button-renderer { - display: -ms-flexbox; - display: -webkit-flex; - display: flex; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; } a.yt-simple-endpoint.yt-button-renderer { - color: inherit; - border-radius: inherit; - text-decoration: none; + color: inherit; + border-radius: inherit; + text-decoration: none; } yt-button-renderer[is-paper-button] { - border-radius: var(--yt-button-border-radius, 3px); - margin: var(--yt-button-margin, 0 0.29em); + border-radius: var(--yt-button-border-radius, 3px); + margin: var(--yt-button-margin, 0 0.29em); } yt-button-renderer[is-paper-button][disabled] { - color: var(--yt-spec-text-disabled); - background-color: transparent; + color: var(--yt-spec-text-disabled); + background-color: transparent; } yt-button-renderer[is-icon-button][disabled] { - color: #9b9b9b; + color: #9b9b9b; } yt-button-renderer[is-icon-button][style-action-button] { - --yt-button-icon-padding: 6px; + --yt-button-icon-padding: 6px; } yt-button-renderer[is-paper-button][align-by-text]:not(:empty) { - margin-left: -16px; + margin-left: -16px; } -yt-button-renderer[is-paper-button][button-size="size-large"] { - line-height: 24px; +yt-button-renderer[is-paper-button][button-size='size-large'] { + line-height: 24px; } paper-button.yt-button-renderer { - width: var(--yt-paper-button-width, auto); - height: var(--yt-paper-button-height, auto); - border-radius: inherit; - margin: 0; - padding: var(--yt-button-padding, 0.7em 0.57em); - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -ms-flex-direction: row; - -webkit-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; - -webkit-align-items: center; - align-items: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -ms-flex: 1 1 auto; - -webkit-flex: 1 1 auto; - flex: 1 1 auto; + width: var(--yt-paper-button-width, auto); + height: var(--yt-paper-button-height, auto); + border-radius: inherit; + margin: 0; + padding: var(--yt-button-padding, 0.7em 0.57em); + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -ms-flex: 1 1 auto; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; } yt-button-renderer[start-justified] paper-button.yt-button-renderer { - -ms-flex-pack: start; - -webkit-justify-content: flex-start; - justify-content: flex-start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; } yt-button-renderer[vertically-aligned] paper-button.yt-button-renderer { - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -ms-flex-direction: column; - -webkit-flex-direction: column; - flex-direction: column; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; } #button.yt-button-renderer { - color: var(--yt-button-color); - background-color: var(--yt-button-background-color); + color: var(--yt-button-color); + background-color: var(--yt-button-background-color); } yt-button-renderer #button.yt-button-renderer { - color: var(--yt-button-color, inherit); - background-color: transparent; - text-transform: inherit; + color: var(--yt-button-color, inherit); + background-color: transparent; + text-transform: inherit; } button.yt-button-renderer, yt-icon-button.yt-button-renderer { - padding: 1px 6px; + padding: 1px 6px; } yt-icon-button.yt-button-renderer { - width: var(--yt-button-icon-size, 40px); - height: var(--yt-button-icon-size, 40px); - color: var(--yt-endpoint-color, var(--yt-luna-black)); + width: var(--yt-button-icon-size, 40px); + height: var(--yt-button-icon-size, 40px); + color: var(--yt-endpoint-color, var(--yt-luna-black)); } yt-icon-button.yt-button-renderer::-moz-focus-inner { - padding: 0; - margin: 0; - border: 0; + padding: 0; + margin: 0; + border: 0; } yt-icon-button.yt-button-renderer[disabled] { - color: var(--yt-button-disabled-color, rgba(17, 17, 17, 0.2)); + color: var(--yt-button-disabled-color, rgba(17, 17, 17, 0.2)); } yt-icon-button.yt-button-renderer { - line-height: 1; - padding: var(--yt-button-icon-padding, 8px); - width: var(--yt-button-icon-size, var(--yt-icon-width, 40px)); - height: var(--yt-button-icon-size, var(--yt-icon-height, 40px)); + line-height: 1; + padding: var(--yt-button-icon-padding, 8px); + width: var(--yt-button-icon-size, var(--yt-icon-width, 40px)); + height: var(--yt-button-icon-size, var(--yt-icon-height, 40px)); } yt-icon-button.yt-button-renderer > yt-icon.yt-button-renderer { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } #button.yt-button-renderer - yt-icon.yt-button-renderer - + yt-formatted-string.yt-button-renderer { - margin-left: var(--yt-string-icon-padding, 8px); + yt-icon.yt-button-renderer + + yt-formatted-string.yt-button-renderer { + margin-left: var(--yt-string-icon-padding, 8px); } #button.yt-button-renderer - yt-formatted-string.yt-button-renderer - + yt-icon.yt-button-renderer { - margin-left: var(--yt-button-icon-padding, 8px); + yt-formatted-string.yt-button-renderer + + yt-icon.yt-button-renderer { + margin-left: var(--yt-button-icon-padding, 8px); } yt-button-renderer[vertically-aligned] - #button.yt-button-renderer - yt-icon.yt-button-renderer - + yt-formatted-string.yt-button-renderer { - margin-left: 0; - margin-top: var(--yt-string-icon-padding, 4px); + #button.yt-button-renderer + yt-icon.yt-button-renderer + + yt-formatted-string.yt-button-renderer { + margin-left: 0; + margin-top: var(--yt-string-icon-padding, 4px); } yt-button-renderer[vertically-aligned] - #button.yt-button-renderer - yt-formatted-string.yt-button-renderer - + yt-icon.yt-button-renderer { - margin-left: 0; - margin-top: var(--yt-button-icon-padding, 4px); + #button.yt-button-renderer + yt-formatted-string.yt-button-renderer + + yt-icon.yt-button-renderer { + margin-left: 0; + margin-top: var(--yt-button-icon-padding, 4px); } paper-item.yt-live-chat-text-input-field-suggestion { - font-size: 15px; - min-height: 40px; - color: var(--yt-live-chat-text-input-field-suggestion-text-color, #666); - cursor: pointer; + font-size: 15px; + min-height: 40px; + color: var(--yt-live-chat-text-input-field-suggestion-text-color, #666); + cursor: pointer; } yt-live-chat-text-input-field-suggestion:hover - paper-item.yt-live-chat-text-input-field-suggestion, + paper-item.yt-live-chat-text-input-field-suggestion, yt-live-chat-text-input-field-suggestion[active] - paper-item.yt-live-chat-text-input-field-suggestion { - background-color: var( - --yt-live-chat-text-input-field-suggestion-background-color-hover, - #eee - ); - color: var( - --yt-live-chat-text-input-field-suggestion-text-color-hover, - #333 - ); + paper-item.yt-live-chat-text-input-field-suggestion { + background-color: var( + --yt-live-chat-text-input-field-suggestion-background-color-hover, + #eee + ); + color: var(--yt-live-chat-text-input-field-suggestion-text-color-hover, #333); } img.yt-live-chat-text-input-field-suggestion { - width: 24px; - height: 24px; - margin-right: 8px; - -ms-flex: var(--layout-flex-none_-_-ms-flex); - -webkit-flex: var(--layout-flex-none_-_-webkit-flex); - flex: var(--layout-flex-none_-_flex); + width: 24px; + height: 24px; + margin-right: 8px; + -ms-flex: var(--layout-flex-none_-_-ms-flex); + -webkit-flex: var(--layout-flex-none_-_-webkit-flex); + flex: var(--layout-flex-none_-_flex); } img.yt-live-chat-text-input-field-suggestion[author] { - border-radius: 12px; + border-radius: 12px; } yt-live-chat-text-input-field-renderer { - display: block; - position: relative; - font-size: 13px; - --yt-live-chat-text-input-field-placeholder-top: 0; - --yt-live-chat-text-input-field-placeholder-left: 0; - --yt-live-chat-text-input-field-white-space: initial; + display: block; + position: relative; + font-size: 13px; + --yt-live-chat-text-input-field-placeholder-top: 0; + --yt-live-chat-text-input-field-placeholder-left: 0; + --yt-live-chat-text-input-field-white-space: initial; } #label.yt-live-chat-text-input-field-renderer { - color: var( - --yt-live-chat-text-input-field-placeholder-color, - var(--yt-luna-black-opacity-lighten-2) - ); - position: absolute; - top: var(--yt-live-chat-text-input-field-placeholder-top); - left: var(--yt-live-chat-text-input-field-placeholder-left); - line-height: 18px; - padding: 2px 0; + color: var( + --yt-live-chat-text-input-field-placeholder-color, + var(--yt-luna-black-opacity-lighten-2) + ); + position: absolute; + top: var(--yt-live-chat-text-input-field-placeholder-top); + left: var(--yt-live-chat-text-input-field-placeholder-left); + line-height: 18px; + padding: 2px 0; } yt-live-chat-text-input-field-renderer[has-text] - #label.yt-live-chat-text-input-field-renderer { - display: none; + #label.yt-live-chat-text-input-field-renderer { + display: none; } #input.yt-live-chat-text-input-field-renderer { - position: relative; - min-height: 18px; - max-height: 100px; - overflow-y: auto; - overflow-x: hidden; - overflow-wrap: break-word; - outline: none; - word-break: break-word; - white-space: var(--yt-live-chat-text-input-field-white-space); - color: inherit; - line-height: 18px; - padding: 2px 0; + position: relative; + min-height: 18px; + max-height: 100px; + overflow-y: auto; + overflow-x: hidden; + overflow-wrap: break-word; + outline: none; + word-break: break-word; + white-space: var(--yt-live-chat-text-input-field-white-space); + color: inherit; + line-height: 18px; + padding: 2px 0; } #input.yt-live-chat-text-input-field-renderer::after { - content: ""; + content: ''; } #input.yt-live-chat-text-input-field-renderer - img.yt-live-chat-text-input-field-renderer { - width: 20px; - height: 20px; - margin: -5px 2px; + img.yt-live-chat-text-input-field-renderer { + width: 20px; + height: 20px; + margin: -5px 2px; } #underline.yt-live-chat-text-input-field-renderer { - position: relative; - height: 2px; + position: relative; + height: 2px; } #unfocused.yt-live-chat-text-input-field-renderer { - position: absolute; - top: 0; - left: 0; - right: 0; - height: 1px; - background-color: var( - --yt-live-chat-text-input-field-inactive-underline-color, - #b8b8b8 - ); + position: absolute; + top: 0; + left: 0; + right: 0; + height: 1px; + background-color: var( + --yt-live-chat-text-input-field-inactive-underline-color, + #b8b8b8 + ); } #focused.yt-live-chat-text-input-field-renderer { - position: absolute; - top: 0; - left: 0; - right: 0; - height: 2px; - background-color: var( - --yt-live-chat-text-input-field-active-underline-color, - var(--yt-blue) - ); - -webkit-transform-origin: center center; - transform-origin: center center; - -webkit-transform: scale3d(0, 1, 1); - transform: scale3d(0, 1, 1); - -webkit-transition: -webkit-transform; - -webkit-transition-duration: var( - --yt-live-chat-text-input-field-underline-transition-duration, - 0.25s - ); - transition: transform; - transition-duration: var( - --yt-live-chat-text-input-field-underline-transition-duration, - 0.25s - ); + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2px; + background-color: var( + --yt-live-chat-text-input-field-active-underline-color, + var(--yt-blue) + ); + -webkit-transform-origin: center center; + transform-origin: center center; + -webkit-transform: scale3d(0, 1, 1); + transform: scale3d(0, 1, 1); + -webkit-transition: -webkit-transform; + -webkit-transition-duration: var( + --yt-live-chat-text-input-field-underline-transition-duration, + 0.25s + ); + transition: transform; + transition-duration: var( + --yt-live-chat-text-input-field-underline-transition-duration, + 0.25s + ); } yt-live-chat-text-input-field-renderer[focused] - #focused.yt-live-chat-text-input-field-renderer { - -webkit-transform: none; - transform: none; + #focused.yt-live-chat-text-input-field-renderer { + -webkit-transform: none; + transform: none; } #dropdown.yt-live-chat-text-input-field-renderer { - background-color: var( - --yt-live-chat-text-input-field-suggestion-background-color, - #fff - ); - box-shadow: var(--shadow-elevation-2dp_-_box-shadow); + background-color: var( + --yt-live-chat-text-input-field-suggestion-background-color, + #fff + ); + box-shadow: var(--shadow-elevation-2dp_-_box-shadow); } #dropdown-content.yt-live-chat-text-input-field-renderer { - max-height: 200px; - padding: 8px 0; + max-height: 200px; + padding: 8px 0; } 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 - ); + 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; + 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: 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); + 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-paid-message-renderer[dashboard-money-feed] - #card.yt-live-chat-paid-message-renderer { - border-radius: 0; - box-shadow: none; + #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: 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); - border-top-left-radius: 4px; - border-top-right-radius: 4px; + 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: 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); + 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; + #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; + #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; + width: 40px; + height: 40px; } yt-icon#author-photo.yt-live-chat-paid-message-renderer { - display: none; + display: none; } yt-live-chat-paid-message-renderer[dashboard-money-feed] - yt-icon#author-photo.yt-live-chat-paid-message-renderer { - display: block; + yt-icon#author-photo.yt-live-chat-paid-message-renderer { + display: block; } #header-content.yt-live-chat-paid-message-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); + 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-paid-message-renderer[dashboard-money-feed] - #header-content.yt-live-chat-paid-message-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); + #header-content.yt-live-chat-paid-message-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); } #header-content-primary-column.yt-live-chat-paid-message-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); - -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); + 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); + -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); } yt-live-chat-paid-message-renderer[dashboard-money-feed] - #header-content-primary-column.yt-live-chat-paid-message-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-baseline_-_-ms-flex-align); - -webkit-align-items: var(--layout-baseline_-_-webkit-align-items); - align-items: var(--layout-baseline_-_align-items); - -ms-flex: var(--layout-flex-none_-_-ms-flex); - -webkit-flex: var(--layout-flex-none_-_-webkit-flex); - flex: var(--layout-flex-none_-_flex); + #header-content-primary-column.yt-live-chat-paid-message-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-baseline_-_-ms-flex-align); + -webkit-align-items: var(--layout-baseline_-_-webkit-align-items); + align-items: var(--layout-baseline_-_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-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; + 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; + #author-name.yt-live-chat-paid-message-renderer { + margin-right: 8px; } #currency-img.yt-live-chat-paid-message-renderer { - margin-right: 4px; + margin-right: 4px; } #purchase-amount-column.yt-live-chat-paid-message-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-align: var(--layout-center_-_-ms-flex-align); - -webkit-align-items: var(--layout-center_-_-webkit-align-items); - align-items: var(--layout-center_-_align-items); + 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-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: 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); + #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: 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); } 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); + #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].yt-live-chat-paid-message-renderer::before { - content: "​"; - display: inline; - width: 0; + #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; + 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% - ); + #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, + #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: var(--yt-live-chat-animation-duration, 0.2s); + #header.yt-live-chat-paid-message-renderer { + transition-property: background-color, color; + transition-duration: var(--yt-live-chat-animation-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; + 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; - vertical-align: middle; + 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; + 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); + #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; + #content.yt-live-chat-paid-message-renderer { + visibility: hidden; + padding: 0; } a.yt-live-chat-paid-message-renderer { - display: inline; - text-decoration: underline; + display: inline; + text-decoration: underline; } #message.yt-live-chat-paid-message-renderer - a.yt-live-chat-paid-message-renderer { - word-break: break-all; + 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 { + 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; + 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; + display: none; } #deleted-state.yt-live-chat-paid-message-renderer { - display: block; - font-style: italic; - opacity: 0.7; + 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; + #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: var(--layout-flex-none_-_-ms-flex); - -webkit-flex: var(--layout-flex-none_-_-webkit-flex); - flex: var(--layout-flex-none_-_flex); + #author-name.yt-live-chat-paid-message-renderer { + -ms-flex: var(--layout-flex-none_-_-ms-flex); + -webkit-flex: var(--layout-flex-none_-_-webkit-flex); + flex: var(--layout-flex-none_-_flex); } 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; + #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; + #footer.yt-live-chat-paid-message-renderer:not(:empty) { + padding-top: 8px; } #buy-flow-button.yt-live-chat-paid-message-renderer - yt-button-renderer.yt-live-chat-paid-message-renderer { - width: 100%; - text-align: center; - margin-top: 12px; - box-shadow: var(--shadow-elevation-2dp_-_box-shadow); + yt-button-renderer.yt-live-chat-paid-message-renderer { + width: 100%; + text-align: center; + margin-top: 12px; + box-shadow: var(--shadow-elevation-2dp_-_box-shadow); } #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; + 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; + display: block; + margin-right: 16px; - overflow: hidden; - border-radius: 50%; + 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); + -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-paid-message-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); + 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-paid-message-renderer { - position: absolute; - top: 0; - bottom: 0; - right: 0; + position: absolute; + top: 0; + bottom: 0; + right: 0; - transform: translateX(100px); + transform: translateX(100px); } yt-live-chat-paid-message-renderer:hover - #menu.yt-live-chat-paid-message-renderer, + #menu.yt-live-chat-paid-message-renderer, yt-live-chat-paid-message-renderer[menu-visible] - #menu.yt-live-chat-paid-message-renderer { - transform: none; + #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; + #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: 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); + 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-paid-message-renderer[has-inline-action-buttons]:hover - #inline-action-button-container.yt-live-chat-paid-message-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); + #inline-action-button-container.yt-live-chat-paid-message-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); + 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; + #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 - ); + #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, + > *.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; + > *.yt-live-chat-paid-message-renderer { + --yt-button-icon-size: 36px; + --yt-button-icon-padding: 6px; - color: var(--yt-white); - border-radius: 2px; + color: var(--yt-white); + border-radius: 2px; } #inline-action-buttons.yt-live-chat-paid-message-renderer - > *.yt-live-chat-paid-message-renderer { - background: var(--yt-luna-black-opacity-lighten-1); + > *.yt-live-chat-paid-message-renderer { + background: var(--yt-luna-black-opacity-lighten-1); } #inline-action-buttons.yt-live-chat-paid-message-renderer - > .yt-live-chat-paid-message-renderer:hover { - background: var(--yt-luna-black); + > .yt-live-chat-paid-message-renderer:hover { + background: var(--yt-luna-black); } #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 - ); + > *.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 - ); + > .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; + margin-left: 32px; } #inline-action-buttons.yt-live-chat-paid-message-renderer - > *.yt-live-chat-paid-message-renderer:not(:first-child), + > *.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:not(:first-child) { + margin-left: 8px; } yt-live-chat-dialog-renderer { - display: block; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: var(--yt-live-chat-overlay-color); - display: var(--layout-vertical_-_display, block); - -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); - -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); + display: block; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: var(--yt-live-chat-overlay-color); + display: var(--layout-vertical_-_display, block); + -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); + -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); } #inner.yt-live-chat-dialog-renderer { - max-width: calc(100% - 32px); - margin: 0 16px; - color: var(--yt-live-chat-primary-text-color); - background-color: var(--yt-live-chat-dialog-background-color); - border-radius: 4px; - box-shadow: var(--shadow-elevation-4dp_-_box-shadow); + max-width: calc(100% - 32px); + margin: 0 16px; + color: var(--yt-live-chat-primary-text-color); + background-color: var(--yt-live-chat-dialog-background-color); + border-radius: 4px; + box-shadow: var(--shadow-elevation-4dp_-_box-shadow); } #live-chat-dialog-title.yt-live-chat-dialog-renderer { - display: block; - font-size: 20px; - margin: 24px 24px 8px; + display: block; + font-size: 20px; + margin: 24px 24px 8px; } #live-chat-dialog-body.yt-live-chat-dialog-renderer { - margin: 16px 24px 0; - font-size: 14px; - color: var(--yt-live-chat-dialog-text-color); - line-height: 24px; + margin: 16px 24px 0; + font-size: 14px; + color: var(--yt-live-chat-dialog-text-color); + line-height: 24px; } #live-chat-dialog-body.yt-live-chat-dialog-renderer - yt-formatted-string.yt-live-chat-dialog-renderer { - display: block; - margin: 16px 0; + yt-formatted-string.yt-live-chat-dialog-renderer { + display: block; + margin: 16px 0; } #button.yt-live-chat-dialog-renderer { - margin: 8px; - font-size: 15px; - font-weight: 500; - 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); - -ms-flex-align: var(--layout-end_-_-ms-flex-align); - -webkit-align-items: var(--layout-end_-_-webkit-align-items); - align-items: var(--layout-end_-_align-items); + margin: 8px; + font-size: 15px; + font-weight: 500; + 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); + -ms-flex-align: var(--layout-end_-_-ms-flex-align); + -webkit-align-items: var(--layout-end_-_-webkit-align-items); + align-items: var(--layout-end_-_align-items); } yt-live-chat-error-message-renderer { - color: var(--yt-live-chat-error-message-color, #f44336); - 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); + color: var(--yt-live-chat-error-message-color, #f44336); + 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-icon-button.yt-live-chat-error-message-renderer { - margin-right: 8px; - -ms-flex: var(--layout-flex-none_-_-ms-flex); - -webkit-flex: var(--layout-flex-none_-_-webkit-flex); - flex: var(--layout-flex-none_-_flex); - 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); + margin-right: 8px; + -ms-flex: var(--layout-flex-none_-_-ms-flex); + -webkit-flex: var(--layout-flex-none_-_-webkit-flex); + flex: var(--layout-flex-none_-_flex); + 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); } yt-formatted-string.yt-live-chat-error-message-renderer { - -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: 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); } yt-live-chat-icon-toggle-button-renderer { - display: inline-block; + display: inline-block; } #button.yt-live-chat-icon-toggle-button-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); - position: relative; + 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); + position: relative; } #bubble.yt-live-chat-icon-toggle-button-renderer { - border-radius: 50%; - background-color: var(--yt-live-chat-monetization-button-glow, gold); - position: absolute; - width: 50px; - height: 50px; - top: -5px; - left: -5px; - transform: scale(0); - animation-duration: 1s; - animation-timing-function: ease-in; - animation-fill-mode: forwards; - animation-iteration-count: 5; + border-radius: 50%; + background-color: var(--yt-live-chat-monetization-button-glow, gold); + position: absolute; + width: 50px; + height: 50px; + top: -5px; + left: -5px; + transform: scale(0); + animation-duration: 1s; + animation-timing-function: ease-in; + animation-fill-mode: forwards; + animation-iteration-count: 5; } yt-live-chat-icon-toggle-button-renderer[bubble] - #bubble.yt-live-chat-icon-toggle-button-renderer { - animation-name: bubble; + #bubble.yt-live-chat-icon-toggle-button-renderer { + animation-name: bubble; } @keyframes bubble { - 0% { - transform: scale(0); - opacity: 100%; - } + 0% { + transform: scale(0); + opacity: 100%; + } - 70% { - opacity: 100%; - } + 70% { + opacity: 100%; + } - 100% { - transform: scale(1); - opacity: 0; - } + 100% { + transform: scale(1); + opacity: 0; + } } yt-live-chat-author-badge-renderer { - display: inline-block; + 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='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='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='member'] { + color: var(--yt-live-chat-sponsor-color, #107516); } -yt-live-chat-author-badge-renderer[type="verified"] { - color: var(--yt-live-chat-verified-color, #999); +yt-live-chat-author-badge-renderer[type='verified'] { + color: var(--yt-live-chat-verified-color, #999); } img.yt-live-chat-author-badge-renderer, yt-icon.yt-live-chat-author-badge-renderer { - display: block; - width: 16px; - height: 16px; + display: block; + width: 16px; + height: 16px; } yt-live-chat-author-chip { - display: var(--layout-inline_-_display); - -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); + display: var(--layout-inline_-_display); + -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); } #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; + 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); + padding: 2px 4px; + color: var(--yt-live-chat-author-chip-verified-text-color); + background-color: var(--yt-live-chat-author-chip-verified-background-color); } yt-live-chat-author-chip[show-unified-verified-badge] { - overflow: hidden; + overflow: hidden; } yt-live-chat-author-chip[show-unified-verified-badge] - #author-name.yt-live-chat-author-chip { - border-radius: 0px; - z-index: 1; - position: relative; - padding: 0 1px 0 4px; - color: var(--yt-live-chat-author-chip-verified-text-color); - margin-right: 9px; + #author-name.yt-live-chat-author-chip { + border-radius: 0px; + z-index: 1; + position: relative; + padding: 0 1px 0 4px; + color: var(--yt-live-chat-author-chip-verified-text-color); + margin-right: 9px; } yt-live-chat-author-chip[show-unified-verified-badge] - #author-name.yt-live-chat-author-chip::after { - background-color: var(--yt-live-chat-author-chip-verified-background-color); - content: ""; - position: absolute; - z-index: -1; - top: 0; - bottom: 0; - right: 0; - transform: skewX(-30deg); - transform-origin: bottom; - left: -9px; -} - -[dir="rtl"] - yt-live-chat-author-chip[show-unified-verified-badge] - #author-name.yt-live-chat-author-chip::after, -yt-live-chat-author-chip[dir="rtl"][show-unified-verified-badge] - #author-name.yt-live-chat-author-chip::after { - transform: skewX(30deg); + #author-name.yt-live-chat-author-chip::after { + background-color: var(--yt-live-chat-author-chip-verified-background-color); + content: ''; + position: absolute; + z-index: -1; + top: 0; + bottom: 0; + right: 0; + transform: skewX(-30deg); + transform-origin: bottom; + left: -9px; +} + +[dir='rtl'] + yt-live-chat-author-chip[show-unified-verified-badge] + #author-name.yt-live-chat-author-chip::after, +yt-live-chat-author-chip[dir='rtl'][show-unified-verified-badge] + #author-name.yt-live-chat-author-chip::after { + transform: skewX(30deg); } yt-live-chat-author-chip[is-highlighted] - #author-name.owner.yt-live-chat-author-chip, + #author-name.owner.yt-live-chat-author-chip, #author-name.owner.yt-live-chat-author-chip { - background-color: var(--yt-live-chat-author-chip-owner-background-color); - color: var(--yt-live-chat-author-chip-owner-text-color); + background-color: var(--yt-live-chat-author-chip-owner-background-color); + color: var(--yt-live-chat-author-chip-owner-text-color); } yt-live-chat-author-chip[is-highlighted][show-unified-verified-badge] - #author-name.owner.yt-live-chat-author-chip { - color: var(--yt-live-chat-author-chip-owner-text-color); + #author-name.owner.yt-live-chat-author-chip { + color: var(--yt-live-chat-author-chip-owner-text-color); } yt-live-chat-author-chip[is-highlighted][show-unified-verified-badge] - #author-name.owner.yt-live-chat-author-chip::after { - background-color: var(--yt-live-chat-author-chip-owner-background-color); + #author-name.owner.yt-live-chat-author-chip::after { + background-color: var(--yt-live-chat-author-chip-owner-background-color); } #author-name.moderator.yt-live-chat-author-chip { - color: var(--yt-live-chat-moderator-color); + color: var(--yt-live-chat-moderator-color); } #author-name.member.yt-live-chat-author-chip { - color: var(--yt-live-chat-sponsor-color); + color: var(--yt-live-chat-sponsor-color); } #chip-badges.yt-live-chat-author-chip:empty { - display: none; + display: none; } yt-live-chat-author-chip[is-highlighted] - #chat-badges.yt-live-chat-author-chip:not(:empty) { - margin-left: 1px; + #chat-badges.yt-live-chat-author-chip:not(:empty) { + margin-left: 1px; } yt-live-chat-author-chip[show-unified-verified-badge] - #chat-badges.yt-live-chat-author-chip:not(:empty) { - margin-left: -2px; + #chat-badges.yt-live-chat-author-chip:not(:empty) { + margin-left: -2px; } yt-live-chat-author-badge-renderer.yt-live-chat-author-chip { - margin: 0 0 0 2px; - vertical-align: sub; + 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 { + 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; + yt-live-chat-author-badge-renderer.yt-live-chat-author-chip:last-of-type { + margin-right: -2px; } 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; + 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; + 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); + 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; + #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); + 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); + #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.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); + 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); + #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); + #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; + width: 40px; + height: 40px; } yt-icon#author-photo.yt-live-chat-membership-item-renderer { - display: none; + display: none; } yt-live-chat-membership-item-renderer[dashboard-money-feed] - yt-icon#author-photo.yt-live-chat-membership-item-renderer { - display: block; + 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-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); + 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; + 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; + 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-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: white; + word-wrap: break-word; + word-break: break-word; + font-weight: 500; + color: white; } #header-primary-text.yt-live-chat-membership-item-renderer:empty { - display: none; + 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-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; + #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); + #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; + 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 { + 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; - vertical-align: middle; + 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; + vertical-align: middle; } yt-live-chat-membership-item-renderer[show-only-header] - #content.yt-live-chat-membership-item-renderer, + #content.yt-live-chat-membership-item-renderer, #deleted-state.yt-live-chat-membership-item-renderer:empty { - display: none; + display: none; } #deleted-state.yt-live-chat-membership-item-renderer { - display: block; - font-style: italic; - opacity: 0.7; + display: block; + font-style: italic; + opacity: 0.7; } a.yt-live-chat-membership-item-renderer { - display: inline; - text-decoration: underline; + display: inline; + text-decoration: underline; } #message.yt-live-chat-membership-item-renderer - a.yt-live-chat-membership-item-renderer { - word-break: break-all; + 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; + 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; + 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% - ); + #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% - ); + #menu.yt-live-chat-membership-item-renderer { + margin-top: 8px; + background: linear-gradient( + to right, + transparent, + var(--yt-live-chat-background-color) 40% + ); } #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; + 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; + display: block; + margin-right: 16px; - overflow: hidden; - border-radius: 50%; + 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); + -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); + 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; + position: absolute; + top: 0; + bottom: 0; + right: 0; - transform: translateX(100px); + transform: translateX(100px); } yt-live-chat-membership-item-renderer:hover - #menu.yt-live-chat-membership-item-renderer, + #menu.yt-live-chat-membership-item-renderer, yt-live-chat-membership-item-renderer[menu-visible] - #menu.yt-live-chat-membership-item-renderer { - transform: none; + #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; + #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); + 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); + #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); + 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; + #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 - ); + #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, + > *.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; + > *.yt-live-chat-membership-item-renderer { + --yt-button-icon-size: 36px; + --yt-button-icon-padding: 6px; - color: var(--yt-white); - border-radius: 2px; + 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); + > *.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); + > .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 - ); + > *.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 - ); + > .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; + margin-left: 32px; } #inline-action-buttons.yt-live-chat-membership-item-renderer - > *.yt-live-chat-membership-item-renderer:not(:first-child), + > *.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:not(:first-child) { + margin-left: 8px; } yt-emoji-picker-category-button-renderer { - display: inline-block; - color: var( - --yt-emoji-picker-category-button-color, - var(--yt-live-chat-tertiary-text-color, var(--yt-icon-color)) - ); + display: inline-block; + color: var( + --yt-emoji-picker-category-button-color, + var(--yt-live-chat-tertiary-text-color, var(--yt-icon-color)) + ); } yt-emoji-picker-category-button-renderer[active] { - color: var(--yt-live-chat-primary-text-color, var(--yt-icon-active-color)); + color: var(--yt-live-chat-primary-text-color, var(--yt-icon-active-color)); } yt-icon-button.yt-emoji-picker-category-button-renderer { - width: 18px; - height: 18px; - margin: 4px; + width: 18px; + height: 18px; + margin: 4px; } #button.yt-emoji-picker-category-button-renderer > paper-tooltip { - white-space: nowrap; + white-space: nowrap; } yt-emoji-picker-category-renderer { - display: block; + display: block; - z-index: 0; + z-index: 0; - margin-left: var(--yt-emoji-picker-category-margin-left); + margin-left: var(--yt-emoji-picker-category-margin-left); - outline: none; + outline: none; } #emoji.yt-emoji-picker-category-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-wrap: var(--layout-wrap_-_-ms-flex-wrap); - -webkit-flex-wrap: var(--layout-wrap_-_-webkit-flex-wrap); - flex-wrap: var(--layout-wrap_-_flex-wrap); + 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-wrap: var(--layout-wrap_-_-ms-flex-wrap); + -webkit-flex-wrap: var(--layout-wrap_-_-webkit-flex-wrap); + flex-wrap: var(--layout-wrap_-_flex-wrap); - contain: content; + contain: content; } #title.yt-emoji-picker-category-renderer { - position: sticky; - top: 0; + position: sticky; + top: 0; - display: block; + display: block; - background-color: var(--yt-emoji-picker-category-background-color); - color: var(--yt-emoji-picker-category-color); - line-height: 16px; - font-size: 13px; - font-weight: 500; - letter-spacing: 0.5px; - text-transform: uppercase; + background-color: var(--yt-emoji-picker-category-background-color); + color: var(--yt-emoji-picker-category-color); + line-height: 16px; + font-size: 13px; + font-weight: 500; + letter-spacing: 0.5px; + text-transform: uppercase; - pointer-events: none; + pointer-events: none; - padding: 2px; + padding: 2px; - z-index: 1; + z-index: 1; } img.yt-emoji-picker-category-renderer { - border-radius: 2px; - padding: 4px; - cursor: pointer; + border-radius: 2px; + padding: 4px; + cursor: pointer; } img.yt-emoji-picker-category-renderer:hover, -img.yt-emoji-picker-category-renderer[aria-selected="true"] { - background-color: rgba(0, 0, 0, 0.1); +img.yt-emoji-picker-category-renderer[aria-selected='true'] { + background-color: rgba(0, 0, 0, 0.1); } yt-emoji-picker-upsell-category-renderer { - display: block; + display: block; - z-index: 0; + z-index: 0; - margin-left: var(--yt-emoji-picker-category-margin-left); + margin-left: var(--yt-emoji-picker-category-margin-left); - outline: none; + outline: none; } #emoji.yt-emoji-picker-upsell-category-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-wrap: var(--layout-wrap_-_-ms-flex-wrap); - -webkit-flex-wrap: var(--layout-wrap_-_-webkit-flex-wrap); - flex-wrap: var(--layout-wrap_-_flex-wrap); + 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-wrap: var(--layout-wrap_-_-ms-flex-wrap); + -webkit-flex-wrap: var(--layout-wrap_-_-webkit-flex-wrap); + flex-wrap: var(--layout-wrap_-_flex-wrap); } #title.yt-emoji-picker-upsell-category-renderer { - display: block; - position: relative; + display: block; + position: relative; - background-color: var(--yt-emoji-picker-category-background-color); - color: var(--yt-emoji-picker-category-color); - line-height: 16px; - font-size: 13px; - font-weight: 500; - letter-spacing: 0.5px; - text-transform: uppercase; + background-color: var(--yt-emoji-picker-category-background-color); + color: var(--yt-emoji-picker-category-color); + line-height: 16px; + font-size: 13px; + font-weight: 500; + letter-spacing: 0.5px; + text-transform: uppercase; - pointer-events: none; + pointer-events: none; - padding: 2px; + padding: 2px; - z-index: 1; + z-index: 1; } img.yt-emoji-picker-upsell-category-renderer { - width: 24px; - height: 24px; - padding: 4px; - opacity: 0.9; - cursor: pointer; + width: 24px; + height: 24px; + padding: 4px; + opacity: 0.9; + cursor: pointer; } img.yt-emoji-picker-upsell-category-renderer:hover, -img.yt-emoji-picker-upsell-category-renderer[aria-selected="true"] { - background-color: rgba(0, 0, 0, 0.1); - border-radius: 2px; +img.yt-emoji-picker-upsell-category-renderer[aria-selected='true'] { + background-color: rgba(0, 0, 0, 0.1); + border-radius: 2px; } svg.yt-emoji-picker-upsell-category-renderer { - position: relative; - width: 12px; - height: 12px; - margin-left: -12px; - fill: var(--yt-live-chat-primary-text-color); - pointer-events: none; + position: relative; + width: 12px; + height: 12px; + margin-left: -12px; + fill: var(--yt-live-chat-primary-text-color); + pointer-events: none; } path#lock-border.yt-emoji-picker-upsell-category-renderer { - fill: var(--yt-emoji-picker-category-background-color); + fill: var(--yt-emoji-picker-category-background-color); } yt-emoji-picker-renderer { - position: relative; - - 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); - - height: var(--yt-emoji-picker-renderer-height, 220px); - max-width: var(--yt-emoji-picker-renderer-max-width, none); - - --paper-input-container_-_padding: 0; - --paper-input-container_-_height: 24px; - --paper-input-container-input_-_font-size: 13px; - --paper-input-container-input_-_color: var( - --yt-emoji-picker-search-color, - var(--yt-luna-black-opacity-lighten-1) - ); - --paper-input-container-input_-_height: 24px; - --paper-input-container-input_-_text-align: initial; - --paper-input-container-input_-_overflow: initial; - --paper-input-container-input_-_white-space: initial; - --paper-input-container-input_-_text-overflow: initial; - --paper-input-container-input_-_max-width: initial; - --paper-input-container-input_-_box-sizing: initial; - --paper-input-container-input_-_cursor: initial; - --paper-input-container-input_-_font-weight: initial; - --paper-input-container-input_-_line-height: initial; - --paper-input-container-input_-_letter-spacing: initial; - --paper-input-container-input_-_padding: initial; - --paper-input-container-color: var( - --yt-emoji-picker-search-placeholder-color, - var(--yt-luna-black-opacity-lighten-3) - ); - --paper-input-container-underline-focus_-_display: none; - --paper-input-container-underline-disabled_-_display: none; - --paper-input-container-underline_-_display: none; - --paper-input-container-underline_-_background: initial; - --paper-input-container-ms-clear_-_display: none; + position: relative; + + 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); + + height: var(--yt-emoji-picker-renderer-height, 220px); + max-width: var(--yt-emoji-picker-renderer-max-width, none); + + --paper-input-container_-_padding: 0; + --paper-input-container_-_height: 24px; + --paper-input-container-input_-_font-size: 13px; + --paper-input-container-input_-_color: var( + --yt-emoji-picker-search-color, + var(--yt-luna-black-opacity-lighten-1) + ); + --paper-input-container-input_-_height: 24px; + --paper-input-container-input_-_text-align: initial; + --paper-input-container-input_-_overflow: initial; + --paper-input-container-input_-_white-space: initial; + --paper-input-container-input_-_text-overflow: initial; + --paper-input-container-input_-_max-width: initial; + --paper-input-container-input_-_box-sizing: initial; + --paper-input-container-input_-_cursor: initial; + --paper-input-container-input_-_font-weight: initial; + --paper-input-container-input_-_line-height: initial; + --paper-input-container-input_-_letter-spacing: initial; + --paper-input-container-input_-_padding: initial; + --paper-input-container-color: var( + --yt-emoji-picker-search-placeholder-color, + var(--yt-luna-black-opacity-lighten-3) + ); + --paper-input-container-underline-focus_-_display: none; + --paper-input-container-underline-disabled_-_display: none; + --paper-input-container-underline_-_display: none; + --paper-input-container-underline_-_background: initial; + --paper-input-container-ms-clear_-_display: none; } input.yt-emoji-picker-renderer::-ms-clear { - display: none; + display: none; } #search-panel.yt-emoji-picker-renderer, #search-empty.yt-emoji-picker-renderer, #category-buttons.yt-emoji-picker-renderer { - margin: var(--yt-emoji-picker-renderer-content_-_margin); + margin: var(--yt-emoji-picker-renderer-content_-_margin); } #categories.yt-emoji-picker-renderer, #search-category.yt-emoji-picker-renderer { - overflow: auto; + overflow: auto; - min-height: 0; + min-height: 0; } #search-category.yt-emoji-picker-renderer { - margin-top: 8px; + margin-top: 8px; } #categories-wrapper.yt-emoji-picker-renderer { - margin-top: 8px; + margin-top: 8px; - position: relative; + position: relative; - min-height: 0; + min-height: 0; - 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); - -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); + 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); + -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); } yt-emoji-picker-category-button-renderer.yt-emoji-picker-renderer:only-child { - display: none; + display: none; } #categories.yt-emoji-picker-renderer - > *.yt-emoji-picker-renderer:not(:first-child) { - margin-top: 8px; + > *.yt-emoji-picker-renderer:not(:first-child) { + margin-top: 8px; } #category-buttons.yt-emoji-picker-renderer { - margin-top: 8px; - color: var(--yt-luna-black-opacity-lighten-3); - - 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-center-justified_-_-ms-flex-pack); - -webkit-justify-content: var( - --layout-center-justified_-_-webkit-justify-content - ); - justify-content: var(--layout-center-justified_-_justify-content); - -ms-flex-wrap: var(--layout-wrap_-_-ms-flex-wrap); - -webkit-flex-wrap: var(--layout-wrap_-_-webkit-flex-wrap); - flex-wrap: var(--layout-wrap_-_flex-wrap); - -ms-flex: var(--layout-flex-none_-_-ms-flex); - -webkit-flex: var(--layout-flex-none_-_-webkit-flex); - flex: var(--layout-flex-none_-_flex); + margin-top: 8px; + color: var(--yt-luna-black-opacity-lighten-3); + + 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-center-justified_-_-ms-flex-pack); + -webkit-justify-content: var( + --layout-center-justified_-_-webkit-justify-content + ); + justify-content: var(--layout-center-justified_-_justify-content); + -ms-flex-wrap: var(--layout-wrap_-_-ms-flex-wrap); + -webkit-flex-wrap: var(--layout-wrap_-_-webkit-flex-wrap); + flex-wrap: var(--layout-wrap_-_flex-wrap); + -ms-flex: var(--layout-flex-none_-_-ms-flex); + -webkit-flex: var(--layout-flex-none_-_-webkit-flex); + flex: var(--layout-flex-none_-_flex); } #search-panel.yt-emoji-picker-renderer { - background-color: var( - --yt-emoji-picker-search-background-color, - var(--yt-white-opacity-lighten-2) - ); - padding: 4px 8px; - border-radius: 4px; - font-size: 12px; - color: var(--yt-luna-black-opacity-lighten-2); - - -ms-flex: var(--layout-flex-none_-_-ms-flex); - -webkit-flex: var(--layout-flex-none_-_-webkit-flex); - flex: var(--layout-flex-none_-_flex); - 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); + background-color: var( + --yt-emoji-picker-search-background-color, + var(--yt-white-opacity-lighten-2) + ); + padding: 4px 8px; + border-radius: 4px; + font-size: 12px; + color: var(--yt-luna-black-opacity-lighten-2); + + -ms-flex: var(--layout-flex-none_-_-ms-flex); + -webkit-flex: var(--layout-flex-none_-_-webkit-flex); + flex: var(--layout-flex-none_-_flex); + 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); } #search.yt-emoji-picker-renderer { - -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: 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); } #clear-search.yt-emoji-picker-renderer { - width: 18px; - height: 18px; - color: var(--yt-live-chat-primary-text-color); + width: 18px; + height: 18px; + color: var(--yt-live-chat-primary-text-color); } #search-empty.yt-emoji-picker-renderer { - color: var(--yt-primary-text-color); + color: var(--yt-primary-text-color); } #skin-tone.yt-emoji-picker-renderer { - margin-left: 12px; - position: relative; + margin-left: 12px; + position: relative; - -ms-flex: var(--layout-flex-none_-_-ms-flex); - -webkit-flex: var(--layout-flex-none_-_-webkit-flex); - flex: var(--layout-flex-none_-_flex); + -ms-flex: var(--layout-flex-none_-_-ms-flex); + -webkit-flex: var(--layout-flex-none_-_-webkit-flex); + flex: var(--layout-flex-none_-_flex); } button.yt-emoji-picker-renderer { - width: 16px; - height: 16px; - padding: 0; - background-color: transparent; - border: 2px solid; - border-radius: 4px; - cursor: pointer; + width: 16px; + height: 16px; + padding: 0; + background-color: transparent; + border: 2px solid; + border-radius: 4px; + cursor: pointer; } button.yt-emoji-picker-renderer + button.yt-emoji-picker-renderer { - margin-left: 4px; + margin-left: 4px; } -button.yt-emoji-picker-renderer[tone="0"] { - border-color: #fcc21b; +button.yt-emoji-picker-renderer[tone='0'] { + border-color: #fcc21b; } -button.yt-emoji-picker-renderer[tone="1"] { - border-color: #fadcbc; +button.yt-emoji-picker-renderer[tone='1'] { + border-color: #fadcbc; } -button.yt-emoji-picker-renderer[tone="2"] { - border-color: #e0bb95; +button.yt-emoji-picker-renderer[tone='2'] { + border-color: #e0bb95; } -button.yt-emoji-picker-renderer[tone="3"] { - border-color: #bf8f68; +button.yt-emoji-picker-renderer[tone='3'] { + border-color: #bf8f68; } -button.yt-emoji-picker-renderer[tone="4"] { - border-color: #9b643d; +button.yt-emoji-picker-renderer[tone='4'] { + border-color: #9b643d; } -button.yt-emoji-picker-renderer[tone="5"] { - border-color: #594539; +button.yt-emoji-picker-renderer[tone='5'] { + border-color: #594539; } -button.yt-emoji-picker-renderer[tone="0"].yt-emoji-picker-renderer[selected] { - background-color: #fcc21b; +button.yt-emoji-picker-renderer[tone='0'].yt-emoji-picker-renderer[selected] { + background-color: #fcc21b; } -button.yt-emoji-picker-renderer[tone="1"].yt-emoji-picker-renderer[selected] { - background-color: #fadcbc; +button.yt-emoji-picker-renderer[tone='1'].yt-emoji-picker-renderer[selected] { + background-color: #fadcbc; } -button.yt-emoji-picker-renderer[tone="2"].yt-emoji-picker-renderer[selected] { - background-color: #e0bb95; +button.yt-emoji-picker-renderer[tone='2'].yt-emoji-picker-renderer[selected] { + background-color: #e0bb95; } -button.yt-emoji-picker-renderer[tone="3"].yt-emoji-picker-renderer[selected] { - background-color: #bf8f68; +button.yt-emoji-picker-renderer[tone='3'].yt-emoji-picker-renderer[selected] { + background-color: #bf8f68; } -button.yt-emoji-picker-renderer[tone="4"].yt-emoji-picker-renderer[selected] { - background-color: #9b643d; +button.yt-emoji-picker-renderer[tone='4'].yt-emoji-picker-renderer[selected] { + background-color: #9b643d; } -button.yt-emoji-picker-renderer[tone="5"].yt-emoji-picker-renderer[selected] { - background-color: #594539; +button.yt-emoji-picker-renderer[tone='5'].yt-emoji-picker-renderer[selected] { + background-color: #594539; } yt-emoji-picker-renderer[searching] - #categories-wrapper.yt-emoji-picker-renderer { - display: none; + #categories-wrapper.yt-emoji-picker-renderer { + display: none; } yt-emoji-picker-renderer:not([searching]) - #search-category.yt-emoji-picker-renderer { - display: none; + #search-category.yt-emoji-picker-renderer { + display: none; } - yt-live-chat-paid-sticker-renderer { - display: block; - position: relative; - --yt-live-chat-paid-sticker-container-loaded-style_-_background-color: transparent; - --yt-live-chat-paid-sticker-container-loaded-style_-_opacity: 1; - --yt-live-chat-item-timestamp-display: none; + display: block; + position: relative; + --yt-live-chat-paid-sticker-container-loaded-style_-_background-color: transparent; + --yt-live-chat-paid-sticker-container-loaded-style_-_opacity: 1; + --yt-live-chat-item-timestamp-display: none; } yt-live-chat-paid-sticker-renderer[dashboard-money-feed] { - --yt-pdg-paid-stickers-margin-left: 56px; + --yt-pdg-paid-stickers-margin-left: 56px; } yt-live-chat-paid-sticker-renderer:not([dashboard-money-feed]) - #card.yt-live-chat-paid-sticker-renderer { - position: relative; - border-radius: 4px; - padding: 8px; - padding-left: 16px; - background-color: var(--yt-live-chat-paid-sticker-background-color); - 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); - box-shadow: var(--shadow-elevation-2dp_-_box-shadow); + #card.yt-live-chat-paid-sticker-renderer { + position: relative; + border-radius: 4px; + padding: 8px; + padding-left: 16px; + background-color: var(--yt-live-chat-paid-sticker-background-color); + 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); + box-shadow: var(--shadow-elevation-2dp_-_box-shadow); } yt-live-chat-paid-sticker-renderer:not([dashboard-money-feed]) - #menu.yt-live-chat-paid-sticker-renderer { - background: linear-gradient( - to right, - transparent, - var(--yt-live-chat-paid-sticker-background-color) 100% - ); - border-radius: 0 4px 4px 0; - color: var(--yt-live-chat-paid-sticker-chip-text-color); + #menu.yt-live-chat-paid-sticker-renderer { + background: linear-gradient( + to right, + transparent, + var(--yt-live-chat-paid-sticker-background-color) 100% + ); + border-radius: 0 4px 4px 0; + color: var(--yt-live-chat-paid-sticker-chip-text-color); } yt-live-chat-paid-sticker-renderer[dashboard-money-feed] - #menu.yt-live-chat-paid-sticker-renderer { - color: var(--yt-live-chat-secondary-text-color); - margin: 8px 0; - background: linear-gradient( - to right, - transparent, - var(--yt-live-chat-background-color) 40% - ); + #menu.yt-live-chat-paid-sticker-renderer { + color: var(--yt-live-chat-secondary-text-color); + margin: 8px 0; + background: linear-gradient( + to right, + transparent, + var(--yt-live-chat-background-color) 40% + ); } #author-name.yt-live-chat-paid-sticker-renderer { - margin-right: 8px; - display: block; - font-weight: 500; - color: var(--yt-live-chat-secondary-text-color); - -webkit-line-clamp: 1; - overflow: hidden; - -webkit-box-orient: var(--yt-multi-line-ellipsis_-_-webkit-box-orient); - text-overflow: var(--yt-multi-line-ellipsis_-_text-overflow); - white-space: var(--yt-multi-line-ellipsis_-_white-space); - display: var(--yt-multi-line-ellipsis_-_display, block); + margin-right: 8px; + display: block; + font-weight: 500; + color: var(--yt-live-chat-secondary-text-color); + -webkit-line-clamp: 1; + overflow: hidden; + -webkit-box-orient: var(--yt-multi-line-ellipsis_-_-webkit-box-orient); + text-overflow: var(--yt-multi-line-ellipsis_-_text-overflow); + white-space: var(--yt-multi-line-ellipsis_-_white-space); + display: var(--yt-multi-line-ellipsis_-_display, block); } yt-live-chat-paid-sticker-renderer:not([dashboard-money-feed]) - #author-name.yt-live-chat-paid-sticker-renderer { - color: var(--yt-live-chat-paid-sticker-author-name-text-color); + #author-name.yt-live-chat-paid-sticker-renderer { + color: var(--yt-live-chat-paid-sticker-author-name-text-color); } #author-info.yt-live-chat-paid-sticker-renderer { - font-size: var(--yt-pdg-paid-stickers-author-name-font-size); - 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-start_-_-ms-flex-align); - -webkit-align-items: var(--layout-start_-_-webkit-align-items); - align-items: var(--layout-start_-_align-items); + font-size: var(--yt-pdg-paid-stickers-author-name-font-size); + 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-start_-_-ms-flex-align); + -webkit-align-items: var(--layout-start_-_-webkit-align-items); + align-items: var(--layout-start_-_align-items); } yt-live-chat-paid-sticker-renderer:not([dashboard-money-feed]) - #author-info.yt-live-chat-paid-sticker-renderer { - max-height: 40px; + #author-info.yt-live-chat-paid-sticker-renderer { + max-height: 40px; } #author-info.yt-live-chat-paid-sticker-renderer:focus { - outline: none; + outline: none; } yt-live-chat-paid-sticker-renderer:not([dashboard-money-feed]) - #price-column.yt-live-chat-paid-sticker-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-align-self: var(--layout-self-center_-_-ms-align-self); - -webkit-align-self: var(--layout-self-center_-_-webkit-align-self); - align-self: var(--layout-self-center_-_align-self); + #price-column.yt-live-chat-paid-sticker-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-align-self: var(--layout-self-center_-_-ms-align-self); + -webkit-align-self: var(--layout-self-center_-_-webkit-align-self); + align-self: var(--layout-self-center_-_align-self); } #purchase-amount-chip.yt-live-chat-paid-sticker-renderer { - height: 18px; - border-radius: 12px; - color: var(--yt-live-chat-paid-sticker-chip-text-color); - font-size: var(--ytd-badge_-_font-size); - font-weight: var(--ytd-badge_-_font-weight); - line-height: var(--ytd-badge_-_line-height); - display: var(--layout-inline_-_display); - -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); + height: 18px; + border-radius: 12px; + color: var(--yt-live-chat-paid-sticker-chip-text-color); + font-size: var(--ytd-badge_-_font-size); + font-weight: var(--ytd-badge_-_font-weight); + line-height: var(--ytd-badge_-_line-height); + display: var(--layout-inline_-_display); + -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-paid-sticker-renderer[dashboard-money-feed] - #purchase-amount-chip.yt-live-chat-paid-sticker-renderer { - height: 24px; - margin-right: var(--ytd-margin-2x); - padding: 0 12px; - background-color: var(--yt-live-chat-paid-sticker-chip-background-color); + #purchase-amount-chip.yt-live-chat-paid-sticker-renderer { + height: 24px; + margin-right: var(--ytd-margin-2x); + padding: 0 12px; + background-color: var(--yt-live-chat-paid-sticker-chip-background-color); } yt-live-chat-paid-sticker-renderer:not([dashboard-money-feed]) - #purchase-amount-chip.yt-live-chat-paid-sticker-renderer { - font-size: 15px; - padding-right: 8px; + #purchase-amount-chip.yt-live-chat-paid-sticker-renderer { + font-size: 15px; + padding-right: 8px; } #sticker-container.yt-live-chat-paid-sticker-renderer { - display: flex; - align-items: center; - flex-shrink: 0; - background-color: var(--yt-spec-text-primary); - opacity: 0.1; - margin-left: var(--yt-pdg-paid-stickers-margin-left); - margin-top: 4px; + display: flex; + align-items: center; + flex-shrink: 0; + background-color: var(--yt-spec-text-primary); + opacity: 0.1; + margin-left: var(--yt-pdg-paid-stickers-margin-left); + margin-top: 4px; } yt-live-chat-paid-sticker-renderer:not([dashboard-money-feed]) - #sticker-container.yt-live-chat-paid-sticker-renderer { - margin: 0; - margin-left: auto; + #sticker-container.yt-live-chat-paid-sticker-renderer { + margin: 0; + margin-left: auto; } #sticker-container.sticker-loaded.yt-live-chat-paid-sticker-renderer { - background-color: var( - --yt-live-chat-paid-sticker-container-loaded-style_-_background-color - ); - opacity: var(--yt-live-chat-paid-sticker-container-loaded-style_-_opacity); + background-color: var( + --yt-live-chat-paid-sticker-container-loaded-style_-_background-color + ); + opacity: var(--yt-live-chat-paid-sticker-container-loaded-style_-_opacity); } #sticker.yt-live-chat-paid-sticker-renderer:focus { - outline: none; + outline: none; } #dashboard-deleted-state.yt-live-chat-paid-sticker-renderer[is-deleted], #deleted-state.yt-live-chat-paid-sticker-renderer[is-deleted] { - font-style: italic; + font-style: italic; } #deleted-state.yt-live-chat-paid-sticker-renderer[is-deleted] { - color: var(--yt-live-chat-paid-sticker-chip-text-color); - font-size: 13px; - opacity: 0.7; - display: none; + color: var(--yt-live-chat-paid-sticker-chip-text-color); + font-size: 13px; + opacity: 0.7; + display: none; } #dashboard-deleted-state.yt-live-chat-paid-sticker-renderer[is-deleted] { - color: var(--yt-live-chat-secondary-text-color); - font-size: 12px; - opacity: 0.7; - display: none; + color: var(--yt-live-chat-secondary-text-color); + font-size: 12px; + opacity: 0.7; + display: none; } yt-live-chat-paid-sticker-renderer:not([dashboard-money-feed]) - #deleted-state.yt-live-chat-paid-sticker-renderer[is-deleted] { - max-height: 1.4em; - margin: 0; - -webkit-line-clamp: 1; - overflow: hidden; - -ms-align-self: var(--layout-self-center_-_-ms-align-self); - -webkit-align-self: var(--layout-self-center_-_-webkit-align-self); - align-self: var(--layout-self-center_-_align-self); - -webkit-box-orient: var(--yt-multi-line-ellipsis_-_-webkit-box-orient); - text-overflow: var(--yt-multi-line-ellipsis_-_text-overflow); - white-space: var(--yt-multi-line-ellipsis_-_white-space); - display: var(--yt-multi-line-ellipsis_-_display); + #deleted-state.yt-live-chat-paid-sticker-renderer[is-deleted] { + max-height: 1.4em; + margin: 0; + -webkit-line-clamp: 1; + overflow: hidden; + -ms-align-self: var(--layout-self-center_-_-ms-align-self); + -webkit-align-self: var(--layout-self-center_-_-webkit-align-self); + align-self: var(--layout-self-center_-_align-self); + -webkit-box-orient: var(--yt-multi-line-ellipsis_-_-webkit-box-orient); + text-overflow: var(--yt-multi-line-ellipsis_-_text-overflow); + white-space: var(--yt-multi-line-ellipsis_-_white-space); + display: var(--yt-multi-line-ellipsis_-_display); } yt-live-chat-paid-sticker-renderer[dashboard-money-feed] - #dashboard-deleted-state.yt-live-chat-paid-sticker-renderer[is-deleted] { - margin-top: 4px; - margin-left: var(--yt-pdg-paid-stickers-margin-left); - display: block; + #dashboard-deleted-state.yt-live-chat-paid-sticker-renderer[is-deleted] { + margin-top: 4px; + margin-left: var(--yt-pdg-paid-stickers-margin-left); + display: block; } #content.yt-live-chat-paid-sticker-renderer { - -ms-align-self: var(--layout-self-center_-_-ms-align-self); - -webkit-align-self: var(--layout-self-center_-_-webkit-align-self); - align-self: var(--layout-self-center_-_align-self); + -ms-align-self: var(--layout-self-center_-_-ms-align-self); + -webkit-align-self: var(--layout-self-center_-_-webkit-align-self); + align-self: var(--layout-self-center_-_align-self); } yt-live-chat-paid-sticker-renderer[dashboard-money-feed] - #content.yt-live-chat-paid-sticker-renderer { - padding: 0; - color: rgba(0, 0, 0, 0.87); - -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-pack: var(--layout-justified_-_-ms-flex-pack); - -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content); - justify-content: var(--layout-justified_-_justify-content); - display: var(--layout-vertical-reverse_-_display); - -ms-flex-direction: var(--layout-vertical-reverse_-_-ms-flex-direction); - -webkit-flex-direction: var( - --layout-vertical-reverse_-_-webkit-flex-direction - ); - flex-direction: var(--layout-vertical-reverse_-_flex-direction); - -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); + #content.yt-live-chat-paid-sticker-renderer { + padding: 0; + color: rgba(0, 0, 0, 0.87); + -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-pack: var(--layout-justified_-_-ms-flex-pack); + -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content); + justify-content: var(--layout-justified_-_justify-content); + display: var(--layout-vertical-reverse_-_display); + -ms-flex-direction: var(--layout-vertical-reverse_-_-ms-flex-direction); + -webkit-flex-direction: var( + --layout-vertical-reverse_-_-webkit-flex-direction + ); + flex-direction: var(--layout-vertical-reverse_-_flex-direction); + -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); } #content-primary-column.yt-live-chat-paid-sticker-renderer { - display: inline-block; + display: inline-block; } #sticker-icon.yt-live-chat-paid-sticker-renderer { - vertical-align: bottom; + vertical-align: bottom; } yt-live-chat-paid-sticker-renderer[dashboard-money-feed] - #content-primary-column.yt-live-chat-paid-sticker-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-baseline_-_-ms-flex-align); - -webkit-align-items: var(--layout-baseline_-_-webkit-align-items); - align-items: var(--layout-baseline_-_align-items); + #content-primary-column.yt-live-chat-paid-sticker-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-baseline_-_-ms-flex-align); + -webkit-align-items: var(--layout-baseline_-_-webkit-align-items); + align-items: var(--layout-baseline_-_align-items); } yt-live-chat-paid-sticker-renderer[dashboard-money-feed] - #timestamp.yt-live-chat-paid-sticker-renderer { - display: inline; - color: var(--yt-live-chat-tertiary-text-color); - font-size: 11px; - font-weight: 500; + #timestamp.yt-live-chat-paid-sticker-renderer { + display: inline; + color: var(--yt-live-chat-tertiary-text-color); + font-size: 11px; + font-weight: 500; } #timestamp.yt-live-chat-paid-sticker-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; + 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-sticker-renderer { - display: block; - margin-right: 16px; + display: block; + margin-right: 16px; - overflow: hidden; - border-radius: 50%; + 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); + -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-paid-sticker-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); + 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-paid-sticker-renderer { - position: absolute; - top: 0; - bottom: 0; - right: 0; + position: absolute; + top: 0; + bottom: 0; + right: 0; - transform: translateX(100px); + transform: translateX(100px); } yt-live-chat-paid-sticker-renderer:hover - #menu.yt-live-chat-paid-sticker-renderer, + #menu.yt-live-chat-paid-sticker-renderer, yt-live-chat-paid-sticker-renderer[menu-visible] - #menu.yt-live-chat-paid-sticker-renderer { - transform: none; + #menu.yt-live-chat-paid-sticker-renderer { + transform: none; } yt-live-chat-paid-sticker-renderer:focus-within - #menu.yt-live-chat-paid-sticker-renderer { - transform: none; + #menu.yt-live-chat-paid-sticker-renderer { + transform: none; } #inline-action-button-container.yt-live-chat-paid-sticker-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); + 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-paid-sticker-renderer[has-inline-action-buttons]:hover - #inline-action-button-container.yt-live-chat-paid-sticker-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); + #inline-action-button-container.yt-live-chat-paid-sticker-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); + display: var(--yt-live-chat-inline-action-button-container-display, none); } yt-live-chat-paid-sticker-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover - #inline-action-button-container.yt-live-chat-paid-sticker-renderer { - display: none; + #inline-action-button-container.yt-live-chat-paid-sticker-renderer { + display: none; } yt-live-chat-paid-sticker-renderer[has-inline-action-buttons]:hover - #menu.yt-live-chat-paid-sticker-renderer { - display: var( - --yt-live-chat-item-with-inline-actions-context-menu-display, - block - ); + #menu.yt-live-chat-paid-sticker-renderer { + display: var( + --yt-live-chat-item-with-inline-actions-context-menu-display, + block + ); } #inline-action-buttons.yt-live-chat-paid-sticker-renderer - > *.yt-live-chat-paid-sticker-renderer, + > *.yt-live-chat-paid-sticker-renderer, #additional-inline-action-buttons.yt-live-chat-paid-sticker-renderer - > *.yt-live-chat-paid-sticker-renderer { - --yt-button-icon-size: 36px; - --yt-button-icon-padding: 6px; + > *.yt-live-chat-paid-sticker-renderer { + --yt-button-icon-size: 36px; + --yt-button-icon-padding: 6px; - color: var(--yt-white); - border-radius: 2px; + color: var(--yt-white); + border-radius: 2px; } #inline-action-buttons.yt-live-chat-paid-sticker-renderer - > *.yt-live-chat-paid-sticker-renderer { - background: var(--yt-luna-black-opacity-lighten-1); + > *.yt-live-chat-paid-sticker-renderer { + background: var(--yt-luna-black-opacity-lighten-1); } #inline-action-buttons.yt-live-chat-paid-sticker-renderer - > .yt-live-chat-paid-sticker-renderer:hover { - background: var(--yt-luna-black); + > .yt-live-chat-paid-sticker-renderer:hover { + background: var(--yt-luna-black); } #additional-inline-action-buttons.yt-live-chat-paid-sticker-renderer - > *.yt-live-chat-paid-sticker-renderer { - color: var(--yt-live-chat-additional-inline-action-button-color); - background: var( - --yt-live-chat-additional-inline-action-button-background-color - ); + > *.yt-live-chat-paid-sticker-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-sticker-renderer - > .yt-live-chat-paid-sticker-renderer:hover { - background: var( - --yt-live-chat-additional-inline-action-button-background-color-hover - ); + > .yt-live-chat-paid-sticker-renderer:hover { + background: var( + --yt-live-chat-additional-inline-action-button-background-color-hover + ); } #additional-inline-action-buttons.yt-live-chat-paid-sticker-renderer:not(:empty) { - margin-left: 32px; + margin-left: 32px; } #inline-action-buttons.yt-live-chat-paid-sticker-renderer - > *.yt-live-chat-paid-sticker-renderer:not(:first-child), + > *.yt-live-chat-paid-sticker-renderer:not(:first-child), #additional-inline-action-buttons.yt-live-chat-paid-sticker-renderer - > *.yt-live-chat-paid-sticker-renderer:not(:first-child) { - margin-left: 8px; + > *.yt-live-chat-paid-sticker-renderer:not(:first-child) { + margin-left: 8px; } yt-live-chat-super-sticker-preview-renderer { - display: block; - background-color: var(--yt-live-chat-background-color); - font-size: 15px; + display: block; + background-color: var(--yt-live-chat-background-color); + font-size: 15px; } yt-live-chat-super-sticker-preview-renderer:focus { - outline: none; + outline: none; } h3.yt-live-chat-super-sticker-preview-renderer { - color: var(--yt-live-chat-primary-text-color); - font-size: 16px; - font-weight: normal; - display: inline-block; + color: var(--yt-live-chat-primary-text-color); + font-size: 16px; + font-weight: normal; + display: inline-block; } #close.yt-live-chat-super-sticker-preview-renderer { - margin-right: var(--ytd-margin-3x); - color: var(--yt-live-chat-icon-button-color); + margin-right: var(--ytd-margin-3x); + color: var(--yt-live-chat-icon-button-color); } #left.yt-live-chat-super-sticker-preview-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-align: var(--layout-center_-_-ms-flex-align); - -webkit-align-items: var(--layout-center_-_-webkit-align-items); - align-items: var(--layout-center_-_align-items); + 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); } #preview.yt-live-chat-super-sticker-preview-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); + 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); } #loading.yt-live-chat-super-sticker-preview-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); - -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); + 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); + -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); } #right.yt-live-chat-super-sticker-preview-renderer { - font-size: 12px; - color: var( - --yt-live-chat-secondary-text-color, - var(--yt-secondary-text-color) - ); - display: inline-block; - display: var(--layout-horizontal_-_display, inline-block); - -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); + font-size: 12px; + color: var( + --yt-live-chat-secondary-text-color, + var(--yt-secondary-text-color) + ); + display: inline-block; + display: var(--layout-horizontal_-_display, inline-block); + -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); } #right.yt-live-chat-super-sticker-preview-renderer - yt-icon.yt-live-chat-super-sticker-preview-renderer { - width: 16px; - height: 16px; - margin-right: 4px; + yt-icon.yt-live-chat-super-sticker-preview-renderer { + width: 16px; + height: 16px; + margin-right: 4px; } #header.yt-live-chat-super-sticker-preview-renderer { - padding: 12px 16px; - background-color: var(--yt-live-chat-header-background-color); - 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-pack: var(--layout-justified_-_-ms-flex-pack); - -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content); - justify-content: var(--layout-justified_-_justify-content); + padding: 12px 16px; + background-color: var(--yt-live-chat-header-background-color); + 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-pack: var(--layout-justified_-_-ms-flex-pack); + -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content); + justify-content: var(--layout-justified_-_justify-content); } yt-live-chat-paid-sticker-renderer.yt-live-chat-super-sticker-preview-renderer { - padding: 12px; - padding-bottom: 0; + padding: 12px; + padding-bottom: 0; } #footer.yt-live-chat-super-sticker-preview-renderer { - background-color: var(--yt-live-chat-background-color); - padding: 12px; - -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-pack: var(--layout-justified_-_-ms-flex-pack); - -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content); - justify-content: var(--layout-justified_-_justify-content); + background-color: var(--yt-live-chat-background-color); + padding: 12px; + -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-pack: var(--layout-justified_-_-ms-flex-pack); + -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content); + justify-content: var(--layout-justified_-_justify-content); } #buy-button.yt-live-chat-super-sticker-preview-renderer { - width: 100%; - margin: 0; - border-radius: 2px; - background-color: var(--yt-blue); - color: var(--yt-white); - font-size: 16px; - font-weight: 500; - display: inline-block; - text-align: center; + width: 100%; + margin: 0; + border-radius: 2px; + background-color: var(--yt-blue); + color: var(--yt-white); + font-size: 16px; + font-weight: 500; + display: inline-block; + text-align: center; } #back-button.yt-live-chat-super-sticker-preview-renderer { - width: 100%; - margin: 0; - background-color: var(--yt-live-chat-background-color); - color: var(--yt-blue); - font-size: 16px; - font-weight: 500; - display: inline-block; - text-align: center; + width: 100%; + margin: 0; + background-color: var(--yt-live-chat-background-color); + color: var(--yt-blue); + font-size: 16px; + font-weight: 500; + display: inline-block; + text-align: center; } #footer.yt-live-chat-super-sticker-preview-renderer - yt-button-renderer.yt-live-chat-super-sticker-preview-renderer { - width: 100%; + yt-button-renderer.yt-live-chat-super-sticker-preview-renderer { + width: 100%; } #error.yt-live-chat-super-sticker-preview-renderer { - font-size: 13px; - margin: 0 16px; + font-size: 13px; + margin: 0 16px; } yt-live-chat-paid-sticker-panel-renderer { - display: block; - background-color: var(--yt-live-chat-background-color); - position: relative; + display: block; + background-color: var(--yt-live-chat-background-color); + position: relative; } #header.yt-live-chat-paid-sticker-panel-renderer { - padding-top: 16px; - background-color: var( - --yt-live-chat-header-background-color, - var(--yt-opalescence-soft-grey-opacity-lighten-3) - ); - box-shadow: 0px 2px 2px 0px #c7c1c7; + padding-top: 16px; + background-color: var( + --yt-live-chat-header-background-color, + var(--yt-opalescence-soft-grey-opacity-lighten-3) + ); + box-shadow: 0px 2px 2px 0px #c7c1c7; } yt-icon.yt-live-chat-paid-sticker-panel-renderer { - color: var(--yt-live-chat-icon-button-color); + color: var(--yt-live-chat-icon-button-color); } #header-top.yt-live-chat-paid-sticker-panel-renderer { - display: var(--layout_-_display); - -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-align: var(--layout-center_-_-ms-flex-align); - -webkit-align-items: var(--layout-center_-_-webkit-align-items); - align-items: var(--layout-center_-_align-items); + display: var(--layout_-_display); + -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-align: var(--layout-center_-_-ms-flex-align); + -webkit-align-items: var(--layout-center_-_-webkit-align-items); + align-items: var(--layout-center_-_align-items); } #header-text.yt-live-chat-paid-sticker-panel-renderer { - color: var(--yt-live-chat-secondary-text-color); - font-size: 12px; + color: var(--yt-live-chat-secondary-text-color); + font-size: 12px; } h3.yt-live-chat-paid-sticker-panel-renderer { - color: var(--yt-live-chat-primary-text-color); - font-size: 16px; - font-weight: normal; + color: var(--yt-live-chat-primary-text-color); + font-size: 16px; + font-weight: normal; } #left.yt-live-chat-paid-sticker-panel-renderer { - display: var(--layout_-_display); - -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); + display: var(--layout_-_display); + -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); } #header-bottom.yt-live-chat-paid-sticker-panel-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-align: var(--layout-center_-_-ms-flex-align); - -webkit-align-items: var(--layout-center_-_-webkit-align-items); - align-items: var(--layout-center_-_align-items); + 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); } #header-bottom.yt-live-chat-paid-sticker-panel-renderer[is-at-front] { - margin-left: 24px; + margin-left: 24px; } #header-bottom.yt-live-chat-paid-sticker-panel-renderer[is-at-back] { - margin-right: 24px; + margin-right: 24px; } yt-icon-button.yt-live-chat-paid-sticker-panel-renderer { - width: 40px; - height: 48px; + width: 40px; + height: 48px; } yt-icon-button.yt-live-chat-paid-sticker-panel-renderer[disabled] { - cursor: default; + cursor: default; } #scroll-back-button.yt-live-chat-paid-sticker-panel-renderer { - padding: 0 4px 0 8px; - left: 0; + padding: 0 4px 0 8px; + left: 0; } #scroll-forward-button.yt-live-chat-paid-sticker-panel-renderer { - padding: 0 8px 0 4px; - right: 0; + padding: 0 8px 0 4px; + right: 0; } #sticker-tabs.yt-live-chat-paid-sticker-panel-renderer { - display: inline-block; - width: 100%; - overflow: hidden; - --paper-tabs-selection-bar-color: var( - --yt-pdg-paid-stickers-tab-selection-bar-color - ); + display: inline-block; + width: 100%; + overflow: hidden; + --paper-tabs-selection-bar-color: var( + --yt-pdg-paid-stickers-tab-selection-bar-color + ); } #close-button.yt-live-chat-paid-sticker-panel-renderer, #help-button.yt-live-chat-paid-sticker-panel-renderer { - margin: 0 var(--ytd-margin-3x); + margin: 0 var(--ytd-margin-3x); } #close-button.yt-live-chat-paid-sticker-panel-renderer - > *.yt-live-chat-paid-sticker-panel-renderer, + > *.yt-live-chat-paid-sticker-panel-renderer, #help-button.yt-live-chat-paid-sticker-panel-renderer - > *.yt-live-chat-paid-sticker-panel-renderer { - color: var(--yt-live-chat-icon-button-color); + > *.yt-live-chat-paid-sticker-panel-renderer { + color: var(--yt-live-chat-icon-button-color); } yt-live-chat-super-sticker-pack-renderer.yt-live-chat-paid-sticker-panel-renderer { - max-height: 300px; - -ms-flex-wrap: var(--layout-wrap_-_-ms-flex-wrap); - -webkit-flex-wrap: var(--layout-wrap_-_-webkit-flex-wrap); - flex-wrap: var(--layout-wrap_-_flex-wrap); + max-height: 300px; + -ms-flex-wrap: var(--layout-wrap_-_-ms-flex-wrap); + -webkit-flex-wrap: var(--layout-wrap_-_-webkit-flex-wrap); + flex-wrap: var(--layout-wrap_-_flex-wrap); } #stickers-container.yt-live-chat-paid-sticker-panel-renderer:focus { - outline: none; + outline: none; } #dialog.yt-live-chat-paid-sticker-panel-renderer { - z-index: 3; + z-index: 3; } 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; + 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; + 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, 1, 1); + #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, 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.2, 1), - width 0.2s cubic-bezier(0.4, 0, 0.2, 1); + margin-right: 0; + transition: margin-right 0.2s cubic-bezier(0.4, 0, 0.2, 1), + width 0.2s cubic-bezier(0.4, 0, 0.2, 1); } yt-live-chat-ticker-paid-message-item-renderer[dimmed] { - opacity: 0.5; + opacity: 0.5; } yt-img-shadow.yt-live-chat-ticker-paid-message-item-renderer { - margin-right: -4px; + margin-right: -4px; - overflow: hidden; - border-radius: 50%; + overflow: hidden; + border-radius: 50%; } #content.yt-live-chat-ticker-paid-message-item-renderer { - height: 24px; + height: 24px; - 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); + 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); } #text.yt-live-chat-ticker-paid-message-item-renderer { - margin: 0 8px; - font-weight: 500; + 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; + #author-photo.yt-live-chat-ticker-paid-message-item-renderer { + display: none; } #content.yt-live-chat-ticker-paid-sticker-item-renderer { - padding-right: 8px; + padding-right: 8px; } #content.multiple-thumbnails.yt-live-chat-ticker-paid-sticker-item-renderer { - padding-right: 6px; + padding-right: 6px; } #author-photo.yt-live-chat-ticker-paid-sticker-item-renderer { - margin-right: 4px; + margin-right: 4px; } .sticker-thumbnail.yt-live-chat-ticker-paid-sticker-item-renderer { - border-radius: 0; - margin-right: 0; + border-radius: 0; + margin-right: 0; } yt-live-chat-ticker-paid-sticker-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; + 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-sticker-item-renderer { - border-radius: 999px; - padding: 4px; + border-radius: 999px; + padding: 4px; } yt-live-chat-ticker-paid-sticker-item-renderer.sliding-down - #container.yt-live-chat-ticker-paid-sticker-item-renderer { - opacity: 0.5; - transform: translateY(44px); - transition: opacity 0.2s, transform 0.2s cubic-bezier(0.4, 0, 1, 1); + #container.yt-live-chat-ticker-paid-sticker-item-renderer { + opacity: 0.5; + transform: translateY(44px); + transition: opacity 0.2s, transform 0.2s cubic-bezier(0.4, 0, 1, 1); } yt-live-chat-ticker-paid-sticker-item-renderer.collapsing { - margin-right: 0; - transition: margin-right 0.2s cubic-bezier(0.4, 0, 0.2, 1), - width 0.2s cubic-bezier(0.4, 0, 0.2, 1); + margin-right: 0; + transition: margin-right 0.2s cubic-bezier(0.4, 0, 0.2, 1), + width 0.2s cubic-bezier(0.4, 0, 0.2, 1); } yt-live-chat-ticker-paid-sticker-item-renderer[dimmed] { - opacity: 0.5; + opacity: 0.5; } yt-img-shadow.yt-live-chat-ticker-paid-sticker-item-renderer { - margin-right: -4px; + margin-right: -4px; - overflow: hidden; - border-radius: 50%; + overflow: hidden; + border-radius: 50%; } #content.yt-live-chat-ticker-paid-sticker-item-renderer { - height: 24px; + height: 24px; - 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); + 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); } #text.yt-live-chat-ticker-paid-sticker-item-renderer { - margin: 0 8px; - font-weight: 500; + margin: 0 8px; + font-weight: 500; } yt-live-chat-ticker-paid-sticker-item-renderer[is-deleted] - #author-photo.yt-live-chat-ticker-paid-sticker-item-renderer { - display: none; + #author-photo.yt-live-chat-ticker-paid-sticker-item-renderer { + display: none; } - yt-live-chat-message-subtext-renderer { - display: block; + display: block; } yt-live-chat-message-renderer { - display: block; - color: var(--yt-live-chat-primary-text-color, var(--yt-primary-text-color)); - background: var( - --yt-live-chat-action-panel-background-color, - var(--yt-opalescence-soft-grey-opacity-lighten-3) - ); - display: var(--layout-vertical_-_display, block); - -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); - -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-paper-button-width: 100%; + display: block; + color: var(--yt-live-chat-primary-text-color, var(--yt-primary-text-color)); + background: var( + --yt-live-chat-action-panel-background-color, + var(--yt-opalescence-soft-grey-opacity-lighten-3) + ); + display: var(--layout-vertical_-_display, block); + -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); + -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-paper-button-width: 100%; } #subtext.yt-live-chat-message-renderer { - color: var( - --yt-live-chat-secondary-text-color, - var(--yt-luna-black-opacity-lighten-2) - ); - margin-bottom: 12px; + color: var( + --yt-live-chat-secondary-text-color, + var(--yt-luna-black-opacity-lighten-2) + ); + margin-bottom: 12px; } #text.yt-live-chat-message-renderer, #subtext.yt-live-chat-message-renderer { - text-align: var(--yt-live-chat-message-renderer-text-align, inherit); - -ms-align-self: var(--layout-self-center_-_-ms-align-self); - -webkit-align-self: var(--layout-self-center_-_-webkit-align-self); - align-self: var(--layout-self-center_-_align-self); + text-align: var(--yt-live-chat-message-renderer-text-align, inherit); + -ms-align-self: var(--layout-self-center_-_-ms-align-self); + -webkit-align-self: var(--layout-self-center_-_-webkit-align-self); + align-self: var(--layout-self-center_-_align-self); } #text.yt-live-chat-message-renderer:empty, #subtext.yt-live-chat-message-renderer:empty, #button.yt-live-chat-message-renderer:empty { - display: none; + display: none; } yt-live-chat-message-renderer[subtext-on-bottom] - #subtext.yt-live-chat-message-renderer { - order: 1; - margin-bottom: 0; - margin-top: 12px; + #subtext.yt-live-chat-message-renderer { + order: 1; + margin-bottom: 0; + margin-top: 12px; } #button.yt-live-chat-message-renderer { - width: 100%; + width: 100%; } #button.yt-live-chat-message-renderer - .style-default.yt-live-chat-message-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); + .style-default.yt-live-chat-message-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); } #button.yt-live-chat-message-renderer > *.yt-live-chat-message-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); + 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-dropdown-menu { - display: inline-block; - max-width: 100%; + display: inline-block; + max-width: 100%; } paper-button.yt-dropdown-menu { - display: inline-block; - text-align: center; - font-family: inherit; + display: inline-block; + text-align: center; + font-family: inherit; } paper-menu-button.yt-dropdown-menu { - color: var(--yt-spec-text-secondary); - --paper-menu-button-dropdown-background: transparent; + color: var(--yt-spec-text-secondary); + --paper-menu-button-dropdown-background: transparent; } paper-menu-button.yt-dropdown-menu, #label-text.yt-dropdown-menu { - max-width: 100%; + max-width: 100%; } #label-text.yt-dropdown-menu { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } paper-menu-button.yt-dropdown-menu { - padding: 0; + padding: 0; } paper-listbox.yt-dropdown-menu { - background-color: var(--yt-dialog-background); + background-color: var(--yt-dialog-background); } paper-listbox.yt-dropdown-menu paper-item.yt-dropdown-menu:hover { - background-color: var(--yt-menu-hover-backgound-color); + background-color: var(--yt-menu-hover-backgound-color); } paper-listbox.yt-dropdown-menu .iron-selected.yt-dropdown-menu { - font-weight: inherit; - background-color: var(--yt-menu-hover-backgound-color); + font-weight: inherit; + background-color: var(--yt-menu-hover-backgound-color); } #label.yt-dropdown-menu { - cursor: pointer; - text-transform: var(--yt-dropdown-menu-label-transform, none); - padding: 0; - margin: 0; - min-width: 0; - font-size: var(--ytd-subheadline_-_font-size); - font-weight: var(--ytd-subheadline_-_font-weight); - line-height: var(--ytd-subheadline_-_line-height); - letter-spacing: var(--ytd-subheadline_-_letter-spacing); - 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); + cursor: pointer; + text-transform: var(--yt-dropdown-menu-label-transform, none); + padding: 0; + margin: 0; + min-width: 0; + font-size: var(--ytd-subheadline_-_font-size); + font-weight: var(--ytd-subheadline_-_font-weight); + line-height: var(--ytd-subheadline_-_line-height); + letter-spacing: var(--ytd-subheadline_-_letter-spacing); + 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); } #label-text.yt-dropdown-menu { - color: var(--yt-primary-text-color); + color: var(--yt-primary-text-color); } #icon-label.yt-dropdown-menu { - color: var(--yt-spec-text-secondary); - font-size: var(--ytd-tab-system_-_font-size); - font-weight: var(--ytd-tab-system_-_font-weight); - letter-spacing: var(--ytd-tab-system_-_letter-spacing); - text-transform: var(--ytd-tab-system_-_text-transform); + color: var(--yt-spec-text-secondary); + font-size: var(--ytd-tab-system_-_font-size); + font-weight: var(--ytd-tab-system_-_font-weight); + letter-spacing: var(--ytd-tab-system_-_letter-spacing); + text-transform: var(--ytd-tab-system_-_text-transform); } #label.keyboard-focus.yt-dropdown-menu #icon-label.yt-dropdown-menu { - font-weight: 700; + font-weight: 700; } #label.keyboard-focus.yt-dropdown-menu #label-text.yt-dropdown-menu { - font-weight: 500; + font-weight: 500; } #label-icon.yt-dropdown-menu { - flex-shrink: 0; - margin-right: var(--ytd-margin-2x); - color: var(--yt-spec-text-secondary); + flex-shrink: 0; + margin-right: var(--ytd-margin-2x); + color: var(--yt-spec-text-secondary); } #icon.yt-dropdown-menu { - color: var(--yt-spec-text-secondary); + color: var(--yt-spec-text-secondary); } .item.yt-dropdown-menu { - color: var(--yt-primary-text-color); - font-size: var(--ytd-user-comment_-_font-size); - font-weight: var(--ytd-user-comment_-_font-weight); - line-height: var(--ytd-user-comment_-_line-height); - letter-spacing: var(--ytd-user-comment_-_letter-spacing); + color: var(--yt-primary-text-color); + font-size: var(--ytd-user-comment_-_font-size); + font-weight: var(--ytd-user-comment_-_font-weight); + line-height: var(--ytd-user-comment_-_line-height); + letter-spacing: var(--ytd-user-comment_-_letter-spacing); } #subtitle.yt-dropdown-menu { - color: var(--yt-secondary-text-color); - white-space: normal; - font-size: var(--ytd-mini-attribution_-_font-size); - font-weight: var(--ytd-mini-attribution_-_font-weight); - line-height: var(--ytd-mini-attribution_-_line-height); + color: var(--yt-secondary-text-color); + white-space: normal; + font-size: var(--ytd-mini-attribution_-_font-size); + font-weight: var(--ytd-mini-attribution_-_font-weight); + line-height: var(--ytd-mini-attribution_-_line-height); } .yt-simple-endpoint.yt-dropdown-menu { - display: var(--yt-endpoint_-_display); - cursor: var(--yt-endpoint_-_cursor); - text-decoration: var(--yt-endpoint_-_text-decoration); - color: var(--yt-endpoint_-_color); - outline: none; + display: var(--yt-endpoint_-_display); + cursor: var(--yt-endpoint_-_cursor); + text-decoration: var(--yt-endpoint_-_text-decoration); + color: var(--yt-endpoint_-_color); + outline: none; } .yt-simple-endpoint.yt-dropdown-menu:hover { - color: var(--yt-endpoint-hover_-_color); - text-decoration: var(--yt-endpoint-hover_-_text-decoration); + color: var(--yt-endpoint-hover_-_color); + text-decoration: var(--yt-endpoint-hover_-_text-decoration); } a.yt-simple-endpoint.yt-dropdown-menu { - display: block; - color: var(--yt-primary-text-color); + display: block; + color: var(--yt-primary-text-color); } yt-dropdown-menu:not(.has-items) #label-icon.yt-dropdown-menu { - display: none; + display: none; } yt-dropdown-menu:not(.has-items) #label.yt-dropdown-menu { - cursor: default; + cursor: default; } yt-dropdown-menu:not(.has-items) #label.yt-dropdown-menu:focus { - outline: none; + outline: none; } paper-item-body.yt-dropdown-menu { - max-width: 100%; - -ms-flex: var(--layout-flex-none_-_-ms-flex); - -webkit-flex: var(--layout-flex-none_-_-webkit-flex); - flex: var(--layout-flex-none_-_flex); + max-width: 100%; + -ms-flex: var(--layout-flex-none_-_-ms-flex); + -webkit-flex: var(--layout-flex-none_-_-webkit-flex); + flex: var(--layout-flex-none_-_flex); } yt-sort-filter-sub-menu-renderer { - --yt-endpoint-force-cursor: pointer; - display: inline-block; + --yt-endpoint-force-cursor: pointer; + display: inline-block; } yt-live-chat-header-renderer { - height: 48px; - padding: 8px; - box-sizing: border-box; - font-size: var(--yt-live-chat-header-font-size, 18px); - background-color: var( - --yt-live-chat-header-background-color, - var(--yt-opalescence-soft-grey-opacity-lighten-3) - ); - color: var( - --yt-live-chat-header-text-color, - var(--yt-live-chat-primary-text-color) - ); - 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); - display: var(--yt-live-chat-header-renderer-display, flex); + height: 48px; + padding: 8px; + box-sizing: border-box; + font-size: var(--yt-live-chat-header-font-size, 18px); + background-color: var( + --yt-live-chat-header-background-color, + var(--yt-opalescence-soft-grey-opacity-lighten-3) + ); + color: var( + --yt-live-chat-header-text-color, + var(--yt-live-chat-primary-text-color) + ); + 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); + display: var(--yt-live-chat-header-renderer-display, flex); } #overflow.yt-live-chat-header-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); + 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); } #action-buttons.yt-live-chat-header-renderer > *.yt-live-chat-header-renderer, #overflow.yt-live-chat-header-renderer { - color: var(--yt-live-chat-header-button-color); + color: var(--yt-live-chat-header-button-color); } #primary-content.yt-live-chat-header-renderer { - -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); - margin-left: 16px; + -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); + margin-left: 16px; } yt-icon-button.yt-live-chat-header-renderer - yt-icon.yt-live-chat-header-renderer { - color: var(--yt-spec-icon-inactive); + yt-icon.yt-live-chat-header-renderer { + color: var(--yt-spec-icon-inactive); } yt-icon-button.yt-live-chat-header-renderer:hover - yt-icon.yt-live-chat-header-renderer { - color: var(--yt-spec-icon-active-other); + yt-icon.yt-live-chat-header-renderer { + color: var(--yt-spec-icon-active-other); } yt-live-chat-text-message-renderer { - position: relative; - font-size: 13px; - padding: 4px 24px; - overflow: hidden; - contain: content; - --yt-endpoint-color: var( - --yt-live-chat-primary-text-color, - var(--yt-luna-black) - ); - --yt-endpoint-hover-color: var( - --yt-live-chat-primary-text-color, - var(--yt-endpoint-color) - ); - 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-start_-_-ms-flex-align); - -webkit-align-items: var(--layout-start_-_-webkit-align-items); - align-items: var(--layout-start_-_align-items); + position: relative; + font-size: 13px; + padding: 4px 24px; + overflow: hidden; + contain: content; + --yt-endpoint-color: var( + --yt-live-chat-primary-text-color, + var(--yt-luna-black) + ); + --yt-endpoint-hover-color: var( + --yt-live-chat-primary-text-color, + var(--yt-endpoint-color) + ); + 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-start_-_-ms-flex-align); + -webkit-align-items: var(--layout-start_-_-webkit-align-items); + align-items: var(--layout-start_-_align-items); } yt-live-chat-text-message-renderer:hover { - overflow: initial; + overflow: initial; } yt-live-chat-text-message-renderer[author-is-owner] { - background-color: var(--yt-live-chat-message-highlight-background-color); + background-color: var(--yt-live-chat-message-highlight-background-color); } #content.yt-live-chat-text-message-renderer { - -ms-align-self: var(--layout-self-center_-_-ms-align-self); - -webkit-align-self: var(--layout-self-center_-_-webkit-align-self); - align-self: var(--layout-self-center_-_align-self); - min-width: 0; + -ms-align-self: var(--layout-self-center_-_-ms-align-self); + -webkit-align-self: var(--layout-self-center_-_-webkit-align-self); + align-self: var(--layout-self-center_-_align-self); + min-width: 0; } yt-live-chat-author-chip.yt-live-chat-text-message-renderer { - margin-right: 8px; + 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 - ); + 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; - vertical-align: middle; + .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; + vertical-align: middle; } a.yt-live-chat-text-message-renderer { - display: inline; - text-decoration: underline; + 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; + 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; + 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; + 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, + #deleted-state.yt-live-chat-text-message-renderer, yt-live-chat-text-message-renderer[show-original] - #show-original.yt-live-chat-text-message-renderer, + #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; + #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 0%, - var(--yt-live-chat-background-color, var(--yt-white)) 100% - ); + color: var(--yt-live-chat-secondary-text-color); + background: linear-gradient( + to right, + transparent 0%, + var(--yt-live-chat-background-color, var(--yt-white)) 100% + ); } yt-live-chat-text-message-renderer[author-is-owner] - #menu.yt-live-chat-text-message-renderer { - background: linear-gradient( - to right, - transparent 0%, - var( - --yt-live-chat-message-highlight-background-color, - var(--yt-luna-black) - ) - 100% - ); + #menu.yt-live-chat-text-message-renderer { + background: linear-gradient( + to right, + transparent 0%, + var(--yt-live-chat-message-highlight-background-color, var(--yt-luna-black)) + 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; + 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)); + #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; + 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) - ); + 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; + #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); + background: var(--yt-live-chat-error-message-color, #f44336); } yt-live-chat-text-message-renderer[in-collapsed-banner] - #content.yt-live-chat-text-message-renderer { - color: var(--yt-live-chat-primary-text-color); - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; + #content.yt-live-chat-text-message-renderer { + color: var(--yt-live-chat-primary-text-color); + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } #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; + 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; + display: block; + margin-right: 16px; - overflow: hidden; - border-radius: 50%; + 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); + -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-text-message-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); + 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-text-message-renderer { - position: absolute; - top: 0; - bottom: 0; - right: 0; + position: absolute; + top: 0; + bottom: 0; + right: 0; - transform: translateX(100px); + transform: translateX(100px); } yt-live-chat-text-message-renderer:hover - #menu.yt-live-chat-text-message-renderer, + #menu.yt-live-chat-text-message-renderer, yt-live-chat-text-message-renderer[menu-visible] - #menu.yt-live-chat-text-message-renderer { - transform: none; + #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; + #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: 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); + 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-text-message-renderer[has-inline-action-buttons]:hover - #inline-action-button-container.yt-live-chat-text-message-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); + #inline-action-button-container.yt-live-chat-text-message-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); + 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; + #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 - ); + #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, + > *.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; + > *.yt-live-chat-text-message-renderer { + --yt-button-icon-size: 36px; + --yt-button-icon-padding: 6px; - color: var(--yt-white); - border-radius: 2px; + color: var(--yt-white); + border-radius: 2px; } #inline-action-buttons.yt-live-chat-text-message-renderer - > *.yt-live-chat-text-message-renderer { - background: var(--yt-luna-black-opacity-lighten-1); + > *.yt-live-chat-text-message-renderer { + background: var(--yt-luna-black-opacity-lighten-1); } #inline-action-buttons.yt-live-chat-text-message-renderer - > .yt-live-chat-text-message-renderer:hover { - background: var(--yt-luna-black); + > .yt-live-chat-text-message-renderer:hover { + background: var(--yt-luna-black); } #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 - ); + > *.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 - ); + > .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; + margin-left: 32px; } #inline-action-buttons.yt-live-chat-text-message-renderer - > *.yt-live-chat-text-message-renderer:not(:first-child), + > *.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:not(:first-child) { + margin-left: 8px; } yt-live-chat-auto-mod-message-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); - font-size: 13px; - padding: 0 0 4px; - position: relative; - --paper-button_-_min-width: 88px; - --yt-live-chat-text-message-renderer-message-message-style_-_font-style: italic; - --yt-live-chat-text-message-renderer-message-message-style_-_opacity: 0.5; - --yt-button-icon-size: 16px; - --yt-button-icon-padding: 0; - --ytd-paper-button-min-width: 88px; + 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); + font-size: 13px; + padding: 0 0 4px; + position: relative; + --paper-button_-_min-width: 88px; + --yt-live-chat-text-message-renderer-message-message-style_-_font-style: italic; + --yt-live-chat-text-message-renderer-message-message-style_-_opacity: 0.5; + --yt-button-icon-size: 16px; + --yt-button-icon-padding: 0; + --ytd-paper-button-min-width: 88px; } #explanation.yt-live-chat-auto-mod-message-renderer { - color: var(--yt-live-chat-automod-button-explanation-color); - margin: 4px 0 4px 28px; + color: var(--yt-live-chat-automod-button-explanation-color); + margin: 4px 0 4px 28px; } #button.yt-live-chat-auto-mod-message-renderer { - display: inline-block; + display: inline-block; } #button.yt-live-chat-auto-mod-message-renderer - > *.yt-live-chat-auto-mod-message-renderer { - width: 32px; - --yt-button-icon-size: 16px; + > *.yt-live-chat-auto-mod-message-renderer { + width: 32px; + --yt-button-icon-size: 16px; } #moderation-buttons.yt-live-chat-auto-mod-message-renderer:not(:empty) { - margin: 8px 0 4px 64px; + margin: 8px 0 4px 64px; } #moderation-buttons.yt-live-chat-auto-mod-message-renderer - > *.yt-live-chat-auto-mod-message-renderer:not(:last-child) { - margin-right: 8px; + > *.yt-live-chat-auto-mod-message-renderer:not(:last-child) { + margin-right: 8px; } #moderation-buttons.yt-live-chat-auto-mod-message-renderer - > *.yt-live-chat-auto-mod-message-renderer { - background-color: var(--yt-live-chat-automod-button-background-color); - border-radius: 2px; - font-weight: 500; + > *.yt-live-chat-auto-mod-message-renderer { + background-color: var(--yt-live-chat-automod-button-background-color); + border-radius: 2px; + font-weight: 500; } #moderation-buttons.yt-live-chat-auto-mod-message-renderer - > *.yt-live-chat-auto-mod-message-renderer:hover { - background-color: var(--yt-live-chat-automod-button-background-color-hover); + > *.yt-live-chat-auto-mod-message-renderer:hover { + background-color: var(--yt-live-chat-automod-button-background-color-hover); } yt-live-chat-auto-mod-message-renderer::before { - background-color: var(--yt-live-chat-deleted-message-bar-color); - content: ""; - position: absolute; - display: block; - left: 8px; - top: 4px; - bottom: 4px; - width: 4px; - box-sizing: border-box; - border-radius: 2px; + background-color: var(--yt-live-chat-deleted-message-bar-color); + content: ''; + position: absolute; + display: block; + left: 8px; + top: 4px; + bottom: 4px; + width: 4px; + box-sizing: border-box; + border-radius: 2px; } #timestamp.yt-live-chat-auto-mod-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; + 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-auto-mod-message-renderer { - display: block; - margin-right: 16px; + display: block; + margin-right: 16px; - overflow: hidden; - border-radius: 50%; + 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); + -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-auto-mod-message-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); + 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-auto-mod-message-renderer { - position: absolute; - top: 0; - bottom: 0; - right: 0; + position: absolute; + top: 0; + bottom: 0; + right: 0; - transform: translateX(100px); + transform: translateX(100px); } yt-live-chat-auto-mod-message-renderer:hover - #menu.yt-live-chat-auto-mod-message-renderer, + #menu.yt-live-chat-auto-mod-message-renderer, yt-live-chat-auto-mod-message-renderer[menu-visible] - #menu.yt-live-chat-auto-mod-message-renderer { - transform: none; + #menu.yt-live-chat-auto-mod-message-renderer { + transform: none; } yt-live-chat-auto-mod-message-renderer:focus-within - #menu.yt-live-chat-auto-mod-message-renderer { - transform: none; + #menu.yt-live-chat-auto-mod-message-renderer { + transform: none; } #inline-action-button-container.yt-live-chat-auto-mod-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: 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); + 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-auto-mod-message-renderer[has-inline-action-buttons]:hover - #inline-action-button-container.yt-live-chat-auto-mod-message-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); + #inline-action-button-container.yt-live-chat-auto-mod-message-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); + display: var(--yt-live-chat-inline-action-button-container-display, none); } yt-live-chat-auto-mod-message-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover - #inline-action-button-container.yt-live-chat-auto-mod-message-renderer { - display: none; + #inline-action-button-container.yt-live-chat-auto-mod-message-renderer { + display: none; } yt-live-chat-auto-mod-message-renderer[has-inline-action-buttons]:hover - #menu.yt-live-chat-auto-mod-message-renderer { - display: var( - --yt-live-chat-item-with-inline-actions-context-menu-display, - block - ); + #menu.yt-live-chat-auto-mod-message-renderer { + display: var( + --yt-live-chat-item-with-inline-actions-context-menu-display, + block + ); } #inline-action-buttons.yt-live-chat-auto-mod-message-renderer - > *.yt-live-chat-auto-mod-message-renderer, + > *.yt-live-chat-auto-mod-message-renderer, #additional-inline-action-buttons.yt-live-chat-auto-mod-message-renderer - > *.yt-live-chat-auto-mod-message-renderer { - --yt-button-icon-size: 36px; - --yt-button-icon-padding: 6px; + > *.yt-live-chat-auto-mod-message-renderer { + --yt-button-icon-size: 36px; + --yt-button-icon-padding: 6px; - color: var(--yt-white); - border-radius: 2px; + color: var(--yt-white); + border-radius: 2px; } #inline-action-buttons.yt-live-chat-auto-mod-message-renderer - > *.yt-live-chat-auto-mod-message-renderer { - background: var(--yt-luna-black-opacity-lighten-1); + > *.yt-live-chat-auto-mod-message-renderer { + background: var(--yt-luna-black-opacity-lighten-1); } #inline-action-buttons.yt-live-chat-auto-mod-message-renderer - > .yt-live-chat-auto-mod-message-renderer:hover { - background: var(--yt-luna-black); + > .yt-live-chat-auto-mod-message-renderer:hover { + background: var(--yt-luna-black); } #additional-inline-action-buttons.yt-live-chat-auto-mod-message-renderer - > *.yt-live-chat-auto-mod-message-renderer { - color: var(--yt-live-chat-additional-inline-action-button-color); - background: var( - --yt-live-chat-additional-inline-action-button-background-color - ); + > *.yt-live-chat-auto-mod-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-auto-mod-message-renderer - > .yt-live-chat-auto-mod-message-renderer:hover { - background: var( - --yt-live-chat-additional-inline-action-button-background-color-hover - ); + > .yt-live-chat-auto-mod-message-renderer:hover { + background: var( + --yt-live-chat-additional-inline-action-button-background-color-hover + ); } #additional-inline-action-buttons.yt-live-chat-auto-mod-message-renderer:not(:empty) { - margin-left: 32px; + margin-left: 32px; } #inline-action-buttons.yt-live-chat-auto-mod-message-renderer - > *.yt-live-chat-auto-mod-message-renderer:not(:first-child), + > *.yt-live-chat-auto-mod-message-renderer:not(:first-child), #additional-inline-action-buttons.yt-live-chat-auto-mod-message-renderer - > *.yt-live-chat-auto-mod-message-renderer:not(:first-child) { - margin-left: 8px; + > *.yt-live-chat-auto-mod-message-renderer:not(:first-child) { + margin-left: 8px; } yt-live-chat-banner-header-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-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-pack: var(--layout-justified_-_-ms-flex-pack); - -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content); - justify-content: var(--layout-justified_-_justify-content); - position: relative; - padding: 4px 0; - color: var(--yt-live-chat-secondary-text-color); - overflow-x: hidden; + 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-pack: var(--layout-justified_-_-ms-flex-pack); + -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content); + justify-content: var(--layout-justified_-_justify-content); + position: relative; + padding: 4px 0; + color: var(--yt-live-chat-secondary-text-color); + overflow-x: hidden; } yt-icon.yt-live-chat-banner-header-renderer, yt-button-renderer.yt-live-chat-banner-header-renderer { - color: var(--yt-spec-static-overlay-icon-inactive); + color: var(--yt-spec-static-overlay-icon-inactive); } yt-live-chat-banner-header-renderer[in-collapsed-banner] - #title.yt-live-chat-banner-header-renderer { - opacity: 0; - transition-delay: unset; + #title.yt-live-chat-banner-header-renderer { + opacity: 0; + transition-delay: unset; } #title.yt-live-chat-banner-header-renderer { - -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); - font-size: 13px; - margin-left: 20px; - opacity: 1; - transition: opacity var(--yt-live-chat-universal-motion-curve); - transition-delay: 0.1s; - transition-duration: var(--yt-live-chat-banner-animation-duration); + -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); + font-size: 13px; + margin-left: 20px; + opacity: 1; + transition: opacity var(--yt-live-chat-universal-motion-curve); + transition-delay: 0.1s; + transition-duration: var(--yt-live-chat-banner-animation-duration); } #close-button.yt-live-chat-banner-header-renderer { - -ms-flex: var(--layout-flex-none_-_-ms-flex); - -webkit-flex: var(--layout-flex-none_-_-webkit-flex); - flex: var(--layout-flex-none_-_flex); + -ms-flex: var(--layout-flex-none_-_-ms-flex); + -webkit-flex: var(--layout-flex-none_-_-webkit-flex); + flex: var(--layout-flex-none_-_flex); } yt-icon.yt-live-chat-banner-header-renderer { - width: 16px; - height: 16px; + width: 16px; + height: 16px; } #menu.yt-live-chat-banner-header-renderer { - --yt-button-icon-size: 24px; - --yt-button-icon-padding: 0; + --yt-button-icon-size: 24px; + --yt-button-icon-padding: 0; } yt-live-chat-donations-progress-bar-renderer { - display: block; - font-size: var(--ytd-user-comment_-_font-size); - font-weight: var(--ytd-user-comment_-_font-weight); - line-height: var(--ytd-user-comment_-_line-height); - letter-spacing: var(--ytd-user-comment_-_letter-spacing); - color: rgba(255, 255, 255, 0.7); + display: block; + font-size: var(--ytd-user-comment_-_font-size); + font-weight: var(--ytd-user-comment_-_font-weight); + line-height: var(--ytd-user-comment_-_line-height); + letter-spacing: var(--ytd-user-comment_-_letter-spacing); + color: rgba(255, 255, 255, 0.7); } yt-live-chat-donations-progress-bar-renderer[in-collapsed-banner]:not([no-goal]) { - margin: 2px 8px 0px 16px; - padding-top: 1px; + margin: 2px 8px 0px 16px; + padding-top: 1px; } yt-live-chat-donations-progress-bar-renderer[in-collapsed-banner][no-goal] { - margin: 0px 8px 0px 16px; - padding-top: 6px; + margin: 0px 8px 0px 16px; + padding-top: 6px; } #container.yt-live-chat-donations-progress-bar-renderer { - width: 100%; - border-radius: 4px; - overflow: hidden; + width: 100%; + border-radius: 4px; + overflow: hidden; } #expanded-title.yt-live-chat-donations-progress-bar-renderer, #target-row.yt-live-chat-donations-progress-bar-renderer { - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -ms-flex-direction: row; - -webkit-flex-direction: row; - flex-direction: row; - -ms-flex-align: start; - -webkit-align-items: flex-start; - align-items: flex-start; - -ms-flex-align: center; - -webkit-align-items: center; - align-items: center; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; } #title-row.yt-live-chat-donations-progress-bar-renderer { - margin-right: 16px; + margin-right: 16px; } #raised-amount.yt-live-chat-donations-progress-bar-renderer, #target-amount.yt-live-chat-donations-progress-bar-renderer, #campaign-title.yt-live-chat-donations-progress-bar-renderer { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } #raised-amount.yt-live-chat-donations-progress-bar-renderer, #separator.yt-live-chat-donations-progress-bar-renderer, #target-amount.yt-live-chat-donations-progress-bar-renderer, #campaign-title.yt-live-chat-donations-progress-bar-renderer { - padding-inline-end: 5px; + padding-inline-end: 5px; } #target-amount.yt-live-chat-donations-progress-bar-renderer { - --yt-formatted-string-bold: var(--ytd-navbar-title); - --yt-formatted-string-bold_-_font-size: var(--ytd-navbar-title_-_font-size); - --yt-formatted-string-bold_-_font-weight: var( - --ytd-navbar-title_-_font-weight - ); - --yt-formatted-string-bold_-_line-height: var( - --ytd-navbar-title_-_line-height - ); - --yt-formatted-string-bold_-_letter-spacing: initial; + --yt-formatted-string-bold: var(--ytd-navbar-title); + --yt-formatted-string-bold_-_font-size: var(--ytd-navbar-title_-_font-size); + --yt-formatted-string-bold_-_font-weight: var( + --ytd-navbar-title_-_font-weight + ); + --yt-formatted-string-bold_-_line-height: var( + --ytd-navbar-title_-_line-height + ); + --yt-formatted-string-bold_-_letter-spacing: initial; } #raised-amount.yt-live-chat-donations-progress-bar-renderer { - --yt-formatted-string-bold: var(--ytd-navbar-title); - --yt-formatted-string-bold_-_font-size: var(--ytd-navbar-title_-_font-size); - --yt-formatted-string-bold_-_font-weight: var( - --ytd-navbar-title_-_font-weight - ); - --yt-formatted-string-bold_-_line-height: var( - --ytd-navbar-title_-_line-height - ); - --yt-formatted-string-bold_-_letter-spacing: initial; - --yt-formatted-string-bold-color: var(--yt-spec-static-brand-white); + --yt-formatted-string-bold: var(--ytd-navbar-title); + --yt-formatted-string-bold_-_font-size: var(--ytd-navbar-title_-_font-size); + --yt-formatted-string-bold_-_font-weight: var( + --ytd-navbar-title_-_font-weight + ); + --yt-formatted-string-bold_-_line-height: var( + --ytd-navbar-title_-_line-height + ); + --yt-formatted-string-bold_-_letter-spacing: initial; + --yt-formatted-string-bold-color: var(--yt-spec-static-brand-white); } yt-live-chat-donations-progress-bar-renderer[in-collapsed-banner] - #raised-amount.yt-live-chat-donations-progress-bar-renderer { - --yt-formatted-string-bold: var(--ytd-link); - --yt-formatted-string-bold_-_font-size: var(--ytd-link_-_font-size); - --yt-formatted-string-bold_-_font-weight: var(--ytd-link_-_font-weight); - --yt-formatted-string-bold_-_line-height: var(--ytd-link_-_line-height); - --yt-formatted-string-bold_-_letter-spacing: var( - --ytd-link_-_letter-spacing - ); + #raised-amount.yt-live-chat-donations-progress-bar-renderer { + --yt-formatted-string-bold: var(--ytd-link); + --yt-formatted-string-bold_-_font-size: var(--ytd-link_-_font-size); + --yt-formatted-string-bold_-_font-weight: var(--ytd-link_-_font-weight); + --yt-formatted-string-bold_-_line-height: var(--ytd-link_-_line-height); + --yt-formatted-string-bold_-_letter-spacing: var(--ytd-link_-_letter-spacing); } #progress-bar.yt-live-chat-donations-progress-bar-renderer { - height: 2px; - background-color: var(--yt-spec-static-overlay-text-disabled); - border-radius: 2px; - overflow: hidden; - margin: 2px 16px 6px 0px; + height: 2px; + background-color: var(--yt-spec-static-overlay-text-disabled); + border-radius: 2px; + overflow: hidden; + margin: 2px 16px 6px 0px; } yt-live-chat-donations-progress-bar-renderer:not([in-collapsed-banner]) - #progress-bar.yt-live-chat-donations-progress-bar-renderer { - margin-top: 2px; + #progress-bar.yt-live-chat-donations-progress-bar-renderer { + margin-top: 2px; } #progress-bar-fill.yt-live-chat-donations-progress-bar-renderer { - height: 2px; - background-color: var(--yt-spec-static-brand-white); - width: var(--progress-bar-completion, 0); - border-radius: 2px; + height: 2px; + background-color: var(--yt-spec-static-brand-white); + width: var(--progress-bar-completion, 0); + border-radius: 2px; } #match-label.yt-live-chat-donations-progress-bar-renderer { - margin: 2px 16px 4px 0px; + margin: 2px 16px 4px 0px; } #goal-reached-label.yt-live-chat-donations-progress-bar-renderer { - color: var(--yt-spec-static-brand-white); + color: var(--yt-spec-static-brand-white); } yt-icon.yt-live-chat-donations-progress-bar-renderer { - color: var(--yt-spec-static-brand-white); - width: 16px; - height: 16px; + color: var(--yt-spec-static-brand-white); + width: 16px; + height: 16px; } #button-row.yt-live-chat-donations-progress-bar-renderer { - margin-top: 4px; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -ms-flex-direction: row-reverse; - -webkit-flex-direction: row-reverse; - flex-direction: row-reverse; - -ms-flex-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; - -ms-flex-align: center; - -webkit-align-items: center; - align-items: center; + margin-top: 4px; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row-reverse; + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; } #goal-reached.yt-live-chat-donations-progress-bar-renderer { - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -ms-flex-direction: row; - -webkit-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; - -webkit-align-items: center; - align-items: center; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; } #goal-reached-label.yt-live-chat-donations-progress-bar-renderer { - padding-right: 3px; + padding-right: 3px; } yt-live-chat-donations-progress-bar-renderer[in-collapsed-banner] - #target-row.yt-live-chat-donations-progress-bar-renderer, + #target-row.yt-live-chat-donations-progress-bar-renderer, yt-live-chat-donations-progress-bar-renderer[in-collapsed-banner] - #match-label.yt-live-chat-donations-progress-bar-renderer, + #match-label.yt-live-chat-donations-progress-bar-renderer, yt-live-chat-donations-progress-bar-renderer[in-collapsed-banner] - #button-row.yt-live-chat-donations-progress-bar-renderer { - display: none; + #button-row.yt-live-chat-donations-progress-bar-renderer { + display: none; } #donate-button.yt-live-chat-donations-progress-bar-renderer - ytd-button-renderer.yt-live-chat-donations-progress-bar-renderer { - background-color: transparent; + ytd-button-renderer.yt-live-chat-donations-progress-bar-renderer { + background-color: transparent; } ytd-button-renderer { - --paper-button-ink-color: var(--yt-paper-button-ink-color); - --yt-formatted-string-deemphasize-color: var(--yt-spec-static-brand-white); + --paper-button-ink-color: var(--yt-paper-button-ink-color); + --yt-formatted-string-deemphasize-color: var(--yt-spec-static-brand-white); - --yt-formatted-string-deemphasize_-_margin-left: var(--ytd-margin-base); + --yt-formatted-string-deemphasize_-_margin-left: var(--ytd-margin-base); } ytd-button-renderer { - vertical-align: middle; - white-space: nowrap; - font-size: var(--ytd-tab-system_-_font-size); - font-weight: var(--ytd-tab-system_-_font-weight); - letter-spacing: var(--ytd-tab-system_-_letter-spacing); - text-transform: var(--ytd-tab-system_-_text-transform); + vertical-align: middle; + white-space: nowrap; + font-size: var(--ytd-tab-system_-_font-size); + font-weight: var(--ytd-tab-system_-_font-weight); + letter-spacing: var(--ytd-tab-system_-_letter-spacing); + text-transform: var(--ytd-tab-system_-_text-transform); } ytd-button-renderer[is-paper-button]:not[button-raised], ytd-button-renderer[is-paper-button]:not[button-raised] a.ytd-button-renderer { - overflow: hidden; + overflow: hidden; } ytd-button-renderer[disabled][is-paper-button] a.ytd-button-renderer { - cursor: initial; + cursor: initial; } ytd-button-renderer[is-paper-button] yt-icon.ytd-button-renderer { - -ms-flex: var(--layout-flex-none_-_-ms-flex); - -webkit-flex: var(--layout-flex-none_-_-webkit-flex); - flex: var(--layout-flex-none_-_flex); + -ms-flex: var(--layout-flex-none_-_-ms-flex); + -webkit-flex: var(--layout-flex-none_-_-webkit-flex); + flex: var(--layout-flex-none_-_flex); } ytd-button-renderer yt-formatted-string.ytd-button-renderer { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } paper-button.ytd-button-renderer { - min-width: var( - --yt-paper-button-min-width, - var(--ytd-paper-button-min-width, 5.14em) - ); - font-size: var(--yt-paper-button-font-size, inherit); + min-width: var( + --yt-paper-button-min-width, + var(--ytd-paper-button-min-width, 5.14em) + ); + font-size: var(--yt-paper-button-font-size, inherit); } paper-button.keyboard-focus.ytd-button-renderer { - font-weight: inherit; + font-weight: inherit; } ytd-button-renderer[is-icon-button]:not([style-action-button]) { - font-size: var(--ytd-caption_-_font-size); - line-height: var(--ytd-caption_-_line-height); - font-weight: var(--ytd-caption_-_font-weight); - letter-spacing: var(--ytd-caption_-_letter-spacing); - text-transform: var(--ytd-caption_-_text-transform); + font-size: var(--ytd-caption_-_font-size); + line-height: var(--ytd-caption_-_line-height); + font-weight: var(--ytd-caption_-_font-weight); + letter-spacing: var(--ytd-caption_-_letter-spacing); + text-transform: var(--ytd-caption_-_text-transform); } ytd-button-renderer.force-icon-button a.ytd-button-renderer { - padding-right: var(--yt-button-icon-padding, var(--ytd-margin-2x)); + padding-right: var(--yt-button-icon-padding, var(--ytd-margin-2x)); } ytd-button-renderer[is-paper-button] { - background-color: var( - --yt-basic-background-color, - var(--yt-button-background-color) - ); - color: var( - --yt-basic-foreground-title-color, - var(--yt-spec-text-secondary) - ); - border-color: var( - --yt-basic-foreground-title-color, - var(--yt-spec-text-secondary) - ); + background-color: var( + --yt-basic-background-color, + var(--yt-button-background-color) + ); + color: var(--yt-basic-foreground-title-color, var(--yt-spec-text-secondary)); + border-color: var( + --yt-basic-foreground-title-color, + var(--yt-spec-text-secondary) + ); } ytd-button-renderer[is-paper-button-with-icon] { - --yt-button-padding-minus-focus-outline: var( - --yt-button-with-icon-padding-minus-focus-outline - ); + --yt-button-padding-minus-focus-outline: var( + --yt-button-with-icon-padding-minus-focus-outline + ); } ytd-button-renderer.style-suggestive.size-small[is-paper-button-with-icon] { - --yt-button-padding: 6px 12px; - --yt-button-padding-minus-border: 5px 11px; + --yt-button-padding: 6px 12px; + --yt-button-padding-minus-border: 5px 11px; } ytd-button-renderer[is-paper-button-with-icon] { - --yt-button-padding: 6px 16px; - --yt-button-padding-minus-border: 5px 15px; + --yt-button-padding: 6px 16px; + --yt-button-padding-minus-border: 5px 15px; } -ytd-button-renderer[is-paper-button-with-icon][button-size="size-large"] { - --yt-button-padding: 10px 16px; - --yt-button-padding-minus-border: 9px 15px; - --yt-button-padding-minus-focus-outline: 9px 15px; +ytd-button-renderer[is-paper-button-with-icon][button-size='size-large'] { + --yt-button-padding: 10px 16px; + --yt-button-padding-minus-border: 9px 15px; + --yt-button-padding-minus-focus-outline: 9px 15px; } ytd-button-renderer[is-icon-button] { - color: var(--yt-button-color, var(--yt-spec-icon-inactive)); + color: var(--yt-button-color, var(--yt-spec-icon-inactive)); } ytd-button-renderer.style-text[is-icon-button], ytd-button-renderer.style-default[is-icon-button], ytd-button-renderer.style-opacity[is-icon-button] { - color: var(--yt-spec-icon-inactive); + color: var(--yt-spec-icon-inactive); } ytd-button-renderer.style-text[is-icon-button] #text.ytd-button-renderer, ytd-button-renderer.style-default[is-icon-button] #text.ytd-button-renderer, ytd-button-renderer.style-opacity[is-icon-button] #text.ytd-button-renderer { - color: var(--yt-spec-text-secondary); + color: var(--yt-spec-text-secondary); } ytd-button-renderer.style-black[is-icon-button] { - color: var(--yt-spec-text-primary); + color: var(--yt-spec-text-primary); } ytd-button-renderer.style-opacity[is-icon-button][disabled] { - color: var(--yt-spec-icon-disabled); + color: var(--yt-spec-icon-disabled); } ytd-button-renderer.style-blue-text[is-icon-button] { - color: var(--yt-spec-call-to-action); + color: var(--yt-spec-call-to-action); } ytd-button-renderer.style-visibly-disabled[is-icon-button] { - color: var(--yt-spec-icon-disabled); + color: var(--yt-spec-icon-disabled); } paper-tooltip.ytd-button-renderer { - white-space: nowrap; + white-space: nowrap; } ytd-button-renderer.style-primary[is-paper-button] { - background-color: var(--yt-spec-call-to-action); - color: var(--yt-spec-text-primary-inverse); + background-color: var(--yt-spec-call-to-action); + color: var(--yt-spec-text-primary-inverse); } ytd-button-renderer.style-primary[disabled][is-paper-button] { - background-color: var(--yt-spec-icon-disabled); - color: var(--yt-spec-text-primary-inverse); + background-color: var(--yt-spec-icon-disabled); + color: var(--yt-spec-text-primary-inverse); } ytd-button-renderer.style-payment[is-paper-button] { - background-color: var( - --yt-button-payment-background-color, - var(--yt-spec-call-to-action) - ); - color: var(--yt-spec-text-primary-inverse); + background-color: var( + --yt-button-payment-background-color, + var(--yt-spec-call-to-action) + ); + color: var(--yt-spec-text-primary-inverse); } ytd-button-renderer.style-payment[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.ytd-button-renderer, + paper-button.keyboard-focus.ytd-button-renderer, ytd-button-renderer.style-primary[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.ytd-button-renderer, + paper-button.keyboard-focus.ytd-button-renderer, ytd-button-renderer.style-payment[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.ytd-button-renderer, + paper-button.ytd-button-renderer, ytd-button-renderer.style-primary[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.ytd-button-renderer { - border: var(--yt-button-padding-minus-focus-outline-width) solid - var(--yt-spec-filled-button-focus-outline); - padding: var(--yt-button-padding-minus-focus-outline); + paper-button.ytd-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid + var(--yt-spec-filled-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); } ytd-button-renderer.style-suggestive[is-paper-button] { - --yt-formatted-string-deemphasize-color: var(--yt-blue-opacity-lighten-2); - background-color: transparent; - color: var(--yt-spec-call-to-action); + --yt-formatted-string-deemphasize-color: var(--yt-blue-opacity-lighten-2); + background-color: transparent; + color: var(--yt-spec-call-to-action); } ytd-button-renderer.style-suggestive[is-paper-button] - paper-button.ytd-button-renderer { - border: 1px solid var(--yt-spec-call-to-action); - padding: var(--yt-button-padding-minus-border); + paper-button.ytd-button-renderer { + border: 1px solid var(--yt-spec-call-to-action); + padding: var(--yt-button-padding-minus-border); } ytd-button-renderer.style-suggestive[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.ytd-button-renderer, + paper-button.keyboard-focus.ytd-button-renderer, ytd-button-renderer.style-suggestive[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.ytd-button-renderer { - border: var(--yt-button-padding-minus-focus-outline-width) solid - var(--yt-spec-call-to-action); - padding: var(--yt-button-padding-minus-focus-outline); + paper-button.ytd-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid + var(--yt-spec-call-to-action); + padding: var(--yt-button-padding-minus-focus-outline); } ytd-button-renderer.palette-with-border[is-paper-button] - paper-button.ytd-button-renderer { - border-width: 1px; - border-style: solid; - padding: var(--yt-button-padding-minus-border); + paper-button.ytd-button-renderer { + border-width: 1px; + border-style: solid; + padding: var(--yt-button-padding-minus-border); } ytd-button-renderer.palette-with-border[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.ytd-button-renderer, + paper-button.keyboard-focus.ytd-button-renderer, ytd-button-renderer.palette-with-border[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.ytd-button-renderer { - border-width: var(--yt-button-padding-minus-focus-outline-width); - border-style: solid; - padding: var(--yt-button-padding-minus-focus-outline); + paper-button.ytd-button-renderer { + border-width: var(--yt-button-padding-minus-focus-outline-width); + border-style: solid; + padding: var(--yt-button-padding-minus-focus-outline); } ytd-button-renderer.style-blue-text[is-paper-button] { - --yt-formatted-string-deemphasize-color: var(--yt-spec-icon-disabled); - color: var(--yt-spec-call-to-action); + --yt-formatted-string-deemphasize-color: var(--yt-spec-icon-disabled); + color: var(--yt-spec-call-to-action); } ytd-button-renderer.style-blue-text[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.ytd-button-renderer, + paper-button.keyboard-focus.ytd-button-renderer, ytd-button-renderer.style-blue-text[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.ytd-button-renderer { - border: var(--yt-button-padding-minus-focus-outline-width) solid - var(--yt-spec-call-to-action-button-focus-outline); - padding: var(--yt-button-padding-minus-focus-outline); + paper-button.ytd-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid + var(--yt-spec-call-to-action-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); } ytd-button-renderer.style-destructive[is-paper-button] { - background-color: var(--yt-spec-brand-subscribe-button-background); - color: var(--yt-spec-static-brand-white); + background-color: var(--yt-spec-brand-subscribe-button-background); + color: var(--yt-spec-static-brand-white); } ytd-button-renderer.style-destructive[new-subscribe-color][is-paper-button] { - background-color: var(--yt-spec-brand-button-background); + background-color: var(--yt-spec-brand-button-background); } ytd-button-renderer.style-destructive[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.ytd-button-renderer, + paper-button.keyboard-focus.ytd-button-renderer, ytd-button-renderer.style-destructive[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.ytd-button-renderer { - border: var(--yt-button-padding-minus-focus-outline-width) solid - var(--yt-spec-filled-button-focus-outline); - padding: var(--yt-button-padding-minus-focus-outline); + paper-button.ytd-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid + var(--yt-spec-filled-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); } ytd-button-renderer.style-destructive[disabled][is-paper-button] { - background-color: var( - --yt-button-destructive-background-color, - var(--yt-opalescence-soft-grey) - ); - color: var( - --yt-button-destructive-color, - var(--yt-opalescence-grey-opacity-lighten-2) - ); + background-color: var( + --yt-button-destructive-background-color, + var(--yt-opalescence-soft-grey) + ); + color: var( + --yt-button-destructive-color, + var(--yt-opalescence-grey-opacity-lighten-2) + ); } ytd-button-renderer.style-brand[is-paper-button] { - color: var(--yt-spec-brand-link-text); + color: var(--yt-spec-brand-link-text); } ytd-button-renderer.style-brand[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.ytd-button-renderer, + paper-button.keyboard-focus.ytd-button-renderer, ytd-button-renderer.style-brand[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.ytd-button-renderer { - border: var(--yt-button-padding-minus-focus-outline-width) solid - var(--yt-spec-brand-text-button-focus-outline); - padding: var(--yt-button-padding-minus-focus-outline); + paper-button.ytd-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid + var(--yt-spec-brand-text-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); } ytd-button-renderer.style-default[is-paper-button] { - background-color: var( - --yt-button-default-background-color, - var(--yt-spec-badge-chip-background) - ); - color: var(--yt-button-default-text-color, var(--yt-spec-text-secondary)); + background-color: var( + --yt-button-default-background-color, + var(--yt-spec-badge-chip-background) + ); + color: var(--yt-button-default-text-color, var(--yt-spec-text-secondary)); } ytd-button-renderer.style-default[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.ytd-button-renderer, + paper-button.keyboard-focus.ytd-button-renderer, ytd-button-renderer.style-default[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.ytd-button-renderer { - border: var(--yt-button-padding-minus-focus-outline-width) solid - var(--yt-spec-filled-button-focus-outline); - padding: var(--yt-button-padding-minus-focus-outline); + paper-button.ytd-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid + var(--yt-spec-filled-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); } ytd-button-renderer.style-inactive-outline[is-paper-button] { - color: var(--yt-spec-text-secondary); + color: var(--yt-spec-text-secondary); } ytd-button-renderer.style-inactive-outline[is-paper-button] - paper-button.ytd-button-renderer { - border: 1px solid var(--yt-spec-text-secondary); - padding: var(--yt-button-padding-minus-border); + paper-button.ytd-button-renderer { + border: 1px solid var(--yt-spec-text-secondary); + padding: var(--yt-button-padding-minus-border); } ytd-button-renderer.style-inactive-outline[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.ytd-button-renderer, + paper-button.keyboard-focus.ytd-button-renderer, ytd-button-renderer.style-inactive-outline[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.ytd-button-renderer { - border: var(--yt-button-padding-minus-focus-outline-width) solid - var(--yt-spec-text-secondary); - padding: var(--yt-button-padding-minus-focus-outline); + paper-button.ytd-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid + var(--yt-spec-text-secondary); + padding: var(--yt-button-padding-minus-focus-outline); } ytd-button-renderer.style-suggested-action[is-paper-button] { - background-color: var(--yt-spec-suggested-action); - color: var(--yt-spec-call-to-action); + background-color: var(--yt-spec-suggested-action); + color: var(--yt-spec-call-to-action); } ytd-button-renderer.style-suggested-action[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.ytd-button-renderer, + paper-button.keyboard-focus.ytd-button-renderer, ytd-button-renderer.style-suggested-action[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.ytd-button-renderer { - border: var(--yt-button-padding-minus-focus-outline-width) solid - var(--yt-spec-call-to-action-button-focus-outline); - padding: var(--yt-button-padding-minus-focus-outline); + paper-button.ytd-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid + var(--yt-spec-call-to-action-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); } ytd-button-renderer.style-compact-gray[is-paper-button] { - background-color: var(--yt-spec-badge-chip-background); - color: var(--yt-spec-text-secondary); + background-color: var(--yt-spec-badge-chip-background); + color: var(--yt-spec-text-secondary); } ytd-button-renderer.style-compact-gray[is-paper-button] - paper-button.ytd-button-renderer { - padding: var(--ytd-margin-base) var(--ytd-margin-2x); + paper-button.ytd-button-renderer { + padding: var(--ytd-margin-base) var(--ytd-margin-2x); } ytd-button-renderer.style-text[is-paper-button] { - color: var(--yt-spec-text-secondary); + color: var(--yt-spec-text-secondary); } ytd-button-renderer[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.ytd-button-renderer, + paper-button.keyboard-focus.ytd-button-renderer, ytd-button-renderer.style-text[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.ytd-button-renderer, + paper-button.keyboard-focus.ytd-button-renderer, ytd-button-renderer[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.ytd-button-renderer, + paper-button.ytd-button-renderer, ytd-button-renderer.style-text[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.ytd-button-renderer { - border: var(--yt-button-padding-minus-focus-outline-width) solid - var(--yt-spec-inactive-text-button-focus-outline); - padding: var(--yt-button-padding-minus-focus-outline); + paper-button.ytd-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid + var(--yt-spec-inactive-text-button-focus-outline); + padding: var(--yt-button-padding-minus-focus-outline); } ytd-button-renderer.style-overlay[is-paper-button] { - background-color: var(--yt-spec-static-overlay-button-primary); - color: var(--yt-spec-static-overlay-text-primary); + background-color: var(--yt-spec-static-overlay-button-primary); + color: var(--yt-spec-static-overlay-text-primary); } ytd-button-renderer.style-overlay[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.ytd-button-renderer, + paper-button.keyboard-focus.ytd-button-renderer, ytd-button-renderer.style-overlay[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.ytd-button-renderer { - border: var(--yt-button-padding-minus-focus-outline-width) solid - var(--yt-spec-static-overlay-text-secondary); - padding: var(--yt-button-padding-minus-focus-outline); + paper-button.ytd-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid + var(--yt-spec-static-overlay-text-secondary); + padding: var(--yt-button-padding-minus-focus-outline); } ytd-button-renderer.style-white-with-border[is-paper-button] { - background-color: transparent; - border: 1px solid var(--yt-spec-static-brand-white); - color: var(--yt-spec-static-brand-white); + background-color: transparent; + border: 1px solid var(--yt-spec-static-brand-white); + color: var(--yt-spec-static-brand-white); } ytd-button-renderer.style-white-with-border[is-paper-button]:not([use-keyboard-focused]) - paper-button.keyboard-focus.ytd-button-renderer, + paper-button.keyboard-focus.ytd-button-renderer, ytd-button-renderer.style-white-with-border[is-paper-button][use-keyboard-focused][keyboard-focused] - paper-button.ytd-button-renderer { - border: var(--yt-button-padding-minus-focus-outline-width) solid - var(--yt-spec-static-brand-white); - padding: var(--yt-button-padding-minus-focus-outline); + paper-button.ytd-button-renderer { + border: var(--yt-button-padding-minus-focus-outline-width) solid + var(--yt-spec-static-brand-white); + padding: var(--yt-button-padding-minus-focus-outline); } ytd-button-renderer.style-alert-info[is-paper-button] { - color: var(--yt-blue); + color: var(--yt-blue); } ytd-button-renderer.style-alert-info[is-paper-button]:hover { - color: var(--yt-icon-hover-color); + color: var(--yt-icon-hover-color); } ytd-button-renderer.style-dark[is-paper-button] { - background-color: var( - --yt-button-dark-background-color, - var(--yt-opalescence-soft-grey) - ); - color: var(--yt-button-dark-text-color, var(--yt-luna-black)); + background-color: var( + --yt-button-dark-background-color, + var(--yt-opalescence-soft-grey) + ); + color: var(--yt-button-dark-text-color, var(--yt-luna-black)); } ytd-button-renderer.style-light[is-paper-button] { - background-color: var( - --yt-button-light-background-color, - var(--yt-opalescence-soft-grey) - ); - color: var( - --yt-button-light-text-color, - var(--yt-luna-black-opacity-lighten-2) - ); + background-color: var( + --yt-button-light-background-color, + var(--yt-opalescence-soft-grey) + ); + color: var( + --yt-button-light-text-color, + var(--yt-luna-black-opacity-lighten-2) + ); } ytd-button-renderer.style-light-text[is-paper-button] { - color: var(--yt-white); + color: var(--yt-white); } ytd-button-renderer.style-black[is-paper-button] { - color: var(--yt-spec-text-primary); + color: var(--yt-spec-text-primary); } ytd-button-renderer.style-visibly-disabled[is-paper-button] { - background-color: transparent; - color: var(--yt-spec-text-disabled); + background-color: transparent; + color: var(--yt-spec-text-disabled); } ytd-button-renderer.style-black[disabled][is-paper-button] { - color: var( - --yt-button-black-color, - var(--yt-opalescence-soft-grey-opacity-lighten-1) - ); + color: var( + --yt-button-black-color, + var(--yt-opalescence-soft-grey-opacity-lighten-1) + ); } ytd-button-renderer.style-dark-on-black[is-paper-button] { - background-color: var(--yt-playability-button-color); - border: none; - color: var(--yt-white-opacity-lighten-1); + background-color: var(--yt-playability-button-color); + border: none; + color: var(--yt-white-opacity-lighten-1); } ytd-button-renderer.style-blue-text-with-inverse-theme[is-paper-button] { - color: var(--yt-spec-call-to-action-inverse); + color: var(--yt-spec-call-to-action-inverse); } ytd-button-renderer.style-count { - font-size: var(--ytd-thumbnail-attribution_-_font-size); - font-weight: var(--ytd-thumbnail-attribution_-_font-weight); - line-height: var(--ytd-thumbnail-attribution_-_line-height); - letter-spacing: var(--ytd-thumbnail-attribution_-_letter-spacing); - text-transform: var(--ytd-thumbnail-attribution_-_text-transform); + font-size: var(--ytd-thumbnail-attribution_-_font-size); + font-weight: var(--ytd-thumbnail-attribution_-_font-weight); + line-height: var(--ytd-thumbnail-attribution_-_line-height); + letter-spacing: var(--ytd-thumbnail-attribution_-_letter-spacing); + text-transform: var(--ytd-thumbnail-attribution_-_text-transform); } paper-button.ytd-button-renderer { - display: inline-block; - text-align: center; - font-family: inherit; + display: inline-block; + text-align: center; + font-family: inherit; } ytd-button-renderer { - display: inline-block; - text-transform: uppercase; + display: inline-block; + text-transform: uppercase; } ytd-button-renderer.force-icon-button a.ytd-button-renderer { - cursor: pointer; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -ms-flex-direction: row; - -webkit-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; - -webkit-align-items: center; - align-items: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; + cursor: pointer; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; } ytd-button-renderer[disabled] a.ytd-button-renderer:focus { - outline: none; + outline: none; } ytd-button-renderer[is-icon-button][has-no-text] { - font-size: 0; + font-size: 0; } a.ytd-button-renderer { - display: -ms-flexbox; - display: -webkit-flex; - display: flex; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; } a.yt-simple-endpoint.ytd-button-renderer { - color: inherit; - border-radius: inherit; - text-decoration: none; + color: inherit; + border-radius: inherit; + text-decoration: none; } ytd-button-renderer[is-paper-button] { - border-radius: var(--yt-button-border-radius, 3px); - margin: var(--yt-button-margin, 0 0.29em); + border-radius: var(--yt-button-border-radius, 3px); + margin: var(--yt-button-margin, 0 0.29em); } ytd-button-renderer[is-paper-button][disabled] { - color: var(--yt-spec-text-disabled); - background-color: transparent; + color: var(--yt-spec-text-disabled); + background-color: transparent; } ytd-button-renderer[is-icon-button][disabled] { - color: #9b9b9b; + color: #9b9b9b; } ytd-button-renderer[is-icon-button][style-action-button] { - --yt-button-icon-padding: 6px; + --yt-button-icon-padding: 6px; } ytd-button-renderer[is-paper-button][align-by-text]:not(:empty) { - margin-left: -16px; + margin-left: -16px; } -ytd-button-renderer[is-paper-button][button-size="size-large"] { - line-height: 24px; +ytd-button-renderer[is-paper-button][button-size='size-large'] { + line-height: 24px; } paper-button.ytd-button-renderer { - width: var(--yt-paper-button-width, auto); - height: var(--yt-paper-button-height, auto); - border-radius: inherit; - margin: 0; - padding: var(--yt-button-padding, 0.7em 0.57em); - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -ms-flex-direction: row; - -webkit-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; - -webkit-align-items: center; - align-items: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -ms-flex: 1 1 auto; - -webkit-flex: 1 1 auto; - flex: 1 1 auto; + width: var(--yt-paper-button-width, auto); + height: var(--yt-paper-button-height, auto); + border-radius: inherit; + margin: 0; + padding: var(--yt-button-padding, 0.7em 0.57em); + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -ms-flex: 1 1 auto; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; } ytd-button-renderer[start-justified] paper-button.ytd-button-renderer { - -ms-flex-pack: start; - -webkit-justify-content: flex-start; - justify-content: flex-start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; } ytd-button-renderer[vertically-aligned] paper-button.ytd-button-renderer { - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -ms-flex-direction: column; - -webkit-flex-direction: column; - flex-direction: column; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; } #button.ytd-button-renderer { - color: var(--yt-button-color); - background-color: var(--yt-button-background-color); + color: var(--yt-button-color); + background-color: var(--yt-button-background-color); } ytd-button-renderer #button.ytd-button-renderer { - color: var(--yt-button-color, inherit); - background-color: transparent; - text-transform: inherit; + color: var(--yt-button-color, inherit); + background-color: transparent; + text-transform: inherit; } button.ytd-button-renderer, yt-icon-button.ytd-button-renderer { - padding: 1px 6px; + padding: 1px 6px; } yt-icon-button.ytd-button-renderer { - width: var(--yt-button-icon-size, 40px); - height: var(--yt-button-icon-size, 40px); - color: var(--yt-endpoint-color, var(--yt-luna-black)); + width: var(--yt-button-icon-size, 40px); + height: var(--yt-button-icon-size, 40px); + color: var(--yt-endpoint-color, var(--yt-luna-black)); } yt-icon-button.ytd-button-renderer::-moz-focus-inner { - padding: 0; - margin: 0; - border: 0; + padding: 0; + margin: 0; + border: 0; } yt-icon-button.ytd-button-renderer[disabled] { - color: var(--yt-button-disabled-color, rgba(17, 17, 17, 0.2)); + color: var(--yt-button-disabled-color, rgba(17, 17, 17, 0.2)); } yt-icon-button.ytd-button-renderer { - line-height: 1; - padding: var(--yt-button-icon-padding, 8px); - width: var(--yt-button-icon-size, var(--yt-icon-width, 40px)); - height: var(--yt-button-icon-size, var(--yt-icon-height, 40px)); + line-height: 1; + padding: var(--yt-button-icon-padding, 8px); + width: var(--yt-button-icon-size, var(--yt-icon-width, 40px)); + height: var(--yt-button-icon-size, var(--yt-icon-height, 40px)); } yt-icon-button.ytd-button-renderer > yt-icon.ytd-button-renderer { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } #button.ytd-button-renderer - yt-icon.ytd-button-renderer - + yt-formatted-string.ytd-button-renderer { - margin-left: var(--yt-string-icon-padding, 8px); + yt-icon.ytd-button-renderer + + yt-formatted-string.ytd-button-renderer { + margin-left: var(--yt-string-icon-padding, 8px); } #button.ytd-button-renderer - yt-formatted-string.ytd-button-renderer - + yt-icon.ytd-button-renderer { - margin-left: var(--yt-button-icon-padding, 8px); + yt-formatted-string.ytd-button-renderer + + yt-icon.ytd-button-renderer { + margin-left: var(--yt-button-icon-padding, 8px); } ytd-button-renderer[vertically-aligned] - #button.ytd-button-renderer - yt-icon.ytd-button-renderer - + yt-formatted-string.ytd-button-renderer { - margin-left: 0; - margin-top: var(--yt-string-icon-padding, 4px); + #button.ytd-button-renderer + yt-icon.ytd-button-renderer + + yt-formatted-string.ytd-button-renderer { + margin-left: 0; + margin-top: var(--yt-string-icon-padding, 4px); } ytd-button-renderer[vertically-aligned] - #button.ytd-button-renderer - yt-formatted-string.ytd-button-renderer - + yt-icon.ytd-button-renderer { - margin-left: 0; - margin-top: var(--yt-button-icon-padding, 4px); + #button.ytd-button-renderer + yt-formatted-string.ytd-button-renderer + + yt-icon.ytd-button-renderer { + margin-left: 0; + margin-top: var(--yt-button-icon-padding, 4px); } ytd-ad-hover-text-button-renderer { - opacity: 0.9; - display: block; + opacity: 0.9; + display: block; } ytd-ad-hover-text-button-renderer:hover { - opacity: 1; + opacity: 1; } #ad-info-tooltip.ytd-ad-hover-text-button-renderer { - white-space: nowrap; + white-space: nowrap; } #info-button.ytd-ad-hover-text-button-renderer { - position: relative; - vertical-align: top; - width: 15px; - height: 15px; - --yt-button-icon-padding: 1px; - --yt-button-icon-size: 15px; - -ms-align-self: center; - -webkit-align-self: center; - align-self: center; + position: relative; + vertical-align: top; + width: 15px; + height: 15px; + --yt-button-icon-padding: 1px; + --yt-button-icon-size: 15px; + -ms-align-self: center; + -webkit-align-self: center; + align-self: center; } #info-button.ytd-ad-hover-text-button-renderer > a { - cursor: pointer; - position: absolute; - top: 0; - right: 0; + cursor: pointer; + position: absolute; + top: 0; + right: 0; } ytd-live-chat-product-item-renderer { - --yt-live-chat-primary-text-color: var( - --yt-spec-static-overlay-text-primary - ); - --yt-live-chat-author-chip-owner-background-color: #ffd600; - --yt-live-chat-author-chip-owner-text-color: rgba(0, 0, 0, 0.87); - display: block; - padding-bottom: 4px; - padding-left: 24px; - width: calc(100% - 48px); + --yt-live-chat-primary-text-color: var(--yt-spec-static-overlay-text-primary); + --yt-live-chat-author-chip-owner-background-color: #ffd600; + --yt-live-chat-author-chip-owner-text-color: rgba(0, 0, 0, 0.87); + display: block; + padding-bottom: 4px; + padding-left: 24px; + width: calc(100% - 48px); } ytd-live-chat-product-item-renderer:hover, ytd-live-chat-product-item-renderer.hover { - background-color: var(--yt-spec-badge-chip-background); - border-radius: 2px; + background-color: var(--yt-spec-badge-chip-background); + border-radius: 2px; } ytd-live-chat-product-item-renderer:hover, ytd-live-chat-product-item-renderer.hover - .description-card-merchant.ytd-live-chat-product-item-renderer, + .description-card-merchant.ytd-live-chat-product-item-renderer, ytd-live-chat-product-item-renderer:hover, ytd-live-chat-product-item-renderer.hover - .description-card-merchant.ytd-live-chat-product-item-renderer - yt-icon.ytd-live-chat-product-item-renderer { - color: var(--yt-spec-static-overlay-call-to-action); + .description-card-merchant.ytd-live-chat-product-item-renderer + yt-icon.ytd-live-chat-product-item-renderer { + color: var(--yt-spec-static-overlay-call-to-action); } .yt-simple-endpoint.ytd-live-chat-product-item-renderer { - display: inline-block; - cursor: pointer; - text-decoration: none; - color: var(--yt-endpoint-color, var(--yt-spec-text-primary)); + display: inline-block; + cursor: pointer; + text-decoration: none; + color: var(--yt-endpoint-color, var(--yt-spec-text-primary)); } .yt-simple-endpoint.ytd-live-chat-product-item-renderer:hover { - color: var(--yt-endpoint-hover-color, var(--yt-spec-text-primary)); - text-decoration: var(--yt-endpoint-text-decoration, none); + color: var(--yt-endpoint-hover-color, var(--yt-spec-text-primary)); + text-decoration: var(--yt-endpoint-text-decoration, none); } #merch-item-container.yt-simple-endpoint.ytd-live-chat-product-item-renderer { - display: block; - text-decoration: none; + display: block; + text-decoration: none; } ytd-live-chat-product-item-renderer[in-collapsed-banner] - #merch-item-container.ytd-live-chat-product-item-renderer { - display: none; + #merch-item-container.ytd-live-chat-product-item-renderer { + display: none; } #container.ytd-live-chat-product-item-renderer { - background-color: rgba(0, 0, 0, 0.3); - border-radius: 4px; - margin-left: 0; - overflow: hidden; - width: 100%; + background-color: rgba(0, 0, 0, 0.3); + border-radius: 4px; + margin-left: 0; + overflow: hidden; + width: 100%; } #unavailable-product-card.ytd-live-chat-product-item-renderer { - padding: 8px 9px 8px 12px; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -ms-flex-direction: column; - -webkit-flex-direction: column; - flex-direction: column; + padding: 8px 9px 8px 12px; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; } #unavailable-product-card-title.ytd-live-chat-product-item-renderer { - color: var(--yt-spec-static-overlay-text-primary); - font-size: 14px; - font-weight: 500; - line-height: 18px; + color: var(--yt-spec-static-overlay-text-primary); + font-size: 14px; + font-weight: 500; + line-height: 18px; } #unavailable-product-card-link.ytd-live-chat-product-item-renderer { - color: var(--yt-spec-static-overlay-call-to-action); - margin-top: 10px; - font-size: 12px; - font-weight: 400; - line-height: 16px; + color: var(--yt-spec-static-overlay-call-to-action); + margin-top: 10px; + font-size: 12px; + font-weight: 400; + line-height: 16px; } #product-card.ytd-live-chat-product-item-renderer { - height: 76px; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -ms-flex-direction: row; - -webkit-flex-direction: row; - flex-direction: row; + height: 76px; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; } #product-card-image.ytd-live-chat-product-item-renderer { - background-color: var(--yt-spec-static-brand-white); - display: flex; - justify-content: center; - overflow: hidden; - padding: 4px 0; - width: 76px; + background-color: var(--yt-spec-static-brand-white); + display: flex; + justify-content: center; + overflow: hidden; + padding: 4px 0; + width: 76px; } #product-card-image.ytd-live-chat-product-item-renderer - yt-img-shadow.ytd-live-chat-product-item-renderer { - height: 68px; - width: 68px; + yt-img-shadow.ytd-live-chat-product-item-renderer { + height: 68px; + width: 68px; } #product-card-info.ytd-live-chat-product-item-renderer { - padding: 8px 9px 8px 12px; - position: relative; - width: calc(100% - 111px); - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -ms-flex-direction: column; - -webkit-flex-direction: column; - flex-direction: column; - -ms-flex: 1 1 1e-9px; - -webkit-flex: 1; - flex: 1; - -webkit-flex-basis: 1e-9px; - flex-basis: 1e-9px; + padding: 8px 9px 8px 12px; + position: relative; + width: calc(100% - 111px); + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + -ms-flex: 1 1 1e-9px; + -webkit-flex: 1; + flex: 1; + -webkit-flex-basis: 1e-9px; + flex-basis: 1e-9px; } #product-card-title.ytd-live-chat-product-item-renderer { - color: var(--yt-spec-static-overlay-text-primary); - position: relative; - font-size: 12px; - font-weight: 400; - line-height: 16px; + color: var(--yt-spec-static-overlay-text-primary); + position: relative; + font-size: 12px; + font-weight: 400; + line-height: 16px; } #product-card-title-text.ytd-live-chat-product-item-renderer { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: calc(100% - 20px); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: calc(100% - 20px); } #product-card-price.ytd-live-chat-product-item-renderer { - color: var(--yt-spec-static-overlay-text-primary); - margin-bottom: 8px; - margin-top: 4px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 14px; - font-weight: 500; - line-height: 18px; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -ms-flex-direction: row; - -webkit-flex-direction: row; - flex-direction: row; - -ms-flex: 1 1 1e-9px; - -webkit-flex: 1; - flex: 1; - -webkit-flex-basis: 1e-9px; - flex-basis: 1e-9px; + color: var(--yt-spec-static-overlay-text-primary); + margin-bottom: 8px; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; + font-weight: 500; + line-height: 18px; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex: 1 1 1e-9px; + -webkit-flex: 1; + flex: 1; + -webkit-flex-basis: 1e-9px; + flex-basis: 1e-9px; } #product-card-merchant.ytd-live-chat-product-item-renderer { - color: var(--yt-spec-static-overlay-call-to-action); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 12px; - font-weight: 400; - line-height: 16px; + color: var(--yt-spec-static-overlay-call-to-action); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 12px; + font-weight: 400; + line-height: 16px; } #product-card-merchant.ytd-live-chat-product-item-renderer { - padding-bottom: 2px; + padding-bottom: 2px; } ytd-live-chat-product-item-renderer[in-collapsed-banner] - #creator-message.ytd-live-chat-product-item-renderer { - display: inline-block; - text-overflow: ellipsis; - white-space: nowrap; + #creator-message.ytd-live-chat-product-item-renderer { + display: inline-block; + text-overflow: ellipsis; + white-space: nowrap; } ytd-live-chat-product-item-renderer[in-collapsed-banner] - #creator-name.ytd-live-chat-product-item-renderer { - flex-shrink: 0; + #creator-name.ytd-live-chat-product-item-renderer { + flex-shrink: 0; } ytd-live-chat-product-item-renderer[in-collapsed-banner] - #creator-message-content.ytd-live-chat-product-item-renderer { - width: calc(100% - 36px); - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -ms-flex-direction: row; - -webkit-flex-direction: row; - flex-direction: row; + #creator-message-content.ytd-live-chat-product-item-renderer { + width: calc(100% - 36px); + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; } #creator-message-content.ytd-live-chat-product-item-renderer { - font-size: 0; + font-size: 0; } #creator-name.ytd-live-chat-product-item-renderer { - background-color: #ffd600; - border-radius: 2px; - color: rgba(0, 0, 0, 0.87); - display: inline-block; - height: 16px; - margin-right: 4px; - padding: 2px 4px; - -ms-flex-align: center; - -webkit-align-items: center; - align-items: center; - display: -ms-inline-flexbox; - display: -webkit-inline-flex; - display: inline-flex; - font-size: 12px; - font-weight: 400; - line-height: 12px; + background-color: #ffd600; + border-radius: 2px; + color: rgba(0, 0, 0, 0.87); + display: inline-block; + height: 16px; + margin-right: 4px; + padding: 2px 4px; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + display: -ms-inline-flexbox; + display: -webkit-inline-flex; + display: inline-flex; + font-size: 12px; + font-weight: 400; + line-height: 12px; } #creator-name.ytd-live-chat-product-item-renderer - yt-icon.ytd-live-chat-product-item-renderer { - color: rgba(0, 0, 0, 0.87); - padding-bottom: 2px; - padding-left: 4px; + yt-icon.ytd-live-chat-product-item-renderer { + color: rgba(0, 0, 0, 0.87); + padding-bottom: 2px; + padding-left: 4px; } #creator-message.ytd-live-chat-product-item-renderer { - color: var(--yt-spec-static-overlay-text-secondary); - overflow-wrap: break-word; - overflow: hidden; - padding-left: 2px; - word-break: break-word; - word-wrap: break-word; - font-size: 13px; - font-weight: 400; - line-height: 18px; + color: var(--yt-spec-static-overlay-text-secondary); + overflow-wrap: break-word; + overflow: hidden; + padding-left: 2px; + word-break: break-word; + word-wrap: break-word; + font-size: 13px; + font-weight: 400; + line-height: 18px; } #creator-message.ytd-live-chat-product-item-renderer - yt-icon.ytd-live-chat-product-item-renderer { - display: block; - height: 16px; - width: 16px; + yt-icon.ytd-live-chat-product-item-renderer { + display: block; + height: 16px; + width: 16px; } #creator-photo.ytd-live-chat-product-item-renderer { - border-radius: 50%; - height: 24px; - margin-right: 12px; - margin-top: -3px; - overflow: hidden; - width: 24px; - -ms-flex: none; - -webkit-flex: none; - flex: none; + border-radius: 50%; + height: 24px; + margin-right: 12px; + margin-top: -3px; + overflow: hidden; + width: 24px; + -ms-flex: none; + -webkit-flex: none; + flex: none; } #creator-message-container.ytd-live-chat-product-item-renderer { - padding-top: 7px; - padding-bottom: 12px; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -ms-flex-direction: row; - -webkit-flex-direction: row; - flex-direction: row; + padding-top: 7px; + padding-bottom: 12px; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; } #item-whitespace.ytd-live-chat-product-item-renderer { - width: 5px; + width: 5px; } #single-item-additional-fees-text.ytd-live-chat-product-item-renderer { - color: var(--yt-spec-static-overlay-text-primary); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 12px; - font-weight: 400; - line-height: 16px; + color: var(--yt-spec-static-overlay-text-primary); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 12px; + font-weight: 400; + line-height: 16px; } yt-icon.ytd-live-chat-product-item-renderer { - color: var(--yt-spec-static-overlay-call-to-action); - flex-shrink: 0; - height: 15px; - width: 15px; + color: var(--yt-spec-static-overlay-call-to-action); + flex-shrink: 0; + height: 15px; + width: 15px; } #information-icon.ytd-live-chat-product-item-renderer { - display: block; - opacity: 0.9; - position: absolute; - right: 0; - top: -2.5px; + display: block; + opacity: 0.9; + position: absolute; + right: 0; + top: -2.5px; } #information-icon.ytd-live-chat-product-item-renderer:hover { - opacity: 1; + opacity: 1; } #info-button.ytd-live-chat-product-item-renderer { - --yt-icon-button-icon-height: 14px; - --yt-icon-button-icon-width: 14px; - --yt-spec-icon-inactive: var(--yt-spec-static-overlay-icon-inactive); - --yt-button-icon-padding: 1px; - --yt-button-icon-size: 15px; + --yt-icon-button-icon-height: 14px; + --yt-icon-button-icon-width: 14px; + --yt-spec-icon-inactive: var(--yt-spec-static-overlay-icon-inactive); + --yt-button-icon-padding: 1px; + --yt-button-icon-size: 15px; } yt-live-chat-banner-renderer { - display: block; - padding: 4px 8px 4px 18px; - border-radius: 4px; - position: relative; - overflow: hidden; - cursor: pointer; - contain: content; - --yt-live-chat-primary-text-color: var( - --yt-spec-static-overlay-text-primary - ); - --yt-live-chat-secondary-text-color: var( - --yt-spec-static-overlay-text-secondary - ); - --yt-live-chat-tertiary-text-color: var( - --yt-spec-static-overlay-text-disabled - ); - --yt-live-chat-deleted-message-color: var( - --yt-spec-static-overlay-text-disabled - ); - --yt-live-chat-sponsor-color: var(--yt-spec-static-overlay-text-secondary); - --yt-live-chat-moderator-color: var( - --yt-spec-static-overlay-text-secondary - ); + display: block; + padding: 4px 8px 4px 18px; + border-radius: 4px; + position: relative; + overflow: hidden; + cursor: pointer; + contain: content; + --yt-live-chat-primary-text-color: var(--yt-spec-static-overlay-text-primary); + --yt-live-chat-secondary-text-color: var( + --yt-spec-static-overlay-text-secondary + ); + --yt-live-chat-tertiary-text-color: var( + --yt-spec-static-overlay-text-disabled + ); + --yt-live-chat-deleted-message-color: var( + --yt-spec-static-overlay-text-disabled + ); + --yt-live-chat-sponsor-color: var(--yt-spec-static-overlay-text-secondary); + --yt-live-chat-moderator-color: var(--yt-spec-static-overlay-text-secondary); } yt-live-chat-banner-renderer[is-poll-banner] { - padding-left: 0; - padding-top: 0; + padding-left: 0; + padding-top: 0; } #contents.yt-live-chat-banner-renderer { - padding: 0 8px 4px 12px; - transition: transform var(--yt-live-chat-universal-motion-curve), - height var(--yt-live-chat-universal-motion-curve), - padding-bottom var(--yt-live-chat-universal-motion-curve); - transition-duration: var(--yt-live-chat-banner-animation-duration); + padding: 0 8px 4px 12px; + transition: transform var(--yt-live-chat-universal-motion-curve), + height var(--yt-live-chat-universal-motion-curve), + padding-bottom var(--yt-live-chat-universal-motion-curve); + transition-duration: var(--yt-live-chat-banner-animation-duration); } yt-live-chat-banner-renderer[is-poll-banner] - #contents.yt-live-chat-banner-renderer { - padding-right: 0; - padding-left: 0; + #contents.yt-live-chat-banner-renderer { + padding-right: 0; + padding-left: 0; } yt-live-chat-banner-renderer[collapsed] #contents.yt-live-chat-banner-renderer { - padding-bottom: 0; + padding-bottom: 0; } yt-live-chat-banner-renderer[collapsed]:not([is-poll-banner]) - #contents.yt-live-chat-banner-renderer { - pointer-events: none; + #contents.yt-live-chat-banner-renderer { + pointer-events: none; } .background.yt-live-chat-banner-renderer { - position: var(--layout-fit_-_position); - top: var(--layout-fit_-_top); - right: var(--layout-fit_-_right); - bottom: var(--layout-fit_-_bottom); - left: var(--layout-fit_-_left); + position: var(--layout-fit_-_position); + top: var(--layout-fit_-_top); + right: var(--layout-fit_-_right); + bottom: var(--layout-fit_-_bottom); + left: var(--layout-fit_-_left); } #contents.yt-live-chat-banner-renderer > *.yt-live-chat-banner-renderer { - background-color: transparent; + background-color: transparent; } yt-live-chat-banner-renderer[is-poll-banner] - #header.yt-live-chat-banner-renderer { - display: none; + #header.yt-live-chat-banner-renderer { + display: none; } #indeterminate-bar.yt-live-chat-banner-renderer { - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 2px; - background: var(--yt-live-chat-banner-indeterminate-bar-background); - margin-right: -9px; - animation: slide-horizontal infinite linear; - animation-duration: var(--yt-live-chat-banner-bar-animation-duration); + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 2px; + background: var(--yt-live-chat-banner-indeterminate-bar-background); + margin-right: -9px; + animation: slide-horizontal infinite linear; + animation-duration: var(--yt-live-chat-banner-bar-animation-duration); } @keyframes slide-horizontal { - 0% { - transform: translateX(0); - } + 0% { + transform: translateX(0); + } - 100% { - transform: translateX(-9px); - } + 100% { + transform: translateX(-9px); + } } yt-live-chat-banner-manager { - display: block; + display: block; } yt-live-chat-banner-renderer.yt-live-chat-banner-manager { - border: 1px solid var(--yt-live-chat-banner-border-color); + border: 1px solid var(--yt-live-chat-banner-border-color); } yt-live-chat-banner-renderer.yt-live-chat-banner-manager:not(:first-of-type) { - margin-top: 8px; + margin-top: 8px; } yt-live-chat-banner-manager[has-visible-banner] { - background: var(--yt-live-chat-banner-gradient-scrim); + background: var(--yt-live-chat-banner-gradient-scrim); } yt-live-chat-banner-manager[has-visible-banner] - yt-live-chat-banner-renderer.yt-live-chat-banner-manager { - animation: slideDown var(--yt-live-chat-universal-motion-curve) forwards; - animation-duration: var(--yt-live-chat-banner-animation-duration); + yt-live-chat-banner-renderer.yt-live-chat-banner-manager { + animation: slideDown var(--yt-live-chat-universal-motion-curve) forwards; + animation-duration: var(--yt-live-chat-banner-animation-duration); } @keyframes slideDown { - 0% { - transform: translateY(-15%); - opacity: 0; - } + 0% { + transform: translateY(-15%); + opacity: 0; + } - 100% { - transform: translateY(0); - opacity: 1; - } + 100% { + transform: translateY(0); + opacity: 1; + } } yt-live-chat-docked-message-renderer { - display: block; - overflow: hidden; + display: block; + overflow: hidden; } yt-live-chat-docked-message-renderer[is-undocking] - #undocking-item.yt-live-chat-docked-message-renderer - yt-live-chat-text-message-renderer.yt-live-chat-docked-message-renderer { - animation: fadeOut ease-out 0.5s forwards; + #undocking-item.yt-live-chat-docked-message-renderer + yt-live-chat-text-message-renderer.yt-live-chat-docked-message-renderer { + animation: fadeOut ease-out 0.5s forwards; } #container.yt-live-chat-docked-message-renderer { - z-index: 0; + z-index: 0; } #undocking-item.yt-live-chat-docked-message-renderer { - z-index: 1; + z-index: 1; } #docked-item.yt-live-chat-docked-message-renderer, #undocking-item.yt-live-chat-docked-message-renderer { - margin: 8px 24px 0 8px; + margin: 8px 24px 0 8px; } #docked-item.yt-live-chat-docked-message-renderer - yt-live-chat-text-message-renderer.yt-live-chat-docked-message-renderer, + yt-live-chat-text-message-renderer.yt-live-chat-docked-message-renderer, #undocking-item.yt-live-chat-docked-message-renderer - yt-live-chat-text-message-renderer.yt-live-chat-docked-message-renderer { - border-radius: 4px; - padding-left: 16px; + yt-live-chat-text-message-renderer.yt-live-chat-docked-message-renderer { + border-radius: 4px; + padding-left: 16px; } @keyframes fadeOut { - 0% { - opacity: 1; - } + 0% { + opacity: 1; + } - 100% { - opacity: 0; - } + 100% { + opacity: 0; + } } yt-live-chat-donation-announcement-renderer { - position: relative; - display: block; - padding: 4px 24px; - --yt-live-chat-donation-chip-background-color: #e0e0e0; - --yt-live-chat-donation-chip-text-color: #262626; - --yt-live-chat-item-timestamp-display: none; + position: relative; + display: block; + padding: 4px 24px; + --yt-live-chat-donation-chip-background-color: #e0e0e0; + --yt-live-chat-donation-chip-text-color: #262626; + --yt-live-chat-item-timestamp-display: none; } yt-live-chat-donation-announcement-renderer[dashboard-money-feed] { - padding: 0; - --yt-live-chat-item-timestamp-display: block; + padding: 0; + --yt-live-chat-item-timestamp-display: block; } #card.yt-live-chat-donation-announcement-renderer { - position: relative; - background-color: var(--yt-live-chat-secondary-background-color); - border-radius: 4px; - color: var(--yt-live-chat-primary-text-color); - padding: 12px 16px; - 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); + position: relative; + background-color: var(--yt-live-chat-secondary-background-color); + border-radius: 4px; + color: var(--yt-live-chat-primary-text-color); + padding: 12px 16px; + 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); } yt-live-chat-donation-announcement-renderer[dashboard-money-feed] - #card.yt-live-chat-donation-announcement-renderer { - background-color: transparent; - color: transparent; + #card.yt-live-chat-donation-announcement-renderer { + background-color: transparent; + color: transparent; } yt-live-chat-donation-announcement-renderer[dashboard-money-feed] - #content-header.yt-live-chat-donation-announcement-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-align: var(--layout-baseline_-_-ms-flex-align); - -webkit-align-items: var(--layout-baseline_-_-webkit-align-items); - align-items: var(--layout-baseline_-_align-items); + #content-header.yt-live-chat-donation-announcement-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-align: var(--layout-baseline_-_-ms-flex-align); + -webkit-align-items: var(--layout-baseline_-_-webkit-align-items); + align-items: var(--layout-baseline_-_align-items); } #author-name.yt-live-chat-donation-announcement-renderer { - display: none; + display: none; } yt-live-chat-donation-announcement-renderer[dashboard-money-feed] - #author-name.yt-live-chat-donation-announcement-renderer { - display: block; - font-size: 14px; - font-weight: 500; - margin-right: 8px; - color: var(--yt-live-chat-secondary-text-color); - overflow: hidden; - -webkit-box-orient: var(--yt-multi-line-ellipsis_-_-webkit-box-orient); - text-overflow: var(--yt-multi-line-ellipsis_-_text-overflow); - white-space: var(--yt-multi-line-ellipsis_-_white-space); - display: var(--yt-multi-line-ellipsis_-_display, block); - -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); + #author-name.yt-live-chat-donation-announcement-renderer { + display: block; + font-size: 14px; + font-weight: 500; + margin-right: 8px; + color: var(--yt-live-chat-secondary-text-color); + overflow: hidden; + -webkit-box-orient: var(--yt-multi-line-ellipsis_-_-webkit-box-orient); + text-overflow: var(--yt-multi-line-ellipsis_-_text-overflow); + white-space: var(--yt-multi-line-ellipsis_-_white-space); + display: var(--yt-multi-line-ellipsis_-_display, block); + -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); } #text.yt-live-chat-donation-announcement-renderer { - display: block; - font-size: 14px; - margin-bottom: var(--ytd-margin-base); + display: block; + font-size: 14px; + margin-bottom: var(--ytd-margin-base); } yt-live-chat-donation-announcement-renderer[dashboard-money-feed] - #text.yt-live-chat-donation-announcement-renderer { - height: 24px; - min-width: 16px; - border-radius: 12px; - margin-right: 8px; - padding: 0 12px; - background-color: var(--yt-live-chat-donation-chip-background-color); - color: var(--yt-live-chat-donation-chip-text-color); - font-size: var(--ytd-badge_-_font-size); - font-weight: var(--ytd-badge_-_font-weight); - line-height: var(--ytd-badge_-_line-height); - display: var(--layout-inline_-_display); - -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); + #text.yt-live-chat-donation-announcement-renderer { + height: 24px; + min-width: 16px; + border-radius: 12px; + margin-right: 8px; + padding: 0 12px; + background-color: var(--yt-live-chat-donation-chip-background-color); + color: var(--yt-live-chat-donation-chip-text-color); + font-size: var(--ytd-badge_-_font-size); + font-weight: var(--ytd-badge_-_font-weight); + line-height: var(--ytd-badge_-_line-height); + display: var(--layout-inline_-_display); + -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); } #subtext.yt-live-chat-donation-announcement-renderer { - display: block; - font-size: 12px; + display: block; + font-size: 12px; } yt-live-chat-donation-announcement-renderer[dashboard-money-feed] - #subtext.yt-live-chat-donation-announcement-renderer { - display: none; + #subtext.yt-live-chat-donation-announcement-renderer { + display: none; } #author-photo.yt-live-chat-donation-announcement-renderer { - max-height: 40px; + max-height: 40px; } #menu.yt-live-chat-donation-announcement-renderer { - background: linear-gradient( - to right, - transparent, - var(--yt-live-chat-secondary-background-color) 100% - ); - border-radius: 0 4px 4px 0; + background: linear-gradient( + to right, + transparent, + var(--yt-live-chat-secondary-background-color) 100% + ); + border-radius: 0 4px 4px 0; } yt-live-chat-donation-announcement-renderer[dashboard-money-feed] - #menu.yt-live-chat-donation-announcement-renderer { - margin-top: 8px; - background: linear-gradient( - to right, - transparent, - var(--yt-live-chat-background-color) 40% - ); - color: var(--yt-live-chat-secondary-text-color); + #menu.yt-live-chat-donation-announcement-renderer { + margin-top: 8px; + background: linear-gradient( + to right, + transparent, + var(--yt-live-chat-background-color) 40% + ); + color: var(--yt-live-chat-secondary-text-color); } #timestamp.yt-live-chat-donation-announcement-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; + 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-donation-announcement-renderer { - display: block; - margin-right: 16px; + display: block; + margin-right: 16px; - overflow: hidden; - border-radius: 50%; + 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); + -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-donation-announcement-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); + 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-donation-announcement-renderer { - position: absolute; - top: 0; - bottom: 0; - right: 0; + position: absolute; + top: 0; + bottom: 0; + right: 0; - transform: translateX(100px); + transform: translateX(100px); } yt-live-chat-donation-announcement-renderer:hover - #menu.yt-live-chat-donation-announcement-renderer, + #menu.yt-live-chat-donation-announcement-renderer, yt-live-chat-donation-announcement-renderer[menu-visible] - #menu.yt-live-chat-donation-announcement-renderer { - transform: none; + #menu.yt-live-chat-donation-announcement-renderer { + transform: none; } yt-live-chat-donation-announcement-renderer:focus-within - #menu.yt-live-chat-donation-announcement-renderer { - transform: none; + #menu.yt-live-chat-donation-announcement-renderer { + transform: none; } #inline-action-button-container.yt-live-chat-donation-announcement-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); + 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-donation-announcement-renderer[has-inline-action-buttons]:hover - #inline-action-button-container.yt-live-chat-donation-announcement-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); + #inline-action-button-container.yt-live-chat-donation-announcement-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); + display: var(--yt-live-chat-inline-action-button-container-display, none); } yt-live-chat-donation-announcement-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover - #inline-action-button-container.yt-live-chat-donation-announcement-renderer { - display: none; + #inline-action-button-container.yt-live-chat-donation-announcement-renderer { + display: none; } yt-live-chat-donation-announcement-renderer[has-inline-action-buttons]:hover - #menu.yt-live-chat-donation-announcement-renderer { - display: var( - --yt-live-chat-item-with-inline-actions-context-menu-display, - block - ); + #menu.yt-live-chat-donation-announcement-renderer { + display: var( + --yt-live-chat-item-with-inline-actions-context-menu-display, + block + ); } #inline-action-buttons.yt-live-chat-donation-announcement-renderer - > *.yt-live-chat-donation-announcement-renderer, + > *.yt-live-chat-donation-announcement-renderer, #additional-inline-action-buttons.yt-live-chat-donation-announcement-renderer - > *.yt-live-chat-donation-announcement-renderer { - --yt-button-icon-size: 36px; - --yt-button-icon-padding: 6px; + > *.yt-live-chat-donation-announcement-renderer { + --yt-button-icon-size: 36px; + --yt-button-icon-padding: 6px; - color: var(--yt-white); - border-radius: 2px; + color: var(--yt-white); + border-radius: 2px; } #inline-action-buttons.yt-live-chat-donation-announcement-renderer - > *.yt-live-chat-donation-announcement-renderer { - background: var(--yt-luna-black-opacity-lighten-1); + > *.yt-live-chat-donation-announcement-renderer { + background: var(--yt-luna-black-opacity-lighten-1); } #inline-action-buttons.yt-live-chat-donation-announcement-renderer - > .yt-live-chat-donation-announcement-renderer:hover { - background: var(--yt-luna-black); + > .yt-live-chat-donation-announcement-renderer:hover { + background: var(--yt-luna-black); } #additional-inline-action-buttons.yt-live-chat-donation-announcement-renderer - > *.yt-live-chat-donation-announcement-renderer { - color: var(--yt-live-chat-additional-inline-action-button-color); - background: var( - --yt-live-chat-additional-inline-action-button-background-color - ); + > *.yt-live-chat-donation-announcement-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-donation-announcement-renderer - > .yt-live-chat-donation-announcement-renderer:hover { - background: var( - --yt-live-chat-additional-inline-action-button-background-color-hover - ); + > .yt-live-chat-donation-announcement-renderer:hover { + background: var( + --yt-live-chat-additional-inline-action-button-background-color-hover + ); } #additional-inline-action-buttons.yt-live-chat-donation-announcement-renderer:not(:empty) { - margin-left: 32px; + margin-left: 32px; } #inline-action-buttons.yt-live-chat-donation-announcement-renderer - > *.yt-live-chat-donation-announcement-renderer:not(:first-child), + > *.yt-live-chat-donation-announcement-renderer:not(:first-child), #additional-inline-action-buttons.yt-live-chat-donation-announcement-renderer - > *.yt-live-chat-donation-announcement-renderer:not(:first-child) { - margin-left: 8px; + > *.yt-live-chat-donation-announcement-renderer:not(:first-child) { + margin-left: 8px; } yt-live-chat-legacy-paid-message-renderer { - position: relative; - display: block; - --yt-live-chat-sponsor-color: #0f9d58; - --yt-live-chat-item-timestamp-display: var( - --yt-live-chat-paid-message-timestamp-display, - none - ); - padding: 4px 24px; + position: relative; + display: block; + --yt-live-chat-sponsor-color: #0f9d58; + --yt-live-chat-item-timestamp-display: var( + --yt-live-chat-paid-message-timestamp-display, + none + ); + padding: 4px 24px; } yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] { - padding: 0; + padding: 0; } #card.yt-live-chat-legacy-paid-message-renderer { - position: relative; - padding: 8px 16px; - background-color: var(--yt-live-chat-sponsor-color); - border-radius: 4px; - color: #fff; - font-size: 14px; - min-height: 40px; - display: 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); - box-shadow: var(--shadow-elevation-2dp_-_box-shadow); + position: relative; + padding: 8px 16px; + background-color: var(--yt-live-chat-sponsor-color); + border-radius: 4px; + color: #fff; + font-size: 14px; + min-height: 40px; + display: 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); + box-shadow: var(--shadow-elevation-2dp_-_box-shadow); } yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] - #card.yt-live-chat-legacy-paid-message-renderer { - border-radius: 0; - box-shadow: none; - background-color: var(--yt-live-chat-background-color); - color: rgba(0, 0, 0, 0.87); + #card.yt-live-chat-legacy-paid-message-renderer { + border-radius: 0; + box-shadow: none; + background-color: var(--yt-live-chat-background-color); + color: rgba(0, 0, 0, 0.87); } #author-photo.yt-live-chat-legacy-paid-message-renderer { - -ms-align-self: var(--layout-self-start_-_-ms-align-self); - -webkit-align-self: var(--layout-self-start_-_-webkit-align-self); - align-self: var(--layout-self-start_-_align-self); + -ms-align-self: var(--layout-self-start_-_-ms-align-self); + -webkit-align-self: var(--layout-self-start_-_-webkit-align-self); + align-self: var(--layout-self-start_-_align-self); } #author-name.yt-live-chat-legacy-paid-message-renderer { - display: none; + display: none; } yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] - #author-name.yt-live-chat-legacy-paid-message-renderer { - display: block; - margin-right: 8px; - color: var(--yt-live-chat-secondary-text-color); - font-weight: 500; + #author-name.yt-live-chat-legacy-paid-message-renderer { + display: block; + margin-right: 8px; + color: var(--yt-live-chat-secondary-text-color); + font-weight: 500; } #content.yt-live-chat-legacy-paid-message-renderer { - -ms-flex: 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: 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); } yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] - #content.yt-live-chat-legacy-paid-message-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); + #content.yt-live-chat-legacy-paid-message-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-legacy-paid-message-renderer[dashboard-money-feed] - #content-primary-column.yt-live-chat-legacy-paid-message-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-align: var(--layout-baseline_-_-ms-flex-align); - -webkit-align-items: var(--layout-baseline_-_-webkit-align-items); - align-items: var(--layout-baseline_-_align-items); + #content-primary-column.yt-live-chat-legacy-paid-message-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-align: var(--layout-baseline_-_-ms-flex-align); + -webkit-align-items: var(--layout-baseline_-_-webkit-align-items); + align-items: var(--layout-baseline_-_align-items); } #event-text.yt-live-chat-legacy-paid-message-renderer { - color: rgba(255, 255, 255, 0.7); - font-weight: 500; + color: rgba(255, 255, 255, 0.7); + font-weight: 500; } yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] - #event-text.yt-live-chat-legacy-paid-message-renderer { - display: inline; - height: 24px; - min-width: 16px; - border-radius: 12px; - margin-right: 8px; - padding: 0 12px; - background-color: var(--yt-live-chat-sponsor-color); - color: 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); + #event-text.yt-live-chat-legacy-paid-message-renderer { + display: inline; + height: 24px; + min-width: 16px; + border-radius: 12px; + margin-right: 8px; + padding: 0 12px; + background-color: var(--yt-live-chat-sponsor-color); + color: 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); } #detail-text.yt-live-chat-legacy-paid-message-renderer { - font-size: 15px; - word-wrap: break-word; - word-break: break-word; + font-size: 15px; + word-wrap: break-word; + word-break: break-word; } #detail-text.yt-live-chat-legacy-paid-message-renderer - .emoji.yt-live-chat-legacy-paid-message-renderer { - width: var(--yt-live-chat-emoji-size); - height: var(--yt-live-chat-emoji-size); - margin: -1px 2px 1px; - vertical-align: middle; + .emoji.yt-live-chat-legacy-paid-message-renderer { + width: var(--yt-live-chat-emoji-size); + height: var(--yt-live-chat-emoji-size); + margin: -1px 2px 1px; + vertical-align: middle; } yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] - #detail-text.yt-live-chat-legacy-paid-message-renderer { - display: none; + #detail-text.yt-live-chat-legacy-paid-message-renderer { + display: none; } a.yt-live-chat-legacy-paid-message-renderer { - display: inline; - text-decoration: underline; + display: inline; + text-decoration: underline; } #detail-text.yt-live-chat-legacy-paid-message-renderer - a.yt-live-chat-legacy-paid-message-renderer { - word-break: break-all; + a.yt-live-chat-legacy-paid-message-renderer { + word-break: break-all; } #detail-text.yt-live-chat-legacy-paid-message-renderer - a.yt-live-chat-legacy-paid-message-renderer - .mention.yt-live-chat-legacy-paid-message-renderer { - text-decoration: underline; + a.yt-live-chat-legacy-paid-message-renderer + .mention.yt-live-chat-legacy-paid-message-renderer { + text-decoration: underline; } #menu.yt-live-chat-legacy-paid-message-renderer { - background: linear-gradient( - to right, - transparent, - var(--yt-live-chat-sponsor-color) 100% - ); - border-radius: 0 4px 4px 0; + background: linear-gradient( + to right, + transparent, + var(--yt-live-chat-sponsor-color) 100% + ); + border-radius: 0 4px 4px 0; } yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] - #menu.yt-live-chat-legacy-paid-message-renderer { - margin-top: 8px; - background: linear-gradient( - to right, - transparent, - var(--yt-live-chat-background-color) 40% - ); + #menu.yt-live-chat-legacy-paid-message-renderer { + margin-top: 8px; + background: linear-gradient( + to right, + transparent, + var(--yt-live-chat-background-color) 40% + ); } #timestamp.yt-live-chat-legacy-paid-message-renderer { - display: var(--yt-live-chat-item-timestamp-display, inline); - margin: var(--yt-live-chat-item-timestamp-margin, 0 8px 0 0); - color: var(--yt-live-chat-tertiary-text-color); - font-size: 11px; + display: var(--yt-live-chat-item-timestamp-display, inline); + margin: var(--yt-live-chat-item-timestamp-margin, 0 8px 0 0); + color: var(--yt-live-chat-tertiary-text-color); + font-size: 11px; } #author-photo.yt-live-chat-legacy-paid-message-renderer { - display: block; - margin-right: 16px; + display: block; + margin-right: 16px; - overflow: hidden; - border-radius: 50%; + 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); + -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-legacy-paid-message-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); + 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-legacy-paid-message-renderer { - position: absolute; - top: 0; - bottom: 0; - right: 0; + position: absolute; + top: 0; + bottom: 0; + right: 0; - transform: translateX(100px); + transform: translateX(100px); } yt-live-chat-legacy-paid-message-renderer:hover - #menu.yt-live-chat-legacy-paid-message-renderer, + #menu.yt-live-chat-legacy-paid-message-renderer, yt-live-chat-legacy-paid-message-renderer[menu-visible] - #menu.yt-live-chat-legacy-paid-message-renderer { - transform: none; + #menu.yt-live-chat-legacy-paid-message-renderer { + transform: none; } yt-live-chat-legacy-paid-message-renderer:focus-within - #menu.yt-live-chat-legacy-paid-message-renderer { - transform: none; + #menu.yt-live-chat-legacy-paid-message-renderer { + transform: none; } #inline-action-button-container.yt-live-chat-legacy-paid-message-renderer { - position: absolute; - top: -4px; - right: 0; - bottom: -4px; - left: 0; - - background-color: var( - --yt-live-chat-moderation-mode-hover-background-color - ); - display: none; - - -ms-flex-align: 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); + 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-legacy-paid-message-renderer[has-inline-action-buttons]:hover - #inline-action-button-container.yt-live-chat-legacy-paid-message-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); + #inline-action-button-container.yt-live-chat-legacy-paid-message-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); + display: var(--yt-live-chat-inline-action-button-container-display, none); } yt-live-chat-legacy-paid-message-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover - #inline-action-button-container.yt-live-chat-legacy-paid-message-renderer { - display: none; + #inline-action-button-container.yt-live-chat-legacy-paid-message-renderer { + display: none; } yt-live-chat-legacy-paid-message-renderer[has-inline-action-buttons]:hover - #menu.yt-live-chat-legacy-paid-message-renderer { - display: var( - --yt-live-chat-item-with-inline-actions-context-menu-display, - block - ); + #menu.yt-live-chat-legacy-paid-message-renderer { + display: var( + --yt-live-chat-item-with-inline-actions-context-menu-display, + block + ); } #inline-action-buttons.yt-live-chat-legacy-paid-message-renderer - > *.yt-live-chat-legacy-paid-message-renderer, + > *.yt-live-chat-legacy-paid-message-renderer, #additional-inline-action-buttons.yt-live-chat-legacy-paid-message-renderer - > *.yt-live-chat-legacy-paid-message-renderer { - --yt-button-icon-size: 36px; - --yt-button-icon-padding: 6px; + > *.yt-live-chat-legacy-paid-message-renderer { + --yt-button-icon-size: 36px; + --yt-button-icon-padding: 6px; - color: var(--yt-white); - border-radius: 2px; + color: var(--yt-white); + border-radius: 2px; } #inline-action-buttons.yt-live-chat-legacy-paid-message-renderer - > *.yt-live-chat-legacy-paid-message-renderer { - background: var(--yt-luna-black-opacity-lighten-1); + > *.yt-live-chat-legacy-paid-message-renderer { + background: var(--yt-luna-black-opacity-lighten-1); } #inline-action-buttons.yt-live-chat-legacy-paid-message-renderer - > .yt-live-chat-legacy-paid-message-renderer:hover { - background: var(--yt-luna-black); + > .yt-live-chat-legacy-paid-message-renderer:hover { + background: var(--yt-luna-black); } #additional-inline-action-buttons.yt-live-chat-legacy-paid-message-renderer - > *.yt-live-chat-legacy-paid-message-renderer { - color: var(--yt-live-chat-additional-inline-action-button-color); - background: var( - --yt-live-chat-additional-inline-action-button-background-color - ); + > *.yt-live-chat-legacy-paid-message-renderer { + color: var(--yt-live-chat-additional-inline-action-button-color); + background: var( + --yt-live-chat-additional-inline-action-button-background-color + ); } #additional-inline-action-buttons.yt-live-chat-legacy-paid-message-renderer - > .yt-live-chat-legacy-paid-message-renderer:hover { - background: var( - --yt-live-chat-additional-inline-action-button-background-color-hover - ); + > .yt-live-chat-legacy-paid-message-renderer:hover { + background: var( + --yt-live-chat-additional-inline-action-button-background-color-hover + ); } #additional-inline-action-buttons.yt-live-chat-legacy-paid-message-renderer:not(:empty) { - margin-left: 32px; + margin-left: 32px; } #inline-action-buttons.yt-live-chat-legacy-paid-message-renderer - > *.yt-live-chat-legacy-paid-message-renderer:not(:first-child), + > *.yt-live-chat-legacy-paid-message-renderer:not(:first-child), #additional-inline-action-buttons.yt-live-chat-legacy-paid-message-renderer - > *.yt-live-chat-legacy-paid-message-renderer:not(:first-child) { - margin-left: 8px; + > *.yt-live-chat-legacy-paid-message-renderer:not(:first-child) { + margin-left: 8px; } yt-live-chat-mode-change-message-renderer { - display: block; - margin: 8px 0; - padding: 0 24px; - color: var(--yt-live-chat-primary-text-color, var(--yt-primary-text-color)); - font-size: 13px; + display: block; + margin: 8px 0; + padding: 0 24px; + color: var(--yt-live-chat-primary-text-color, var(--yt-primary-text-color)); + font-size: 13px; } #contents.yt-live-chat-mode-change-message-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); - -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); - padding: 16px 30px; - border-radius: 4px; - background: var( - --yt-live-chat-mode-change-background-color, - var(--yt-opalescence-soft-grey) - ); + 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); + -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); + padding: 16px 30px; + border-radius: 4px; + background: var( + --yt-live-chat-mode-change-background-color, + var(--yt-opalescence-soft-grey) + ); } #text-container.yt-live-chat-mode-change-message-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); - -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); + 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); + -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-icon.yt-live-chat-mode-change-message-renderer { - width: 40px; - height: 40px; - margin-bottom: 8px; + width: 40px; + height: 40px; + margin-bottom: 8px; } #text.yt-live-chat-mode-change-message-renderer { - font-weight: 500; + font-weight: 500; } #subtext.yt-live-chat-mode-change-message-renderer { - margin-top: 4px; - color: var( - --yt-live-chat-secondary-text-color, - var(--yt-secondary-text-color) - ); - font-style: italic; + margin-top: 4px; + color: var( + --yt-live-chat-secondary-text-color, + var(--yt-secondary-text-color) + ); + font-style: italic; } #buttons.yt-live-chat-mode-change-message-renderer { - margin-top: 16px; - min-height: 32px; + margin-top: 16px; + min-height: 32px; } #buttons.yt-live-chat-mode-change-message-renderer:empty { - display: none; + display: none; } yt-live-chat-moderation-message-renderer { - display: block; - position: relative; - padding: 8px 24px; - font-size: 13px; - color: var(--yt-live-chat-deleted-message-color); + display: block; + position: relative; + padding: 8px 24px; + font-size: 13px; + color: var(--yt-live-chat-deleted-message-color); } yt-live-chat-moderation-message-renderer::before { - content: ""; - position: absolute; - display: block; - left: 8px; - top: 4px; - bottom: 4px; - width: 4px; - box-sizing: border-box; - border-radius: 2px; - background: var(--yt-live-chat-deleted-message-bar-color); + content: ''; + position: absolute; + display: block; + left: 8px; + top: 4px; + bottom: 4px; + width: 4px; + box-sizing: border-box; + border-radius: 2px; + background: var(--yt-live-chat-deleted-message-bar-color); } #message.yt-live-chat-moderation-message-renderer { - line-height: 16px; - word-wrap: break-word; + line-height: 16px; + word-wrap: break-word; } #timestamp.yt-live-chat-moderation-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; + 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-moderation-message-renderer { - display: block; - margin-right: 16px; + display: block; + margin-right: 16px; - overflow: hidden; - border-radius: 50%; + 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); + -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-moderation-message-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); + 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-moderation-message-renderer { - position: absolute; - top: 0; - bottom: 0; - right: 0; + position: absolute; + top: 0; + bottom: 0; + right: 0; - transform: translateX(100px); + transform: translateX(100px); } yt-live-chat-moderation-message-renderer:hover - #menu.yt-live-chat-moderation-message-renderer, + #menu.yt-live-chat-moderation-message-renderer, yt-live-chat-moderation-message-renderer[menu-visible] - #menu.yt-live-chat-moderation-message-renderer { - transform: none; + #menu.yt-live-chat-moderation-message-renderer { + transform: none; } yt-live-chat-moderation-message-renderer:focus-within - #menu.yt-live-chat-moderation-message-renderer { - transform: none; + #menu.yt-live-chat-moderation-message-renderer { + transform: none; } #inline-action-button-container.yt-live-chat-moderation-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: 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); + 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-moderation-message-renderer[has-inline-action-buttons]:hover - #inline-action-button-container.yt-live-chat-moderation-message-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); + #inline-action-button-container.yt-live-chat-moderation-message-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); + display: var(--yt-live-chat-inline-action-button-container-display, none); } yt-live-chat-moderation-message-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover - #inline-action-button-container.yt-live-chat-moderation-message-renderer { - display: none; + #inline-action-button-container.yt-live-chat-moderation-message-renderer { + display: none; } yt-live-chat-moderation-message-renderer[has-inline-action-buttons]:hover - #menu.yt-live-chat-moderation-message-renderer { - display: var( - --yt-live-chat-item-with-inline-actions-context-menu-display, - block - ); + #menu.yt-live-chat-moderation-message-renderer { + display: var( + --yt-live-chat-item-with-inline-actions-context-menu-display, + block + ); } #inline-action-buttons.yt-live-chat-moderation-message-renderer - > *.yt-live-chat-moderation-message-renderer, + > *.yt-live-chat-moderation-message-renderer, #additional-inline-action-buttons.yt-live-chat-moderation-message-renderer - > *.yt-live-chat-moderation-message-renderer { - --yt-button-icon-size: 36px; - --yt-button-icon-padding: 6px; + > *.yt-live-chat-moderation-message-renderer { + --yt-button-icon-size: 36px; + --yt-button-icon-padding: 6px; - color: var(--yt-white); - border-radius: 2px; + color: var(--yt-white); + border-radius: 2px; } #inline-action-buttons.yt-live-chat-moderation-message-renderer - > *.yt-live-chat-moderation-message-renderer { - background: var(--yt-luna-black-opacity-lighten-1); + > *.yt-live-chat-moderation-message-renderer { + background: var(--yt-luna-black-opacity-lighten-1); } #inline-action-buttons.yt-live-chat-moderation-message-renderer - > .yt-live-chat-moderation-message-renderer:hover { - background: var(--yt-luna-black); + > .yt-live-chat-moderation-message-renderer:hover { + background: var(--yt-luna-black); } #additional-inline-action-buttons.yt-live-chat-moderation-message-renderer - > *.yt-live-chat-moderation-message-renderer { - color: var(--yt-live-chat-additional-inline-action-button-color); - background: var( - --yt-live-chat-additional-inline-action-button-background-color - ); + > *.yt-live-chat-moderation-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-moderation-message-renderer - > .yt-live-chat-moderation-message-renderer:hover { - background: var( - --yt-live-chat-additional-inline-action-button-background-color-hover - ); + > .yt-live-chat-moderation-message-renderer:hover { + background: var( + --yt-live-chat-additional-inline-action-button-background-color-hover + ); } #additional-inline-action-buttons.yt-live-chat-moderation-message-renderer:not(:empty) { - margin-left: 32px; + margin-left: 32px; } #inline-action-buttons.yt-live-chat-moderation-message-renderer - > *.yt-live-chat-moderation-message-renderer:not(:first-child), + > *.yt-live-chat-moderation-message-renderer:not(:first-child), #additional-inline-action-buttons.yt-live-chat-moderation-message-renderer - > *.yt-live-chat-moderation-message-renderer:not(:first-child) { - margin-left: 8px; + > *.yt-live-chat-moderation-message-renderer:not(:first-child) { + margin-left: 8px; } yt-live-chat-server-error-message { - display: var(--yt-live-chat-server-error-message-display, block); - position: relative; - padding: 4px 24px; + display: var(--yt-live-chat-server-error-message-display, block); + position: relative; + padding: 4px 24px; } span#timestamp.yt-live-chat-server-error-message { - font-size: 10px; + font-size: 10px; } #message.yt-live-chat-server-error-message { - color: var(--yt-live-chat-deleted-message-color, rgba(0, 0, 0, 0.5)); - font-size: 12px; - font-style: italic; - line-height: 16px; - word-wrap: break-word; + color: var(--yt-live-chat-deleted-message-color, rgba(0, 0, 0, 0.5)); + font-size: 12px; + font-style: italic; + line-height: 16px; + word-wrap: break-word; } yt-live-chat-server-error-message::before { - content: ""; - position: absolute; - display: block; - left: 8px; - top: 4px; - bottom: 4px; - width: 1px; - box-sizing: border-box; - border-radius: 2px; - border: 2px solid var(--yt-live-chat-error-message-color); + content: ''; + position: absolute; + display: block; + left: 8px; + top: 4px; + bottom: 4px; + width: 1px; + box-sizing: border-box; + border-radius: 2px; + border: 2px solid var(--yt-live-chat-error-message-color); } yt-live-chat-server-error-message.reconnect::before { - border: 2px solid var(--yt-live-chat-reconnect-message-color); + border: 2px solid var(--yt-live-chat-reconnect-message-color); } #timestamp.yt-live-chat-server-error-message { - 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; + 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-server-error-message { - display: block; - margin-right: 16px; + display: block; + margin-right: 16px; - overflow: hidden; - border-radius: 50%; + 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); + -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-server-error-message { - 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); + 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-server-error-message { - position: absolute; - top: 0; - bottom: 0; - right: 0; + position: absolute; + top: 0; + bottom: 0; + right: 0; - transform: translateX(100px); + transform: translateX(100px); } yt-live-chat-server-error-message:hover #menu.yt-live-chat-server-error-message, yt-live-chat-server-error-message[menu-visible] - #menu.yt-live-chat-server-error-message { - transform: none; + #menu.yt-live-chat-server-error-message { + transform: none; } yt-live-chat-server-error-message:focus-within - #menu.yt-live-chat-server-error-message { - transform: none; + #menu.yt-live-chat-server-error-message { + transform: none; } #inline-action-button-container.yt-live-chat-server-error-message { - 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); + 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-server-error-message[has-inline-action-buttons]:hover - #inline-action-button-container.yt-live-chat-server-error-message { - 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); + #inline-action-button-container.yt-live-chat-server-error-message { + 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); + display: var(--yt-live-chat-inline-action-button-container-display, none); } yt-live-chat-server-error-message[has-inline-action-buttons][hide-inline-action-buttons]:hover - #inline-action-button-container.yt-live-chat-server-error-message { - display: none; + #inline-action-button-container.yt-live-chat-server-error-message { + display: none; } yt-live-chat-server-error-message[has-inline-action-buttons]:hover - #menu.yt-live-chat-server-error-message { - display: var( - --yt-live-chat-item-with-inline-actions-context-menu-display, - block - ); + #menu.yt-live-chat-server-error-message { + display: var( + --yt-live-chat-item-with-inline-actions-context-menu-display, + block + ); } #inline-action-buttons.yt-live-chat-server-error-message - > *.yt-live-chat-server-error-message, + > *.yt-live-chat-server-error-message, #additional-inline-action-buttons.yt-live-chat-server-error-message - > *.yt-live-chat-server-error-message { - --yt-button-icon-size: 36px; - --yt-button-icon-padding: 6px; + > *.yt-live-chat-server-error-message { + --yt-button-icon-size: 36px; + --yt-button-icon-padding: 6px; - color: var(--yt-white); - border-radius: 2px; + color: var(--yt-white); + border-radius: 2px; } #inline-action-buttons.yt-live-chat-server-error-message - > *.yt-live-chat-server-error-message { - background: var(--yt-luna-black-opacity-lighten-1); + > *.yt-live-chat-server-error-message { + background: var(--yt-luna-black-opacity-lighten-1); } #inline-action-buttons.yt-live-chat-server-error-message - > .yt-live-chat-server-error-message:hover { - background: var(--yt-luna-black); + > .yt-live-chat-server-error-message:hover { + background: var(--yt-luna-black); } #additional-inline-action-buttons.yt-live-chat-server-error-message - > *.yt-live-chat-server-error-message { - color: var(--yt-live-chat-additional-inline-action-button-color); - background: var( - --yt-live-chat-additional-inline-action-button-background-color - ); + > *.yt-live-chat-server-error-message { + 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-server-error-message - > .yt-live-chat-server-error-message:hover { - background: var( - --yt-live-chat-additional-inline-action-button-background-color-hover - ); + > .yt-live-chat-server-error-message:hover { + background: var( + --yt-live-chat-additional-inline-action-button-background-color-hover + ); } #additional-inline-action-buttons.yt-live-chat-server-error-message:not(:empty) { - margin-left: 32px; + margin-left: 32px; } #inline-action-buttons.yt-live-chat-server-error-message - > *.yt-live-chat-server-error-message:not(:first-child), + > *.yt-live-chat-server-error-message:not(:first-child), #additional-inline-action-buttons.yt-live-chat-server-error-message - > *.yt-live-chat-server-error-message:not(:first-child) { - margin-left: 8px; + > *.yt-live-chat-server-error-message:not(:first-child) { + margin-left: 8px; } yt-live-chat-toast-renderer { - position: absolute; - box-sizing: border-box; - right: 0; - bottom: 0; - left: 0; - padding: 16px; - transition-duration: 0.2s; - transform: translateY(100%); - border-radius: 2px; - font-size: 14px; - color: var(--yt-live-chat-toast-text-color); - word-break: break-word; - -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); - 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); + position: absolute; + box-sizing: border-box; + right: 0; + bottom: 0; + left: 0; + padding: 16px; + transition-duration: 0.2s; + transform: translateY(100%); + border-radius: 2px; + font-size: 14px; + color: var(--yt-live-chat-toast-text-color); + word-break: break-word; + -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); + 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); } yt-live-chat-toast-renderer[is-showing-message] { - background-color: var(--yt-live-chat-toast-background-color); - transform: translateY(0); + background-color: var(--yt-live-chat-toast-background-color); + transform: translateY(0); } yt-live-chat-toast-renderer:not([is-message-visible]) { - height: 0; - padding: 0; + height: 0; + padding: 0; } #button.yt-live-chat-toast-renderer { - height: 36px; + height: 36px; } #button.yt-live-chat-toast-renderer > *.yt-live-chat-toast-renderer { - color: var(--yt-live-chat-toast-action-color); - margin-left: 8px; + color: var(--yt-live-chat-toast-action-color); + margin-left: 8px; } yt-live-chat-viewer-engagement-message-renderer { - display: block; - padding: 4px 24px; - font-size: 12px; - line-height: 16px; - overflow: hidden; - --yt-endpoint-color: #2196f3; - --yt-endpoint-visited-color: #2196f3; - --yt-endpoint-hover-color: var(--yt-live-chat-primary-text-color); + display: block; + padding: 4px 24px; + font-size: 12px; + line-height: 16px; + overflow: hidden; + --yt-endpoint-color: #2196f3; + --yt-endpoint-visited-color: #2196f3; + --yt-endpoint-hover-color: var(--yt-live-chat-primary-text-color); } #card.yt-live-chat-viewer-engagement-message-renderer { - position: relative; - background-color: var(--yt-live-chat-vem-background-color); - border-radius: 4px; - padding: 12px 16px; - 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); + position: relative; + background-color: var(--yt-live-chat-vem-background-color); + border-radius: 4px; + padding: 12px 16px; + 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); } #icon.yt-live-chat-viewer-engagement-message-renderer { - color: var(--yt-spec-static-brand-red); - margin-right: 16px; - -ms-flex: var(--layout-flex-none_-_-ms-flex); - -webkit-flex: var(--layout-flex-none_-_-webkit-flex); - flex: var(--layout-flex-none_-_flex); + color: var(--yt-spec-static-brand-red); + margin-right: 16px; + -ms-flex: var(--layout-flex-none_-_-ms-flex); + -webkit-flex: var(--layout-flex-none_-_-webkit-flex); + flex: var(--layout-flex-none_-_flex); } #content.yt-live-chat-viewer-engagement-message-renderer { - -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-align-self: var(--layout-self-center_-_-ms-align-self); - -webkit-align-self: var(--layout-self-center_-_-webkit-align-self); - align-self: var(--layout-self-center_-_align-self); + -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-align-self: var(--layout-self-center_-_-ms-align-self); + -webkit-align-self: var(--layout-self-center_-_-webkit-align-self); + align-self: var(--layout-self-center_-_align-self); } #message.yt-live-chat-viewer-engagement-message-renderer { - color: var(--yt-live-chat-primary-text-color); - overflow-wrap: break-word; - word-break: break-word; - word-wrap: break-word; + color: var(--yt-live-chat-primary-text-color); + overflow-wrap: break-word; + word-break: break-word; + word-wrap: break-word; } #action-button.yt-live-chat-viewer-engagement-message-renderer:not(:empty) { - margin: 2px 0 -4px -16px; + margin: 2px 0 -4px -16px; } #menu.yt-live-chat-viewer-engagement-message-renderer { - color: var(--yt-live-chat-secondary-text-color); - background: linear-gradient( - to right, - transparent 0%, - var(--yt-live-chat-background-color, var(--yt-white)) 100% - ); + color: var(--yt-live-chat-secondary-text-color); + background: linear-gradient( + to right, + transparent 0%, + var(--yt-live-chat-background-color, var(--yt-white)) 100% + ); } #timestamp.yt-live-chat-viewer-engagement-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; + 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-viewer-engagement-message-renderer { - display: block; - margin-right: 16px; + display: block; + margin-right: 16px; - overflow: hidden; - border-radius: 50%; + 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); + -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-viewer-engagement-message-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); + 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-viewer-engagement-message-renderer { - position: absolute; - top: 0; - bottom: 0; - right: 0; + position: absolute; + top: 0; + bottom: 0; + right: 0; - transform: translateX(100px); + transform: translateX(100px); } yt-live-chat-viewer-engagement-message-renderer:hover - #menu.yt-live-chat-viewer-engagement-message-renderer, + #menu.yt-live-chat-viewer-engagement-message-renderer, yt-live-chat-viewer-engagement-message-renderer[menu-visible] - #menu.yt-live-chat-viewer-engagement-message-renderer { - transform: none; + #menu.yt-live-chat-viewer-engagement-message-renderer { + transform: none; } yt-live-chat-viewer-engagement-message-renderer:focus-within - #menu.yt-live-chat-viewer-engagement-message-renderer { - transform: none; + #menu.yt-live-chat-viewer-engagement-message-renderer { + transform: none; } #inline-action-button-container.yt-live-chat-viewer-engagement-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: 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); + 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-viewer-engagement-message-renderer[has-inline-action-buttons]:hover - #inline-action-button-container.yt-live-chat-viewer-engagement-message-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); + #inline-action-button-container.yt-live-chat-viewer-engagement-message-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); + display: var(--yt-live-chat-inline-action-button-container-display, none); } yt-live-chat-viewer-engagement-message-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover - #inline-action-button-container.yt-live-chat-viewer-engagement-message-renderer { - display: none; + #inline-action-button-container.yt-live-chat-viewer-engagement-message-renderer { + display: none; } yt-live-chat-viewer-engagement-message-renderer[has-inline-action-buttons]:hover - #menu.yt-live-chat-viewer-engagement-message-renderer { - display: var( - --yt-live-chat-item-with-inline-actions-context-menu-display, - block - ); + #menu.yt-live-chat-viewer-engagement-message-renderer { + display: var( + --yt-live-chat-item-with-inline-actions-context-menu-display, + block + ); } #inline-action-buttons.yt-live-chat-viewer-engagement-message-renderer - > *.yt-live-chat-viewer-engagement-message-renderer, + > *.yt-live-chat-viewer-engagement-message-renderer, #additional-inline-action-buttons.yt-live-chat-viewer-engagement-message-renderer - > *.yt-live-chat-viewer-engagement-message-renderer { - --yt-button-icon-size: 36px; - --yt-button-icon-padding: 6px; + > *.yt-live-chat-viewer-engagement-message-renderer { + --yt-button-icon-size: 36px; + --yt-button-icon-padding: 6px; - color: var(--yt-white); - border-radius: 2px; + color: var(--yt-white); + border-radius: 2px; } #inline-action-buttons.yt-live-chat-viewer-engagement-message-renderer - > *.yt-live-chat-viewer-engagement-message-renderer { - background: var(--yt-luna-black-opacity-lighten-1); + > *.yt-live-chat-viewer-engagement-message-renderer { + background: var(--yt-luna-black-opacity-lighten-1); } #inline-action-buttons.yt-live-chat-viewer-engagement-message-renderer - > .yt-live-chat-viewer-engagement-message-renderer:hover { - background: var(--yt-luna-black); + > .yt-live-chat-viewer-engagement-message-renderer:hover { + background: var(--yt-luna-black); } #additional-inline-action-buttons.yt-live-chat-viewer-engagement-message-renderer - > *.yt-live-chat-viewer-engagement-message-renderer { - color: var(--yt-live-chat-additional-inline-action-button-color); - background: var( - --yt-live-chat-additional-inline-action-button-background-color - ); + > *.yt-live-chat-viewer-engagement-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-viewer-engagement-message-renderer - > .yt-live-chat-viewer-engagement-message-renderer:hover { - background: var( - --yt-live-chat-additional-inline-action-button-background-color-hover - ); + > .yt-live-chat-viewer-engagement-message-renderer:hover { + background: var( + --yt-live-chat-additional-inline-action-button-background-color-hover + ); } #additional-inline-action-buttons.yt-live-chat-viewer-engagement-message-renderer:not(:empty) { - margin-left: 32px; + margin-left: 32px; } #inline-action-buttons.yt-live-chat-viewer-engagement-message-renderer - > *.yt-live-chat-viewer-engagement-message-renderer:not(:first-child), + > *.yt-live-chat-viewer-engagement-message-renderer:not(:first-child), #additional-inline-action-buttons.yt-live-chat-viewer-engagement-message-renderer - > *.yt-live-chat-viewer-engagement-message-renderer:not(:first-child) { - margin-left: 8px; + > *.yt-live-chat-viewer-engagement-message-renderer:not(:first-child) { + margin-left: 8px; } ytd-live-chat-purchased-product-message-renderer { - background: var(--yt-spec-general-background-a); - display: inline-block; - padding: 4px 24px; - width: calc(100% - 48px); + background: var(--yt-spec-general-background-a); + display: inline-block; + padding: 4px 24px; + width: calc(100% - 48px); } #container.ytd-live-chat-purchased-product-message-renderer { - background: var(--yt-spec-general-background-b); - border-radius: 2px; - overflow: hidden; - position: relative; + background: var(--yt-spec-general-background-b); + border-radius: 2px; + overflow: hidden; + position: relative; } #product-container.ytd-live-chat-purchased-product-message-renderer { - padding: 8px 8px 8px 16px; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -ms-flex-direction: row; - -webkit-flex-direction: row; - flex-direction: row; + padding: 8px 8px 8px 16px; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; } #purchased-message.ytd-live-chat-purchased-product-message-renderer { - color: var(--yt-spec-text-primary); - padding-bottom: 3px; - font-size: 14px; - font-weight: 400; + color: var(--yt-spec-text-primary); + padding-bottom: 3px; + font-size: 14px; + font-weight: 400; } #product-image.ytd-live-chat-purchased-product-message-renderer { - padding-right: 18px; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -ms-flex-align: center; - -webkit-align-items: center; - align-items: center; - -ms-flex: none; - -webkit-flex: none; - flex: none; + padding-right: 18px; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -ms-flex: none; + -webkit-flex: none; + flex: none; } #product-info.ytd-live-chat-purchased-product-message-renderer { - min-width: 0; - padding-right: 20px; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -ms-flex: 1 1 auto; - -webkit-flex: 1 1 auto; - flex: 1 1 auto; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -ms-flex-direction: column; - -webkit-flex-direction: column; - flex-direction: column; + min-width: 0; + padding-right: 20px; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -ms-flex: 1 1 auto; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; } #product-title-container.ytd-live-chat-purchased-product-message-renderer { - display: -ms-flexbox; - display: -webkit-flex; - display: flex; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; } #product-title.ytd-live-chat-purchased-product-message-renderer { - color: var(--yt-spec-call-to-action); - min-width: 0; - overflow: hidden; - position: relative; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 13px; - font-weight: 500; + color: var(--yt-spec-call-to-action); + min-width: 0; + overflow: hidden; + position: relative; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 13px; + font-weight: 500; } #product-title.ytd-live-chat-purchased-product-message-renderer[show-icon] { - padding-right: 20px; + padding-right: 20px; } #product-title.ytd-live-chat-purchased-product-message-renderer - yt-icon.ytd-live-chat-purchased-product-message-renderer { - color: inherit; - flex-shrink: 0; - height: 15px; - padding-left: 4px; - position: absolute; - right: 0; - width: 15px; + yt-icon.ytd-live-chat-purchased-product-message-renderer { + color: inherit; + flex-shrink: 0; + height: 15px; + padding-left: 4px; + position: absolute; + right: 0; + width: 15px; } #information-icon.ytd-live-chat-purchased-product-message-renderer { - display: block; - opacity: 0.9; - position: absolute; - right: 10px; - top: 10px; + display: block; + opacity: 0.9; + position: absolute; + right: 10px; + top: 10px; } #information-icon.ytd-live-chat-purchased-product-message-renderer:hover { - opacity: 1; + opacity: 1; } #info-button.ytd-live-chat-purchased-product-message-renderer { - color: var(--yt-spec-icon-active-other); - --yt-icon-button-icon-height: 15px; - --yt-icon-button-icon-width: 15px; - --yt-button-icon-padding: 0px; - --yt-button-icon-size: 15px; + color: var(--yt-spec-icon-active-other); + --yt-icon-button-icon-height: 15px; + --yt-icon-button-icon-width: 15px; + --yt-button-icon-padding: 0px; + --yt-button-icon-size: 15px; } yt-img-shadow.ytd-live-chat-purchased-product-message-renderer { - border: 2px solid var(--yt-spec-brand-background-solid); - height: 36px; - width: 36px; + border: 2px solid var(--yt-spec-brand-background-solid); + height: 36px; + width: 36px; } yt-live-chat-item-list-renderer { - position: relative; - display: block; - overflow: hidden; - z-index: 0; + 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; + --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: var(--layout-fit_-_position); - top: var(--layout-fit_-_top); - right: var(--layout-fit_-_right); - bottom: var(--layout-fit_-_bottom); - left: var(--layout-fit_-_left); - 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); + position: var(--layout-fit_-_position); + top: var(--layout-fit_-_top); + right: var(--layout-fit_-_right); + bottom: var(--layout-fit_-_bottom); + left: var(--layout-fit_-_left); + 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); } #empty-state-message.yt-live-chat-item-list-renderer { - position: var(--layout-fit_-_position); - top: var(--layout-fit_-_top); - right: var(--layout-fit_-_right); - bottom: var(--layout-fit_-_bottom); - left: var(--layout-fit_-_left); - 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); - -ms-flex-pack: var(--layout-center-justified_-_-ms-flex-pack); - -webkit-justify-content: var( - --layout-center-justified_-_-webkit-justify-content - ); - justify-content: var(--layout-center-justified_-_justify-content); + position: var(--layout-fit_-_position); + top: var(--layout-fit_-_top); + right: var(--layout-fit_-_right); + bottom: var(--layout-fit_-_bottom); + left: var(--layout-fit_-_left); + 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); + -ms-flex-pack: var(--layout-center-justified_-_-ms-flex-pack); + -webkit-justify-content: var( + --layout-center-justified_-_-webkit-justify-content + ); + justify-content: var(--layout-center-justified_-_justify-content); } #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-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.2, 1); - transition-duration: 0.15s; - box-shadow: var(--shadow-elevation-2dp_-_box-shadow); + 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.2, 1); + transition-duration: 0.15s; + box-shadow: var(--shadow-elevation-2dp_-_box-shadow); } yt-icon-button.yt-live-chat-item-list-renderer[disabled] { - bottom: -42px; - color: #fff; - transition-timing-function: cubic-bezier(0.4, 0, 1, 1); + bottom: -42px; + color: #fff; + transition-timing-function: cubic-bezier(0.4, 0, 1, 1); } #item-scroller.yt-live-chat-item-list-renderer { - -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); - overflow-x: hidden; - overflow-y: hidden; - padding-right: var(--scrollbar-width); - overflow-anchor: none; + -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); + overflow-x: hidden; + overflow-y: hidden; + padding-right: var(--scrollbar-width); + overflow-anchor: none; } yt-live-chat-item-list-renderer[allow-scroll] - #item-scroller.yt-live-chat-item-list-renderer { - overflow-y: scroll; - padding-right: 0; + #item-scroller.yt-live-chat-item-list-renderer { + overflow-y: scroll; + padding-right: 0; } #item-offset.yt-live-chat-item-list-renderer { - position: relative; + position: relative; } #item-scroller.animated.yt-live-chat-item-list-renderer - #item-offset.yt-live-chat-item-list-renderer { - overflow: hidden; + #item-offset.yt-live-chat-item-list-renderer { + overflow: hidden; } #items.yt-live-chat-item-list-renderer { - -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); - padding: var(--yt-live-chat-item-list-renderer-padding, 4px 0); + -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); + 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); + > *.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); + #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; + 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; + padding: 4px 24px; } yt-live-chat-paid-sticker-renderer.yt-live-chat-item-list-renderer[dashboard-money-feed] { - padding: 8px 16px; + padding: 8px 16px; } yt-live-chat-banner-manager.yt-live-chat-item-list-renderer { - z-index: 1; - position: absolute; - left: 0; - right: var(--scrollbar-width); - top: 0; - padding: 8px; + z-index: 1; + position: absolute; + left: 0; + right: var(--scrollbar-width); + top: 0; + padding: 8px; } yt-live-chat-product-button-renderer:focus { - outline: none; + outline: none; } paper-item.yt-live-chat-product-button-renderer { - margin: 0; - padding: 12px 16px 12px 24px; - text-transform: none; + margin: 0; + padding: 12px 16px 12px 24px; + text-transform: none; } #endpoint.yt-live-chat-product-button-renderer:hover { - background-color: var(--yt-live-chat-product-picker-hover-color); + background-color: var(--yt-live-chat-product-picker-hover-color); } #endpoint.yt-live-chat-product-button-renderer { - display: block; + display: block; } #container.yt-live-chat-product-button-renderer { - min-height: 32px; + min-height: 32px; } #text.yt-live-chat-product-button-renderer { - font-size: 16px; - line-height: 24px; - color: var(--yt-live-chat-primary-text-color); + font-size: 16px; + line-height: 24px; + color: var(--yt-live-chat-primary-text-color); } #subtext.yt-live-chat-product-button-renderer { - font-size: 12px; - line-height: 16px; - color: var(--yt-live-chat-secondary-text-color); + font-size: 12px; + line-height: 16px; + color: var(--yt-live-chat-secondary-text-color); } yt-live-chat-product-button-renderer[disabled] - a.yt-live-chat-product-button-renderer { - cursor: unset; + a.yt-live-chat-product-button-renderer { + cursor: unset; } yt-live-chat-product-button-renderer[disabled] - #text.yt-live-chat-product-button-renderer, + #text.yt-live-chat-product-button-renderer, yt-live-chat-product-button-renderer[disabled] - #subtext.yt-live-chat-product-button-renderer { - color: var(--yt-live-chat-tertiary-text-color); + #subtext.yt-live-chat-product-button-renderer { + color: var(--yt-live-chat-tertiary-text-color); } #icon.yt-live-chat-product-button-renderer { - padding-right: 32px; - color: var(--yt-live-chat-product-picker-icon-color); + padding-right: 32px; + color: var(--yt-live-chat-product-picker-icon-color); } yt-live-chat-product-button-renderer[disabled] - #icon.yt-live-chat-product-button-renderer { - color: var(--yt-live-chat-product-picker-disabled-icon-color); + #icon.yt-live-chat-product-button-renderer { + color: var(--yt-live-chat-product-picker-disabled-icon-color); } yt-live-chat-product-picker-renderer { - margin: 8px -8px; - 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); + margin: 8px -8px; + 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-product-picker-renderer:focus { - outline: none; + outline: none; } #title.yt-live-chat-product-picker-renderer { - color: var(--yt-live-chat-secondary-text-color); - font-family: "Roboto"; - font-size: 14px; - font-weight: 500; - padding: 12px 24px 20px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + color: var(--yt-live-chat-secondary-text-color); + font-family: 'Roboto'; + font-size: 14px; + font-weight: 500; + padding: 12px 24px 20px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } yt-live-chat-text-actions-error-message-renderer { - color: var(--yt-live-chat-error-message-color, #f44336); - 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); + color: var(--yt-live-chat-error-message-color, #f44336); + 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-icon-button.yt-live-chat-text-actions-error-message-renderer { - margin-right: 8px; - -ms-flex: var(--layout-flex-none_-_-ms-flex); - -webkit-flex: var(--layout-flex-none_-_-webkit-flex); - flex: var(--layout-flex-none_-_flex); - 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); + margin-right: 8px; + -ms-flex: var(--layout-flex-none_-_-ms-flex); + -webkit-flex: var(--layout-flex-none_-_-webkit-flex); + flex: var(--layout-flex-none_-_flex); + 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); } error-text.yt-live-chat-text-actions-error-message-renderer { - -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: 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); } button.yt-live-chat-text-actions-error-message-renderer { - text-decoration: underline; - padding: 0; - border: none; - background-color: transparent; - cursor: pointer; - color: currentColor; - font-size: 100%; + text-decoration: underline; + padding: 0; + border: none; + background-color: transparent; + cursor: pointer; + color: currentColor; + font-size: 100%; } yt-live-chat-message-input-renderer { - display: block; - padding: 16px; - color: var(--yt-live-chat-primary-text-color); - background: var( - --yt-live-chat-action-panel-background-color, - var(--yt-opalescence-soft-grey-opacity-lighten-3) - ); - font-size: 13px; - position: relative; - --yt-emoji-picker-renderer-content_-_margin: 0 24px; - --yt-emoji-picker-category-margin-left: 24px; + display: block; + padding: 16px; + color: var(--yt-live-chat-primary-text-color); + background: var( + --yt-live-chat-action-panel-background-color, + var(--yt-opalescence-soft-grey-opacity-lighten-3) + ); + font-size: 13px; + position: relative; + --yt-emoji-picker-renderer-content_-_margin: 0 24px; + --yt-emoji-picker-category-margin-left: 24px; } #avatar.yt-live-chat-message-input-renderer { - 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); + 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); } #top.yt-live-chat-message-input-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-align: var(--layout-start_-_-ms-flex-align); - -webkit-align-items: var(--layout-start_-_-webkit-align-items); - align-items: var(--layout-start_-_align-items); + 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-start_-_-ms-flex-align); + -webkit-align-items: var(--layout-start_-_-webkit-align-items); + align-items: var(--layout-start_-_align-items); } #top.yt-live-chat-message-input-renderer, #pickers.yt-live-chat-message-input-renderer, #error-message.yt-live-chat-message-input-renderer { - margin: 0px 8px; + margin: 0px 8px; } yt-live-chat-message-input-renderer[product-picker-open] { - padding: 0; - overflow-y: hidden; + padding: 0; + overflow-y: hidden; } yt-live-chat-message-input-renderer[poll-editor-picker-open] { - padding-top: 0; - padding-bottom: 0; + padding-top: 0; + padding-bottom: 0; } yt-live-chat-message-input-renderer[creator-open] - #top.yt-live-chat-message-input-renderer, + #top.yt-live-chat-message-input-renderer, yt-live-chat-message-input-renderer[creator-open] - #buttons.yt-live-chat-message-input-renderer, + #buttons.yt-live-chat-message-input-renderer, yt-live-chat-message-input-renderer[product-picker-open] - #top.yt-live-chat-message-input-renderer, + #top.yt-live-chat-message-input-renderer, yt-live-chat-message-input-renderer[product-picker-open] - #buttons.yt-live-chat-message-input-renderer, + #buttons.yt-live-chat-message-input-renderer, yt-live-chat-message-input-renderer[poll-editor-picker-open] - #top.yt-live-chat-message-input-renderer, + #top.yt-live-chat-message-input-renderer, yt-live-chat-message-input-renderer[poll-editor-picker-open] - #buttons.yt-live-chat-message-input-renderer { - display: none; + #buttons.yt-live-chat-message-input-renderer { + display: none; } #input-container.yt-live-chat-message-input-renderer { - -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); - min-width: 0; + -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); + min-width: 0; } #input.yt-live-chat-message-input-renderer { - margin-top: 4px; + margin-top: 4px; } yt-live-chat-message-renderer.yt-live-chat-message-input-renderer { - position: var(--layout-fit_-_position); - top: var(--layout-fit_-_top); - right: var(--layout-fit_-_right); - bottom: var(--layout-fit_-_bottom); - left: var(--layout-fit_-_left); - opacity: 0; - transition: opacity 0.125s linear; - padding: 16px 24px; + position: var(--layout-fit_-_position); + top: var(--layout-fit_-_top); + right: var(--layout-fit_-_right); + bottom: var(--layout-fit_-_bottom); + left: var(--layout-fit_-_left); + opacity: 0; + transition: opacity 0.125s linear; + padding: 16px 24px; } yt-live-chat-message-input-renderer:hover - yt-live-chat-message-renderer.yt-live-chat-message-input-renderer, + yt-live-chat-message-renderer.yt-live-chat-message-input-renderer, yt-live-chat-message-input-renderer:focus - yt-live-chat-message-renderer.yt-live-chat-message-input-renderer { - opacity: 1; + yt-live-chat-message-renderer.yt-live-chat-message-input-renderer { + opacity: 1; } yt-live-chat-message-input-renderer[has-interaction-message]:hover - #container.yt-live-chat-message-input-renderer { - opacity: 0; + #container.yt-live-chat-message-input-renderer { + opacity: 0; } #buttons.yt-live-chat-message-input-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); - margin: 4px 0 -8px; + 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); + margin: 4px 0 -8px; } #message-buttons.yt-live-chat-message-input-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-align: var(--layout-center_-_-ms-flex-align); - -webkit-align-items: var(--layout-center_-_-webkit-align-items); - align-items: var(--layout-center_-_align-items); + 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); } #count.yt-live-chat-message-input-renderer { - margin-right: 8px; - color: var( - --yt-live-chat-secondary-text-color, - var(--yt-luna-black-opacity-lighten-2) - ); + margin-right: 8px; + color: var( + --yt-live-chat-secondary-text-color, + var(--yt-luna-black-opacity-lighten-2) + ); } #count.early-warning.yt-live-chat-message-input-renderer { - color: var(--yt-live-chat-count-color-early-warning, #fdd835); + color: var(--yt-live-chat-count-color-early-warning, #fdd835); } #count.warning.yt-live-chat-message-input-renderer { - color: var(--yt-live-chat-count-color-warning, #ff9800); + color: var(--yt-live-chat-count-color-warning, #ff9800); } #count.error.yt-live-chat-message-input-renderer { - color: var( - --yt-live-chat-count-color-error, - var(--yt-spec-brand-link-text) - ); + color: var(--yt-live-chat-count-color-error, var(--yt-spec-brand-link-text)); } #send-button.yt-live-chat-message-input-renderer { - transition: transform 0.5s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); + transition: transform 0.5s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #send-button.yt-live-chat-message-input-renderer - > *.yt-live-chat-message-input-renderer { - color: var(--yt-live-chat-enabled-send-button-color); + > *.yt-live-chat-message-input-renderer { + color: var(--yt-live-chat-enabled-send-button-color); } #send-button.yt-live-chat-message-input-renderer - > .yt-live-chat-message-input-renderer[disabled] { - color: var(--yt-live-chat-disabled-icon-button-color); + > .yt-live-chat-message-input-renderer[disabled] { + color: var(--yt-live-chat-disabled-icon-button-color); } #send-button.yt-live-chat-message-input-renderer[countdown-active] { - transform: scale(0.55); - transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1); + transform: scale(0.55); + transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1); } #countdown.yt-live-chat-message-input-renderer { - position: relative; - left: -33px; - width: 24px; - height: 24px; - margin-right: -24px; - opacity: 0; - transition: opacity 1s; - pointer-events: none; + position: relative; + left: -33px; + width: 24px; + height: 24px; + margin-right: -24px; + opacity: 0; + transition: opacity 1s; + pointer-events: none; } #countdown.yt-live-chat-message-input-renderer[countdown-active] { - opacity: var(--yt-live-chat-countdown-opacity, 0.3); - transition: opacity 2s; + opacity: var(--yt-live-chat-countdown-opacity, 0.3); + transition: opacity 2s; } circle.yt-live-chat-message-input-renderer { - fill: none; - stroke-linecap: square; - stroke-width: 2; - stroke: currentColor; + fill: none; + stroke-linecap: square; + stroke-width: 2; + stroke: currentColor; } #countdown-background.yt-live-chat-message-input-renderer { - opacity: 0.3; + opacity: 0.3; } #countdown-line.yt-live-chat-message-input-renderer { - stroke-dasharray: 62.8318; - transform: translate(0, 24px) rotateZ(-90deg); + stroke-dasharray: 62.8318; + transform: translate(0, 24px) rotateZ(-90deg); } yt-emoji-picker-renderer.yt-live-chat-message-input-renderer { - min-height: 130px; - max-height: 220px; - margin: 16px -24px 0; + min-height: 130px; + max-height: 220px; + margin: 16px -24px 0; } yt-live-chat-poll-editor-panel-renderer.yt-live-chat-message-input-renderer { - margin: 0 -24px; + margin: 0 -24px; } #error-message.yt-live-chat-message-input-renderer { - margin: 16px 0 4px; + margin: 16px 0 4px; } #error-message.yt-live-chat-message-input-renderer:empty { - display: none; + display: none; } #picker-buttons.yt-live-chat-message-input-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-align: var(--layout-center_-_-ms-flex-align); - -webkit-align-items: var(--layout-center_-_-webkit-align-items); - align-items: var(--layout-center_-_align-items); + 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); } #picker-buttons.yt-live-chat-message-input-renderer - > *.yt-live-chat-message-input-renderer { - color: var(--yt-live-chat-picker-button-color); + > *.yt-live-chat-message-input-renderer { + color: var(--yt-live-chat-picker-button-color); } #picker-buttons.yt-live-chat-message-input-renderer - .yt-live-chat-message-input-renderer:hover { - color: var(--yt-live-chat-picker-button-hover-color); + .yt-live-chat-message-input-renderer:hover { + color: var(--yt-live-chat-picker-button-hover-color); } #picker-buttons.yt-live-chat-message-input-renderer - .yt-live-chat-message-input-renderer[active] { - color: var(--yt-live-chat-picker-button-active-color); + .yt-live-chat-message-input-renderer[active] { + color: var(--yt-live-chat-picker-button-active-color); } #picker-buttons.yt-live-chat-message-input-renderer - .yt-live-chat-message-input-renderer[disabled] { - color: var(--yt-live-chat-picker-button-disabled-color); + .yt-live-chat-message-input-renderer[disabled] { + color: var(--yt-live-chat-picker-button-disabled-color); } yt-live-chat-ninja-message-renderer { - background: var(--yt-spec-general-background-a); - 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); - -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); + background: var(--yt-spec-general-background-a); + 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); + -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); } svg.yt-live-chat-ninja-message-renderer { - width: 300px; - height: 190px; + width: 300px; + height: 190px; } #button.yt-live-chat-ninja-message-renderer { - margin-top: 12px; + margin-top: 12px; } yt-formatted-string.yt-live-chat-ninja-message-renderer { - padding: 0 15px; - text-align: center; + padding: 0 15px; + text-align: center; } #container.yt-live-chat-participant-renderer { - padding: 4px 0; - -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); - 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); + padding: 4px 0; + -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); + 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); } yt-img-shadow.yt-live-chat-participant-renderer { - margin: 0 16px 0 24px; - overflow: hidden; - border-radius: 50%; + margin: 0 16px 0 24px; + overflow: hidden; + border-radius: 50%; } yt-img-shadow.yt-live-chat-participant-renderer:not([loaded]).yt-live-chat-participant-renderer { - background-color: #444; + background-color: #444; } yt-live-chat-participant-list-renderer { - color: var(--yt-live-chat-primary-text-color, var(--yt-primary-text-color)); - z-index: 0; - -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); - 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); + color: var(--yt-live-chat-primary-text-color, var(--yt-primary-text-color)); + z-index: 0; + -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); + 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); } #header.yt-live-chat-participant-list-renderer { - padding: 8px; - height: 48px; - box-sizing: border-box; - background-color: var( - --yt-live-chat-action-panel-background-color, - var(--yt-opalescence-soft-grey-opacity-lighten-3) - ); - font-size: var(--yt-live-chat-header-font-size, 18px); - line-height: 24px; - box-shadow: var(--yt-live-chat-header-box-shadow); - 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); - z-index: 1; + padding: 8px; + height: 48px; + box-sizing: border-box; + background-color: var( + --yt-live-chat-action-panel-background-color, + var(--yt-opalescence-soft-grey-opacity-lighten-3) + ); + font-size: var(--yt-live-chat-header-font-size, 18px); + line-height: 24px; + box-shadow: var(--yt-live-chat-header-box-shadow); + 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); + z-index: 1; } #header.yt-live-chat-participant-list-renderer:focus { - outline: none; + outline: none; } #back-button.yt-live-chat-participant-list-renderer { - margin: 0 8px; + margin: 0 8px; } #back-button.yt-live-chat-participant-list-renderer - > *.yt-live-chat-participant-list-renderer { - --yt-button-color: var( - --yt-live-chat-primary-text-color, - var(--yt-luna-black-opacity-lighten-3) - ); + > *.yt-live-chat-participant-list-renderer { + --yt-button-color: var( + --yt-live-chat-primary-text-color, + var(--yt-luna-black-opacity-lighten-3) + ); } #participants.yt-live-chat-participant-list-renderer { - overflow-y: auto; - -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); - padding: 4px 0; + overflow-y: auto; + -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); + padding: 4px 0; } yt-live-chat-pinned-message-renderer { - display: block; - padding-top: 4px; - z-index: 2; - --yt-pdg-paid-stickers-author-name-font-size: 14px; - --yt-pdg-paid-stickers-author-subtext-font-size: 15px; - --yt-pdg-paid-stickers-margin-left: 56px; - --yt-live-chat-item-timestamp-display: none; + display: block; + padding-top: 4px; + z-index: 2; + --yt-pdg-paid-stickers-author-name-font-size: 14px; + --yt-pdg-paid-stickers-author-subtext-font-size: 15px; + --yt-pdg-paid-stickers-margin-left: 56px; + --yt-live-chat-item-timestamp-display: none; } #fade.yt-live-chat-pinned-message-renderer { - background-color: var(--yt-live-chat-overlay-color); - bottom: -100vh; - left: 0; - position: absolute; - right: 0; - top: 0; + background-color: var(--yt-live-chat-overlay-color); + bottom: -100vh; + left: 0; + position: absolute; + right: 0; + top: 0; } #message.yt-live-chat-pinned-message-renderer { - left: 0; - margin-right: var(--scrollbar-width); - position: absolute; - right: 0; + left: 0; + margin-right: var(--scrollbar-width); + position: absolute; + right: 0; } yt-live-chat-paid-sticker-renderer.yt-live-chat-pinned-message-renderer { - margin: 4px 24px; - border-radius: 4px; - min-height: 40px; - background-color: var(--yt-dialog-background); - box-shadow: var(--shadow-elevation-2dp_-_box-shadow); + margin: 4px 24px; + border-radius: 4px; + min-height: 40px; + background-color: var(--yt-dialog-background); + box-shadow: var(--shadow-elevation-2dp_-_box-shadow); } yt-live-chat-restricted-participation-renderer { - display: block; - box-sizing: border-box; + display: block; + box-sizing: border-box; } #container.yt-live-chat-restricted-participation-renderer { - padding: 0 16px 0 24px; - background: var( - --yt-live-chat-action-panel-background-color, - var(--yt-opalescence-soft-grey-opacity-lighten-3) - ); - color: var( - --yt-live-chat-secondary-text-color, - var(--yt-secondary-text-color) - ); - font-size: 14px; + padding: 0 16px 0 24px; + background: var( + --yt-live-chat-action-panel-background-color, + var(--yt-opalescence-soft-grey-opacity-lighten-3) + ); + color: var( + --yt-live-chat-secondary-text-color, + var(--yt-secondary-text-color) + ); + font-size: 14px; } #explanation.yt-live-chat-restricted-participation-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-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-pack: var(--layout-justified_-_-ms-flex-pack); - -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content); - justify-content: var(--layout-justified_-_justify-content); - min-height: 48px; + 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-pack: var(--layout-justified_-_-ms-flex-pack); + -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content); + justify-content: var(--layout-justified_-_justify-content); + min-height: 48px; } #icon.yt-live-chat-restricted-participation-renderer { - width: 24px; - height: 24px; - margin-right: 16px; - color: var( - --yt-spec-icon-disabled, - var(--yt-live-chat-disabled-icon-button-color) - ); - -ms-flex: var(--layout-flex-none_-_-ms-flex); - -webkit-flex: var(--layout-flex-none_-_-webkit-flex); - flex: var(--layout-flex-none_-_flex); + width: 24px; + height: 24px; + margin-right: 16px; + color: var( + --yt-spec-icon-disabled, + var(--yt-live-chat-disabled-icon-button-color) + ); + -ms-flex: var(--layout-flex-none_-_-ms-flex); + -webkit-flex: var(--layout-flex-none_-_-webkit-flex); + flex: var(--layout-flex-none_-_flex); } #body.yt-live-chat-restricted-participation-renderer { - padding: 11px 0 10px; - -ms-flex: var(--layout-flex-auto_-_-ms-flex); - -webkit-flex: var(--layout-flex-auto_-_-webkit-flex); - flex: var(--layout-flex-auto_-_flex); + padding: 11px 0 10px; + -ms-flex: var(--layout-flex-auto_-_-ms-flex); + -webkit-flex: var(--layout-flex-auto_-_-webkit-flex); + flex: var(--layout-flex-auto_-_flex); } #message.yt-live-chat-restricted-participation-renderer { - display: inline; + display: inline; } #picker-buttons.yt-live-chat-restricted-participation-renderer - > *.yt-live-chat-restricted-participation-renderer { - color: var(--yt-spec-icon-inactive, var(--yt-live-chat-icon-button-color)); + > *.yt-live-chat-restricted-participation-renderer { + color: var(--yt-spec-icon-inactive, var(--yt-live-chat-icon-button-color)); } #message-button.yt-live-chat-restricted-participation-renderer { - padding-top: 3px; - display: inline; - --yt-paper-button-min-width: 0; - --yt-button-padding: 0 0; - --yt-paper-button-font-size: 14px; + padding-top: 3px; + display: inline; + --yt-paper-button-min-width: 0; + --yt-button-padding: 0 0; + --yt-paper-button-font-size: 14px; } #message-button.yt-live-chat-restricted-participation-renderer:not(:empty)::before { - display: inline; - padding: 0 5px; - content: "·"; - font-weight: 500; + display: inline; + padding: 0 5px; + content: '·'; + font-weight: 500; } yt-live-chat-restricted-participation-renderer[creator-open] - #explanation.yt-live-chat-restricted-participation-renderer, + #explanation.yt-live-chat-restricted-participation-renderer, yt-live-chat-restricted-participation-renderer[product-picker-open] - #explanation.yt-live-chat-restricted-participation-renderer { - display: none; + #explanation.yt-live-chat-restricted-participation-renderer { + display: none; } yt-live-chat-restricted-participation-renderer[creator-open] - #container.yt-live-chat-restricted-participation-renderer { - padding: 8px 16px 8px 24px; + #container.yt-live-chat-restricted-participation-renderer { + padding: 8px 16px 8px 24px; } yt-live-chat-restricted-participation-renderer[product-picker-open] - #container.yt-live-chat-restricted-participation-renderer { - padding: 8px 16px; - margin: 0 -8px; + #container.yt-live-chat-restricted-participation-renderer { + padding: 8px 16px; + margin: 0 -8px; } #picker-buttons.yt-live-chat-restricted-participation-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-align: var(--layout-center_-_-ms-flex-align); - -webkit-align-items: var(--layout-center_-_-webkit-align-items); - align-items: var(--layout-center_-_align-items); + 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); } #picker-buttons.yt-live-chat-restricted-participation-renderer - > *.yt-live-chat-restricted-participation-renderer { - color: var(--yt-live-chat-picker-button-color); + > *.yt-live-chat-restricted-participation-renderer { + color: var(--yt-live-chat-picker-button-color); } #picker-buttons.yt-live-chat-restricted-participation-renderer - .yt-live-chat-restricted-participation-renderer:hover { - color: var(--yt-live-chat-picker-button-hover-color); + .yt-live-chat-restricted-participation-renderer:hover { + color: var(--yt-live-chat-picker-button-hover-color); } #picker-buttons.yt-live-chat-restricted-participation-renderer - .yt-live-chat-restricted-participation-renderer[active] { - color: var(--yt-live-chat-picker-button-active-color); + .yt-live-chat-restricted-participation-renderer[active] { + color: var(--yt-live-chat-picker-button-active-color); } #picker-buttons.yt-live-chat-restricted-participation-renderer - .yt-live-chat-restricted-participation-renderer[disabled] { - color: var(--yt-live-chat-picker-button-disabled-color); + .yt-live-chat-restricted-participation-renderer[disabled] { + color: var(--yt-live-chat-picker-button-disabled-color); } yt-live-chat-ticker-sponsor-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; + 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-sponsor-item-renderer { - border-radius: 999px; - padding: 4px; + border-radius: 999px; + padding: 4px; } yt-live-chat-ticker-sponsor-item-renderer.sliding-down - #container.yt-live-chat-ticker-sponsor-item-renderer { - opacity: 0.5; - transform: translateY(44px); - transition: opacity 0.2s, transform 0.2s cubic-bezier(0.4, 0, 1, 1); + #container.yt-live-chat-ticker-sponsor-item-renderer { + opacity: 0.5; + transform: translateY(44px); + transition: opacity 0.2s, transform 0.2s cubic-bezier(0.4, 0, 1, 1); } yt-live-chat-ticker-sponsor-item-renderer.collapsing { - margin-right: 0; - transition: margin-right 0.2s cubic-bezier(0.4, 0, 0.2, 1), - width 0.2s cubic-bezier(0.4, 0, 0.2, 1); + margin-right: 0; + transition: margin-right 0.2s cubic-bezier(0.4, 0, 0.2, 1), + width 0.2s cubic-bezier(0.4, 0, 0.2, 1); } yt-live-chat-ticker-sponsor-item-renderer[dimmed] { - opacity: 0.5; + opacity: 0.5; } yt-img-shadow.yt-live-chat-ticker-sponsor-item-renderer { - margin-right: -4px; + margin-right: -4px; - overflow: hidden; - border-radius: 50%; + overflow: hidden; + border-radius: 50%; } #content.yt-live-chat-ticker-sponsor-item-renderer { - height: 24px; + height: 24px; - 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); + 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); } #text.yt-live-chat-ticker-sponsor-item-renderer { - margin: 0 8px; - font-weight: 500; + margin: 0 8px; + font-weight: 500; } yt-live-chat-ticker-sponsor-item-renderer[is-deleted] - #author-photo.yt-live-chat-ticker-sponsor-item-renderer { - display: none; + #author-photo.yt-live-chat-ticker-sponsor-item-renderer { + display: none; } yt-live-chat-ticker-renderer { - display: block; - background-color: var(--yt-live-chat-header-background-color); + display: block; + background-color: var(--yt-live-chat-header-background-color); } #container.yt-live-chat-ticker-renderer { - position: var(--layout-relative_-_position); + position: var(--layout-relative_-_position); } #items.yt-live-chat-ticker-renderer { - height: 32px; - overflow: hidden; - white-space: nowrap; - padding: 0 24px 8px; + height: 32px; + overflow: hidden; + white-space: nowrap; + padding: 0 24px 8px; } #items.yt-live-chat-ticker-renderer > *.yt-live-chat-ticker-renderer { - margin-right: 8px; + 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 - ); + 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; + left: 0; - padding: 0 16px 0 12px; + 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 - ); + 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; + right: 0; - padding: 0 12px 0 16px; + padding: 0 12px 0 16px; } #container.yt-live-chat-ticker-renderer:hover - #left-arrow-container.yt-live-chat-ticker-renderer, + #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; + #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; + 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; + background-color: #2196f3; + border-radius: 999px; + color: #fff; + cursor: pointer; + height: 24px; + padding: 4px; + width: 24px; } yt-live-chat-renderer { - position: relative; - height: 100%; - /* background: var(--yt-live-chat-background-color); */ - color: var(--yt-live-chat-primary-text-color); - overflow: hidden; - z-index: 0; - 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); - contain: content; + position: relative; + height: 100%; + /* background: var(--yt-live-chat-background-color); */ + color: var(--yt-live-chat-primary-text-color); + overflow: hidden; + z-index: 0; + 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); + contain: content; } yt-live-chat-renderer[hide-timestamps] { - --yt-live-chat-item-timestamp-display: none; + --yt-live-chat-item-timestamp-display: none; } #separator.yt-live-chat-renderer { - border-bottom: var(--yt-live-chat-header-bottom-border, none); + border-bottom: var(--yt-live-chat-header-bottom-border, none); } #content-pages.yt-live-chat-renderer { - width: var(--sidebar-width-px); - 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); - -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); + width: var(--sidebar-width-px); + 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); + -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); } #panel-pages.yt-live-chat-renderer { - max-height: 100%; - overflow-x: hidden; - overflow-y: auto; + max-height: 100%; + overflow-x: hidden; + overflow-y: auto; } #contents.yt-live-chat-renderer { - overflow: hidden; - position: relative; - z-index: 0; + 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: 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); - -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); + 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); + -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); } #ticker.yt-live-chat-renderer { - z-index: 1; - box-shadow: var(--yt-live-chat-header-box-shadow); + z-index: 1; + box-shadow: var(--yt-live-chat-header-box-shadow); } #chat.yt-live-chat-renderer { - position: relative; - 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); - -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); + position: relative; + 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); + -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); } #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: var(--layout-fit_-_position); - top: var(--layout-fit_-_top); - right: var(--layout-fit_-_right); - bottom: var(--layout-fit_-_bottom); - left: var(--layout-fit_-_left); + 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: var(--layout-fit_-_position); + top: var(--layout-fit_-_top); + right: var(--layout-fit_-_right); + bottom: var(--layout-fit_-_bottom); + left: var(--layout-fit_-_left); } yt-live-chat-renderer[loading] #chat.yt-live-chat-renderer::after { - display: block; + display: block; } yt-live-chat-pinned-message-renderer.yt-live-chat-renderer { - bottom: 0; - left: 0; - position: absolute; - right: 0; - top: 0; + 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: 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: 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); } #action-panel.yt-live-chat-renderer { - display: none; + display: none; } yt-live-chat-renderer[has-action-panel-renderer] - #action-panel.yt-live-chat-renderer { - display: unset; - position: absolute; - bottom: 0; - left: 0; - right: var(--scrollbar-width); - padding: 0 8px 8px; - background: var(--yt-live-chat-action-panel-gradient-scrim); - overflow: hidden; + #action-panel.yt-live-chat-renderer { + display: unset; + position: absolute; + bottom: 0; + left: 0; + right: var(--scrollbar-width); + padding: 0 8px 8px; + background: var(--yt-live-chat-action-panel-gradient-scrim); + overflow: hidden; } yt-live-chat-renderer[has-action-panel-renderer] - yt-live-chat-action-panel-renderer.yt-live-chat-renderer { - animation: slideUp var(--yt-live-chat-universal-motion-curve) forwards; - animation-duration: var(--yt-live-chat-panel-animation-duration); + yt-live-chat-action-panel-renderer.yt-live-chat-renderer { + animation: slideUp var(--yt-live-chat-universal-motion-curve) forwards; + animation-duration: var(--yt-live-chat-panel-animation-duration); } yt-live-chat-renderer[has-action-panel-renderer][is-closing-action-panel] - yt-live-chat-action-panel-renderer.yt-live-chat-renderer { - animation: slideDownFadeOut var(--yt-live-chat-universal-motion-curve) - forwards; - animation-duration: var(--yt-live-chat-panel-animation-duration); + yt-live-chat-action-panel-renderer.yt-live-chat-renderer { + animation: slideDownFadeOut var(--yt-live-chat-universal-motion-curve) + forwards; + animation-duration: var(--yt-live-chat-panel-animation-duration); } #input-panel.yt-live-chat-renderer { - -ms-flex: var(--layout-flex-none_-_-ms-flex); - -webkit-flex: var(--layout-flex-none_-_-webkit-flex); - flex: var(--layout-flex-none_-_flex); + -ms-flex: var(--layout-flex-none_-_-ms-flex); + -webkit-flex: var(--layout-flex-none_-_-webkit-flex); + flex: var(--layout-flex-none_-_flex); } #input-panel.yt-live-chat-renderer:not(:empty) { - border-top: var(--yt-live-chat-action-panel-top-border, none); + border-top: var(--yt-live-chat-action-panel-top-border, none); } #input-panel.yt-live-chat-renderer::after { - content: ""; - display: block; - height: 1px; - margin: 0 24px; - background: var(--yt-spec-10-percent-layer); + content: ''; + display: block; + height: 1px; + margin: 0 24px; + background: var(--yt-spec-10-percent-layer); } #toast-container.yt-live-chat-renderer { - position: relative; + position: relative; } yt-live-chat-renderer[has-picker-open] #toast-container.yt-live-chat-renderer { - order: 1; - z-index: 1; + order: 1; + z-index: 1; } #loading.yt-live-chat-renderer { - height: 387px; - background-color: var(--yt-live-chat-action-panel-background-color); - 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); - -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); + height: 387px; + background-color: var(--yt-live-chat-action-panel-background-color); + 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); + -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); } #loading.yt-live-chat-renderer > paper-spinner-lite.yt-live-chat-renderer { - --paper-spinner-color: var(--yt-live-chat-primary-text-color); + --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: var(--layout-fit_-_position); - top: var(--layout-fit_-_top); - right: var(--layout-fit_-_right); - bottom: var(--layout-fit_-_bottom); - left: var(--layout-fit_-_left); + background: var(--yt-live-chat-overlay-color); + z-index: 3; + position: var(--layout-fit_-_position); + top: var(--layout-fit_-_top); + right: var(--layout-fit_-_right); + bottom: var(--layout-fit_-_bottom); + left: var(--layout-fit_-_left); } @keyframes gradient-slide { - 0% { - background-position: 100% 100%; - } + 0% { + background-position: 100% 100%; + } - to { - background-position: 0% 0%; - } + to { + background-position: 0% 0%; + } } @keyframes slideUp { - 0% { - transform: translateY(15%); - opacity: 0; - } + 0% { + transform: translateY(15%); + opacity: 0; + } - 100% { - transform: translateY(0); - opacity: 1; - } + 100% { + transform: translateY(0); + opacity: 1; + } } @keyframes slideDownFadeOut { - 0% { - transform: translateY(0); - opacity: 1; - } + 0% { + transform: translateY(0); + opacity: 1; + } - 100% { - transform: translateY(15%); - opacity: 0; - } + 100% { + transform: translateY(15%); + opacity: 0; + } } @keyframes fadeIn { - 0% { - background-color: transparent; - } + 0% { + background-color: transparent; + } - 100% { - background-color: var(--yt-spec-static-overlay-background-medium); - } + 100% { + background-color: var(--yt-spec-static-overlay-background-medium); + } } yt-live-chat-renderer { - font-size: 13px; + 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-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-app { - display: block; - width: 100%; - height: 100%; - /* min-width: 298px; */ - /* min-height: 360px; */ - --yt-report-form-modal-renderer-min-width: 0; - display: var(--layout-vertical_-_display, block); - -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); + display: block; + width: 100%; + height: 100%; + /* min-width: 298px; */ + /* min-height: 360px; */ + --yt-report-form-modal-renderer-min-width: 0; + display: var(--layout-vertical_-_display, block); + -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); } #contents.yt-live-chat-app { - 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); - -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); + 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); + -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); } #contents.yt-live-chat-app > *.yt-live-chat-app { - -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: 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); } yt-live-chat-app[dashboard-money-feed] { - min-height: 0; + min-height: 0; } yt-live-chat-app[dashboard-money-feed] - #contents.yt-live-chat-app - > yt-live-chat-message-renderer.yt-live-chat-app { - font-size: 18px; + #contents.yt-live-chat-app + > yt-live-chat-message-renderer.yt-live-chat-app { + font-size: 18px; } /* Browser reset styles. */ @@ -14331,17 +14173,17 @@ tt, u, ul, var { - margin: 0; - padding: 0; - border: 0; - background: transparent; + margin: 0; + padding: 0; + border: 0; + background: transparent; } /* Extra definitions. STYLE MUST BE GLOBAL AND HIGHLY REUSED TO BE ADDED HERE. */ [hidden] { - display: none !important; - /* See https://github.com/Polymer/polymer/issues/3711 */ + display: none !important; + /* See https://github.com/Polymer/polymer/issues/3711 */ } /** @@ -14350,55 +14192,55 @@ var { * See b/37723498 for context. */ .yt-simple-endpoint { - display: inline-block; - cursor: pointer; - text-decoration: none; - color: var(--yt-endpoint-color, var(--yt-spec-text-primary)); + display: inline-block; + cursor: pointer; + text-decoration: none; + color: var(--yt-endpoint-color, var(--yt-spec-text-primary)); } .yt-simple-endpoint:hover { - color: var(--yt-endpoint-hover-color, var(--yt-spec-text-primary)); - text-decoration: var(--yt-endpoint-text-decoration, none); + color: var(--yt-endpoint-hover-color, var(--yt-spec-text-primary)); + text-decoration: var(--yt-endpoint-text-decoration, none); } yt-live-chat-app ::-webkit-scrollbar, yt-live-chat-kevlar-container ::-webkit-scrollbar { - content: ""; + content: ''; } yt-live-chat-app ::-webkit-scrollbar-thumb, yt-live-chat-kevlar-container ::-webkit-scrollbar-thumb { - background-color: hsla(0, 0%, 53.3%, 0.2); - border: 2px solid #fcfcfc; - min-height: 30px; + background-color: hsla(0, 0%, 53.3%, 0.2); + border: 2px solid #fcfcfc; + min-height: 30px; } yt-live-chat-app ::-webkit-scrollbar-track, yt-live-chat-kevlar-container ::-webkit-scrollbar-track { - background-color: #fcfcfc; + background-color: #fcfcfc; } [dark] yt-live-chat-app ::-webkit-scrollbar-thumb, [dark] yt-live-chat-kevlar-container ::-webkit-scrollbar-thumb { - background-color: #333; - border: 2px solid #000; + background-color: #333; + border: 2px solid #000; } [dark] yt-live-chat-app ::-webkit-scrollbar-track, [dark] yt-live-chat-kevlar-container ::-webkit-scrollbar-track { - background-color: #000; + background-color: #000; } [watch-color-update] ::-webkit-scrollbar-thumb { - background-color: var(--yt-spec-icon-disabled); + background-color: var(--yt-spec-icon-disabled); } [watch-color-update] ::-webkit-scrollbar-thumb, [watch-color-update][dark] ::-webkit-scrollbar-thumb { - border-color: var(--yt-spec-general-background-b); + border-color: var(--yt-spec-general-background-b); } [watch-color-update] yt-live-chat-app ::-webkit-scrollbar-track, [watch-color-update] yt-live-chat-kevlar-container ::-webkit-scrollbar-track { - background-color: var(--yt-spec-general-background-b); + background-color: var(--yt-spec-general-background-b); } diff --git a/libs/gamma/src/lib/gamma.app.html b/libs/gamma/src/lib/gamma.app.html index be4429c..2694fda 100644 --- a/libs/gamma/src/lib/gamma.app.html +++ b/libs/gamma/src/lib/gamma.app.html @@ -1,70 +1,137 @@ -
- - -
-
-
- - -
-
- - - - - - - - -
-
- -
-
-
-
- - -
-
-
-
- - -
- - - - - - - - - - - -
-
-
-
- -
+
+ + +
+
+
+ + +
+
+ + + + + + + + +
+
+ +
+
+
+
+ + +
+
+
+
+ + +
+ + + + + + + + + + + +
+
+
- - -
\ No newline at end of file +
+
+
+ + +
diff --git a/libs/gamma/src/lib/gamma.app.ts b/libs/gamma/src/lib/gamma.app.ts index 2fd4ee6..1702b70 100644 --- a/libs/gamma/src/lib/gamma.app.ts +++ b/libs/gamma/src/lib/gamma.app.ts @@ -1,14 +1,14 @@ import { - AfterViewInit, - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ElementRef, - NgZone, - OnDestroy, - Optional, - ViewChild, - ViewEncapsulation, + AfterViewInit, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + NgZone, + OnDestroy, + Optional, + ViewChild, + ViewEncapsulation, } from '@angular/core'; import { GammaConfigService } from './gamma-config.service'; import { Message, ComenEnvironmentHost, SafeAny } from '@comen/common'; @@ -23,268 +23,262 @@ import { WithKairo } from '@kairo/angular'; const ANIMATION_SMOOTH_INTERVAL = 100; const ANIMATION_BUFFER_INTERVAL = 500; const VALID_TYPE = { - text: true, - sticker: true, - paid: true, - member: true, - blank: true, - richtext: true, + text: true, + sticker: true, + paid: true, + member: true, + blank: true, + richtext: true, }; @WithKairo() @Component({ - // eslint-disable-next-line - selector: 'yt-live-chat-app', - templateUrl: './gamma.app.html', - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush, - providers: [GammaConfigService], + // eslint-disable-next-line + selector: 'yt-live-chat-app', + templateUrl: './gamma.app.html', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [GammaConfigService], }) // eslint-disable-next-line export class GammaApp implements AfterViewInit, OnDestroy { - private _destroyed = false; + private _destroyed = false; - private _destroyed$ = new Subject(); + private _destroyed$ = new Subject(); - @ViewChild('offset') offset: ElementRef; - @ViewChild('items') items: ElementRef; - @ViewChild('scroller') scroller: ElementRef; + @ViewChild('offset') offset: ElementRef; + @ViewChild('items') items: ElementRef; + @ViewChild('scroller') scroller: ElementRef; - renderedQueue: QueuedMessage[] = []; - bufferQueue: QueuedMessage[] = []; + renderedQueue: QueuedMessage[] = []; + bufferQueue: QueuedMessage[] = []; - tickers: TickerStatus[] = []; + tickers: TickerStatus[] = []; - private atBottom = true; - private trackIdGen = 0; + private atBottom = true; + private trackIdGen = 0; - identifyMessage(index: number, item: Message) { - return item; - } + identifyMessage(index: number, item: Message) { + return item; + } - ngSetup() { - effect(() => task(this.rendererCoroutine.bind(this))()); - effect(() => task(this.tickerCoroutine.bind(this))()); - } + ngSetup() { + effect(() => task(this.rendererCoroutine.bind(this))()); + effect(() => task(this.tickerCoroutine.bind(this))()); + } - private *rendererCoroutine() { - yield* nextAnimationFrame(); //wait ready. - let lastItemInserted = 0; - while (!this._destroyed) { - if (this.bufferQueue.length) { - while (this.bufferQueue.length > 1) { - // no too much :) - this.renderedQueue.push(this.bufferQueue.shift()); - } - /** to avoid bug: is every 'frame loop' idempotent? */ - const insertedMessage = this.bufferQueue.shift(); - this.renderedQueue.push(insertedMessage); - while ( - this.atBottom && - this.renderedQueue.length > - this.config.current$.value.maxDanmakuNumber - ) { - this.renderedQueue.shift(); - } - /** check ticker */ - this.checkTicker(insertedMessage); - /** update DOM */ - this.changeDetector.detectChanges(); - const inserted = this.items.nativeElement - .lastElementChild as HTMLElement; + private *rendererCoroutine() { + yield* nextAnimationFrame(); //wait ready. + let lastItemInserted = 0; + while (!this._destroyed) { + if (this.bufferQueue.length) { + while (this.bufferQueue.length > 1) { + // no too much :) + this.renderedQueue.push(this.bufferQueue.shift()); + } + /** to avoid bug: is every 'frame loop' idempotent? */ + const insertedMessage = this.bufferQueue.shift(); + this.renderedQueue.push(insertedMessage); + while ( + this.atBottom && + this.renderedQueue.length > + this.config.current$.value.maxDanmakuNumber + ) { + this.renderedQueue.shift(); + } + /** check ticker */ + this.checkTicker(insertedMessage); + /** update DOM */ + this.changeDetector.detectChanges(); + const inserted = this.items.nativeElement + .lastElementChild as HTMLElement; - const insertedHeight = inserted.offsetHeight; // read - const itemsHeight = this.items.nativeElement.offsetHeight; //read - const scrollerHeight = this.scroller.nativeElement.offsetHeight; //read + const insertedHeight = inserted.offsetHeight; // read + const itemsHeight = this.items.nativeElement.offsetHeight; //read + const scrollerHeight = this.scroller.nativeElement.offsetHeight; //read - this.offset.nativeElement.setAttribute( - 'style', - `height: ${itemsHeight}px` - ); //write + this.offset.nativeElement.setAttribute( + 'style', + `height: ${itemsHeight}px` + ); //write - if (this.atBottom) { - //start animation step? or jump over? - if (scrollerHeight < itemsHeight) { - this.scroller.nativeElement.scrollTop = - itemsHeight - scrollerHeight; //write - if ( - performance.now() - lastItemInserted > - ANIMATION_BUFFER_INTERVAL && - !this.config.current$.value.disableSmoother - ) { - // do animation - // calculate the length to move - const animationOffset = Math.min( - itemsHeight - scrollerHeight, - insertedHeight - ); - this.items.nativeElement.setAttribute( - 'style', - `transform: translate3d(0,${animationOffset}px,0)` - ); - // now it's safe to do animations - let acc = 0; - /** mofify any DOM structure while animation is not expected */ - while (acc < ANIMATION_SMOOTH_INTERVAL) { - acc -= - performance.now() - - (yield* nextAnimationFrame()); - this.items.nativeElement.setAttribute( - 'style', - `transform: translate3d(0,${ - easeInOutSine( - 1 - acc / ANIMATION_SMOOTH_INTERVAL - ) * animationOffset - }px,0)` - ); - } - this.items.nativeElement.setAttribute( - 'style', - `transform: translate3d(0,${0}px,0)` - ); - } - } - lastItemInserted = performance.now(); - } - } else { - // these code matters while edit mode! - const itemsHeight = this.items.nativeElement.offsetHeight; //read - this.offset.nativeElement.setAttribute( - 'style', - `height: ${itemsHeight}px` - ); //write + if (this.atBottom) { + //start animation step? or jump over? + if (scrollerHeight < itemsHeight) { + this.scroller.nativeElement.scrollTop = + itemsHeight - scrollerHeight; //write + if ( + performance.now() - lastItemInserted > + ANIMATION_BUFFER_INTERVAL && + !this.config.current$.value.disableSmoother + ) { + // do animation + // calculate the length to move + const animationOffset = Math.min( + itemsHeight - scrollerHeight, + insertedHeight + ); + this.items.nativeElement.setAttribute( + 'style', + `transform: translate3d(0,${animationOffset}px,0)` + ); + // now it's safe to do animations + let acc = 0; + /** mofify any DOM structure while animation is not expected */ + while (acc < ANIMATION_SMOOTH_INTERVAL) { + acc -= performance.now() - (yield* nextAnimationFrame()); + this.items.nativeElement.setAttribute( + 'style', + `transform: translate3d(0,${ + easeInOutSine(1 - acc / ANIMATION_SMOOTH_INTERVAL) * + animationOffset + }px,0)` + ); + } + this.items.nativeElement.setAttribute( + 'style', + `transform: translate3d(0,${0}px,0)` + ); } - yield* nextAnimationFrame(); + } + lastItemInserted = performance.now(); } + } else { + // these code matters while edit mode! + const itemsHeight = this.items.nativeElement.offsetHeight; //read + this.offset.nativeElement.setAttribute( + 'style', + `height: ${itemsHeight}px` + ); //write + } + yield* nextAnimationFrame(); } + } - checkTicker(msg: Message) { - if ( - msg.type == 'sticker' || - msg.type == 'paid' || - msg.type == 'member' - ) { - if (this.config.current$.value.tickerDisplayThreshold > msg.price) { - return; - } - const colorInfo = this.config.getColorInfo(msg.price); - this.tickers.unshift({ - startTime: performance.now(), - message: msg, - interval: colorInfo.ticker_timeout, - status: { - primary_color: colorInfo.primary, - secondary_color: colorInfo.secondary, - text_color: colorInfo.message, - percent: 0, - }, - }); - } + checkTicker(msg: Message) { + if (msg.type == 'sticker' || msg.type == 'paid' || msg.type == 'member') { + if (this.config.current$.value.tickerDisplayThreshold > msg.price) { + return; + } + const colorInfo = this.config.getColorInfo(msg.price); + this.tickers.unshift({ + startTime: performance.now(), + message: msg, + interval: colorInfo.ticker_timeout, + status: { + primary_color: colorInfo.primary, + secondary_color: colorInfo.secondary, + text_color: colorInfo.message, + percent: 0, + }, + }); } + } - private *tickerCoroutine() { - yield* nextAnimationFrame(); //wait ready. - while (!this._destroyed) { - const time = yield* nextAnimationFrame(); - if (!this.tickers.length) { - continue; - } - this.tickers = this.tickers.filter((ticker) => { - // mutable state... - ticker.status = { - percent: (time - ticker.startTime) / ticker.interval / 1000, - primary_color: ticker.status.primary_color, - secondary_color: ticker.status.secondary_color, - text_color: ticker.status.text_color, - }; - if (ticker.status.percent >= 1) { - return false; - } - return true; - }); - this.changeDetector.detectChanges(); + private *tickerCoroutine() { + yield* nextAnimationFrame(); //wait ready. + while (!this._destroyed) { + const time = yield* nextAnimationFrame(); + if (!this.tickers.length) { + continue; + } + this.tickers = this.tickers.filter((ticker) => { + // mutable state... + ticker.status = { + percent: (time - ticker.startTime) / ticker.interval / 1000, + primary_color: ticker.status.primary_color, + secondary_color: ticker.status.secondary_color, + text_color: ticker.status.text_color, + }; + if (ticker.status.percent >= 1) { + return false; } + return true; + }); + this.changeDetector.detectChanges(); } + } - // eslint-disable-next-line - onScroll(event: WheelEvent) { - const contentsHeight = this.offset.nativeElement.offsetHeight; - const scrollerHeight = this.scroller.nativeElement.offsetHeight; // almost keeping unchanged. - const scrollTop = this.scroller.nativeElement.scrollTop; - if (scrollTop + scrollerHeight < contentsHeight) { - this.atBottom = false; - } else { - this.atBottom = true; - } + // eslint-disable-next-line + onScroll(event: WheelEvent) { + const contentsHeight = this.offset.nativeElement.offsetHeight; + const scrollerHeight = this.scroller.nativeElement.offsetHeight; // almost keeping unchanged. + const scrollTop = this.scroller.nativeElement.scrollTop; + if (scrollTop + scrollerHeight < contentsHeight) { + this.atBottom = false; + } else { + this.atBottom = true; } + } - constructor( - @Optional() host: ComenEnvironmentHost, - private changeDetector: ChangeDetectorRef, - public config: GammaConfigService, - public ngzone: NgZone, - private element: ElementRef - ) { - if (host) { - host.message() - .pipe(takeUntil(this._destroyed$)) - .subscribe((m) => { - if (document.visibilityState == 'hidden') { - return; - } - if (m.type == 'fold') { - } else if (m.type in VALID_TYPE) { - this.bufferQueue.push(m as SafeAny); - } - }); - } + constructor( + @Optional() host: ComenEnvironmentHost, + private changeDetector: ChangeDetectorRef, + public config: GammaConfigService, + public ngzone: NgZone, + private element: ElementRef + ) { + if (host) { + host + .message() + .pipe(takeUntil(this._destroyed$)) + .subscribe((m) => { + if (document.visibilityState == 'hidden') { + return; + } + if (m.type == 'fold') { + } else if (m.type in VALID_TYPE) { + this.bufferQueue.push(m as SafeAny); + } + }); } + } - ngAfterViewInit(): void { - // now nativeElement is attached on the document. - const head = (this.element.nativeElement.getRootNode() as ShadowRoot).querySelector( - 'head' - ); + ngAfterViewInit(): void { + // now nativeElement is attached on the document. + const head = (this.element.nativeElement.getRootNode() as ShadowRoot).querySelector( + 'head' + ); - const style = document.createElement('style'); - style.textContent = css; - head.appendChild(style); - // a trade-off - const hostDocument = (this.element.nativeElement.getRootNode() as ShadowRoot).host.getRootNode() as Document; - hostDocument.querySelectorAll('head > style').forEach((node) => { - // FIX ME: it's not safe! - if(node.textContent.indexOf('[_nghost-')>=0) { - return; - } - const style = document.createElement('style'); - style.textContent = node.textContent; - head.appendChild(style); - }); - } + const style = document.createElement('style'); + style.textContent = css; + head.appendChild(style); + // a trade-off + const hostDocument = (this.element.nativeElement.getRootNode() as ShadowRoot).host.getRootNode() as Document; + hostDocument.querySelectorAll('head > style').forEach((node) => { + // FIX ME: it's not safe! + if (node.textContent.indexOf('[_nghost-') >= 0) { + return; + } + const style = document.createElement('style'); + style.textContent = node.textContent; + head.appendChild(style); + }); + } - ngOnDestroy() { - this._destroyed = true; - this._destroyed$.next(); - this._destroyed$.complete(); - } + ngOnDestroy() { + this._destroyed = true; + this._destroyed$.next(); + this._destroyed$.complete(); + } } type QueuedMessage = { - id: number; + id: number; } & Message; type TickerStatus = { - startTime: number; - interval: number; - message: Message; - status: { - primary_color: string; - secondary_color: string; - text_color: string; - percent: number; - }; + startTime: number; + interval: number; + message: Message; + status: { + primary_color: string; + secondary_color: string; + text_color: string; + percent: number; + }; }; function easeInOutSine(x: number): number { - return -(Math.cos(Math.PI * x) - 1) / 2; + return -(Math.cos(Math.PI * x) - 1) / 2; } diff --git a/libs/gamma/src/lib/gamma.module.ts b/libs/gamma/src/lib/gamma.module.ts index 476281e..672c0e7 100644 --- a/libs/gamma/src/lib/gamma.module.ts +++ b/libs/gamma/src/lib/gamma.module.ts @@ -12,28 +12,28 @@ import { ReactiveComponentModule } from '@ngrx/component'; import { COMMENT_CONFIGURATION } from './metadata'; @NgModule({ - declarations: [ - GammaApp, - TextMessageRenderer, - PaidMessageRenderer, - MembershipItemRenderer, - PaidStickerRenderer, - TickerSponsorItemRenderer, - TickerPaidMessageItemRenderer, - TickerPaidStickerItemRenderer, - ], - imports: [CommonModule, ReactiveComponentModule], - providers: [], - exports: [GammaApp], - schemas: [CUSTOM_ELEMENTS_SCHEMA], + declarations: [ + GammaApp, + TextMessageRenderer, + PaidMessageRenderer, + MembershipItemRenderer, + PaidStickerRenderer, + TickerSponsorItemRenderer, + TickerPaidMessageItemRenderer, + TickerPaidStickerItemRenderer, + ], + imports: [CommonModule, ReactiveComponentModule], + providers: [], + exports: [GammaApp], + schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class GammaModule { - entry = GammaApp; - metadata = { - name: 'gamma', - displayName: '评论栏-γ型', - description: '能够兼容youtube样式表的评论栏', - editable: true, - configuration: COMMENT_CONFIGURATION, - }; + entry = GammaApp; + metadata = { + name: 'gamma', + displayName: '评论栏-γ型', + description: '能够兼容youtube样式表的评论栏', + editable: true, + configuration: COMMENT_CONFIGURATION, + }; } diff --git a/libs/gamma/src/lib/membership-item/membership-item.html b/libs/gamma/src/lib/membership-item/membership-item.html index c74106f..6718853 100644 --- a/libs/gamma/src/lib/membership-item/membership-item.html +++ b/libs/gamma/src/lib/membership-item/membership-item.html @@ -1,44 +1,94 @@
- -
-
+ + + +
-
+
+ {{message.itemInfo}}
+
+
+ {{date | date:'hh:mm a'}} +
-
\ No newline at end of file +
+
+
+
+
+
diff --git a/libs/gamma/src/lib/membership-item/membership-item.ts b/libs/gamma/src/lib/membership-item/membership-item.ts index 200ccee..8311454 100644 --- a/libs/gamma/src/lib/membership-item/membership-item.ts +++ b/libs/gamma/src/lib/membership-item/membership-item.ts @@ -8,12 +8,11 @@ import { MemberMessage } from '@comen/common'; // eslint-disable-next-line host: { class: 'style-scope yt-live-chat-item-list-renderer', - 'show-only-header': '' - } + 'show-only-header': '', + }, }) // eslint-disable-next-line export class MembershipItemRenderer { - @Input() message: MemberMessage; readonly date = new Date(); diff --git a/libs/gamma/src/lib/metadata.ts b/libs/gamma/src/lib/metadata.ts index 3bf30dc..34332b6 100644 --- a/libs/gamma/src/lib/metadata.ts +++ b/libs/gamma/src/lib/metadata.ts @@ -1,21 +1,17 @@ import { ComenAddonConfiguration } from '@comen/common'; const COMMENT_CONFIGURATION: ComenAddonConfiguration = { - displayName: 'N/A', - sections: { - "textMessage": { - "x-icon": "chat_bubble", - displayName: "文本信息", - level: 1, - properties: { - - }, - defaultValue: {}, - variantProperties: [ - - ] - } + displayName: 'N/A', + sections: { + textMessage: { + 'x-icon': 'chat_bubble', + displayName: '文本信息', + level: 1, + properties: {}, + defaultValue: {}, + variantProperties: [], }, + }, }; export { COMMENT_CONFIGURATION }; diff --git a/libs/gamma/src/lib/paid-message/paid-message.html b/libs/gamma/src/lib/paid-message/paid-message.html index 11ae985..d58a8f4 100644 --- a/libs/gamma/src/lib/paid-message/paid-message.html +++ b/libs/gamma/src/lib/paid-message/paid-message.html @@ -1,31 +1,81 @@
-