@netless/telebox-insider 1.0.0-alpha.27 → 1.0.0-alpha.28

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 (21) hide show
  1. package/dist/TeleBoxCollector/index.d.ts +5 -7
  2. package/dist/TeleBoxManager/index.d.ts +8 -4
  3. package/dist/TeleBoxManager/typings.d.ts +38 -0
  4. package/dist/style.css +103 -76
  5. package/dist/telebox-insider.cjs.js +58 -40
  6. package/dist/telebox-insider.cjs.js.map +1 -1
  7. package/dist/telebox-insider.es.js +58 -40
  8. package/dist/telebox-insider.es.js.map +1 -1
  9. package/package.json +1 -1
  10. package/src/TeleBox/style.scss +5 -5
  11. package/src/TeleBox/style.shadow.scss +12 -36
  12. package/src/TeleBoxCollector/index.ts +27 -39
  13. package/src/TeleBoxCollector/style.scss +4 -8
  14. package/src/TeleBoxManager/MaxTitleBar/style.scss +8 -28
  15. package/src/TeleBoxManager/index.ts +77 -20
  16. package/src/TeleBoxManager/style.scss +24 -25
  17. package/src/TeleBoxManager/typings.ts +45 -0
  18. package/src/TeleTitleBar/DefaultTitleBar/index.ts +2 -2
  19. package/src/TeleTitleBar/DefaultTitleBar/style.scss +19 -58
  20. package/src/scss/mixins.scss +0 -5
  21. package/src/scss/variables.scss +62 -36
package/dist/TeleBoxCollector/index.d.ts CHANGED
@@ -7,27 +7,25 @@ import type { TeleBoxRect } from "../TeleBox/typings";
7
7
  export interface TeleBoxCollectorConfig {
8
8
  namespace?: string;
9
9
  styles?: TeleStyles;
10
- root$: ReadonlyVal<HTMLElement | null>;
11
- minimized$: Val<boolean>;
10
+ root: HTMLElement;
11
+ minimized$: ReadonlyVal<boolean>;
12
12
  readonly$: ReadonlyVal<boolean>;
13
13
  darkMode$: ReadonlyVal<boolean>;
14
+ onClick?: () => void;
14
15
  }
15
16
  declare type ValConfig = {
16
17
  styles: Val<TeleStyles>;
17
18
  $collector: Val<HTMLElement>;
18
19
  };
19
- declare type PropsValConfig = {
20
- root: TeleBoxCollectorConfig["root$"];
21
- };
22
20
  declare type MyReadonlyValConfig = {
23
21
  rect: ReadonlyVal<TeleBoxRect | undefined>;
24
22
  visible: ReadonlyVal<boolean>;
25
23
  };
26
- declare type CombinedValEnhancedResult = ValEnhancedResult<ValConfig> & ReadonlyValEnhancedResult<PropsValConfig & MyReadonlyValConfig>;
24
+ declare type CombinedValEnhancedResult = ValEnhancedResult<ValConfig> & ReadonlyValEnhancedResult<MyReadonlyValConfig>;
27
25
  export interface TeleBoxCollector extends CombinedValEnhancedResult {
28
26
  }
29
27
  export declare class TeleBoxCollector {
30
- constructor({ minimized$, readonly$, darkMode$, namespace, styles, root$, }: TeleBoxCollectorConfig);
28
+ constructor({ minimized$, readonly$, darkMode$, namespace, styles, root, onClick, }: TeleBoxCollectorConfig);
31
29
  readonly namespace: string;
32
30
  protected readonly _sideEffect: SideEffectManager;
33
31
  destroy(): void;
package/dist/TeleBoxManager/index.d.ts CHANGED
@@ -6,7 +6,7 @@ import Emittery from "emittery";
6
6
  import type { ReadonlyTeleBox, TeleBoxColorScheme, TeleBoxRect, TeleBoxState } from "../TeleBox";
7
7
  import { TeleBox } from "../TeleBox";
8
8
  import { TeleBoxCollector } from "../TeleBoxCollector";
9
- import type { TeleBoxManagerConfig, TeleBoxManagerCreateConfig, TeleBoxManagerQueryConfig, TeleBoxManagerUpdateConfig } from "./typings";
9
+ import type { TeleBoxManagerConfig, TeleBoxManagerCreateConfig, TeleBoxFullscreen, TeleBoxManagerQueryConfig, TeleBoxManagerThemeConfig, TeleBoxManagerUpdateConfig } from "./typings";
10
10
  import { MaxTitleBar } from "./MaxTitleBar";
11
11
  export * from "./typings";
12
12
  export * from "./constants";
@@ -16,12 +16,13 @@ declare type ReadonlyValConfig = {
16
16
  root: Val<HTMLElement | null>;
17
17
  rootRect: Val<TeleBoxRect>;
18
18
  stageRect: ReadonlyVal<TeleBoxRect>;
19
+ minimized: ReadonlyVal<boolean, boolean>;
20
+ maximized: ReadonlyVal<boolean, boolean>;
19
21
  };
20
22
  declare type ValConfig = {
23
+ fullscreen: Val<TeleBoxFullscreen>;
21
24
  prefersColorScheme: Val<TeleBoxColorScheme, boolean>;
22
25
  readonly: Val<boolean, boolean>;
23
- minimized: Val<boolean, boolean>;
24
- maximized: Val<boolean, boolean>;
25
26
  fence: Val<boolean, boolean>;
26
27
  stageRatio: Val<number, boolean>;
27
28
  containerStyle: Val<string>;
@@ -33,7 +34,7 @@ declare type CombinedValEnhancedResult = ValEnhancedResult<ValConfig> & Readonly
33
34
  export interface TeleBoxManager extends CombinedValEnhancedResult {
34
35
  }
35
36
  export declare class TeleBoxManager {
36
- constructor({ root, prefersColorScheme, minimized, maximized, fence, collector, namespace, readonly, stageRatio, containerStyle, stageStyle, defaultBoxBodyStyle, defaultBoxStageStyle, }?: TeleBoxManagerConfig);
37
+ constructor({ root, fullscreen, prefersColorScheme, minimized, maximized, fence, collector, namespace, readonly, stageRatio, containerStyle, stageStyle, defaultBoxBodyStyle, defaultBoxStageStyle, theme, }?: TeleBoxManagerConfig);
37
38
  readonly $container: HTMLDivElement;
38
39
  readonly $stage: HTMLDivElement;
39
40
  get boxes(): ReadonlyArray<TeleBox>;
@@ -73,6 +74,8 @@ export declare class TeleBoxManager {
73
74
  }, never>;
74
75
  protected _sideEffect: SideEffectManager;
75
76
  readonly namespace: string;
77
+ setMinimized: (minimized: boolean, skipUpdate?: boolean) => void;
78
+ setMaximized: (maximized: boolean, skipUpdate?: boolean) => void;
76
79
  /** @deprecated use setMaximized and setMinimized instead */
77
80
  setState(state: TeleBoxState, skipUpdate?: boolean): this;
78
81
  create(config?: TeleBoxManagerCreateConfig, smartPosition?: boolean): ReadonlyTeleBox;
@@ -83,6 +86,7 @@ export declare class TeleBoxManager {
83
86
  remove(boxOrID: string | TeleBox, skipUpdate?: boolean): ReadonlyTeleBox | undefined;
84
87
  removeTopBox(): ReadonlyTeleBox | undefined;
85
88
  removeAll(skipUpdate?: boolean): ReadonlyTeleBox[];
89
+ setTheme(theme: TeleBoxManagerThemeConfig): void;
86
90
  /**
87
91
  * Mount manager to a container element.
88
92
  */
package/dist/TeleBoxManager/typings.d.ts CHANGED
@@ -6,6 +6,8 @@ import type { TELE_BOX_MANAGER_EVENT } from "./constants";
6
6
  export interface TeleBoxManagerConfig extends Pick<TeleBoxConfig, "namespace"> {
7
7
  /** Element to mount boxes. */
8
8
  readonly root?: HTMLElement | null;
9
+ /** Fullscreen mode. Default false. */
10
+ readonly fullscreen?: TeleBoxFullscreen;
9
11
  /** Stage area height/with ratio. No ratio if <= 0. Default -1. */
10
12
  readonly stageRatio?: number;
11
13
  /** Where the minimized boxes go. */
@@ -28,6 +30,8 @@ export interface TeleBoxManagerConfig extends Pick<TeleBoxConfig, "namespace"> {
28
30
  readonly defaultBoxBodyStyle?: string | null;
29
31
  /** Custom `style` attribute value for stage area of all boxes. Can be overwritten by box. */
30
32
  readonly defaultBoxStageStyle?: string | null;
33
+ /** Theme variable */
34
+ readonly theme?: TeleBoxManagerThemeConfig;
31
35
  }
32
36
  declare type TeleBoxManagerBoxConfigBaseProps = "title" | "visible" | "width" | "height" | "minWidth" | "minHeight" | "x" | "y" | "resizable" | "draggable" | "boxRatio" | "zIndex" | "stageRatio";
33
37
  export declare type TeleBoxManagerCreateConfig = Pick<TeleBoxConfig, TeleBoxManagerBoxConfigBaseProps | "content" | "stage" | "footer" | "styles" | "bodyStyle" | "stageStyle" | "id" | "focus" | "enableShadowDOM">;
@@ -52,4 +56,38 @@ export declare type TeleBoxManagerEventConfig = CheckTeleBoxManagerConfig<{
52
56
  dark_mode: boolean;
53
57
  }>;
54
58
  export declare type TeleBoxManagerEvent = keyof TeleBoxManagerEventConfig;
59
+ /**
60
+ * Fullscreen mode.
61
+ * - `true`: fullscreen mode. hide titlebar for single tab.
62
+ * - `false`: normal mode.
63
+ * - `"no-titlebar"`: always hide titlebar
64
+ * - `"always-titlebar"`: always show titlebar
65
+ */
66
+ export declare type TeleBoxFullscreen = boolean | "no-titlebar" | "always-titlebar";
67
+ export declare type TeleBoxManagerThemeConfig = {
68
+ managerContainerBackground?: string | null;
69
+ managerStageBackground?: string | null;
70
+ managerStageShadow?: string | null;
71
+ boxContainerBackground?: string | null;
72
+ boxStageBackground?: string | null;
73
+ boxStageShadow?: string | null;
74
+ boxColor?: string | null;
75
+ boxBorder?: string | null;
76
+ boxShadow?: string | null;
77
+ boxFooterColor?: string | null;
78
+ boxFooterBackground?: string | null;
79
+ titlebarColor?: string | null;
80
+ titlebarBackground?: string | null;
81
+ titlebarBorderBottom?: string | null;
82
+ titlebarTabColor?: string | null;
83
+ titlebarTabFocusColor?: string | null;
84
+ titlebarTabBackground?: string | null;
85
+ titlebarTabDividerColor?: string | null;
86
+ collectorBackground?: string | null;
87
+ collectorShadow?: string | null;
88
+ titlebarIconMinimize?: string | null;
89
+ titlebarIconMaximize?: string | null;
90
+ titlebarIconMaximizeActive?: string | null;
91
+ titlebarIconClose?: string | null;
92
+ };
55
93
  export {};
package/dist/style.css CHANGED
@@ -45,7 +45,7 @@
45
45
  }
46
46
  .telebox-body-wrap {
47
47
  color: #191919;
48
- color: var(--tele-box-color, #191919);
48
+ color: var(--tele-boxColor, #191919);
49
49
  flex: 1;
50
50
  width: 100%;
51
51
  overflow: hidden;
@@ -59,25 +59,25 @@
59
59
  height: 100%;
60
60
  position: relative;
61
61
  background-color: #f9f9f9;
62
- background-color: var(--tele-manager-container-background, #f9f9f9);
62
+ background-color: var(--tele-boxContainerBackground, #f9f9f9);
63
63
  }
64
64
  .telebox-box-stage {
65
65
  position: absolute;
66
66
  z-index: 1;
67
67
  overflow: hidden;
68
68
  background-color: #fff;
69
- background-color: var(--tele-manager-stage-background, #fff);
70
- box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
71
- box-shadow: var(--tele-manager-stage-shadow, 0px 0px 16px rgba(0, 0, 0, 0.08));
69
+ background-color: var(--tele-boxStageBackground, #fff);
70
+ boxShadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
71
+ boxShadow: var(--tele-boxStageShadow, 0px 0px 16px rgba(0, 0, 0, 0.08));
72
72
  }
73
73
  .telebox-footer-wrap {
74
74
  flex-shrink: 0;
75
75
  display: flex;
76
76
  flex-direction: column;
77
77
  color: #191919;
78
- color: var(--tele-box-footer-color, #191919);
78
+ color: var(--tele-boxFooterColor, #191919);
79
79
  background-color: #fff;
80
- background-color: var(--tele-box-footer-background, #fff);
80
+ background-color: var(--tele-boxFooterBackground, #fff);
81
81
  }
82
82
  .telebox-footer-wrap::before {
83
83
  content: "";
@@ -89,23 +89,23 @@
89
89
  }
90
90
  .telebox-color-scheme-dark .telebox-body-wrap {
91
91
  color: #e9e9e9;
92
- color: var(--tele-box-color-dark, #e9e9e9);
92
+ color: var(--tele-boxColor, #e9e9e9);
93
93
  }
94
94
  .telebox-color-scheme-dark .telebox-content {
95
95
  background-color: #25282e;
96
- background-color: var(--tele-manager-container-background-dark, #25282e);
96
+ background-color: var(--tele-boxContainerBackground, #25282e);
97
97
  }
98
98
  .telebox-color-scheme-dark .telebox-box-stage {
99
99
  background-color: #272a30;
100
- background-color: var(--tele-manager-stage-background-dark, #272a30);
101
- box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.24);
102
- box-shadow: var(--tele-manager-stage-shadow-dark, 0px 0px 16px rgba(0, 0, 0, 0.24));
100
+ background-color: var(--tele-boxStageBackground, #272a30);
101
+ boxShadow: 0px 0px 16px rgba(0, 0, 0, 0.24);
102
+ boxShadow: var(--tele-boxStageShadow, 0px 0px 16px rgba(0, 0, 0, 0.24));
103
103
  }
104
104
  .telebox-color-scheme-dark .telebox-footer-wrap {
105
105
  color: #e9e9e9;
106
- color: var(--tele-box-footer-color-dark, #e9e9e9);
106
+ color: var(--tele-boxFooterColor, #e9e9e9);
107
107
  background-color: #383b42;
108
- background-color: var(--tele-box-footer-background-dark, #383b42);
108
+ background-color: var(--tele-boxFooterBackground, #383b42);
109
109
  }
110
110
  .telebox-box {
111
111
  position: absolute;
@@ -116,9 +116,9 @@
116
116
  }
117
117
  .telebox-box-main {
118
118
  border: 1px solid #e3e3ec;
119
- border: var(--tele-box-border, 1px solid #e3e3ec);
120
- box-shadow: 0px 4px 10px 0px rgba(47, 65, 146, 0.15);
121
- box-shadow: var(--tele-box-shadow, 0px 4px 10px 0px rgba(47, 65, 146, 0.15));
119
+ border: var(--tele-boxBorder, 1px solid #e3e3ec);
120
+ boxShadow: 0px 4px 10px 0px rgba(47, 65, 146, 0.15);
121
+ boxShadow: var(--tele-boxShadow, 0px 4px 10px 0px rgba(47, 65, 146, 0.15));
122
122
  position: relative;
123
123
  width: 100%;
124
124
  height: 100%;
@@ -249,7 +249,7 @@
249
249
  display: none;
250
250
  }
251
251
  .telebox-maximized {
252
- box-shadow: none;
252
+ boxshadow: none;
253
253
  transition: none;
254
254
  }
255
255
  .telebox-minimized {
@@ -271,9 +271,9 @@
271
271
  }
272
272
  .telebox-color-scheme-dark .telebox-box-main {
273
273
  border: 1px solid #383b42;
274
- border: var(--tele-box-border-dark, 1px solid #383b42);
275
- box-shadow: 0px 4px 10px 0px rgba(56, 59, 66, 0.15);
276
- box-shadow: var(--tele-box-shadow-dark, 0px 4px 10px 0px rgba(56, 59, 66, 0.15));
274
+ border: var(--tele-boxBorder, 1px solid #383b42);
275
+ boxShadow: 0px 4px 10px 0px rgba(56, 59, 66, 0.15);
276
+ boxShadow: var(--tele-boxShadow, 0px 4px 10px 0px rgba(56, 59, 66, 0.15));
277
277
  }.telebox-titlebar {
278
278
  user-select: none;
279
279
  -webkit-touch-callout: none;
@@ -285,11 +285,11 @@
285
285
  user-select: none;
286
286
  touch-action: manipulation;
287
287
  color: #191919;
288
- color: var(--tele-titlebar-color, #191919);
288
+ color: var(--tele-titlebarColor, #191919);
289
289
  background-color: #fff;
290
- background-color: var(--tele-titlebar-background, #fff);
290
+ background-color: var(--tele-titlebarBackground, #fff);
291
291
  border-bottom: 1px solid #eeeef7;
292
- border-bottom: var(--tele-titlebar-border-bottom, 1px solid #eeeef7);
292
+ border-bottom: var(--tele-titlebarBorderBottom, 1px solid #eeeef7);
293
293
  }
294
294
 
295
295
  .telebox-title-area {
@@ -307,7 +307,7 @@
307
307
  -webkit-touch-callout: none;
308
308
  -webkit-user-select: none;
309
309
  color: #191919;
310
- color: var(--tele-titlebar-color, #191919);
310
+ color: var(--tele-titlebarColor, #191919);
311
311
  overflow: hidden;
312
312
  margin: 0;
313
313
  padding: 0;
@@ -367,24 +367,24 @@
367
367
  .telebox-titlebar-icon-minimize {
368
368
  background: center/cover no-repeat;
369
369
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=");
370
- background-image: var(--tele-titlebar-icon-minimize, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo="));
370
+ background-image: var(--tele-titlebarIconMinimize, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo="));
371
371
  }
372
372
 
373
373
  .telebox-titlebar-icon-maximize {
374
374
  background: center/cover no-repeat;
375
375
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==");
376
- background-image: var(--tele-titlebar-icon-maximize, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg=="));
376
+ background-image: var(--tele-titlebarIconMaximize, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg=="));
377
377
  }
378
378
 
379
379
  .telebox-titlebar-icon-maximize.is-active {
380
380
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K");
381
- background-image: var(--tele-titlebar-icon-maximize-active, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K"));
381
+ background-image: var(--tele-titlebarIconMaximizeActive, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K"));
382
382
  }
383
383
 
384
384
  .telebox-titlebar-icon-close {
385
385
  background: center/cover no-repeat;
386
386
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=");
387
- background-image: var(--tele-titlebar-icon-close, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo="));
387
+ background-image: var(--tele-titlebarIconClose, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo="));
388
388
  }
389
389
 
390
390
  .telebox-color-scheme-dark {
@@ -393,36 +393,16 @@
393
393
 
394
394
  .telebox-color-scheme-dark .telebox-title {
395
395
  color: #e9e9e9;
396
- color: var(--tele-titlebar-color-dark, #e9e9e9);
396
+ color: var(--tele-titlebarColor, #e9e9e9);
397
397
  }
398
398
 
399
399
  .telebox-color-scheme-dark .telebox-titlebar {
400
400
  color: #e9e9e9;
401
- color: var(--tele-titlebar-color-dark, #e9e9e9);
401
+ color: var(--tele-titlebarColor, #e9e9e9);
402
402
  background-color: #383b42;
403
- background-color: var(--tele-titlebar-background-dark, #383b42);
403
+ background-color: var(--tele-titlebarBackground, #383b42);
404
404
  border-bottom: none;
405
- border-bottom: var(--tele-titlebar-border-bottom-dark, none);
406
- }
407
-
408
- .telebox-color-scheme-dark .telebox-titlebar-icon-minimize {
409
- background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=");
410
- background-image: var(--tele-titlebar-icon-minimize-dark, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo="));
411
- }
412
-
413
- .telebox-color-scheme-dark .telebox-titlebar-icon-maximize {
414
- background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==");
415
- background-image: var(--tele-titlebar-icon-maximize-dark, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg=="));
416
- }
417
-
418
- .telebox-color-scheme-dark .telebox-titlebar-icon-maximize.is-active {
419
- background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K");
420
- background-image: var(--tele-titlebar-icon-maximize-active-dark, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K"));
421
- }
422
-
423
- .telebox-color-scheme-dark .telebox-titlebar-icon-close {
424
- background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=");
425
- background-image: var(--tele-titlebar-icon-close-dark, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo="));
405
+ border-bottom: var(--tele-titlebarBorderBottom, none);
426
406
  }.telebox-manager-container {
427
407
  position: relative;
428
408
  overflow: hidden;
@@ -431,32 +411,79 @@
431
411
  display: flex;
432
412
  justify-content: center;
433
413
  align-items: center;
414
+ --tele-managerContainerBackground: #f9f9f9;
415
+ --tele-managerStageBackground: #fff;
416
+ --tele-managerStageShadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
417
+ --tele-boxContainerBackground: #f9f9f9;
418
+ --tele-boxStageBackground: #fff;
419
+ --tele-boxStageShadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
420
+ --tele-boxColor: #191919;
421
+ --tele-boxBorder: 1px solid #e3e3ec;
422
+ --tele-boxShadow: 0px 4px 10px 0px rgba(47, 65, 146, 0.15);
423
+ --tele-boxFooterColor: #191919;
424
+ --tele-boxFooterBackground: #fff;
425
+ --tele-titlebarColor: #191919;
426
+ --tele-titlebarBackground: #fff;
427
+ --tele-titlebarBorderBottom: 1px solid #eeeef7;
428
+ --tele-titlebarTabColor: #7b88a0;
429
+ --tele-titlebarTabFocusColor: #357bf6;
430
+ --tele-titlebarTabBackground: transparent;
431
+ --tele-titlebarTabDividerColor: #e5e5f0;
432
+ --tele-collectorBackground: #fff;
433
+ --tele-collectorShadow: 0px 2px 6px 0px rgba(47, 65, 146, 0.15);
434
434
  background: #f9f9f9;
435
- background: var(--tele-manager-container-background, #f9f9f9);
435
+ background: var(--tele-managerContainerBackground, #f9f9f9);
436
436
  }
437
- .telebox-manager-container.is-maximized > .telebox-manager-stage, .telebox-manager-container.is-minimized > .telebox-manager-stage {
437
+ .telebox-manager-container.telebox-is-maximized > .telebox-manager-stage, .telebox-manager-container.telebox-is-minimized > .telebox-manager-stage {
438
438
  overflow: visible;
439
439
  }
440
+ .telebox-manager-container.telebox-is-fullscreen .telebox-titlebar-icon-maximize,
441
+ .telebox-manager-container.telebox-is-fullscreen .telebox-titlebar-icon-minimize {
442
+ display: none !important;
443
+ }
444
+ .telebox-manager-container.telebox-hide-fullscreen-titlebar .telebox-titlebar {
445
+ display: none !important;
446
+ }
440
447
  .telebox-manager-stage {
441
448
  position: relative;
442
449
  overflow: hidden;
443
450
  background: #fff;
444
- background: var(--tele-manager-stage-background, #fff);
445
- box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
446
- box-shadow: var(--tele-manager-stage-shadow, 0px 0px 16px rgba(0, 0, 0, 0.08));
451
+ background: var(--tele-managerStageBackground, #fff);
452
+ boxShadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
453
+ boxShadow: var(--tele-managerStageShadow, 0px 0px 16px rgba(0, 0, 0, 0.08));
447
454
  }
448
455
  .telebox-color-scheme-dark {
449
456
  color-scheme: dark;
450
457
  }
451
458
  .telebox-color-scheme-dark.telebox-manager-container {
459
+ --tele-managerContainerBackground: #25282e;
460
+ --tele-managerStageBackground: #272a30;
461
+ --tele-managerStageShadow: 0px 0px 16px rgba(0, 0, 0, 0.24);
462
+ --tele-boxContainerBackground: #25282e;
463
+ --tele-boxStageBackground: #272a30;
464
+ --tele-boxStageShadow: 0px 0px 16px rgba(0, 0, 0, 0.24);
465
+ --tele-boxColor: #e9e9e9;
466
+ --tele-boxBorder: 1px solid #383b42;
467
+ --tele-boxShadow: 0px 4px 10px 0px rgba(56, 59, 66, 0.15);
468
+ --tele-boxFooterColor: #e9e9e9;
469
+ --tele-boxFooterBackground: #383b42;
470
+ --tele-titlebarColor: #e9e9e9;
471
+ --tele-titlebarBackground: #383b42;
472
+ --tele-titlebarBorderBottom: none;
473
+ --tele-titlebarTabColor: #e9e9e9;
474
+ --tele-titlebarTabFocusColor: #357bf6;
475
+ --tele-titlebarTabBackground: transparent;
476
+ --tele-titlebarTabDividerColor: #7b88a0;
477
+ --tele-collectorBackground: #383b42;
478
+ --tele-collectorShadow: 0px 2px 6px 0px rgba(47, 65, 146, 0.15);
452
479
  background: #25282e;
453
- background: var(--tele-manager-container-background-dark, #25282e);
480
+ background: var(--tele-managerContainerBackground, #25282e);
454
481
  }
455
482
  .telebox-color-scheme-dark.telebox-manager-container > .telebox-manager-stage {
456
483
  background: #272a30;
457
- background: var(--tele-manager-stage-background-dark, #272a30);
458
- box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.24);
459
- box-shadow: var(--tele-manager-stage-shadow-dark, 0px 0px 16px rgba(0, 0, 0, 0.24));
484
+ background: var(--tele-managerStageBackground, #272a30);
485
+ boxShadow: 0px 0px 16px rgba(0, 0, 0, 0.24);
486
+ boxShadow: var(--tele-managerStageShadow, 0px 0px 16px rgba(0, 0, 0, 0.24));
460
487
  }.telebox-collector {
461
488
  user-select: none;
462
489
  -webkit-touch-callout: none;
@@ -481,9 +508,9 @@
481
508
  background-position: center;
482
509
  -webkit-tap-highlight-color: transparent;
483
510
  background-color: #fff;
484
- background-color: var(--tele-collector-background, #fff);
485
- box-shadow: 0px 2px 6px 0px rgba(47, 65, 146, 0.15);
486
- box-shadow: var(--tele-collector-shadow, 0px 2px 6px 0px rgba(47, 65, 146, 0.15));
511
+ background-color: var(--tele-collectorBackground, #fff);
512
+ boxShadow: 0px 2px 6px 0px rgba(47, 65, 146, 0.15);
513
+ boxShadow: var(--tele-collectorShadow, 0px 2px 6px 0px rgba(47, 65, 146, 0.15));
487
514
  }
488
515
 
489
516
  .telebox-collector-visible {
@@ -501,9 +528,9 @@
501
528
 
502
529
  .telebox-color-scheme-dark.telebox-collector {
503
530
  background-color: #383b42;
504
- background-color: var(--tele-collector-background-dark, #383b42);
505
- box-shadow: 0px 2px 6px 0px rgba(47, 65, 146, 0.15);
506
- box-shadow: var(--tele-collector-shadow-dark, 0px 2px 6px 0px rgba(47, 65, 146, 0.15));
531
+ background-color: var(--tele-collectorBackground, #383b42);
532
+ boxShadow: 0px 2px 6px 0px rgba(47, 65, 146, 0.15);
533
+ boxShadow: var(--tele-collectorShadow, 0px 2px 6px 0px rgba(47, 65, 146, 0.15));
507
534
  }.telebox-max-titlebar {
508
535
  user-select: none;
509
536
  -webkit-touch-callout: none;
@@ -593,15 +620,15 @@
593
620
  cursor: pointer;
594
621
  user-select: none;
595
622
  color: #7b88a0;
596
- color: var(--tele-titlebar-tab-color, #7b88a0);
623
+ color: var(--tele-titlebarTabColor, #7b88a0);
597
624
  background-color: transparent;
598
- background-color: var(--tele-titlebar-tab-background, transparent);
625
+ background-color: var(--tele-titlebarTabBackground, transparent);
599
626
  border-right-color: #e5e5f0;
600
- border-right-color: var(--tele-titlebar-tab-divider-color, #e5e5f0);
627
+ border-right-color: var(--tele-titlebarTabDividerColor, #e5e5f0);
601
628
  }
602
629
  .telebox-titles-tab-focus {
603
630
  color: #357bf6;
604
- color: var(--tele-titlebar-tab-focus-color, #357bf6);
631
+ color: var(--tele-titlebarTabFocusColor, #357bf6);
605
632
  }
606
633
  .telebox-readonly .telebox-titles-tab {
607
634
  cursor: not-allowed;
@@ -611,13 +638,13 @@
611
638
  }
612
639
  .telebox-color-scheme-dark .telebox-titles-tab {
613
640
  color: #e9e9e9;
614
- color: var(--tele-titlebar-tab-color-dark, #e9e9e9);
641
+ color: var(--tele-titlebarTabColor, #e9e9e9);
615
642
  background-color: transparent;
616
- background-color: var(--tele-titlebar-tab-background-dark, transparent);
643
+ background-color: var(--tele-titlebarTabBackground, transparent);
617
644
  border-right-color: #7b88a0;
618
- border-right-color: var(--tele-titlebar-tab-divider-color-dark, #7b88a0);
645
+ border-right-color: var(--tele-titlebarTabDividerColor, #7b88a0);
619
646
  }
620
647
  .telebox-color-scheme-dark .telebox-titles-tab-focus {
621
648
  color: #357bf6;
622
- color: var(--tele-titlebar-tab-focus-color-dark, #357bf6);
649
+ color: var(--tele-titlebarTabFocusColor, #357bf6);
623
650
  }