@netless/telebox-insider 0.2.26 → 1.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/dist/TeleBox/constants.d.ts +0 -3
  2. package/dist/TeleBox/index.d.ts +120 -91
  3. package/dist/TeleBox/typings.d.ts +40 -55
  4. package/dist/TeleBoxCollector/index.d.ts +25 -29
  5. package/dist/TeleBoxManager/MaxTitleBar/index.d.ts +13 -18
  6. package/dist/TeleBoxManager/constants.d.ts +0 -3
  7. package/dist/TeleBoxManager/index.d.ts +55 -18
  8. package/dist/TeleBoxManager/typings.d.ts +35 -28
  9. package/dist/TeleStage/index.d.ts +25 -0
  10. package/dist/TeleTitleBar/DefaultTitleBar/index.d.ts +6 -8
  11. package/dist/TeleTitleBar/typings.d.ts +3 -5
  12. package/dist/index.d.ts +0 -1
  13. package/dist/style.css +1 -1
  14. package/dist/telebox-insider.cjs.js +2 -2
  15. package/dist/telebox-insider.cjs.js.map +1 -1
  16. package/dist/telebox-insider.es.js +2 -2
  17. package/dist/telebox-insider.es.js.map +1 -1
  18. package/dist/utils.d.ts +0 -1
  19. package/package.json +6 -19
  20. package/src/TeleBox/constants.ts +0 -3
  21. package/src/TeleBox/index.ts +496 -678
  22. package/src/TeleBox/style.scss +1 -0
  23. package/src/TeleBox/typings.ts +40 -75
  24. package/src/TeleBoxCollector/index.ts +137 -159
  25. package/src/TeleBoxManager/MaxTitleBar/index.ts +82 -110
  26. package/src/TeleBoxManager/constants.ts +0 -3
  27. package/src/TeleBoxManager/index.ts +300 -326
  28. package/src/TeleBoxManager/typings.ts +42 -52
  29. package/src/TeleStage/index.ts +189 -0
  30. package/src/TeleStage/style.scss +49 -0
  31. package/src/TeleTitleBar/DefaultTitleBar/index.ts +48 -61
  32. package/src/TeleTitleBar/typings.ts +3 -9
  33. package/src/index.ts +0 -1
  34. package/src/utils.ts +0 -6
  35. package/dist/TeleBoxCollector/TeleBoxCollector.stories.d.ts +0 -5
  36. package/dist/TeleBoxManager/MaxTitleBar/MaxTitleBar.stories.d.ts +0 -7
  37. package/dist/TeleBoxManager/MaxTitleBar/MaxTitleBarReact.d.ts +0 -4
  38. package/dist/TeleBoxReact/TeleBox.stories.d.ts +0 -9
  39. package/dist/TeleBoxReact/index.d.ts +0 -17
  40. package/dist/TeleBoxReact/utils.d.ts +0 -2
  41. package/dist/TeleTitleBar/DefaultTitleBar/DefaultTitleBar.stories.d.ts +0 -4
  42. package/src/TeleBoxCollector/TeleBoxCollector.stories.tsx +0 -23
  43. package/src/TeleBoxManager/MaxTitleBar/MaxTitleBar.stories.tsx +0 -66
  44. package/src/TeleBoxManager/MaxTitleBar/MaxTitleBarReact.tsx +0 -34
  45. package/src/TeleBoxReact/TeleBox.stories.tsx +0 -74
  46. package/src/TeleBoxReact/index.tsx +0 -175
  47. package/src/TeleBoxReact/utils.ts +0 -14
  48. package/src/TeleTitleBar/DefaultTitleBar/DefaultTitleBar.stories.tsx +0 -15
@@ -1,37 +1,72 @@
1
- import type { TeleBoxConfig, TeleBoxRect, TeleBoxState } from "../TeleBox/typings";
1
+ import { SideEffectManager } from "side-effect-manager";
2
+ import type { ReadonlyVal, ValEnhancedResult, ReadonlyValEnhancedResult } from "value-enhancer";
3
+ import { Val } from "value-enhancer";
4
+ import Emittery from "emittery";
5
+ import type { ReadonlyTeleBox, TeleBoxColorScheme, TeleBoxRect, TeleBoxState } from "../TeleBox";
6
+ import { TeleBox } from "../TeleBox";
2
7
  import { TeleBoxCollector } from "../TeleBoxCollector";
3
- import { ReadonlyTeleBox, TeleBox } from "../TeleBox";
4
- import type { TeleBoxManagerConfig, TeleBoxManagerCreateConfig, TeleBoxManagerEvents, TeleBoxManagerQueryConfig, TeleBoxManagerUpdateConfig } from "./typings";
8
+ import type { TeleBoxManagerConfig, TeleBoxManagerCreateConfig, TeleBoxManagerQueryConfig, TeleBoxManagerUpdateConfig } from "./typings";
5
9
  import { MaxTitleBar } from "./MaxTitleBar";
6
- import { TeleBoxColorScheme } from "..";
7
- import { SideEffectManager } from "side-effect-manager";
8
- import { Val, ValEnhancedResult } from "value-enhancer";
9
10
  export * from "./typings";
10
11
  export * from "./constants";
12
+ declare type ReadonlyValConfig = {
13
+ darkMode: ReadonlyVal<boolean, boolean>;
14
+ state: ReadonlyVal<TeleBoxState, boolean>;
15
+ rootRect: Val<TeleBoxRect>;
16
+ stageRect: ReadonlyVal<TeleBoxRect>;
17
+ };
11
18
  declare type ValConfig = {
12
19
  prefersColorScheme: Val<TeleBoxColorScheme, boolean>;
13
- containerRect: Val<TeleBoxRect, boolean>;
14
- collector: Val<TeleBoxCollector | null>;
15
- collectorRect: Val<TeleBoxRect | undefined>;
16
20
  readonly: Val<boolean, boolean>;
17
21
  minimized: Val<boolean, boolean>;
18
22
  maximized: Val<boolean, boolean>;
19
23
  fence: Val<boolean, boolean>;
24
+ stageRatio: Val<number, boolean>;
25
+ highlightStage: Val<boolean, boolean>;
20
26
  };
21
- export interface TeleBoxManager extends ValEnhancedResult<ValConfig> {
27
+ declare type CombinedValEnhancedResult = ValEnhancedResult<ValConfig> & ReadonlyValEnhancedResult<ReadonlyValConfig>;
28
+ export interface TeleBoxManager extends CombinedValEnhancedResult {
22
29
  }
23
30
  export declare class TeleBoxManager {
24
- constructor({ root, prefersColorScheme, minimized, maximized, fence, containerRect, collector, namespace, readonly, }?: TeleBoxManagerConfig);
31
+ constructor({ root, prefersColorScheme, minimized, maximized, fence, collector, namespace, readonly, stageRatio, highlightStage, }?: TeleBoxManagerConfig);
25
32
  get boxes(): ReadonlyArray<TeleBox>;
26
33
  get topBox(): TeleBox | undefined;
27
- readonly events: TeleBoxManagerEvents;
34
+ readonly events: Emittery<{
35
+ focused: ReadonlyTeleBox | undefined;
36
+ blurred: ReadonlyTeleBox | undefined;
37
+ created: ReadonlyTeleBox;
38
+ removed: ReadonlyTeleBox[];
39
+ state: "normal" | "minimized" | "maximized";
40
+ maximized: boolean;
41
+ minimized: boolean;
42
+ move: ReadonlyTeleBox;
43
+ resize: ReadonlyTeleBox;
44
+ intrinsic_move: ReadonlyTeleBox;
45
+ intrinsic_resize: ReadonlyTeleBox;
46
+ visual_resize: ReadonlyTeleBox;
47
+ z_index: ReadonlyTeleBox;
48
+ prefers_color_scheme: "light" | "dark" | "auto";
49
+ dark_mode: boolean;
50
+ }, {
51
+ focused: ReadonlyTeleBox | undefined;
52
+ blurred: ReadonlyTeleBox | undefined;
53
+ created: ReadonlyTeleBox;
54
+ removed: ReadonlyTeleBox[];
55
+ state: "normal" | "minimized" | "maximized";
56
+ maximized: boolean;
57
+ minimized: boolean;
58
+ move: ReadonlyTeleBox;
59
+ resize: ReadonlyTeleBox;
60
+ intrinsic_move: ReadonlyTeleBox;
61
+ intrinsic_resize: ReadonlyTeleBox;
62
+ visual_resize: ReadonlyTeleBox;
63
+ z_index: ReadonlyTeleBox;
64
+ prefers_color_scheme: "light" | "dark" | "auto";
65
+ dark_mode: boolean;
66
+ }, never>;
28
67
  protected _sideEffect: SideEffectManager;
29
68
  protected root: HTMLElement;
30
69
  readonly namespace: string;
31
- _darkMode$: Val<boolean, boolean>;
32
- get darkMode(): boolean;
33
- _state$: Val<TeleBoxState, boolean>;
34
- get state(): TeleBoxState;
35
70
  /** @deprecated use setMaximized and setMinimized instead */
36
71
  setState(state: TeleBoxState, skipUpdate?: boolean): this;
37
72
  create(config?: TeleBoxManagerCreateConfig, smartPosition?: boolean): ReadonlyTeleBox;
@@ -48,12 +83,14 @@ export declare class TeleBoxManager {
48
83
  focusTopBox(): void;
49
84
  blurBox(boxOrID: string | TeleBox, skipUpdate?: boolean): void;
50
85
  blurAll(skipUpdate?: boolean): void;
51
- protected maxTitleBar: MaxTitleBar;
86
+ collector: TeleBoxCollector;
87
+ titleBar: MaxTitleBar;
52
88
  protected boxes$: Val<TeleBox[]>;
53
89
  protected topBox$: Val<TeleBox | undefined>;
54
90
  protected teleBoxMatcher(config: TeleBoxManagerQueryConfig): (box: TeleBox) => boolean;
55
91
  protected updateBox(box: TeleBox, config: TeleBoxManagerUpdateConfig, skipUpdate?: boolean): void;
56
- protected smartPosition(config?: TeleBoxConfig): TeleBoxConfig;
92
+ /** Keep new boxes staggered inside stage area */
93
+ protected smartPosition(rect: Partial<TeleBoxRect>): TeleBoxRect;
57
94
  protected makeBoxTop(box: TeleBox, skipUpdate?: boolean): void;
58
95
  protected getBoxIndex(boxOrID: TeleBox | string): number;
59
96
  protected getBox(boxOrID: TeleBox | string): TeleBox | undefined;
@@ -1,42 +1,49 @@
1
- import type EventEmitter from "eventemitter3";
2
- import { TeleBoxColorScheme } from "..";
1
+ import type { TeleBoxColorScheme } from "..";
3
2
  import type { ReadonlyTeleBox, TeleBoxState } from "../TeleBox";
4
3
  import type { TeleBoxConfig } from "../TeleBox/typings";
5
4
  import type { TeleBoxCollector } from "../TeleBoxCollector";
6
5
  import type { TELE_BOX_MANAGER_EVENT } from "./constants";
7
- export interface TeleBoxManagerConfig extends Pick<TeleBoxConfig, "prefersColorScheme" | "fence" | "containerRect" | "maximized" | "minimized" | "namespace" | "readonly"> {
6
+ export interface TeleBoxManagerConfig extends Pick<TeleBoxConfig, "namespace"> {
8
7
  /** Element to mount boxes. */
9
- root?: HTMLElement;
8
+ readonly root?: HTMLElement;
9
+ /** Stage area height/with ratio. No ratio if <= 0. Default -1. */
10
+ readonly stageRatio?: number;
10
11
  /** Where the minimized boxes go. */
11
- collector?: TeleBoxCollector;
12
+ readonly collector?: TeleBoxCollector;
13
+ /** Restrict box to always be within the stage area. Default false. */
14
+ readonly fence?: boolean;
15
+ /** Prefers Box color scheme. Default light. */
16
+ readonly prefersColorScheme?: TeleBoxColorScheme;
17
+ /** Maximize box. Default false. */
18
+ readonly maximized?: boolean;
19
+ /** Minimize box. Overwrites maximized state. Default false. */
20
+ readonly minimized?: boolean;
21
+ /** Is box readonly */
22
+ readonly readonly?: boolean;
23
+ /** Show stage frame and grey-out the non-stage area. Default true. */
24
+ readonly highlightStage?: boolean;
12
25
  }
13
- declare type TeleBoxManagerBoxConfigBaseProps = "title" | "visible" | "width" | "height" | "minWidth" | "minHeight" | "x" | "y" | "resizable" | "draggable" | "fixRatio" | "zIndex";
26
+ declare type TeleBoxManagerBoxConfigBaseProps = "title" | "visible" | "width" | "height" | "minWidth" | "minHeight" | "x" | "y" | "resizable" | "draggable" | "ratio" | "zIndex";
14
27
  export declare type TeleBoxManagerCreateConfig = Pick<TeleBoxConfig, TeleBoxManagerBoxConfigBaseProps | "content" | "footer" | "id" | "focus">;
15
- export declare type TeleBoxManagerQueryConfig = Pick<TeleBoxConfig, TeleBoxManagerBoxConfigBaseProps | "id" | "focus">;
28
+ export declare type TeleBoxManagerQueryConfig = Pick<TeleBoxConfig, "title" | "visible" | "resizable" | "draggable" | "ratio" | "zIndex" | "id" | "focus">;
16
29
  export declare type TeleBoxManagerUpdateConfig = Pick<TeleBoxConfig, TeleBoxManagerBoxConfigBaseProps | "content" | "footer">;
17
30
  declare type CheckTeleBoxManagerConfig<T extends Record<`${TELE_BOX_MANAGER_EVENT}`, any>> = T;
18
31
  export declare type TeleBoxManagerEventConfig = CheckTeleBoxManagerConfig<{
19
- focused: [ReadonlyTeleBox | undefined];
20
- blurred: [ReadonlyTeleBox | undefined];
21
- created: [ReadonlyTeleBox];
22
- removed: [ReadonlyTeleBox[]];
23
- state: [TeleBoxState];
24
- maximized: [boolean];
25
- minimized: [boolean];
26
- move: [ReadonlyTeleBox];
27
- resize: [ReadonlyTeleBox];
28
- intrinsic_move: [ReadonlyTeleBox];
29
- intrinsic_resize: [ReadonlyTeleBox];
30
- visual_resize: [ReadonlyTeleBox];
31
- z_index: [ReadonlyTeleBox];
32
- prefers_color_scheme: [TeleBoxColorScheme];
33
- dark_mode: [boolean];
32
+ focused: ReadonlyTeleBox | undefined;
33
+ blurred: ReadonlyTeleBox | undefined;
34
+ created: ReadonlyTeleBox;
35
+ removed: ReadonlyTeleBox[];
36
+ state: TeleBoxState;
37
+ maximized: boolean;
38
+ minimized: boolean;
39
+ move: ReadonlyTeleBox;
40
+ resize: ReadonlyTeleBox;
41
+ intrinsic_move: ReadonlyTeleBox;
42
+ intrinsic_resize: ReadonlyTeleBox;
43
+ visual_resize: ReadonlyTeleBox;
44
+ z_index: ReadonlyTeleBox;
45
+ prefers_color_scheme: TeleBoxColorScheme;
46
+ dark_mode: boolean;
34
47
  }>;
35
48
  export declare type TeleBoxManagerEvent = keyof TeleBoxManagerEventConfig;
36
- export interface TeleBoxManagerEvents extends EventEmitter<TeleBoxManagerEvent> {
37
- on<U extends TeleBoxManagerEvent>(event: U, listener: (...value: TeleBoxManagerEventConfig[U]) => void): this;
38
- once<U extends TeleBoxManagerEvent>(event: U, listener: (...value: TeleBoxManagerEventConfig[U]) => void): this;
39
- addListener<U extends TeleBoxManagerEvent>(event: U, listener: (...value: TeleBoxManagerEventConfig[U]) => void): this;
40
- emit<U extends TeleBoxManagerEvent>(event: U, ...value: TeleBoxManagerEventConfig[U]): boolean;
41
- }
42
49
  export {};
@@ -0,0 +1,25 @@
1
+ import "./style.scss";
2
+ import type { ReadonlyVal } from "value-enhancer";
3
+ import { Val } from "value-enhancer";
4
+ import type { TeleBoxRect } from "../TeleBox/typings";
5
+ export interface TeleStageConfig {
6
+ namespace: string;
7
+ root?: HTMLElement | null;
8
+ rootRect$: ReadonlyVal<TeleBoxRect>;
9
+ ratio$: ReadonlyVal<number>;
10
+ highlightStage$: ReadonlyVal<boolean>;
11
+ }
12
+ export declare class TeleStage {
13
+ private readonly _sideEffect;
14
+ readonly namespace: string;
15
+ readonly stageRect$: ReadonlyVal<TeleBoxRect>;
16
+ readonly highlightStage$: ReadonlyVal<boolean>;
17
+ readonly root$: Val<HTMLElement | null>;
18
+ $boxStage?: HTMLDivElement;
19
+ constructor({ namespace, rootRect$, ratio$, highlightStage$, root, }: TeleStageConfig);
20
+ private render;
21
+ mount($root: HTMLElement): void;
22
+ unmount(): void;
23
+ destroy(): void;
24
+ wrapClassName(className: string): string;
25
+ }
@@ -2,6 +2,7 @@ import "./style.scss";
2
2
  import { SideEffectManager } from "side-effect-manager";
3
3
  import type { TeleBoxState } from "../../TeleBox/typings";
4
4
  import type { TeleTitleBar, TeleTitleBarConfig, TeleTitleBarEvent } from "../typings";
5
+ import { Val } from "value-enhancer";
5
6
  export declare type DefaultTitleBarButton = TeleTitleBarEvent & {
6
7
  readonly iconClassName: string;
7
8
  readonly isActive?: (state: TeleBoxState) => boolean;
@@ -10,14 +11,12 @@ export interface DefaultTitleBarConfig extends TeleTitleBarConfig {
10
11
  buttons?: ReadonlyArray<DefaultTitleBarButton>;
11
12
  }
12
13
  export declare class DefaultTitleBar implements TeleTitleBar {
13
- constructor({ readonly, title, buttons, onEvent, onDragStart, namespace, state, }?: DefaultTitleBarConfig);
14
+ constructor({ readonly$, state$, title, buttons, onEvent, onDragStart, namespace, }: DefaultTitleBarConfig);
14
15
  readonly namespace: string;
15
16
  $titleBar: HTMLElement | undefined;
16
- $title: HTMLElement | undefined;
17
17
  $dragArea: HTMLElement;
18
+ get title(): string;
18
19
  setTitle(title: string): void;
19
- setState(state: TeleBoxState): void;
20
- setReadonly(readonly: boolean): void;
21
20
  render(): HTMLElement;
22
21
  renderDragArea(): HTMLElement;
23
22
  dragHandle(): HTMLElement | undefined;
@@ -25,11 +24,10 @@ export declare class DefaultTitleBar implements TeleTitleBar {
25
24
  destroy(): void;
26
25
  onEvent?: TeleTitleBarConfig["onEvent"];
27
26
  onDragStart?: TeleTitleBarConfig["onDragStart"];
28
- protected readonly: boolean;
29
- protected title?: string;
27
+ protected readonly$: TeleTitleBarConfig["readonly$"];
28
+ protected title$: Val<string>;
30
29
  protected buttons: ReadonlyArray<DefaultTitleBarButton>;
31
- protected state: TeleBoxState;
32
- protected $btns: HTMLButtonElement[];
30
+ protected state$: TeleTitleBarConfig["state$"];
33
31
  protected sideEffect: SideEffectManager;
34
32
  protected lastTitleBarClick: {
35
33
  timestamp: number;
@@ -1,3 +1,4 @@
1
+ import type { ReadonlyVal } from "value-enhancer";
1
2
  import type { TeleBoxDelegateEventConfig, TeleBoxState } from "../TeleBox";
2
3
  export declare type TeleTitleBarEvent<U = keyof TeleBoxDelegateEventConfig> = U extends keyof TeleBoxDelegateEventConfig ? TeleBoxDelegateEventConfig[U] extends void ? {
3
4
  type: U;
@@ -7,17 +8,14 @@ export declare type TeleTitleBarEvent<U = keyof TeleBoxDelegateEventConfig> = U
7
8
  value: TeleBoxDelegateEventConfig[U];
8
9
  } : never;
9
10
  export interface TeleTitleBarConfig {
10
- readonly?: boolean;
11
+ readonly$: ReadonlyVal<boolean, boolean>;
11
12
  title?: string;
12
- state?: TeleBoxState;
13
+ state$: ReadonlyVal<TeleBoxState, boolean>;
13
14
  namespace?: string;
14
15
  onEvent?: (event: TeleTitleBarEvent) => void;
15
16
  onDragStart?: (event: MouseEvent | TouchEvent) => void;
16
17
  }
17
18
  export interface TeleTitleBar {
18
- setTitle(title: string): void;
19
- setState(state: TeleBoxState): void;
20
- setReadonly(readonly: boolean): void;
21
19
  render(): HTMLElement;
22
20
  destroy(): void;
23
21
  }
package/dist/index.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import "./scss/fancy-scrollbar.scss";
2
2
  export * from "./TeleBox";
3
3
  export * from "./TeleTitleBar";
4
- export * from "./TeleBoxReact";
5
4
  export * from "./TeleBoxManager";
6
5
  export * from "./TeleBoxCollector";
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- .tele-fancy-scrollbar{overscroll-behavior:contain;overflow:auto;overflow-y:scroll;overflow-y:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.tele-fancy-scrollbar::-webkit-scrollbar{height:8px;width:8px}.tele-fancy-scrollbar::-webkit-scrollbar-track{background-color:transparent}.tele-fancy-scrollbar::-webkit-scrollbar-thumb{background-color:rgba(68,78,96,.1);background-color:transparent;border-radius:4px;transition:background-color .4s}.tele-fancy-scrollbar:hover::-webkit-scrollbar-thumb{background-color:rgba(68,78,96,.1)}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:hover{background-color:rgba(68,78,96,.2)}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:active{background-color:rgba(68,78,96,.2)}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:vertical{min-height:50px}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-box{position:absolute;top:0;left:0;z-index:100;transition:width .4s cubic-bezier(.4, .9, .71, 1.02),height .4s cubic-bezier(.55, .82, .63, .95),opacity .6s cubic-bezier(.7, 0, .84, 0),transform .4s ease}.telebox-box-main{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:#f9f9fc;box-shadow:0 4px 10px 0 rgba(47,65,146,.15);border-radius:6px;border:1px solid #e3e3ec}.telebox-titlebar-wrap{flex-shrink:0;position:relative;z-index:1}.telebox-content-wrap{flex:1;width:100%;overflow:hidden;display:flex;justify-content:center;align-items:center}.telebox-content{width:100%;height:100%;position:relative}.telebox-footer-wrap{flex-shrink:0;display:flex;flex-direction:column}.telebox-footer-wrap::before{content:"";display:block;flex:1}.telebox-resize-handle{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;position:absolute;z-index:2147483647}.telebox-n{width:100%;height:5px;left:0;top:-5px;cursor:n-resize}.telebox-s{width:100%;height:5px;left:0;bottom:-5px;cursor:s-resize}.telebox-w{width:5px;height:100%;left:-5px;top:0;cursor:w-resize}.telebox-e{width:5px;height:100%;right:-5px;top:0;cursor:e-resize}.telebox-nw{width:15px;height:15px;top:-5px;left:-5px;cursor:nw-resize}.telebox-ne{width:15px;height:15px;top:-5px;right:-5px;cursor:ne-resize}.telebox-se{width:15px;height:15px;bottom:-5px;right:-5px;cursor:se-resize}.telebox-sw{width:15px;height:15px;bottom:-5px;left:-5px;cursor:sw-resize}.telebox-track-mask{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;position:fixed;top:0;left:0;z-index:2147483647;width:100%;height:100%;background:rgba(0,0,0,.0001);cursor:move}.telebox-cursor-n{cursor:n-resize}.telebox-cursor-s{cursor:s-resize}.telebox-cursor-w{cursor:w-resize}.telebox-cursor-e{cursor:e-resize}.telebox-cursor-nw{cursor:nw-resize}.telebox-cursor-ne{cursor:ne-resize}.telebox-cursor-se{cursor:se-resize}.telebox-cursor-sw{cursor:sw-resize}.telebox-maximized .telebox-resize-handles,.telebox-no-resize .telebox-resize-handles{display:none}.telebox-maximized{box-shadow:none;transition:none}.telebox-minimized{transition:width 50ms cubic-bezier(.4, .9, .71, 1.02),height 50ms cubic-bezier(.55, .82, .63, .95),opacity .6s cubic-bezier(.7, 0, .84, 0),transform .6s ease;opacity:0;pointer-events:none;user-select:none}.telebox-transforming{will-change:transform;transition:opacity .6s cubic-bezier(.7, 0, .84, 0)}.telebox-readonly .telebox-resize-handle{cursor:initial!important;pointer-events:none!important}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark .telebox-box-main{color:#e9e9e9;background:#212126;border-color:#43434d}.telebox-titlebar{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;box-sizing:border-box;height:26px;display:flex;align-items:center;background:#fff;user-select:none;border-bottom:1px solid #eeeef7;touch-action:manipulation}.telebox-title-area{padding-left:16px;overflow:hidden;position:relative;height:100%;flex:1;display:flex;align-items:center}.telebox-title{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;overflow:hidden;margin:0;padding:0;font-size:14px;font-weight:400;font-family:PingFangSC-Regular,PingFang SC;white-space:nowrap;word-break:keep-all;text-overflow:ellipsis;color:#191919}.telebox-drag-area{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;z-index:10}.telebox-titlebar-btns{padding-right:16px;white-space:nowrap;word-break:keep-all;margin-left:auto;font-size:0}.telebox-titlebar-btn{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;width:22px;height:22px;padding:0;outline:0;border:none;background:0 0;cursor:pointer}.telebox-titlebar-btn~.telebox-titlebar-btn{margin-left:10px}.telebox-titlebar-btn-icon{width:22px;height:22px}.telebox-readonly .telebox-titlebar-btn{cursor:not-allowed}.telebox-titlebar-icon-minimize{background:center/cover no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=")}.telebox-titlebar-icon-maximize{background:center/cover no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==")}.telebox-titlebar-icon-maximize.is-active{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K")}.telebox-titlebar-icon-close{background:center/cover no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=")}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark .telebox-title{color:#e9e9e9}.telebox-color-scheme-dark .telebox-titlebar{color:#e9e9e9;background:#43434d;border-bottom:none}.telebox-collector{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;visibility:hidden;display:block;position:absolute;z-index:200;width:40px;height:40px;margin:0;padding:0;border:none;outline:0;font-size:0;border-radius:50%;background:#fff;box-shadow:0 2px 6px 0 rgba(47,65,146,.15);cursor:pointer;user-select:none;pointer-events:none;background-repeat:no-repeat;background-size:18px 16px;background-position:center;-webkit-tap-highlight-color:transparent}.telebox-collector-visible{visibility:visible;pointer-events:initial}.telebox-collector-readonly{cursor:not-allowed}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark.telebox-collector{background-color:#43434d}.telebox-max-titlebar{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;display:none;position:absolute;top:0;left:0;z-index:50000}.telebox-max-titlebar .telebox-title{display:none}.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-titles{display:none}.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-title{display:block}.telebox-max-titlebar-maximized{display:flex}.telebox-titles{height:100%;margin:0;overflow-y:hidden;overflow-x:scroll;overflow-x:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.telebox-titles::-webkit-scrollbar{height:8px;width:8px}.telebox-titles::-webkit-scrollbar-track{background-color:transparent}.telebox-titles::-webkit-scrollbar-thumb{background-color:rgba(238,238,247,.8);background-color:transparent;border-radius:4px;transition:background-color .4s}.telebox-titles:hover::-webkit-scrollbar-thumb{background-color:rgba(238,238,247,.8)}.telebox-titles::-webkit-scrollbar-thumb:hover{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:active{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:vertical{min-height:50px}.telebox-titles::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-titles-content{height:100%;display:flex;flex-wrap:nowrap;align-items:center;padding:0}.telebox-titles-tab{height:100%;overflow:hidden;max-width:182px;min-width:50px;padding:0 26px 0 16px;outline:0;font-size:13px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;border:none;border-right:1px solid #e5e5f0;color:#7b88a0;background:0 0;cursor:pointer;user-select:none}.telebox-titles-tab-focus{color:#357bf6}.telebox-readonly .telebox-titles-tab{cursor:not-allowed}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark.telebox-titlebar{color:#e9e9e9;background:#43434d;border-bottom:none}.telebox-color-scheme-dark .telebox-titles-tab{border-right-color:#7b88a0}.telebox-color-scheme-dark .telebox-title{color:#e9e9e9}
1
+ .tele-fancy-scrollbar{overscroll-behavior:contain;overflow:auto;overflow-y:scroll;overflow-y:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.tele-fancy-scrollbar::-webkit-scrollbar{height:8px;width:8px}.tele-fancy-scrollbar::-webkit-scrollbar-track{background-color:transparent}.tele-fancy-scrollbar::-webkit-scrollbar-thumb{background-color:rgba(68,78,96,.1);background-color:transparent;border-radius:4px;transition:background-color .4s}.tele-fancy-scrollbar:hover::-webkit-scrollbar-thumb{background-color:rgba(68,78,96,.1)}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:hover{background-color:rgba(68,78,96,.2)}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:active{background-color:rgba(68,78,96,.2)}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:vertical{min-height:50px}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-box{position:absolute;top:0;left:0;z-index:100;transition:width .4s cubic-bezier(.4, .9, .71, 1.02),height .4s cubic-bezier(.55, .82, .63, .95),opacity .6s cubic-bezier(.7, 0, .84, 0),transform .4s ease}.telebox-box-main{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:#f9f9fc;box-shadow:0 4px 10px 0 rgba(47,65,146,.15);border-radius:6px;border:1px solid #e3e3ec}.telebox-titlebar-wrap{flex-shrink:0;position:relative;z-index:1}.telebox-content-wrap{flex:1;width:100%;overflow:hidden;display:flex;justify-content:center;align-items:center;position:relative}.telebox-content{width:100%;height:100%;position:relative}.telebox-footer-wrap{flex-shrink:0;display:flex;flex-direction:column}.telebox-footer-wrap::before{content:"";display:block;flex:1}.telebox-resize-handle{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;position:absolute;z-index:2147483647}.telebox-n{width:100%;height:5px;left:0;top:-5px;cursor:n-resize}.telebox-s{width:100%;height:5px;left:0;bottom:-5px;cursor:s-resize}.telebox-w{width:5px;height:100%;left:-5px;top:0;cursor:w-resize}.telebox-e{width:5px;height:100%;right:-5px;top:0;cursor:e-resize}.telebox-nw{width:15px;height:15px;top:-5px;left:-5px;cursor:nw-resize}.telebox-ne{width:15px;height:15px;top:-5px;right:-5px;cursor:ne-resize}.telebox-se{width:15px;height:15px;bottom:-5px;right:-5px;cursor:se-resize}.telebox-sw{width:15px;height:15px;bottom:-5px;left:-5px;cursor:sw-resize}.telebox-track-mask{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;position:fixed;top:0;left:0;z-index:2147483647;width:100%;height:100%;background:rgba(0,0,0,.0001);cursor:move}.telebox-cursor-n{cursor:n-resize}.telebox-cursor-s{cursor:s-resize}.telebox-cursor-w{cursor:w-resize}.telebox-cursor-e{cursor:e-resize}.telebox-cursor-nw{cursor:nw-resize}.telebox-cursor-ne{cursor:ne-resize}.telebox-cursor-se{cursor:se-resize}.telebox-cursor-sw{cursor:sw-resize}.telebox-maximized .telebox-resize-handles,.telebox-no-resize .telebox-resize-handles{display:none}.telebox-maximized{box-shadow:none;transition:none}.telebox-minimized{transition:width 50ms cubic-bezier(.4, .9, .71, 1.02),height 50ms cubic-bezier(.55, .82, .63, .95),opacity .6s cubic-bezier(.7, 0, .84, 0),transform .6s ease;opacity:0;pointer-events:none;user-select:none}.telebox-transforming{will-change:transform;transition:opacity .6s cubic-bezier(.7, 0, .84, 0)}.telebox-readonly .telebox-resize-handle{cursor:initial!important;pointer-events:none!important}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark .telebox-box-main{color:#e9e9e9;background:#212126;border-color:#43434d}.telebox-titlebar{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;box-sizing:border-box;height:26px;display:flex;align-items:center;background:#fff;user-select:none;border-bottom:1px solid #eeeef7;touch-action:manipulation}.telebox-title-area{padding-left:16px;overflow:hidden;position:relative;height:100%;flex:1;display:flex;align-items:center}.telebox-title{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;overflow:hidden;margin:0;padding:0;font-size:14px;font-weight:400;font-family:PingFangSC-Regular,PingFang SC;white-space:nowrap;word-break:keep-all;text-overflow:ellipsis;color:#191919}.telebox-drag-area{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;z-index:10}.telebox-titlebar-btns{padding-right:16px;white-space:nowrap;word-break:keep-all;margin-left:auto;font-size:0}.telebox-titlebar-btn{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;width:22px;height:22px;padding:0;outline:0;border:none;background:0 0;cursor:pointer}.telebox-titlebar-btn~.telebox-titlebar-btn{margin-left:10px}.telebox-titlebar-btn-icon{width:22px;height:22px}.telebox-readonly .telebox-titlebar-btn{cursor:not-allowed}.telebox-titlebar-icon-minimize{background:center/cover no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=")}.telebox-titlebar-icon-maximize{background:center/cover no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==")}.telebox-titlebar-icon-maximize.is-active{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K")}.telebox-titlebar-icon-close{background:center/cover no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=")}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark .telebox-title{color:#e9e9e9}.telebox-color-scheme-dark .telebox-titlebar{color:#e9e9e9;background:#43434d;border-bottom:none}.telebox-box-stage-container{display:none;position:absolute;z-index:99;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.telebox-box-stage-container.is-active{display:flex}.telebox-box-stage-mask{background:rgba(0,0,0,.05)}.telebox-box-stage-frame{flex:1;position:relative}.telebox-box-stage-frame-corner{position:absolute;width:8px;height:8px}.telebox-box-stage-frame-corner.is-0{top:0;left:0}.telebox-box-stage-frame-corner.is-1{top:0;right:0}.telebox-box-stage-frame-corner.is-2{bottom:0;left:0}.telebox-box-stage-frame-corner.is-3{bottom:0;right:0}.telebox-collector{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;visibility:hidden;display:block;position:absolute;z-index:200;width:40px;height:40px;margin:0;padding:0;border:none;outline:0;font-size:0;border-radius:50%;background:#fff;box-shadow:0 2px 6px 0 rgba(47,65,146,.15);cursor:pointer;user-select:none;pointer-events:none;background-repeat:no-repeat;background-size:18px 16px;background-position:center;-webkit-tap-highlight-color:transparent}.telebox-collector-visible{visibility:visible;pointer-events:initial}.telebox-collector-readonly{cursor:not-allowed}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark.telebox-collector{background-color:#43434d}.telebox-max-titlebar{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;display:none;position:absolute;top:0;left:0;z-index:50000}.telebox-max-titlebar .telebox-title{display:none}.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-titles{display:none}.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-title{display:block}.telebox-max-titlebar-maximized{display:flex}.telebox-titles{height:100%;margin:0;overflow-y:hidden;overflow-x:scroll;overflow-x:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.telebox-titles::-webkit-scrollbar{height:8px;width:8px}.telebox-titles::-webkit-scrollbar-track{background-color:transparent}.telebox-titles::-webkit-scrollbar-thumb{background-color:rgba(238,238,247,.8);background-color:transparent;border-radius:4px;transition:background-color .4s}.telebox-titles:hover::-webkit-scrollbar-thumb{background-color:rgba(238,238,247,.8)}.telebox-titles::-webkit-scrollbar-thumb:hover{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:active{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:vertical{min-height:50px}.telebox-titles::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-titles-content{height:100%;display:flex;flex-wrap:nowrap;align-items:center;padding:0}.telebox-titles-tab{height:100%;overflow:hidden;max-width:182px;min-width:50px;padding:0 26px 0 16px;outline:0;font-size:13px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;border:none;border-right:1px solid #e5e5f0;color:#7b88a0;background:0 0;cursor:pointer;user-select:none}.telebox-titles-tab-focus{color:#357bf6}.telebox-readonly .telebox-titles-tab{cursor:not-allowed}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark.telebox-titlebar{color:#e9e9e9;background:#43434d;border-bottom:none}.telebox-color-scheme-dark .telebox-titles-tab{border-right-color:#7b88a0}.telebox-color-scheme-dark .telebox-title{color:#e9e9e9}