tldraw 3.16.0-canary.cf24aedcd577 → 3.16.0-canary.da857364642e
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.
- package/dist-cjs/index.d.ts +1 -1
- package/dist-cjs/index.js +1 -1
- package/dist-cjs/lib/canvas/TldrawScribble.js +1 -1
- package/dist-cjs/lib/canvas/TldrawScribble.js.map +2 -2
- package/dist-cjs/lib/shapes/arrow/elbow/ElbowArrowDebug.js +3 -3
- package/dist-cjs/lib/shapes/arrow/elbow/ElbowArrowDebug.js.map +1 -1
- package/dist-cjs/lib/shapes/embed/EmbedShapeUtil.js +1 -1
- package/dist-cjs/lib/shapes/embed/EmbedShapeUtil.js.map +1 -1
- package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js +4 -4
- package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/frame/components/FrameHeading.js +1 -1
- package/dist-cjs/lib/shapes/frame/components/FrameHeading.js.map +2 -2
- package/dist-cjs/lib/shapes/image/ImageShapeUtil.js +3 -3
- package/dist-cjs/lib/shapes/image/ImageShapeUtil.js.map +1 -1
- package/dist-cjs/lib/shapes/video/VideoShapeUtil.js +3 -3
- package/dist-cjs/lib/shapes/video/VideoShapeUtil.js.map +1 -1
- package/dist-cjs/lib/ui/components/Minimap/MinimapManager.js +4 -4
- package/dist-cjs/lib/ui/components/Minimap/MinimapManager.js.map +2 -2
- package/dist-cjs/lib/ui/components/MobileStylePanel.js +1 -1
- package/dist-cjs/lib/ui/components/MobileStylePanel.js.map +2 -2
- package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js +1 -1
- package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js +47 -85
- package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuContext.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuGroup.js +0 -10
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuGroup.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js +1 -18
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js.map +2 -2
- package/dist-cjs/lib/ui/hooks/useTools.js +21 -3
- package/dist-cjs/lib/ui/hooks/useTools.js.map +2 -2
- package/dist-cjs/lib/ui/version.js +3 -3
- package/dist-cjs/lib/ui/version.js.map +1 -1
- package/dist-esm/index.d.mts +1 -1
- package/dist-esm/index.mjs +1 -1
- package/dist-esm/lib/canvas/TldrawScribble.mjs +1 -1
- package/dist-esm/lib/canvas/TldrawScribble.mjs.map +2 -2
- package/dist-esm/lib/shapes/arrow/elbow/ElbowArrowDebug.mjs +3 -3
- package/dist-esm/lib/shapes/arrow/elbow/ElbowArrowDebug.mjs.map +1 -1
- package/dist-esm/lib/shapes/embed/EmbedShapeUtil.mjs +1 -1
- package/dist-esm/lib/shapes/embed/EmbedShapeUtil.mjs.map +1 -1
- package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs +4 -4
- package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/frame/components/FrameHeading.mjs +1 -1
- package/dist-esm/lib/shapes/frame/components/FrameHeading.mjs.map +2 -2
- package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs +3 -3
- package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs.map +1 -1
- package/dist-esm/lib/shapes/video/VideoShapeUtil.mjs +3 -3
- package/dist-esm/lib/shapes/video/VideoShapeUtil.mjs.map +1 -1
- package/dist-esm/lib/ui/components/Minimap/MinimapManager.mjs +4 -4
- package/dist-esm/lib/ui/components/Minimap/MinimapManager.mjs.map +2 -2
- package/dist-esm/lib/ui/components/MobileStylePanel.mjs +1 -1
- package/dist-esm/lib/ui/components/MobileStylePanel.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs +1 -1
- package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs +56 -87
- package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuContext.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuGroup.mjs +0 -10
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuGroup.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs +1 -18
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/useTools.mjs +22 -3
- package/dist-esm/lib/ui/hooks/useTools.mjs.map +2 -2
- package/dist-esm/lib/ui/version.mjs +3 -3
- package/dist-esm/lib/ui/version.mjs.map +1 -1
- package/package.json +3 -3
- package/src/lib/canvas/TldrawScribble.tsx +1 -1
- package/src/lib/shapes/arrow/elbow/ElbowArrowDebug.tsx +3 -3
- package/src/lib/shapes/embed/EmbedShapeUtil.tsx +1 -1
- package/src/lib/shapes/frame/FrameShapeUtil.tsx +12 -4
- package/src/lib/shapes/frame/components/FrameHeading.tsx +1 -1
- package/src/lib/shapes/image/ImageShapeUtil.tsx +3 -3
- package/src/lib/shapes/video/VideoShapeUtil.tsx +3 -3
- package/src/lib/ui/components/Minimap/MinimapManager.ts +4 -4
- package/src/lib/ui/components/MobileStylePanel.tsx +1 -1
- package/src/lib/ui/components/Toolbar/DefaultImageToolbarContent.tsx +1 -1
- package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx +64 -106
- package/src/lib/ui/components/primitives/menus/TldrawUiMenuContext.tsx +0 -1
- package/src/lib/ui/components/primitives/menus/TldrawUiMenuGroup.tsx +0 -10
- package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx +2 -16
- package/src/lib/ui/hooks/useTools.tsx +25 -3
- package/src/lib/ui/version.ts +3 -3
- package/src/lib/ui.css +227 -228
- package/tldraw.css +520 -518
package/tldraw.css
CHANGED
|
@@ -9,57 +9,57 @@
|
|
|
9
9
|
height: 100%;
|
|
10
10
|
font-size: 12px;
|
|
11
11
|
/* Spacing */
|
|
12
|
-
--space-1: 2px;
|
|
13
|
-
--space-2: 4px;
|
|
14
|
-
--space-3: 8px;
|
|
15
|
-
--space-4: 12px;
|
|
16
|
-
--space-5: 16px;
|
|
17
|
-
--space-6: 20px;
|
|
18
|
-
--space-7: 28px;
|
|
19
|
-
--space-8: 32px;
|
|
20
|
-
--space-9: 64px;
|
|
21
|
-
--space-10: 72px;
|
|
12
|
+
--tl-space-1: 2px;
|
|
13
|
+
--tl-space-2: 4px;
|
|
14
|
+
--tl-space-3: 8px;
|
|
15
|
+
--tl-space-4: 12px;
|
|
16
|
+
--tl-space-5: 16px;
|
|
17
|
+
--tl-space-6: 20px;
|
|
18
|
+
--tl-space-7: 28px;
|
|
19
|
+
--tl-space-8: 32px;
|
|
20
|
+
--tl-space-9: 64px;
|
|
21
|
+
--tl-space-10: 72px;
|
|
22
22
|
/* Radius */
|
|
23
|
-
--radius-0: 2px;
|
|
24
|
-
--radius-1: 4px;
|
|
25
|
-
--radius-2: 6px;
|
|
26
|
-
--radius-3: 9px;
|
|
27
|
-
--radius-4: 11px;
|
|
23
|
+
--tl-radius-0: 2px;
|
|
24
|
+
--tl-radius-1: 4px;
|
|
25
|
+
--tl-radius-2: 6px;
|
|
26
|
+
--tl-radius-3: 9px;
|
|
27
|
+
--tl-radius-4: 11px;
|
|
28
28
|
|
|
29
29
|
/* Canvas z-index */
|
|
30
|
-
--layer-canvas-hidden: -999999;
|
|
31
|
-
--layer-canvas-background: 100;
|
|
32
|
-
--layer-canvas-grid: 150;
|
|
33
|
-
--layer-watermark: 200;
|
|
34
|
-
--layer-canvas-shapes: 300;
|
|
35
|
-
--layer-canvas-overlays: 500;
|
|
36
|
-
--layer-canvas-blocker: 10000;
|
|
30
|
+
--tl-layer-canvas-hidden: -999999;
|
|
31
|
+
--tl-layer-canvas-background: 100;
|
|
32
|
+
--tl-layer-canvas-grid: 150;
|
|
33
|
+
--tl-layer-watermark: 200;
|
|
34
|
+
--tl-layer-canvas-shapes: 300;
|
|
35
|
+
--tl-layer-canvas-overlays: 500;
|
|
36
|
+
--tl-layer-canvas-blocker: 10000;
|
|
37
37
|
|
|
38
38
|
/* Canvas overlays z-index */
|
|
39
|
-
--layer-overlays-collaborator-scribble: 10;
|
|
40
|
-
--layer-overlays-collaborator-brush: 20;
|
|
41
|
-
--layer-overlays-collaborator-shape-indicator: 30;
|
|
42
|
-
--layer-overlays-user-scribble: 40;
|
|
43
|
-
--layer-overlays-user-brush: 50;
|
|
44
|
-
--layer-overlays-user-snapline: 90;
|
|
45
|
-
--layer-overlays-selection-fg: 100;
|
|
39
|
+
--tl-layer-overlays-collaborator-scribble: 10;
|
|
40
|
+
--tl-layer-overlays-collaborator-brush: 20;
|
|
41
|
+
--tl-layer-overlays-collaborator-shape-indicator: 30;
|
|
42
|
+
--tl-layer-overlays-user-scribble: 40;
|
|
43
|
+
--tl-layer-overlays-user-brush: 50;
|
|
44
|
+
--tl-layer-overlays-user-snapline: 90;
|
|
45
|
+
--tl-layer-overlays-selection-fg: 100;
|
|
46
46
|
/* User handles need to be above selection edges / corners, matters for sticky note clone handles */
|
|
47
|
-
--layer-overlays-user-handles: 105;
|
|
48
|
-
--layer-overlays-user-indicator-hint: 110;
|
|
49
|
-
--layer-overlays-custom: 115;
|
|
50
|
-
--layer-overlays-collaborator-cursor-hint: 120;
|
|
51
|
-
--layer-overlays-collaborator-cursor: 130;
|
|
47
|
+
--tl-layer-overlays-user-handles: 105;
|
|
48
|
+
--tl-layer-overlays-user-indicator-hint: 110;
|
|
49
|
+
--tl-layer-overlays-custom: 115;
|
|
50
|
+
--tl-layer-overlays-collaborator-cursor-hint: 120;
|
|
51
|
+
--tl-layer-overlays-collaborator-cursor: 130;
|
|
52
52
|
|
|
53
53
|
/* Text editor z-index */
|
|
54
|
-
--layer-text-container: 1;
|
|
55
|
-
--layer-text-content: 3;
|
|
56
|
-
--layer-text-editor: 4;
|
|
54
|
+
--tl-layer-text-container: 1;
|
|
55
|
+
--tl-layer-text-content: 3;
|
|
56
|
+
--tl-layer-text-editor: 4;
|
|
57
57
|
|
|
58
58
|
/* Error fallback z-index */
|
|
59
|
-
--layer-error-overlay: 1;
|
|
60
|
-
--layer-error-canvas: 2;
|
|
61
|
-
--layer-error-canvas-after: 3;
|
|
62
|
-
--layer-error-content: 4;
|
|
59
|
+
--tl-layer-error-overlay: 1;
|
|
60
|
+
--tl-layer-error-canvas: 2;
|
|
61
|
+
--tl-layer-error-canvas-after: 3;
|
|
62
|
+
--tl-layer-error-content: 4;
|
|
63
63
|
|
|
64
64
|
/* Misc */
|
|
65
65
|
--tl-zoom: 1;
|
|
@@ -124,12 +124,15 @@
|
|
|
124
124
|
--tl-font-serif: 'tldraw_serif', serif;
|
|
125
125
|
--tl-font-mono: 'tldraw_mono', monospace;
|
|
126
126
|
/* text outline */
|
|
127
|
-
--a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px);
|
|
128
|
-
--b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px);
|
|
127
|
+
--tl-text-outline-a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px);
|
|
128
|
+
--tl-text-outline-b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px);
|
|
129
129
|
--tl-text-outline-reference:
|
|
130
|
-
0 var(--b) 0 var(--
|
|
131
|
-
|
|
132
|
-
var(--
|
|
130
|
+
0 var(--tl-text-outline-b) 0 var(--tl-color-background),
|
|
131
|
+
0 var(--tl-text-outline-a) 0 var(--tl-color-background),
|
|
132
|
+
var(--tl-text-outline-b) var(--tl-text-outline-b) 0 var(--tl-color-background),
|
|
133
|
+
var(--tl-text-outline-a) var(--tl-text-outline-b) 0 var(--tl-color-background),
|
|
134
|
+
var(--tl-text-outline-a) var(--tl-text-outline-a) 0 var(--tl-color-background),
|
|
135
|
+
var(--tl-text-outline-b) var(--tl-text-outline-a) 0 var(--tl-color-background);
|
|
133
136
|
--tl-text-outline: var(--tl-text-outline-reference);
|
|
134
137
|
/* own properties */
|
|
135
138
|
position: relative;
|
|
@@ -137,118 +140,118 @@
|
|
|
137
140
|
height: 100%;
|
|
138
141
|
width: 100%;
|
|
139
142
|
overflow: clip;
|
|
140
|
-
color: var(--color-text);
|
|
143
|
+
color: var(--tl-color-text);
|
|
141
144
|
}
|
|
142
145
|
|
|
143
146
|
.tl-theme__light {
|
|
144
147
|
/* Canvas */
|
|
145
|
-
--color-snap: hsl(0, 76%, 60%);
|
|
146
|
-
--color-selection-fill: hsl(210, 100%, 56%, 24%);
|
|
147
|
-
--color-selection-stroke: hsl(214, 84%, 56%);
|
|
148
|
-
--color-background: hsl(210, 20%, 98%);
|
|
149
|
-
--color-brush-fill: hsl(0, 0%, 56%, 10.2%);
|
|
150
|
-
--color-brush-stroke: hsl(0, 0%, 56%, 25.1%);
|
|
151
|
-
--color-grid: hsl(0, 0%, 43%);
|
|
148
|
+
--tl-color-snap: hsl(0, 76%, 60%);
|
|
149
|
+
--tl-color-selection-fill: hsl(210, 100%, 56%, 24%);
|
|
150
|
+
--tl-color-selection-stroke: hsl(214, 84%, 56%);
|
|
151
|
+
--tl-color-background: hsl(210, 20%, 98%);
|
|
152
|
+
--tl-color-brush-fill: hsl(0, 0%, 56%, 10.2%);
|
|
153
|
+
--tl-color-brush-stroke: hsl(0, 0%, 56%, 25.1%);
|
|
154
|
+
--tl-color-grid: hsl(0, 0%, 43%);
|
|
152
155
|
/* UI */
|
|
153
|
-
--color-low: hsl(204, 16%, 94%);
|
|
154
|
-
--color-low-border: hsl(204, 16%, 92%);
|
|
155
|
-
--color-culled: hsl(204, 14%, 93%);
|
|
156
|
-
--color-muted-none: hsl(0, 0%, 0%, 0%);
|
|
157
|
-
--color-muted-0: hsl(0, 0%, 0%, 2%);
|
|
158
|
-
--color-muted-1: hsl(0, 0%, 0%, 10%);
|
|
159
|
-
--color-muted-2: hsl(0, 0%, 0%, 4.3%);
|
|
160
|
-
--color-hint: hsl(0, 0%, 0%, 5.5%);
|
|
161
|
-
--color-overlay: hsl(0, 0%, 0%, 20%);
|
|
162
|
-
--color-divider: hsl(0, 0%, 91%);
|
|
163
|
-
--color-panel: hsl(0, 0%, 99%);
|
|
164
|
-
--color-panel-contrast: hsl(0, 0%, 100%);
|
|
165
|
-
--color-panel-overlay: hsl(0, 0%, 100%, 82%);
|
|
166
|
-
--color-panel-transparent: hsla(0, 0%, 99%, 0%);
|
|
167
|
-
--color-selected: hsl(214, 84%, 56%);
|
|
168
|
-
--color-selected-contrast: hsl(0, 0%, 100%);
|
|
169
|
-
--color-focus: hsl(219, 65%, 50%);
|
|
170
|
-
--color-tooltip: hsla(200, 14%, 4%, 1);
|
|
156
|
+
--tl-color-low: hsl(204, 16%, 94%);
|
|
157
|
+
--tl-color-low-border: hsl(204, 16%, 92%);
|
|
158
|
+
--tl-color-culled: hsl(204, 14%, 93%);
|
|
159
|
+
--tl-color-muted-none: hsl(0, 0%, 0%, 0%);
|
|
160
|
+
--tl-color-muted-0: hsl(0, 0%, 0%, 2%);
|
|
161
|
+
--tl-color-muted-1: hsl(0, 0%, 0%, 10%);
|
|
162
|
+
--tl-color-muted-2: hsl(0, 0%, 0%, 4.3%);
|
|
163
|
+
--tl-color-hint: hsl(0, 0%, 0%, 5.5%);
|
|
164
|
+
--tl-color-overlay: hsl(0, 0%, 0%, 20%);
|
|
165
|
+
--tl-color-divider: hsl(0, 0%, 91%);
|
|
166
|
+
--tl-color-panel: hsl(0, 0%, 99%);
|
|
167
|
+
--tl-color-panel-contrast: hsl(0, 0%, 100%);
|
|
168
|
+
--tl-color-panel-overlay: hsl(0, 0%, 100%, 82%);
|
|
169
|
+
--tl-color-panel-transparent: hsla(0, 0%, 99%, 0%);
|
|
170
|
+
--tl-color-selected: hsl(214, 84%, 56%);
|
|
171
|
+
--tl-color-selected-contrast: hsl(0, 0%, 100%);
|
|
172
|
+
--tl-color-focus: hsl(219, 65%, 50%);
|
|
173
|
+
--tl-color-tooltip: hsla(200, 14%, 4%, 1);
|
|
171
174
|
/* Text */
|
|
172
|
-
--color-text: hsl(0, 0%, 0%);
|
|
173
|
-
--color-text-0: hsl(0, 0%, 11%);
|
|
174
|
-
--color-text-1: hsl(0, 0%, 18%);
|
|
175
|
-
--color-text-3: hsl(204, 4%, 45%);
|
|
176
|
-
--color-text-shadow: hsl(0, 0%, 100%);
|
|
177
|
-
--color-text-highlight: hsl(52, 100%, 50%);
|
|
178
|
-
--color-text-highlight-p3: color(display-p3 0.972 0.8205 0.05);
|
|
175
|
+
--tl-color-text: hsl(0, 0%, 0%);
|
|
176
|
+
--tl-color-text-0: hsl(0, 0%, 11%);
|
|
177
|
+
--tl-color-text-1: hsl(0, 0%, 18%);
|
|
178
|
+
--tl-color-text-3: hsl(204, 4%, 45%);
|
|
179
|
+
--tl-color-text-shadow: hsl(0, 0%, 100%);
|
|
180
|
+
--tl-color-text-highlight: hsl(52, 100%, 50%);
|
|
181
|
+
--tl-color-text-highlight-p3: color(display-p3 0.972 0.8205 0.05);
|
|
179
182
|
/* Named */
|
|
180
|
-
--color-primary: hsl(214, 84%, 56%);
|
|
181
|
-
--color-success: hsl(123, 46%, 34%);
|
|
182
|
-
--color-info: hsl(201, 98%, 41%);
|
|
183
|
-
--color-warning: hsl(27, 98%, 47%);
|
|
184
|
-
--color-danger: hsl(0, 90%, 43%);
|
|
185
|
-
--color-laser: hsl(0, 100%, 50%);
|
|
183
|
+
--tl-color-primary: hsl(214, 84%, 56%);
|
|
184
|
+
--tl-color-success: hsl(123, 46%, 34%);
|
|
185
|
+
--tl-color-info: hsl(201, 98%, 41%);
|
|
186
|
+
--tl-color-warning: hsl(27, 98%, 47%);
|
|
187
|
+
--tl-color-danger: hsl(0, 90%, 43%);
|
|
188
|
+
--tl-color-laser: hsl(0, 100%, 50%);
|
|
186
189
|
/* Shadows */
|
|
187
|
-
--shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%);
|
|
188
|
-
--shadow-2:
|
|
190
|
+
--tl-shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%);
|
|
191
|
+
--tl-shadow-2:
|
|
189
192
|
0px 0px 2px hsl(0, 0%, 0%, 16%), 0px 2px 3px hsl(0, 0%, 0%, 24%),
|
|
190
|
-
0px 2px 6px hsl(0, 0%, 0%, 0.1), inset 0px 0px 0px 1px var(--color-panel-contrast);
|
|
191
|
-
--shadow-3:
|
|
193
|
+
0px 2px 6px hsl(0, 0%, 0%, 0.1), inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
|
|
194
|
+
--tl-shadow-3:
|
|
192
195
|
0px 1px 2px hsl(0, 0%, 0%, 28%), 0px 2px 6px hsl(0, 0%, 0%, 14%),
|
|
193
|
-
inset 0px 0px 0px 1px var(--color-panel-contrast);
|
|
194
|
-
--shadow-4:
|
|
196
|
+
inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
|
|
197
|
+
--tl-shadow-4:
|
|
195
198
|
0px 0px 3px hsl(0, 0%, 0%, 19%), 0px 5px 4px hsl(0, 0%, 0%, 16%),
|
|
196
|
-
0px 2px 16px hsl(0, 0%, 0%, 6%), inset 0px 0px 0px 1px var(--color-panel-contrast);
|
|
199
|
+
0px 2px 16px hsl(0, 0%, 0%, 6%), inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
|
|
197
200
|
}
|
|
198
201
|
|
|
199
202
|
.tl-theme__dark {
|
|
200
203
|
/* Canvas */
|
|
201
|
-
--color-snap: hsl(0, 76%, 60%);
|
|
202
|
-
--color-selection-fill: hsl(209, 100%, 57%, 20%);
|
|
203
|
-
--color-selection-stroke: hsl(214, 84%, 56%);
|
|
204
|
-
--color-background: hsl(240, 5%, 6.5%);
|
|
205
|
-
--color-brush-fill: hsl(0, 0%, 71%, 5.1%);
|
|
206
|
-
--color-brush-stroke: hsl(0, 0%, 71%, 25.1%);
|
|
207
|
-
--color-grid: hsl(0, 0%, 40%);
|
|
204
|
+
--tl-color-snap: hsl(0, 76%, 60%);
|
|
205
|
+
--tl-color-selection-fill: hsl(209, 100%, 57%, 20%);
|
|
206
|
+
--tl-color-selection-stroke: hsl(214, 84%, 56%);
|
|
207
|
+
--tl-color-background: hsl(240, 5%, 6.5%);
|
|
208
|
+
--tl-color-brush-fill: hsl(0, 0%, 71%, 5.1%);
|
|
209
|
+
--tl-color-brush-stroke: hsl(0, 0%, 71%, 25.1%);
|
|
210
|
+
--tl-color-grid: hsl(0, 0%, 40%);
|
|
208
211
|
/* UI */
|
|
209
|
-
--color-low: hsl(260, 4.5%, 10.5%);
|
|
210
|
-
--color-low-border: hsl(207, 10%, 10%);
|
|
211
|
-
--color-culled: hsl(210, 11%, 19%);
|
|
212
|
-
--color-muted-none: hsl(0, 0%, 100%, 0%);
|
|
213
|
-
--color-muted-0: hsl(0, 0%, 100%, 2%);
|
|
214
|
-
--color-muted-1: hsl(0, 0%, 100%, 10%);
|
|
215
|
-
--color-muted-2: hsl(0, 0%, 100%, 5%);
|
|
216
|
-
--color-hint: hsl(0, 0%, 100%, 7%);
|
|
217
|
-
--color-overlay: hsl(0, 0%, 0%, 50%);
|
|
218
|
-
--color-divider: hsl(240, 9%, 22%);
|
|
219
|
-
--color-panel: hsl(235, 6.8%, 13.5%);
|
|
220
|
-
--color-panel-contrast: hsl(245, 12%, 23%);
|
|
221
|
-
--color-panel-overlay: hsl(210, 10%, 24%, 82%);
|
|
222
|
-
--color-panel-transparent: hsla(235, 6.8%, 13.5%, 0%);
|
|
223
|
-
--color-selected: hsl(217, 89%, 61%);
|
|
224
|
-
--color-selected-contrast: hsl(0, 0%, 100%);
|
|
225
|
-
--color-focus: hsl(217, 76%, 80%);
|
|
226
|
-
--color-tooltip: hsla(0, 0%, 100%, 1);
|
|
212
|
+
--tl-color-low: hsl(260, 4.5%, 10.5%);
|
|
213
|
+
--tl-color-low-border: hsl(207, 10%, 10%);
|
|
214
|
+
--tl-color-culled: hsl(210, 11%, 19%);
|
|
215
|
+
--tl-color-muted-none: hsl(0, 0%, 100%, 0%);
|
|
216
|
+
--tl-color-muted-0: hsl(0, 0%, 100%, 2%);
|
|
217
|
+
--tl-color-muted-1: hsl(0, 0%, 100%, 10%);
|
|
218
|
+
--tl-color-muted-2: hsl(0, 0%, 100%, 5%);
|
|
219
|
+
--tl-color-hint: hsl(0, 0%, 100%, 7%);
|
|
220
|
+
--tl-color-overlay: hsl(0, 0%, 0%, 50%);
|
|
221
|
+
--tl-color-divider: hsl(240, 9%, 22%);
|
|
222
|
+
--tl-color-panel: hsl(235, 6.8%, 13.5%);
|
|
223
|
+
--tl-color-panel-contrast: hsl(245, 12%, 23%);
|
|
224
|
+
--tl-color-panel-overlay: hsl(210, 10%, 24%, 82%);
|
|
225
|
+
--tl-color-panel-transparent: hsla(235, 6.8%, 13.5%, 0%);
|
|
226
|
+
--tl-color-selected: hsl(217, 89%, 61%);
|
|
227
|
+
--tl-color-selected-contrast: hsl(0, 0%, 100%);
|
|
228
|
+
--tl-color-focus: hsl(217, 76%, 80%);
|
|
229
|
+
--tl-color-tooltip: hsla(0, 0%, 100%, 1);
|
|
227
230
|
/* Text */
|
|
228
|
-
--color-text: hsl(210, 17%, 98%);
|
|
229
|
-
--color-text-0: hsl(0, 9%, 94%);
|
|
230
|
-
--color-text-1: hsl(0, 0%, 85%);
|
|
231
|
-
--color-text-3: hsl(204, 4%, 75%);
|
|
232
|
-
--color-text-shadow: hsl(210, 13%, 18%);
|
|
233
|
-
--color-text-highlight: hsl(52, 100%, 41%);
|
|
234
|
-
--color-text-highlight-p3: color(display-p3 0.8078 0.6225 0.0312);
|
|
231
|
+
--tl-color-text: hsl(210, 17%, 98%);
|
|
232
|
+
--tl-color-text-0: hsl(0, 9%, 94%);
|
|
233
|
+
--tl-color-text-1: hsl(0, 0%, 85%);
|
|
234
|
+
--tl-color-text-3: hsl(204, 4%, 75%);
|
|
235
|
+
--tl-color-text-shadow: hsl(210, 13%, 18%);
|
|
236
|
+
--tl-color-text-highlight: hsl(52, 100%, 41%);
|
|
237
|
+
--tl-color-text-highlight-p3: color(display-p3 0.8078 0.6225 0.0312);
|
|
235
238
|
/* Named */
|
|
236
|
-
--color-primary: hsl(214, 84%, 56%);
|
|
237
|
-
--color-success: hsl(123, 38%, 57%);
|
|
238
|
-
--color-info: hsl(199, 92%, 56%);
|
|
239
|
-
--color-warning: hsl(36, 100%, 57%);
|
|
240
|
-
--color-danger: hsl(0, 82%, 66%);
|
|
241
|
-
--color-laser: hsl(0, 100%, 50%);
|
|
239
|
+
--tl-color-primary: hsl(214, 84%, 56%);
|
|
240
|
+
--tl-color-success: hsl(123, 38%, 57%);
|
|
241
|
+
--tl-color-info: hsl(199, 92%, 56%);
|
|
242
|
+
--tl-color-warning: hsl(36, 100%, 57%);
|
|
243
|
+
--tl-color-danger: hsl(0, 82%, 66%);
|
|
244
|
+
--tl-color-laser: hsl(0, 100%, 50%);
|
|
242
245
|
/* Shadows */
|
|
243
|
-
--shadow-1:
|
|
246
|
+
--tl-shadow-1:
|
|
244
247
|
0px 1px 2px hsl(0, 0%, 0%, 16.1%), 0px 1px 3px hsl(0, 0%, 0%, 22%),
|
|
245
|
-
inset 0px 0px 0px 1px var(--color-panel-contrast);
|
|
246
|
-
--shadow-2:
|
|
248
|
+
inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
|
|
249
|
+
--tl-shadow-2:
|
|
247
250
|
0px 1px 3px hsl(0, 0%, 0%, 66.6%), 0px 2px 6px hsl(0, 0%, 0%, 33%),
|
|
248
|
-
inset 0px 0px 0px 1px var(--color-panel-contrast);
|
|
249
|
-
--shadow-3:
|
|
251
|
+
inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
|
|
252
|
+
--tl-shadow-3:
|
|
250
253
|
0px 1px 3px hsl(0, 0%, 0%, 50%), 0px 2px 12px hsl(0, 0%, 0%, 50%),
|
|
251
|
-
inset 0px 0px 0px 1px var(--color-panel-contrast);
|
|
254
|
+
inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
|
|
252
255
|
}
|
|
253
256
|
|
|
254
257
|
.tl-counter-scaled {
|
|
@@ -274,7 +277,7 @@
|
|
|
274
277
|
}
|
|
275
278
|
|
|
276
279
|
.tl-container__focused {
|
|
277
|
-
outline: 1px solid var(--color-low);
|
|
280
|
+
outline: 1px solid var(--tl-color-low);
|
|
278
281
|
}
|
|
279
282
|
|
|
280
283
|
input,
|
|
@@ -290,7 +293,7 @@ input,
|
|
|
290
293
|
inset: 0px;
|
|
291
294
|
height: 100%;
|
|
292
295
|
width: 100%;
|
|
293
|
-
color: var(--color-text);
|
|
296
|
+
color: var(--tl-color-text);
|
|
294
297
|
cursor: var(--tl-cursor);
|
|
295
298
|
overflow: clip;
|
|
296
299
|
content-visibility: auto;
|
|
@@ -300,7 +303,7 @@ input,
|
|
|
300
303
|
|
|
301
304
|
.tl-shapes {
|
|
302
305
|
position: relative;
|
|
303
|
-
z-index: var(--layer-canvas-shapes);
|
|
306
|
+
z-index: var(--tl-layer-canvas-shapes);
|
|
304
307
|
}
|
|
305
308
|
|
|
306
309
|
.tl-overlays {
|
|
@@ -311,7 +314,7 @@ input,
|
|
|
311
314
|
width: 100%;
|
|
312
315
|
contain: strict;
|
|
313
316
|
pointer-events: none;
|
|
314
|
-
z-index: var(--layer-canvas-overlays);
|
|
317
|
+
z-index: var(--tl-layer-canvas-overlays);
|
|
315
318
|
}
|
|
316
319
|
|
|
317
320
|
.tl-overlays__item {
|
|
@@ -335,7 +338,7 @@ input,
|
|
|
335
338
|
/* ------------------- Background ------------------- */
|
|
336
339
|
|
|
337
340
|
.tl-background__wrapper {
|
|
338
|
-
z-index: var(--layer-canvas-background);
|
|
341
|
+
z-index: var(--tl-layer-canvas-background);
|
|
339
342
|
position: absolute;
|
|
340
343
|
inset: 0px;
|
|
341
344
|
height: 100%;
|
|
@@ -343,7 +346,7 @@ input,
|
|
|
343
346
|
}
|
|
344
347
|
|
|
345
348
|
.tl-background {
|
|
346
|
-
background-color: var(--color-background);
|
|
349
|
+
background-color: var(--tl-color-background);
|
|
347
350
|
width: 100%;
|
|
348
351
|
height: 100%;
|
|
349
352
|
}
|
|
@@ -357,12 +360,12 @@ input,
|
|
|
357
360
|
height: 100%;
|
|
358
361
|
touch-action: none;
|
|
359
362
|
pointer-events: none;
|
|
360
|
-
z-index: var(--layer-canvas-grid);
|
|
363
|
+
z-index: var(--tl-layer-canvas-grid);
|
|
361
364
|
contain: strict;
|
|
362
365
|
}
|
|
363
366
|
|
|
364
367
|
.tl-grid-dot {
|
|
365
|
-
fill: var(--color-grid);
|
|
368
|
+
fill: var(--tl-color-grid);
|
|
366
369
|
}
|
|
367
370
|
|
|
368
371
|
/* --------------------- Layers --------------------- */
|
|
@@ -380,54 +383,54 @@ input,
|
|
|
380
383
|
|
|
381
384
|
/* back of the stack, behind user's stuff */
|
|
382
385
|
.tl-collaborator__scribble {
|
|
383
|
-
z-index: var(--layer-overlays-collaborator-scribble);
|
|
386
|
+
z-index: var(--tl-layer-overlays-collaborator-scribble);
|
|
384
387
|
}
|
|
385
388
|
|
|
386
389
|
.tl-collaborator__brush {
|
|
387
|
-
z-index: var(--layer-overlays-collaborator-brush);
|
|
390
|
+
z-index: var(--tl-layer-overlays-collaborator-brush);
|
|
388
391
|
}
|
|
389
392
|
|
|
390
393
|
.tl-collaborator__shape-indicator {
|
|
391
|
-
z-index: var(--layer-overlays-collaborator-shape-indicator);
|
|
394
|
+
z-index: var(--tl-layer-overlays-collaborator-shape-indicator);
|
|
392
395
|
}
|
|
393
396
|
|
|
394
397
|
.tl-user-scribble {
|
|
395
|
-
z-index: var(--layer-overlays-user-scribble);
|
|
398
|
+
z-index: var(--tl-layer-overlays-user-scribble);
|
|
396
399
|
}
|
|
397
400
|
|
|
398
401
|
.tl-user-brush {
|
|
399
|
-
z-index: var(--layer-overlays-user-brush);
|
|
402
|
+
z-index: var(--tl-layer-overlays-user-brush);
|
|
400
403
|
}
|
|
401
404
|
|
|
402
405
|
.tl-user-handles {
|
|
403
|
-
z-index: var(--layer-overlays-user-handles);
|
|
406
|
+
z-index: var(--tl-layer-overlays-user-handles);
|
|
404
407
|
}
|
|
405
408
|
|
|
406
409
|
.tl-user-snapline {
|
|
407
|
-
z-index: var(--layer-overlays-user-snapline);
|
|
410
|
+
z-index: var(--tl-layer-overlays-user-snapline);
|
|
408
411
|
}
|
|
409
412
|
|
|
410
413
|
.tl-selection__fg {
|
|
411
414
|
pointer-events: none;
|
|
412
|
-
z-index: var(--layer-overlays-selection-fg);
|
|
415
|
+
z-index: var(--tl-layer-overlays-selection-fg);
|
|
413
416
|
}
|
|
414
417
|
|
|
415
418
|
.tl-user-indicator__hint {
|
|
416
|
-
z-index: var(--layer-overlays-user-indicator-hint);
|
|
419
|
+
z-index: var(--tl-layer-overlays-user-indicator-hint);
|
|
417
420
|
stroke-width: calc(2.5px * var(--tl-scale));
|
|
418
421
|
}
|
|
419
422
|
|
|
420
423
|
.tl-custom-overlays {
|
|
421
|
-
z-index: var(--layer-overlays-custom);
|
|
424
|
+
z-index: var(--tl-layer-overlays-custom);
|
|
422
425
|
}
|
|
423
426
|
|
|
424
427
|
/* behind collaborator cursor */
|
|
425
428
|
.tl-collaborator__cursor-hint {
|
|
426
|
-
z-index: var(--layer-overlays-collaborator-cursor-hint);
|
|
429
|
+
z-index: var(--tl-layer-overlays-collaborator-cursor-hint);
|
|
427
430
|
}
|
|
428
431
|
|
|
429
432
|
.tl-collaborator__cursor {
|
|
430
|
-
z-index: var(--layer-overlays-collaborator-cursor);
|
|
433
|
+
z-index: var(--tl-layer-overlays-collaborator-cursor);
|
|
431
434
|
}
|
|
432
435
|
|
|
433
436
|
.tl-cursor {
|
|
@@ -448,32 +451,32 @@ input,
|
|
|
448
451
|
.tl-selection__fg__outline {
|
|
449
452
|
fill: none;
|
|
450
453
|
pointer-events: none;
|
|
451
|
-
stroke: var(--color-selection-stroke);
|
|
454
|
+
stroke: var(--tl-color-selection-stroke);
|
|
452
455
|
stroke-width: calc(1.5px * var(--tl-scale));
|
|
453
456
|
}
|
|
454
457
|
|
|
455
458
|
.tl-corner-handle {
|
|
456
459
|
pointer-events: none;
|
|
457
|
-
stroke: var(--color-selection-stroke);
|
|
458
|
-
fill: var(--color-background);
|
|
460
|
+
stroke: var(--tl-color-selection-stroke);
|
|
461
|
+
fill: var(--tl-color-background);
|
|
459
462
|
stroke-width: calc(1.5px * var(--tl-scale));
|
|
460
463
|
}
|
|
461
464
|
|
|
462
465
|
.tl-text-handle {
|
|
463
466
|
pointer-events: none;
|
|
464
|
-
fill: var(--color-selection-stroke);
|
|
467
|
+
fill: var(--tl-color-selection-stroke);
|
|
465
468
|
}
|
|
466
469
|
|
|
467
470
|
.tl-corner-crop-handle {
|
|
468
471
|
pointer-events: none;
|
|
469
472
|
fill: none;
|
|
470
|
-
stroke: var(--color-selection-stroke);
|
|
473
|
+
stroke: var(--tl-color-selection-stroke);
|
|
471
474
|
}
|
|
472
475
|
|
|
473
476
|
.tl-corner-crop-edge-handle {
|
|
474
477
|
pointer-events: none;
|
|
475
478
|
fill: none;
|
|
476
|
-
stroke: var(--color-selection-stroke);
|
|
479
|
+
stroke: var(--tl-color-selection-stroke);
|
|
477
480
|
}
|
|
478
481
|
|
|
479
482
|
.tl-mobile-rotate__bg {
|
|
@@ -483,8 +486,8 @@ input,
|
|
|
483
486
|
|
|
484
487
|
.tl-mobile-rotate__fg {
|
|
485
488
|
pointer-events: none;
|
|
486
|
-
stroke: var(--color-selection-stroke);
|
|
487
|
-
fill: var(--color-background);
|
|
489
|
+
stroke: var(--tl-color-selection-stroke);
|
|
490
|
+
fill: var(--tl-color-background);
|
|
488
491
|
stroke-width: calc(1.5px * var(--tl-scale));
|
|
489
492
|
}
|
|
490
493
|
|
|
@@ -514,8 +517,8 @@ input,
|
|
|
514
517
|
text-overflow: ellipsis;
|
|
515
518
|
font-size: 12px;
|
|
516
519
|
font-family: var(--font-body);
|
|
517
|
-
border-radius: var(--radius-2);
|
|
518
|
-
color: var(--color-selected-contrast);
|
|
520
|
+
border-radius: var(--tl-radius-2);
|
|
521
|
+
color: var(--tl-color-selected-contrast);
|
|
519
522
|
}
|
|
520
523
|
|
|
521
524
|
.tl-nametag-title {
|
|
@@ -533,7 +536,7 @@ input,
|
|
|
533
536
|
font-size: 12px;
|
|
534
537
|
font-family: var(--font-body);
|
|
535
538
|
text-shadow: var(--tl-text-outline);
|
|
536
|
-
color: var(--color-selected-contrast);
|
|
539
|
+
color: var(--tl-color-selected-contrast);
|
|
537
540
|
}
|
|
538
541
|
|
|
539
542
|
.tl-nametag-chat {
|
|
@@ -542,31 +545,31 @@ input,
|
|
|
542
545
|
left: 13px;
|
|
543
546
|
width: fit-content;
|
|
544
547
|
height: fit-content;
|
|
545
|
-
color: var(--color-selected-contrast);
|
|
548
|
+
color: var(--tl-color-selected-contrast);
|
|
546
549
|
white-space: nowrap;
|
|
547
550
|
position: absolute;
|
|
548
551
|
padding: 3px 6px;
|
|
549
552
|
font-size: 12px;
|
|
550
553
|
font-family: var(--font-body);
|
|
551
554
|
opacity: 1;
|
|
552
|
-
border-radius: var(--radius-2);
|
|
555
|
+
border-radius: var(--tl-radius-2);
|
|
553
556
|
}
|
|
554
557
|
|
|
555
558
|
.tl-cursor-chat {
|
|
556
559
|
position: absolute;
|
|
557
|
-
color: var(--color-selected-contrast);
|
|
560
|
+
color: var(--tl-color-selected-contrast);
|
|
558
561
|
white-space: nowrap;
|
|
559
562
|
padding: 3px 6px;
|
|
560
563
|
font-size: 12px;
|
|
561
564
|
font-family: var(--font-body);
|
|
562
565
|
pointer-events: none;
|
|
563
|
-
z-index: var(--layer-cursor);
|
|
566
|
+
z-index: var(--tl-layer-cursor);
|
|
564
567
|
margin-top: 16px;
|
|
565
568
|
margin-left: 13px;
|
|
566
569
|
opacity: 1;
|
|
567
570
|
border: none;
|
|
568
571
|
user-select: text;
|
|
569
|
-
border-radius: var(--radius-2);
|
|
572
|
+
border-radius: var(--tl-radius-2);
|
|
570
573
|
}
|
|
571
574
|
|
|
572
575
|
.tl-cursor-chat .tl-cursor-chat__bubble {
|
|
@@ -574,13 +577,13 @@ input,
|
|
|
574
577
|
}
|
|
575
578
|
|
|
576
579
|
.tl-cursor-chat::selection {
|
|
577
|
-
background: var(--color-selected);
|
|
578
|
-
color: var(--color-selected-contrast);
|
|
580
|
+
background: var(--tl-color-selected);
|
|
581
|
+
color: var(--tl-color-selected-contrast);
|
|
579
582
|
text-shadow: none;
|
|
580
583
|
}
|
|
581
584
|
|
|
582
585
|
.tl-cursor-chat::placeholder {
|
|
583
|
-
color: var(--color-selected-contrast);
|
|
586
|
+
color: var(--tl-color-selected-contrast);
|
|
584
587
|
opacity: 0.7;
|
|
585
588
|
}
|
|
586
589
|
|
|
@@ -651,7 +654,7 @@ input,
|
|
|
651
654
|
background: none;
|
|
652
655
|
border-image: none;
|
|
653
656
|
border: 0px;
|
|
654
|
-
caret-color: var(--color-text);
|
|
657
|
+
caret-color: var(--tl-color-text);
|
|
655
658
|
color: inherit;
|
|
656
659
|
column-count: initial !important;
|
|
657
660
|
display: inline-block;
|
|
@@ -683,7 +686,7 @@ input,
|
|
|
683
686
|
|
|
684
687
|
.tl-text-measure {
|
|
685
688
|
position: absolute;
|
|
686
|
-
z-index: var(--layer-canvas-hidden);
|
|
689
|
+
z-index: var(--tl-layer-canvas-hidden);
|
|
687
690
|
top: 0px;
|
|
688
691
|
left: 0px;
|
|
689
692
|
opacity: 0;
|
|
@@ -746,8 +749,8 @@ input,
|
|
|
746
749
|
}
|
|
747
750
|
|
|
748
751
|
.tl-text-input::selection {
|
|
749
|
-
background: var(--color-selected);
|
|
750
|
-
color: var(--color-selected-contrast);
|
|
752
|
+
background: var(--tl-color-selected);
|
|
753
|
+
color: var(--tl-color-selected-contrast);
|
|
751
754
|
text-shadow: none;
|
|
752
755
|
}
|
|
753
756
|
|
|
@@ -757,7 +760,7 @@ input,
|
|
|
757
760
|
display: flex;
|
|
758
761
|
justify-content: center;
|
|
759
762
|
align-items: center;
|
|
760
|
-
color: var(--color-text);
|
|
763
|
+
color: var(--tl-color-text);
|
|
761
764
|
text-shadow: var(--tl-text-outline);
|
|
762
765
|
line-height: inherit;
|
|
763
766
|
position: absolute;
|
|
@@ -801,7 +804,7 @@ input,
|
|
|
801
804
|
|
|
802
805
|
.tl-text-wrapper .tl-text-content {
|
|
803
806
|
pointer-events: all;
|
|
804
|
-
z-index: var(--layer-text-content);
|
|
807
|
+
z-index: var(--tl-layer-text-content);
|
|
805
808
|
}
|
|
806
809
|
|
|
807
810
|
.tl-text-label__inner > .tl-text-content {
|
|
@@ -811,7 +814,7 @@ input,
|
|
|
811
814
|
padding: inherit;
|
|
812
815
|
height: fit-content;
|
|
813
816
|
width: fit-content;
|
|
814
|
-
border-radius: var(--radius-1);
|
|
817
|
+
border-radius: var(--tl-radius-1);
|
|
815
818
|
max-width: 100%;
|
|
816
819
|
}
|
|
817
820
|
|
|
@@ -824,7 +827,7 @@ input,
|
|
|
824
827
|
}
|
|
825
828
|
|
|
826
829
|
.tl-text-wrapper[data-isselected='true'] .tl-text-input {
|
|
827
|
-
z-index: var(--layer-text-editor);
|
|
830
|
+
z-index: var(--tl-layer-text-editor);
|
|
828
831
|
pointer-events: all;
|
|
829
832
|
}
|
|
830
833
|
|
|
@@ -919,7 +922,7 @@ input,
|
|
|
919
922
|
}
|
|
920
923
|
|
|
921
924
|
.tl-rich-text a {
|
|
922
|
-
color: var(--color-primary);
|
|
925
|
+
color: var(--tl-color-primary);
|
|
923
926
|
text-decoration: underline;
|
|
924
927
|
}
|
|
925
928
|
|
|
@@ -942,14 +945,14 @@ input,
|
|
|
942
945
|
}
|
|
943
946
|
|
|
944
947
|
.tl-theme__dark .tl-rich-text mark {
|
|
945
|
-
background-color: var(--color-text-highlight);
|
|
948
|
+
background-color: var(--tl-color-text-highlight);
|
|
946
949
|
color: currentColor;
|
|
947
950
|
}
|
|
948
951
|
|
|
949
952
|
@supports (color: color(display-p3 1 1 1)) {
|
|
950
953
|
@media (color-gamut: p3) {
|
|
951
954
|
.tl-container:not(.tl-theme__force-sRGB) .tl-rich-text mark {
|
|
952
|
-
background-color: var(--color-text-highlight-p3);
|
|
955
|
+
background-color: var(--tl-color-text-highlight-p3);
|
|
953
956
|
}
|
|
954
957
|
}
|
|
955
958
|
}
|
|
@@ -961,15 +964,15 @@ input,
|
|
|
961
964
|
/* --------------------- Loading -------------------- */
|
|
962
965
|
|
|
963
966
|
.tl-loading {
|
|
964
|
-
background-color: var(--color-background);
|
|
965
|
-
color: var(--color-text-1);
|
|
967
|
+
background-color: var(--tl-color-background);
|
|
968
|
+
color: var(--tl-color-text-1);
|
|
966
969
|
height: 100%;
|
|
967
970
|
width: 100%;
|
|
968
971
|
display: flex;
|
|
969
972
|
flex-direction: column;
|
|
970
973
|
justify-content: center;
|
|
971
974
|
align-items: center;
|
|
972
|
-
gap: var(--space-2);
|
|
975
|
+
gap: var(--tl-space-2);
|
|
973
976
|
font-size: 14px;
|
|
974
977
|
font-weight: 500;
|
|
975
978
|
opacity: 0;
|
|
@@ -977,7 +980,7 @@ input,
|
|
|
977
980
|
animation-delay: 0.2s;
|
|
978
981
|
position: absolute;
|
|
979
982
|
inset: 0px;
|
|
980
|
-
z-index: var(--layer-canvas-blocker);
|
|
983
|
+
z-index: var(--tl-layer-canvas-blocker);
|
|
981
984
|
}
|
|
982
985
|
|
|
983
986
|
@keyframes tl-fade-in {
|
|
@@ -1010,8 +1013,8 @@ input,
|
|
|
1010
1013
|
}
|
|
1011
1014
|
|
|
1012
1015
|
.tl-brush__default {
|
|
1013
|
-
stroke: var(--color-brush-stroke);
|
|
1014
|
-
fill: var(--color-brush-fill);
|
|
1016
|
+
stroke: var(--tl-color-brush-stroke);
|
|
1017
|
+
fill: var(--tl-color-brush-fill);
|
|
1015
1018
|
}
|
|
1016
1019
|
|
|
1017
1020
|
/* -------------------- Scribble -------------------- */
|
|
@@ -1026,13 +1029,13 @@ input,
|
|
|
1026
1029
|
/* ---------------------- Snaps --------------------- */
|
|
1027
1030
|
|
|
1028
1031
|
.tl-snap-indicator {
|
|
1029
|
-
stroke: var(--color-snap);
|
|
1032
|
+
stroke: var(--tl-color-snap);
|
|
1030
1033
|
stroke-width: calc(1px * var(--tl-scale));
|
|
1031
1034
|
fill: none;
|
|
1032
1035
|
}
|
|
1033
1036
|
|
|
1034
1037
|
.tl-snap-point {
|
|
1035
|
-
stroke: var(--color-snap);
|
|
1038
|
+
stroke: var(--tl-color-snap);
|
|
1036
1039
|
stroke-width: calc(1px * var(--tl-scale));
|
|
1037
1040
|
fill: none;
|
|
1038
1041
|
}
|
|
@@ -1052,7 +1055,7 @@ input,
|
|
|
1052
1055
|
justify-content: center;
|
|
1053
1056
|
font-size: 12px;
|
|
1054
1057
|
font-weight: 400;
|
|
1055
|
-
color: var(--color-text-1);
|
|
1058
|
+
color: var(--tl-color-text-1);
|
|
1056
1059
|
padding: 13px;
|
|
1057
1060
|
cursor: var(--tl-cursor-pointer);
|
|
1058
1061
|
border: none;
|
|
@@ -1070,13 +1073,13 @@ input,
|
|
|
1070
1073
|
display: block;
|
|
1071
1074
|
width: calc(100% - 12px);
|
|
1072
1075
|
height: calc(100% - 12px);
|
|
1073
|
-
border-radius: var(--radius-1);
|
|
1074
|
-
background-color: var(--color-background);
|
|
1076
|
+
border-radius: var(--tl-radius-1);
|
|
1077
|
+
background-color: var(--tl-color-background);
|
|
1075
1078
|
pointer-events: none;
|
|
1076
1079
|
}
|
|
1077
1080
|
|
|
1078
1081
|
.tl-hyperlink-button:focus-visible {
|
|
1079
|
-
color: var(--color-selected);
|
|
1082
|
+
color: var(--tl-color-selected);
|
|
1080
1083
|
}
|
|
1081
1084
|
|
|
1082
1085
|
.tl-hyperlink__icon {
|
|
@@ -1103,8 +1106,8 @@ input,
|
|
|
1103
1106
|
}
|
|
1104
1107
|
|
|
1105
1108
|
.tl-handle__fg {
|
|
1106
|
-
fill: var(--color-selected-contrast);
|
|
1107
|
-
stroke: var(--color-selection-stroke);
|
|
1109
|
+
fill: var(--tl-color-selected-contrast);
|
|
1110
|
+
stroke: var(--tl-color-selection-stroke);
|
|
1108
1111
|
stroke-width: calc(1.5px * var(--tl-scale));
|
|
1109
1112
|
pointer-events: none;
|
|
1110
1113
|
}
|
|
@@ -1114,7 +1117,7 @@ input,
|
|
|
1114
1117
|
}
|
|
1115
1118
|
|
|
1116
1119
|
.tl-handle__clone > .tl-handle__fg {
|
|
1117
|
-
fill: var(--color-selection-stroke);
|
|
1120
|
+
fill: var(--tl-color-selection-stroke);
|
|
1118
1121
|
stroke: none;
|
|
1119
1122
|
}
|
|
1120
1123
|
|
|
@@ -1124,7 +1127,7 @@ input,
|
|
|
1124
1127
|
|
|
1125
1128
|
@media (pointer: coarse) {
|
|
1126
1129
|
.tl-handle__bg:active {
|
|
1127
|
-
fill: var(--color-selection-fill);
|
|
1130
|
+
fill: var(--tl-color-selection-fill);
|
|
1128
1131
|
}
|
|
1129
1132
|
|
|
1130
1133
|
.tl-handle__create {
|
|
@@ -1180,13 +1183,13 @@ input,
|
|
|
1180
1183
|
stroke-linejoin: round;
|
|
1181
1184
|
/* content-visibility: auto; */
|
|
1182
1185
|
transform-origin: top left;
|
|
1183
|
-
color: var(--color-text-1);
|
|
1186
|
+
color: var(--tl-color-text-1);
|
|
1184
1187
|
}
|
|
1185
1188
|
|
|
1186
1189
|
/* -------------------- Group shape ------------------ */
|
|
1187
1190
|
|
|
1188
1191
|
.tl-group {
|
|
1189
|
-
stroke: var(--color-text);
|
|
1192
|
+
stroke: var(--tl-color-text);
|
|
1190
1193
|
stroke-width: calc(1px * var(--tl-scale));
|
|
1191
1194
|
opacity: 0.5;
|
|
1192
1195
|
}
|
|
@@ -1204,12 +1207,12 @@ input,
|
|
|
1204
1207
|
justify-content: center;
|
|
1205
1208
|
align-items: center;
|
|
1206
1209
|
text-align: center;
|
|
1207
|
-
color: var(--color-text);
|
|
1210
|
+
color: var(--tl-color-text);
|
|
1208
1211
|
text-shadow: var(--tl-text-outline);
|
|
1209
1212
|
}
|
|
1210
1213
|
|
|
1211
1214
|
.tl-shape[data-shape-type='arrow'] .tl-text-label__inner {
|
|
1212
|
-
border-radius: var(--radius-1);
|
|
1215
|
+
border-radius: var(--tl-radius-1);
|
|
1213
1216
|
box-sizing: content-box;
|
|
1214
1217
|
height: max-content;
|
|
1215
1218
|
width: max-content;
|
|
@@ -1220,22 +1223,22 @@ input,
|
|
|
1220
1223
|
}
|
|
1221
1224
|
|
|
1222
1225
|
.tl-arrow-hint {
|
|
1223
|
-
stroke: var(--color-text-1);
|
|
1226
|
+
stroke: var(--tl-color-text-1);
|
|
1224
1227
|
fill: none;
|
|
1225
1228
|
stroke-linecap: round;
|
|
1226
1229
|
overflow: visible;
|
|
1227
1230
|
}
|
|
1228
1231
|
|
|
1229
1232
|
.tl-arrow-hint-handle {
|
|
1230
|
-
fill: var(--color-selected-contrast);
|
|
1231
|
-
stroke: var(--color-selection-stroke);
|
|
1233
|
+
fill: var(--tl-color-selected-contrast);
|
|
1234
|
+
stroke: var(--tl-color-selection-stroke);
|
|
1232
1235
|
stroke-width: calc(1.5px * var(--tl-scale));
|
|
1233
1236
|
r: calc(4px * var(--tl-scale));
|
|
1234
1237
|
}
|
|
1235
1238
|
|
|
1236
1239
|
.tl-arrow-hint-snap {
|
|
1237
1240
|
stroke: transparent;
|
|
1238
|
-
fill: var(--color-selection-fill);
|
|
1241
|
+
fill: var(--tl-color-selection-fill);
|
|
1239
1242
|
r: calc(12px * var(--tl-scale));
|
|
1240
1243
|
}
|
|
1241
1244
|
|
|
@@ -1255,40 +1258,40 @@ input,
|
|
|
1255
1258
|
width: 100%;
|
|
1256
1259
|
height: 100%;
|
|
1257
1260
|
position: relative;
|
|
1258
|
-
border: 1px solid var(--color-panel-contrast);
|
|
1259
|
-
background-color: var(--color-panel);
|
|
1260
|
-
border-radius: var(--radius-2);
|
|
1261
|
+
border: 1px solid var(--tl-color-panel-contrast);
|
|
1262
|
+
background-color: var(--tl-color-panel);
|
|
1263
|
+
border-radius: var(--tl-radius-2);
|
|
1261
1264
|
display: flex;
|
|
1262
1265
|
flex-direction: column;
|
|
1263
1266
|
overflow: hidden;
|
|
1264
1267
|
}
|
|
1265
1268
|
|
|
1266
1269
|
.tl-bookmark__container--safariExport {
|
|
1267
|
-
border: 1px solid var(--color-divider);
|
|
1270
|
+
border: 1px solid var(--tl-color-divider);
|
|
1268
1271
|
}
|
|
1269
1272
|
|
|
1270
1273
|
.tl-bookmark__image_container {
|
|
1271
1274
|
flex: 1 1 100%;
|
|
1272
1275
|
overflow: hidden;
|
|
1273
|
-
border-top-left-radius: var(--radius-1);
|
|
1274
|
-
border-top-right-radius: var(--radius-1);
|
|
1276
|
+
border-top-left-radius: var(--tl-radius-1);
|
|
1277
|
+
border-top-right-radius: var(--tl-radius-1);
|
|
1275
1278
|
width: 100%;
|
|
1276
1279
|
height: 100%;
|
|
1277
1280
|
display: flex;
|
|
1278
1281
|
justify-content: flex-end;
|
|
1279
1282
|
align-items: flex-start;
|
|
1280
|
-
box-shadow: inset 0px 0px 0px 1px var(--color-divider);
|
|
1283
|
+
box-shadow: inset 0px 0px 0px 1px var(--tl-color-divider);
|
|
1281
1284
|
}
|
|
1282
1285
|
|
|
1283
1286
|
.tl-bookmark__image_container > .tl-hyperlink-button::after {
|
|
1284
|
-
background-color: var(--color-panel);
|
|
1287
|
+
background-color: var(--tl-color-panel);
|
|
1285
1288
|
}
|
|
1286
1289
|
|
|
1287
1290
|
.tl-bookmark__placeholder {
|
|
1288
1291
|
width: 100%;
|
|
1289
1292
|
height: 100%;
|
|
1290
|
-
background-color: var(--color-muted-2);
|
|
1291
|
-
border-bottom: 1px solid var(--color-muted-2);
|
|
1293
|
+
background-color: var(--tl-color-muted-2);
|
|
1294
|
+
border-bottom: 1px solid var(--tl-color-muted-2);
|
|
1292
1295
|
}
|
|
1293
1296
|
|
|
1294
1297
|
.tl-bookmark__image {
|
|
@@ -1296,12 +1299,12 @@ input,
|
|
|
1296
1299
|
height: 100%;
|
|
1297
1300
|
object-fit: cover;
|
|
1298
1301
|
object-position: center;
|
|
1299
|
-
border-bottom: 1px solid var(--color-muted-2);
|
|
1302
|
+
border-bottom: 1px solid var(--tl-color-muted-2);
|
|
1300
1303
|
}
|
|
1301
1304
|
|
|
1302
1305
|
.tl-bookmark__copy_container {
|
|
1303
|
-
background-color: var(--color-muted-0);
|
|
1304
|
-
padding: var(--space-4);
|
|
1306
|
+
background-color: var(--tl-color-muted-0);
|
|
1307
|
+
padding: var(--tl-space-4);
|
|
1305
1308
|
pointer-events: all;
|
|
1306
1309
|
display: flex;
|
|
1307
1310
|
flex-direction: column;
|
|
@@ -1321,7 +1324,7 @@ input,
|
|
|
1321
1324
|
font-size: 16px;
|
|
1322
1325
|
line-height: 1.6;
|
|
1323
1326
|
font-weight: bold;
|
|
1324
|
-
padding-bottom: var(--space-2);
|
|
1327
|
+
padding-bottom: var(--tl-space-2);
|
|
1325
1328
|
overflow: hidden;
|
|
1326
1329
|
max-height: calc((16px * 1.6) * 2);
|
|
1327
1330
|
-webkit-box-orient: vertical;
|
|
@@ -1341,19 +1344,19 @@ input,
|
|
|
1341
1344
|
line-clamp: 3;
|
|
1342
1345
|
text-overflow: ellipsis;
|
|
1343
1346
|
display: -webkit-box;
|
|
1344
|
-
color: var(--color-text-2);
|
|
1345
|
-
margin: var(--space-2) 0px;
|
|
1347
|
+
color: var(--tl-color-text-2);
|
|
1348
|
+
margin: var(--tl-space-2) 0px;
|
|
1346
1349
|
}
|
|
1347
1350
|
|
|
1348
1351
|
.tl-bookmark__heading + .tl-bookmark__link,
|
|
1349
1352
|
.tl-bookmark__description + .tl-bookmark__link {
|
|
1350
|
-
margin-top: var(--space-3);
|
|
1353
|
+
margin-top: var(--tl-space-3);
|
|
1351
1354
|
}
|
|
1352
1355
|
.tl-bookmark__link {
|
|
1353
1356
|
font-size: 12px;
|
|
1354
1357
|
pointer-events: all;
|
|
1355
1358
|
display: flex;
|
|
1356
|
-
color: var(--color-text-2);
|
|
1359
|
+
color: var(--tl-color-text-2);
|
|
1357
1360
|
align-items: center;
|
|
1358
1361
|
cursor: var(--tl-cursor-pointer);
|
|
1359
1362
|
width: fit-content;
|
|
@@ -1395,7 +1398,7 @@ input,
|
|
|
1395
1398
|
width: 100%;
|
|
1396
1399
|
height: 100%;
|
|
1397
1400
|
pointer-events: all;
|
|
1398
|
-
/* background-color: var(--color-background); */
|
|
1401
|
+
/* background-color: var(--tl-color-background); */
|
|
1399
1402
|
|
|
1400
1403
|
display: flex;
|
|
1401
1404
|
justify-content: center;
|
|
@@ -1424,7 +1427,7 @@ input,
|
|
|
1424
1427
|
height: 100%;
|
|
1425
1428
|
pointer-events: all;
|
|
1426
1429
|
opacity: 1;
|
|
1427
|
-
z-index: var(--layer-text-container);
|
|
1430
|
+
z-index: var(--tl-layer-text-container);
|
|
1428
1431
|
border-radius: 1px;
|
|
1429
1432
|
}
|
|
1430
1433
|
|
|
@@ -1440,22 +1443,22 @@ input,
|
|
|
1440
1443
|
}
|
|
1441
1444
|
|
|
1442
1445
|
.tl-frame__creating {
|
|
1443
|
-
stroke: var(--color-selected);
|
|
1446
|
+
stroke: var(--tl-color-selected);
|
|
1444
1447
|
fill: none;
|
|
1445
1448
|
}
|
|
1446
1449
|
|
|
1447
1450
|
.tl-frame-heading {
|
|
1448
|
-
--frame-padding-x: 6px;
|
|
1449
|
-
--frame-height: 24px;
|
|
1450
|
-
--frame-minimum-width: 32px;
|
|
1451
|
-
--frame-offset-width: 16px;
|
|
1451
|
+
--tl-frame-padding-x: 6px;
|
|
1452
|
+
--tl-frame-height: 24px;
|
|
1453
|
+
--tl-frame-minimum-width: 32px;
|
|
1454
|
+
--tl-frame-offset-width: 16px;
|
|
1452
1455
|
display: flex;
|
|
1453
1456
|
align-items: center;
|
|
1454
1457
|
position: absolute;
|
|
1455
1458
|
transform-origin: 0% 100%;
|
|
1456
1459
|
overflow: hidden;
|
|
1457
1460
|
max-width: 100%;
|
|
1458
|
-
min-width: var(--frame-minimum-width);
|
|
1461
|
+
min-width: var(--tl-frame-minimum-width);
|
|
1459
1462
|
height: auto;
|
|
1460
1463
|
font-size: 12px;
|
|
1461
1464
|
padding-bottom: 4px;
|
|
@@ -1467,18 +1470,18 @@ input,
|
|
|
1467
1470
|
/* scale from bottom left corner so we can pin it to the top left corner of the frame */
|
|
1468
1471
|
transform-origin: 0% 100%;
|
|
1469
1472
|
display: flex;
|
|
1470
|
-
height: var(--frame-height);
|
|
1473
|
+
height: var(--tl-frame-height);
|
|
1471
1474
|
width: 100%;
|
|
1472
1475
|
align-items: center;
|
|
1473
|
-
border-radius: var(--radius-1);
|
|
1476
|
+
border-radius: var(--tl-radius-1);
|
|
1474
1477
|
}
|
|
1475
1478
|
|
|
1476
1479
|
.tl-frame-label {
|
|
1477
1480
|
pointer-events: all;
|
|
1478
1481
|
overflow: hidden;
|
|
1479
1482
|
text-overflow: ellipsis;
|
|
1480
|
-
padding: 0px var(--frame-padding-x);
|
|
1481
|
-
border-radius: var(--radius-1);
|
|
1483
|
+
padding: 0px var(--tl-frame-padding-x);
|
|
1484
|
+
border-radius: var(--tl-radius-1);
|
|
1482
1485
|
position: relative;
|
|
1483
1486
|
font-size: inherit;
|
|
1484
1487
|
white-space: pre;
|
|
@@ -1488,12 +1491,12 @@ input,
|
|
|
1488
1491
|
color: transparent;
|
|
1489
1492
|
white-space: pre;
|
|
1490
1493
|
width: auto;
|
|
1491
|
-
min-width: var(--frame-minimum-width);
|
|
1494
|
+
min-width: var(--tl-frame-minimum-width);
|
|
1492
1495
|
height: 100%;
|
|
1493
1496
|
overflow: visible;
|
|
1494
|
-
background-color: var(--color-panel);
|
|
1495
|
-
border-color: var(--color-selected);
|
|
1496
|
-
box-shadow: inset 0px 0px 0px 1.5px var(--color-selected);
|
|
1497
|
+
background-color: var(--tl-color-panel);
|
|
1498
|
+
border-color: var(--tl-color-selected);
|
|
1499
|
+
box-shadow: inset 0px 0px 0px 1.5px var(--tl-color-selected);
|
|
1497
1500
|
}
|
|
1498
1501
|
|
|
1499
1502
|
.tl-frame-name-input {
|
|
@@ -1501,7 +1504,7 @@ input,
|
|
|
1501
1504
|
border: none;
|
|
1502
1505
|
background: none;
|
|
1503
1506
|
outline: none;
|
|
1504
|
-
padding: 0px var(--frame-padding-x);
|
|
1507
|
+
padding: 0px var(--tl-frame-padding-x);
|
|
1505
1508
|
inset: 0px;
|
|
1506
1509
|
height: 100%;
|
|
1507
1510
|
width: 100%;
|
|
@@ -1509,8 +1512,8 @@ input,
|
|
|
1509
1512
|
font-family: inherit;
|
|
1510
1513
|
font-weight: inherit;
|
|
1511
1514
|
width: 100%;
|
|
1512
|
-
color: var(--color-text-1);
|
|
1513
|
-
border-radius: var(--radius-1);
|
|
1515
|
+
color: var(--tl-color-text-1);
|
|
1516
|
+
border-radius: var(--tl-radius-1);
|
|
1514
1517
|
user-select: all;
|
|
1515
1518
|
-webkit-user-select: text;
|
|
1516
1519
|
white-space: pre;
|
|
@@ -1530,7 +1533,7 @@ input,
|
|
|
1530
1533
|
|
|
1531
1534
|
.tl-embed {
|
|
1532
1535
|
border: none;
|
|
1533
|
-
border-radius: var(--radius-2);
|
|
1536
|
+
border-radius: var(--tl-radius-2);
|
|
1534
1537
|
}
|
|
1535
1538
|
|
|
1536
1539
|
/* -------------- Shape error boundary -------------- */
|
|
@@ -1538,11 +1541,11 @@ input,
|
|
|
1538
1541
|
.tl-shape-error-boundary {
|
|
1539
1542
|
width: 100%;
|
|
1540
1543
|
height: 100%;
|
|
1541
|
-
background-color: var(--color-muted-1);
|
|
1544
|
+
background-color: var(--tl-color-muted-1);
|
|
1542
1545
|
border-width: calc(1px * var(--tl-scale));
|
|
1543
|
-
border-color: var(--color-muted-1);
|
|
1546
|
+
border-color: var(--tl-color-muted-1);
|
|
1544
1547
|
border-style: solid;
|
|
1545
|
-
border-radius: calc(var(--radius-1) * var(--tl-scale));
|
|
1548
|
+
border-radius: calc(var(--tl-radius-1) * var(--tl-scale));
|
|
1546
1549
|
display: flex;
|
|
1547
1550
|
flex-direction: column;
|
|
1548
1551
|
align-items: center;
|
|
@@ -1551,7 +1554,7 @@ input,
|
|
|
1551
1554
|
position: relative;
|
|
1552
1555
|
pointer-events: all;
|
|
1553
1556
|
overflow: hidden;
|
|
1554
|
-
padding: var(--space-2);
|
|
1557
|
+
padding: var(--tl-space-2);
|
|
1555
1558
|
}
|
|
1556
1559
|
|
|
1557
1560
|
.tl-shape-error-boundary::before {
|
|
@@ -1559,7 +1562,7 @@ input,
|
|
|
1559
1562
|
content: 'Error';
|
|
1560
1563
|
font-size: 12px;
|
|
1561
1564
|
font-family: inherit;
|
|
1562
|
-
color: var(--color-text-0);
|
|
1565
|
+
color: var(--tl-color-text-0);
|
|
1563
1566
|
}
|
|
1564
1567
|
|
|
1565
1568
|
/* ----------------- Error boundary ----------------- */
|
|
@@ -1570,9 +1573,9 @@ input,
|
|
|
1570
1573
|
display: flex;
|
|
1571
1574
|
align-items: center;
|
|
1572
1575
|
justify-content: center;
|
|
1573
|
-
padding: var(--space-4);
|
|
1574
|
-
background-color: var(--color-background);
|
|
1575
|
-
color: var(--color-text-1);
|
|
1576
|
+
padding: var(--tl-space-4);
|
|
1577
|
+
background-color: var(--tl-color-background);
|
|
1578
|
+
color: var(--tl-color-text-1);
|
|
1576
1579
|
position: absolute;
|
|
1577
1580
|
}
|
|
1578
1581
|
|
|
@@ -1581,8 +1584,8 @@ input,
|
|
|
1581
1584
|
inset: 0px;
|
|
1582
1585
|
height: 100%;
|
|
1583
1586
|
width: 100%;
|
|
1584
|
-
z-index: var(--layer-error-overlay);
|
|
1585
|
-
background-color: var(--color-overlay);
|
|
1587
|
+
z-index: var(--tl-layer-error-overlay);
|
|
1588
|
+
background-color: var(--tl-color-overlay);
|
|
1586
1589
|
}
|
|
1587
1590
|
|
|
1588
1591
|
.tl-error-boundary__content * {
|
|
@@ -1597,7 +1600,7 @@ input,
|
|
|
1597
1600
|
inset: 0px;
|
|
1598
1601
|
height: 100%;
|
|
1599
1602
|
width: 100%;
|
|
1600
|
-
z-index: var(--layer-error-canvas);
|
|
1603
|
+
z-index: var(--tl-layer-error-canvas);
|
|
1601
1604
|
}
|
|
1602
1605
|
|
|
1603
1606
|
/* some browsers seem to have some weird interactions between stacking contexts
|
|
@@ -1610,7 +1613,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1610
1613
|
inset: 0px;
|
|
1611
1614
|
height: 100%;
|
|
1612
1615
|
width: 100%;
|
|
1613
|
-
z-index: var(--layer-error-canvas-after);
|
|
1616
|
+
z-index: var(--tl-layer-error-canvas-after);
|
|
1614
1617
|
pointer-events: all;
|
|
1615
1618
|
}
|
|
1616
1619
|
|
|
@@ -1620,16 +1623,16 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1620
1623
|
max-width: 100%;
|
|
1621
1624
|
width: 400px;
|
|
1622
1625
|
max-height: 100%;
|
|
1623
|
-
background-color: var(--color-panel);
|
|
1626
|
+
background-color: var(--tl-color-panel);
|
|
1624
1627
|
padding: 16px;
|
|
1625
1628
|
border-radius: 16px;
|
|
1626
|
-
box-shadow: var(--shadow-2);
|
|
1629
|
+
box-shadow: var(--tl-shadow-2);
|
|
1627
1630
|
font-size: 14px;
|
|
1628
1631
|
font-weight: 400;
|
|
1629
1632
|
display: flex;
|
|
1630
1633
|
flex-direction: column;
|
|
1631
1634
|
overflow: auto;
|
|
1632
|
-
z-index: var(--layer-error-content);
|
|
1635
|
+
z-index: var(--tl-layer-error-content);
|
|
1633
1636
|
gap: 12px;
|
|
1634
1637
|
}
|
|
1635
1638
|
|
|
@@ -1644,10 +1647,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1644
1647
|
}
|
|
1645
1648
|
|
|
1646
1649
|
.tl-error-boundary__content h4 {
|
|
1647
|
-
border: 1px solid var(--color-low-border);
|
|
1650
|
+
border: 1px solid var(--tl-color-low-border);
|
|
1648
1651
|
margin: -6px 0 0 0;
|
|
1649
|
-
padding: var(--space-5);
|
|
1650
|
-
border-radius: var(--radius-2);
|
|
1652
|
+
padding: var(--tl-space-5);
|
|
1653
|
+
border-radius: var(--tl-radius-2);
|
|
1651
1654
|
font-weight: normal;
|
|
1652
1655
|
}
|
|
1653
1656
|
|
|
@@ -1657,10 +1660,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1657
1660
|
}
|
|
1658
1661
|
|
|
1659
1662
|
.tl-error-boundary__content pre {
|
|
1660
|
-
background-color: var(--color-muted-2);
|
|
1663
|
+
background-color: var(--tl-color-muted-2);
|
|
1661
1664
|
margin-top: 0;
|
|
1662
|
-
padding: var(--space-5);
|
|
1663
|
-
border-radius: var(--radius-2);
|
|
1665
|
+
padding: var(--tl-space-5);
|
|
1666
|
+
border-radius: var(--tl-radius-2);
|
|
1664
1667
|
overflow: auto;
|
|
1665
1668
|
font-size: 12px;
|
|
1666
1669
|
max-height: 320px;
|
|
@@ -1672,15 +1675,15 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1672
1675
|
font-family: inherit;
|
|
1673
1676
|
font-size: 14px;
|
|
1674
1677
|
font-weight: 500;
|
|
1675
|
-
padding: var(--space-4);
|
|
1676
|
-
border-radius: var(--radius-3);
|
|
1678
|
+
padding: var(--tl-space-4);
|
|
1679
|
+
border-radius: var(--tl-radius-3);
|
|
1677
1680
|
cursor: var(--tl-cursor-pointer);
|
|
1678
1681
|
color: inherit;
|
|
1679
1682
|
background-color: transparent;
|
|
1680
1683
|
}
|
|
1681
1684
|
|
|
1682
1685
|
.tl-error-boundary__content a {
|
|
1683
|
-
color: var(--color-selected);
|
|
1686
|
+
color: var(--tl-color-selected);
|
|
1684
1687
|
font-weight: 500;
|
|
1685
1688
|
text-decoration: none;
|
|
1686
1689
|
}
|
|
@@ -1692,31 +1695,31 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1692
1695
|
|
|
1693
1696
|
.tl-error-boundary__content__error button {
|
|
1694
1697
|
position: absolute;
|
|
1695
|
-
top: var(--space-2);
|
|
1696
|
-
right: var(--space-2);
|
|
1698
|
+
top: var(--tl-space-2);
|
|
1699
|
+
right: var(--tl-space-2);
|
|
1697
1700
|
font-size: 12px;
|
|
1698
|
-
padding: var(--space-2) var(--space-3);
|
|
1699
|
-
background-color: var(--color-panel);
|
|
1700
|
-
border-radius: var(--radius-1);
|
|
1701
|
+
padding: var(--tl-space-2) var(--tl-space-3);
|
|
1702
|
+
background-color: var(--tl-color-panel);
|
|
1703
|
+
border-radius: var(--tl-radius-1);
|
|
1701
1704
|
}
|
|
1702
1705
|
|
|
1703
1706
|
.tl-error-boundary__content__actions {
|
|
1704
1707
|
display: flex;
|
|
1705
1708
|
justify-content: space-between;
|
|
1706
|
-
gap: var(--space-4);
|
|
1709
|
+
gap: var(--tl-space-4);
|
|
1707
1710
|
margin: 0px;
|
|
1708
1711
|
margin-left: -4px;
|
|
1709
1712
|
}
|
|
1710
1713
|
.tl-error-boundary__content__actions__group {
|
|
1711
1714
|
display: flex;
|
|
1712
|
-
gap: var(--space-4);
|
|
1715
|
+
gap: var(--tl-space-4);
|
|
1713
1716
|
}
|
|
1714
1717
|
.tl-error-boundary__content .tl-error-boundary__reset {
|
|
1715
|
-
color: var(--color-danger);
|
|
1718
|
+
color: var(--tl-color-danger);
|
|
1716
1719
|
}
|
|
1717
1720
|
.tl-error-boundary__content .tl-error-boundary__refresh {
|
|
1718
|
-
background-color: var(--color-primary);
|
|
1719
|
-
color: var(--color-selected-contrast);
|
|
1721
|
+
background-color: var(--tl-color-primary);
|
|
1722
|
+
color: var(--tl-color-selected-contrast);
|
|
1720
1723
|
}
|
|
1721
1724
|
.tl-container__focused:not(.tl-container__no-focus-ring)
|
|
1722
1725
|
.tlui-button.tl-error-boundary__refresh:focus-visible {
|
|
@@ -1728,7 +1731,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1728
1731
|
|
|
1729
1732
|
.tl-hit-test-blocker {
|
|
1730
1733
|
position: absolute;
|
|
1731
|
-
z-index: var(--layer-canvas-blocker);
|
|
1734
|
+
z-index: var(--tl-layer-canvas-blocker);
|
|
1732
1735
|
inset: 0px;
|
|
1733
1736
|
width: 100%;
|
|
1734
1737
|
height: 100%;
|
|
@@ -1748,32 +1751,32 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1748
1751
|
|
|
1749
1752
|
.tl-handle__bg:hover {
|
|
1750
1753
|
cursor: var(--tl-cursor-grab);
|
|
1751
|
-
fill: var(--color-selection-fill);
|
|
1754
|
+
fill: var(--tl-color-selection-fill);
|
|
1752
1755
|
}
|
|
1753
1756
|
|
|
1754
1757
|
.tl-bookmark__link:hover {
|
|
1755
|
-
color: var(--color-selected);
|
|
1758
|
+
color: var(--tl-color-selected);
|
|
1756
1759
|
}
|
|
1757
1760
|
|
|
1758
1761
|
.tl-hyperlink-button:hover {
|
|
1759
|
-
color: var(--color-selected);
|
|
1762
|
+
color: var(--tl-color-selected);
|
|
1760
1763
|
}
|
|
1761
1764
|
|
|
1762
1765
|
.tl-error-boundary__content button:hover {
|
|
1763
|
-
background-color: var(--color-low);
|
|
1766
|
+
background-color: var(--tl-color-low);
|
|
1764
1767
|
}
|
|
1765
1768
|
.tl-error-boundary__content a:hover {
|
|
1766
|
-
color: var(--color-text-1);
|
|
1769
|
+
color: var(--tl-color-text-1);
|
|
1767
1770
|
}
|
|
1768
1771
|
.tl-error-boundary__content .tl-error-boundary__refresh:hover {
|
|
1769
|
-
background-color: var(--color-primary);
|
|
1772
|
+
background-color: var(--tl-color-primary);
|
|
1770
1773
|
opacity: 0.9;
|
|
1771
1774
|
}
|
|
1772
1775
|
|
|
1773
1776
|
/* These three rules help preserve clicking into specific points in text areas *while*
|
|
1774
1777
|
* already in edit mode when jumping from shape to shape. */
|
|
1775
1778
|
.tl-canvas[data-iseditinganything='true'] .tl-text-wrapper:hover .tl-text-input {
|
|
1776
|
-
z-index: var(--layer-text-editor);
|
|
1779
|
+
z-index: var(--tl-layer-text-editor);
|
|
1777
1780
|
pointer-events: all;
|
|
1778
1781
|
}
|
|
1779
1782
|
}
|
|
@@ -1781,15 +1784,15 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1781
1784
|
/* @tldraw/ui */
|
|
1782
1785
|
|
|
1783
1786
|
.tl-container {
|
|
1784
|
-
--layer-above: 1;
|
|
1785
|
-
--layer-focused-input: 10;
|
|
1786
|
-
--layer-menu-click-capture: 250;
|
|
1787
|
-
--layer-panels: 300;
|
|
1788
|
-
--layer-menus: 400;
|
|
1789
|
-
--layer-toasts: 650;
|
|
1790
|
-
--layer-cursor: 700;
|
|
1791
|
-
--layer-header-footer: 999;
|
|
1792
|
-
--layer-following-indicator: 1000;
|
|
1787
|
+
--tl-layer-above: 1;
|
|
1788
|
+
--tl-layer-focused-input: 10;
|
|
1789
|
+
--tl-layer-menu-click-capture: 250;
|
|
1790
|
+
--tl-layer-panels: 300;
|
|
1791
|
+
--tl-layer-menus: 400;
|
|
1792
|
+
--tl-layer-toasts: 650;
|
|
1793
|
+
--tl-layer-cursor: 700;
|
|
1794
|
+
--tl-layer-header-footer: 999;
|
|
1795
|
+
--tl-layer-following-indicator: 1000;
|
|
1793
1796
|
}
|
|
1794
1797
|
|
|
1795
1798
|
/* Button */
|
|
@@ -1813,23 +1816,23 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1813
1816
|
text-rendering: optimizeLegibility;
|
|
1814
1817
|
font-size: 12px;
|
|
1815
1818
|
gap: 0px;
|
|
1816
|
-
color: var(--color-text-1);
|
|
1819
|
+
color: var(--tl-color-text-1);
|
|
1817
1820
|
z-index: 0;
|
|
1818
1821
|
}
|
|
1819
1822
|
|
|
1820
1823
|
.tlui-button:disabled {
|
|
1821
|
-
color: var(--color-text-3);
|
|
1824
|
+
color: var(--tl-color-text-3);
|
|
1822
1825
|
text-shadow: none;
|
|
1823
1826
|
cursor: default;
|
|
1824
1827
|
}
|
|
1825
1828
|
|
|
1826
1829
|
.tlui-button:disabled .tlui-kbd {
|
|
1827
|
-
color: var(--color-text-3);
|
|
1830
|
+
color: var(--tl-color-text-3);
|
|
1828
1831
|
}
|
|
1829
1832
|
|
|
1830
1833
|
.tlui-button > * {
|
|
1831
1834
|
position: relative;
|
|
1832
|
-
z-index: var(--layer-above);
|
|
1835
|
+
z-index: var(--tl-layer-above);
|
|
1833
1836
|
}
|
|
1834
1837
|
|
|
1835
1838
|
.tlui-button__label {
|
|
@@ -1845,7 +1848,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1845
1848
|
*/
|
|
1846
1849
|
.tl-container__focused:not(.tl-container__no-focus-ring) .tlui-button:focus-visible {
|
|
1847
1850
|
border-radius: 10px;
|
|
1848
|
-
outline: 2px solid var(--color-focus);
|
|
1851
|
+
outline: 2px solid var(--tl-color-focus);
|
|
1849
1852
|
outline-offset: -5px;
|
|
1850
1853
|
}
|
|
1851
1854
|
.tl-container__focused:not(.tl-container__no-focus-ring) .tlui-button__tool:focus-visible {
|
|
@@ -1853,7 +1856,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1853
1856
|
}
|
|
1854
1857
|
.tlui-slider__container:has(.tlui-slider__thumb:focus-visible) {
|
|
1855
1858
|
border-radius: 10px;
|
|
1856
|
-
outline: 2px solid var(--color-focus);
|
|
1859
|
+
outline: 2px solid var(--tl-color-focus);
|
|
1857
1860
|
outline-offset: -5px;
|
|
1858
1861
|
}
|
|
1859
1862
|
|
|
@@ -1862,8 +1865,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1862
1865
|
content: '';
|
|
1863
1866
|
position: absolute;
|
|
1864
1867
|
inset: 4px;
|
|
1865
|
-
border-radius: var(--radius-2);
|
|
1866
|
-
background: var(--color-muted-2);
|
|
1868
|
+
border-radius: var(--tl-radius-2);
|
|
1869
|
+
background: var(--tl-color-muted-2);
|
|
1867
1870
|
opacity: 0;
|
|
1868
1871
|
}
|
|
1869
1872
|
|
|
@@ -1873,18 +1876,18 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1873
1876
|
|
|
1874
1877
|
.tlui-button[data-isactive='true']::after,
|
|
1875
1878
|
.tlui-button[data-isactive='true']:not(:disabled, :focus-visible):active:after {
|
|
1876
|
-
background: var(--color-hint);
|
|
1879
|
+
background: var(--tl-color-hint);
|
|
1877
1880
|
opacity: 1;
|
|
1878
1881
|
}
|
|
1879
1882
|
|
|
1880
1883
|
.tlui-button[aria-expanded='true'][data-direction='left'] {
|
|
1881
|
-
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
1884
|
+
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
1882
1885
|
opacity: 1;
|
|
1883
1886
|
}
|
|
1884
1887
|
|
|
1885
1888
|
@media (hover: hover) {
|
|
1886
1889
|
.tlui-button[aria-expanded='true'][data-direction='left']:not(:hover)::after {
|
|
1887
|
-
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
1890
|
+
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
1888
1891
|
opacity: 1;
|
|
1889
1892
|
}
|
|
1890
1893
|
|
|
@@ -1898,18 +1901,18 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1898
1901
|
}
|
|
1899
1902
|
|
|
1900
1903
|
.tlui-button__icon + .tlui-button__label {
|
|
1901
|
-
margin-left: var(--space-2);
|
|
1904
|
+
margin-left: var(--tl-space-2);
|
|
1902
1905
|
}
|
|
1903
1906
|
|
|
1904
1907
|
/* Low button */
|
|
1905
1908
|
|
|
1906
1909
|
.tlui-button__low {
|
|
1907
|
-
border-radius: var(--radius-3);
|
|
1908
|
-
background-color: var(--color-low);
|
|
1910
|
+
border-radius: var(--tl-radius-3);
|
|
1911
|
+
background-color: var(--tl-color-low);
|
|
1909
1912
|
}
|
|
1910
1913
|
|
|
1911
1914
|
.tlui-button__low::after {
|
|
1912
|
-
background-color: var(--color-muted-2);
|
|
1915
|
+
background-color: var(--tl-color-muted-2);
|
|
1913
1916
|
opacity: 0;
|
|
1914
1917
|
}
|
|
1915
1918
|
|
|
@@ -1922,21 +1925,21 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1922
1925
|
/* Primary / danger buttons */
|
|
1923
1926
|
|
|
1924
1927
|
.tlui-button__primary {
|
|
1925
|
-
color: var(--color-primary);
|
|
1928
|
+
color: var(--tl-color-primary);
|
|
1926
1929
|
}
|
|
1927
1930
|
|
|
1928
1931
|
.tlui-button__danger {
|
|
1929
|
-
color: var(--color-danger);
|
|
1932
|
+
color: var(--tl-color-danger);
|
|
1930
1933
|
text-shadow: none;
|
|
1931
1934
|
}
|
|
1932
1935
|
|
|
1933
1936
|
@media (hover: hover) {
|
|
1934
1937
|
.tlui-button__primary:not(:disabled, :focus-visible):hover {
|
|
1935
|
-
color: var(--color-primary);
|
|
1938
|
+
color: var(--tl-color-primary);
|
|
1936
1939
|
}
|
|
1937
1940
|
|
|
1938
1941
|
.tlui-button__danger:not(:disabled, :focus-visible):hover {
|
|
1939
|
-
color: var(--color-danger);
|
|
1942
|
+
color: var(--tl-color-danger);
|
|
1940
1943
|
text-shadow: none;
|
|
1941
1944
|
}
|
|
1942
1945
|
}
|
|
@@ -1953,7 +1956,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1953
1956
|
|
|
1954
1957
|
.tlui-button__menu::after {
|
|
1955
1958
|
inset: 4px;
|
|
1956
|
-
border-radius: var(--radius-2);
|
|
1959
|
+
border-radius: var(--tl-radius-2);
|
|
1957
1960
|
}
|
|
1958
1961
|
|
|
1959
1962
|
.tlui-button__menu > .tlui-icon + .tlui-button__label {
|
|
@@ -1986,7 +1989,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1986
1989
|
pointer-events: all;
|
|
1987
1990
|
height: 40px;
|
|
1988
1991
|
width: 40px;
|
|
1989
|
-
border-radius: var(--radius-2);
|
|
1992
|
+
border-radius: var(--tl-radius-2);
|
|
1990
1993
|
}
|
|
1991
1994
|
|
|
1992
1995
|
.tlui-main-toolbar--horizontal .tlui-main-toolbar__lock-button {
|
|
@@ -2020,15 +2023,15 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2020
2023
|
}
|
|
2021
2024
|
|
|
2022
2025
|
.tlui-button__tool[aria-pressed='true'] {
|
|
2023
|
-
color: var(--color-selected-contrast);
|
|
2026
|
+
color: var(--tl-color-selected-contrast);
|
|
2024
2027
|
}
|
|
2025
2028
|
|
|
2026
2029
|
.tlui-button__tool[aria-pressed='true']:not(:disabled, :focus-visible):active {
|
|
2027
|
-
color: var(--color-selected-contrast);
|
|
2030
|
+
color: var(--tl-color-selected-contrast);
|
|
2028
2031
|
}
|
|
2029
2032
|
|
|
2030
2033
|
.tlui-button__tool[aria-pressed='true']:not(:disabled)::after {
|
|
2031
|
-
background: var(--color-selected);
|
|
2034
|
+
background: var(--tl-color-selected);
|
|
2032
2035
|
opacity: 1;
|
|
2033
2036
|
}
|
|
2034
2037
|
|
|
@@ -2101,9 +2104,9 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2101
2104
|
pointer-events: none;
|
|
2102
2105
|
user-select: none;
|
|
2103
2106
|
contain: strict;
|
|
2104
|
-
z-index: var(--layer-panels);
|
|
2107
|
+
z-index: var(--tl-layer-panels);
|
|
2105
2108
|
transform: translate3d(0, 0, 0);
|
|
2106
|
-
--sab: env(safe-area-inset-bottom);
|
|
2109
|
+
--tl-sab: env(safe-area-inset-bottom);
|
|
2107
2110
|
font-weight: 500;
|
|
2108
2111
|
line-height: 1.6;
|
|
2109
2112
|
-webkit-font-smoothing: antialiased;
|
|
@@ -2156,11 +2159,11 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2156
2159
|
justify-content: flex-start;
|
|
2157
2160
|
align-items: flex-start;
|
|
2158
2161
|
width: min-content;
|
|
2159
|
-
gap: var(--space-3);
|
|
2160
|
-
margin: var(--space-2) var(--space-3);
|
|
2162
|
+
gap: var(--tl-space-3);
|
|
2163
|
+
margin: var(--tl-space-2) var(--tl-space-3);
|
|
2161
2164
|
white-space: nowrap;
|
|
2162
2165
|
pointer-events: none;
|
|
2163
|
-
z-index: var(--layer-panels);
|
|
2166
|
+
z-index: var(--tl-layer-panels);
|
|
2164
2167
|
}
|
|
2165
2168
|
|
|
2166
2169
|
/* ---------------------- Icon ---------------------- */
|
|
@@ -2188,7 +2191,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2188
2191
|
|
|
2189
2192
|
.tlui-slider__container {
|
|
2190
2193
|
width: 100%;
|
|
2191
|
-
padding: 0px var(--space-4);
|
|
2194
|
+
padding: 0px var(--tl-space-4);
|
|
2192
2195
|
}
|
|
2193
2196
|
|
|
2194
2197
|
.tlui-slider {
|
|
@@ -2214,7 +2217,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2214
2217
|
content: '';
|
|
2215
2218
|
height: 3px;
|
|
2216
2219
|
width: 100%;
|
|
2217
|
-
background-color: var(--color-muted-1);
|
|
2220
|
+
background-color: var(--tl-color-muted-1);
|
|
2218
2221
|
border-radius: 14px;
|
|
2219
2222
|
}
|
|
2220
2223
|
|
|
@@ -2223,7 +2226,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2223
2226
|
top: calc(50% - 2px);
|
|
2224
2227
|
left: 0px;
|
|
2225
2228
|
height: 3px;
|
|
2226
|
-
background-color: var(--color-selected);
|
|
2229
|
+
background-color: var(--tl-color-selected);
|
|
2227
2230
|
border-radius: 14px;
|
|
2228
2231
|
}
|
|
2229
2232
|
|
|
@@ -2235,16 +2238,16 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2235
2238
|
height: 18px;
|
|
2236
2239
|
position: relative;
|
|
2237
2240
|
top: -1px;
|
|
2238
|
-
background-color: var(--color-panel);
|
|
2241
|
+
background-color: var(--tl-color-panel);
|
|
2239
2242
|
border-radius: 999px;
|
|
2240
|
-
box-shadow: inset 0px 0px 0px 2px var(--color-text-1);
|
|
2243
|
+
box-shadow: inset 0px 0px 0px 2px var(--tl-color-text-1);
|
|
2241
2244
|
}
|
|
2242
2245
|
|
|
2243
2246
|
.tlui-slider__thumb:active {
|
|
2244
2247
|
cursor: grabbing;
|
|
2245
2248
|
box-shadow:
|
|
2246
|
-
inset 0px 0px 0px 2px var(--color-text-1),
|
|
2247
|
-
var(--shadow-1);
|
|
2249
|
+
inset 0px 0px 0px 2px var(--tl-color-text-1),
|
|
2250
|
+
var(--tl-shadow-1);
|
|
2248
2251
|
}
|
|
2249
2252
|
|
|
2250
2253
|
/* ---------------------- Input --------------------- */
|
|
@@ -2253,7 +2256,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2253
2256
|
background: none;
|
|
2254
2257
|
margin: 0px;
|
|
2255
2258
|
position: relative;
|
|
2256
|
-
z-index: var(--layer-above);
|
|
2259
|
+
z-index: var(--tl-layer-above);
|
|
2257
2260
|
height: 40px;
|
|
2258
2261
|
max-height: 40px;
|
|
2259
2262
|
display: flex;
|
|
@@ -2262,8 +2265,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2262
2265
|
font-family: inherit;
|
|
2263
2266
|
font-size: 12px;
|
|
2264
2267
|
font-weight: inherit;
|
|
2265
|
-
color: var(--color-text-1);
|
|
2266
|
-
padding: var(--space-4);
|
|
2268
|
+
color: var(--tl-color-text-1);
|
|
2269
|
+
padding: var(--tl-space-4);
|
|
2267
2270
|
padding-left: 0px;
|
|
2268
2271
|
border: none;
|
|
2269
2272
|
outline: none;
|
|
@@ -2279,8 +2282,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2279
2282
|
height: 44px;
|
|
2280
2283
|
display: flex;
|
|
2281
2284
|
align-items: center;
|
|
2282
|
-
gap: var(--space-4);
|
|
2283
|
-
color: var(--color-text);
|
|
2285
|
+
gap: var(--tl-space-4);
|
|
2286
|
+
color: var(--tl-color-text);
|
|
2284
2287
|
}
|
|
2285
2288
|
|
|
2286
2289
|
.tlui-input__wrapper > .tlui-icon {
|
|
@@ -2312,7 +2315,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2312
2315
|
grid-auto-columns: minmax(1em, auto);
|
|
2313
2316
|
align-self: bottom;
|
|
2314
2317
|
color: currentColor;
|
|
2315
|
-
margin-left: var(--space-4);
|
|
2318
|
+
margin-left: var(--tl-space-4);
|
|
2316
2319
|
}
|
|
2317
2320
|
|
|
2318
2321
|
.tlui-kbd > span {
|
|
@@ -2329,13 +2332,13 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2329
2332
|
}
|
|
2330
2333
|
|
|
2331
2334
|
.tlui-kbd:not(:last-child) {
|
|
2332
|
-
margin-right: var(--space-2);
|
|
2335
|
+
margin-right: var(--tl-space-2);
|
|
2333
2336
|
}
|
|
2334
2337
|
|
|
2335
2338
|
/* Focus Mode Button */
|
|
2336
2339
|
|
|
2337
2340
|
.tlui-focus-button {
|
|
2338
|
-
z-index: var(--layer-panels);
|
|
2341
|
+
z-index: var(--tl-layer-panels);
|
|
2339
2342
|
pointer-events: all;
|
|
2340
2343
|
}
|
|
2341
2344
|
|
|
@@ -2346,16 +2349,16 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2346
2349
|
}
|
|
2347
2350
|
|
|
2348
2351
|
.tlui-menu {
|
|
2349
|
-
z-index: var(--layer-menus);
|
|
2352
|
+
z-index: var(--tl-layer-menus);
|
|
2350
2353
|
height: fit-content;
|
|
2351
2354
|
width: fit-content;
|
|
2352
|
-
border-radius: var(--radius-3);
|
|
2355
|
+
border-radius: var(--tl-radius-3);
|
|
2353
2356
|
pointer-events: all;
|
|
2354
2357
|
touch-action: auto;
|
|
2355
2358
|
overflow-y: auto;
|
|
2356
2359
|
overscroll-behavior: none;
|
|
2357
|
-
background-color: var(--color-panel);
|
|
2358
|
-
box-shadow: var(--shadow-3);
|
|
2360
|
+
background-color: var(--tl-color-panel);
|
|
2361
|
+
box-shadow: var(--tl-shadow-3);
|
|
2359
2362
|
}
|
|
2360
2363
|
|
|
2361
2364
|
.tlui-menu::-webkit-scrollbar {
|
|
@@ -2373,7 +2376,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2373
2376
|
}
|
|
2374
2377
|
|
|
2375
2378
|
.tlui-menu__group {
|
|
2376
|
-
border-bottom: 1px solid var(--color-divider);
|
|
2379
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
2377
2380
|
}
|
|
2378
2381
|
.tlui-menu__group:nth-last-of-type(1) {
|
|
2379
2382
|
border-bottom: none;
|
|
@@ -2383,23 +2386,23 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2383
2386
|
|
|
2384
2387
|
.tlui-menu__submenu__trigger[data-state='open']::after {
|
|
2385
2388
|
opacity: 1;
|
|
2386
|
-
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
2389
|
+
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
2387
2390
|
}
|
|
2388
2391
|
|
|
2389
2392
|
.tlui-menu__submenu__trigger[data-direction='left'][data-state='open']::after {
|
|
2390
2393
|
opacity: 1;
|
|
2391
|
-
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
2394
|
+
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
2392
2395
|
}
|
|
2393
2396
|
|
|
2394
2397
|
@media (hover: hover) {
|
|
2395
2398
|
.tlui-menu__submenu__trigger[data-state='open']:not(:hover)::after {
|
|
2396
2399
|
opacity: 1;
|
|
2397
|
-
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
2400
|
+
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
2398
2401
|
}
|
|
2399
2402
|
|
|
2400
2403
|
.tlui-menu__submenu__trigger[data-direction='left'][data-state='open']:not(:hover)::after {
|
|
2401
2404
|
opacity: 1;
|
|
2402
|
-
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
2405
|
+
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
2403
2406
|
}
|
|
2404
2407
|
}
|
|
2405
2408
|
|
|
@@ -2424,7 +2427,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2424
2427
|
.tlui-menu-click-capture {
|
|
2425
2428
|
position: fixed;
|
|
2426
2429
|
inset: 0;
|
|
2427
|
-
z-index: var(--layer-menu-click-capture);
|
|
2430
|
+
z-index: var(--tl-layer-menu-click-capture);
|
|
2428
2431
|
}
|
|
2429
2432
|
|
|
2430
2433
|
/* --------------------- Popover -------------------- */
|
|
@@ -2440,10 +2443,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2440
2443
|
max-height: calc(var(--radix-popover-content-available-height) - 8px);
|
|
2441
2444
|
margin: 0px;
|
|
2442
2445
|
border: none;
|
|
2443
|
-
border-radius: var(--radius-3);
|
|
2444
|
-
background-color: var(--color-panel);
|
|
2445
|
-
box-shadow: var(--shadow-3);
|
|
2446
|
-
z-index: var(--layer-menus);
|
|
2446
|
+
border-radius: var(--tl-radius-3);
|
|
2447
|
+
background-color: var(--tl-color-panel);
|
|
2448
|
+
box-shadow: var(--tl-shadow-3);
|
|
2449
|
+
z-index: var(--tl-layer-menus);
|
|
2447
2450
|
overflow: hidden;
|
|
2448
2451
|
overflow-y: auto;
|
|
2449
2452
|
touch-action: auto;
|
|
@@ -2456,22 +2459,22 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2456
2459
|
|
|
2457
2460
|
.tlui-menu-zone {
|
|
2458
2461
|
position: relative;
|
|
2459
|
-
z-index: var(--layer-panels);
|
|
2462
|
+
z-index: var(--tl-layer-panels);
|
|
2460
2463
|
width: fit-content;
|
|
2461
|
-
border-right: 2px solid var(--color-background);
|
|
2462
|
-
border-bottom: 2px solid var(--color-background);
|
|
2463
|
-
border-bottom-right-radius: var(--radius-4);
|
|
2464
|
-
background-color: var(--color-low);
|
|
2464
|
+
border-right: 2px solid var(--tl-color-background);
|
|
2465
|
+
border-bottom: 2px solid var(--tl-color-background);
|
|
2466
|
+
border-bottom-right-radius: var(--tl-radius-4);
|
|
2467
|
+
background-color: var(--tl-color-low);
|
|
2465
2468
|
}
|
|
2466
2469
|
|
|
2467
2470
|
.tlui-menu-zone *[data-state='open']::after {
|
|
2468
|
-
background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
2471
|
+
background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
2469
2472
|
opacity: 1;
|
|
2470
2473
|
}
|
|
2471
2474
|
|
|
2472
2475
|
@media (hover: hover) {
|
|
2473
2476
|
.tlui-menu-zone *[data-state='open']:not(:hover)::after {
|
|
2474
|
-
background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
2477
|
+
background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
2475
2478
|
opacity: 1;
|
|
2476
2479
|
}
|
|
2477
2480
|
}
|
|
@@ -2497,8 +2500,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2497
2500
|
align-items: center;
|
|
2498
2501
|
width: 100%;
|
|
2499
2502
|
height: 40px;
|
|
2500
|
-
padding-left: var(--space-4);
|
|
2501
|
-
border-bottom: 1px solid var(--color-divider);
|
|
2503
|
+
padding-left: var(--tl-space-4);
|
|
2504
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
2502
2505
|
}
|
|
2503
2506
|
|
|
2504
2507
|
.tlui-page-menu__header > .tlui-button:nth-of-type(1) {
|
|
@@ -2506,7 +2509,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2506
2509
|
}
|
|
2507
2510
|
|
|
2508
2511
|
.tlui-page-menu__header__title {
|
|
2509
|
-
color: var(--color-text);
|
|
2512
|
+
color: var(--tl-color-text);
|
|
2510
2513
|
font-size: 12px;
|
|
2511
2514
|
flex-grow: 2;
|
|
2512
2515
|
}
|
|
@@ -2591,7 +2594,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2591
2594
|
display: inline-flex;
|
|
2592
2595
|
align-items: center;
|
|
2593
2596
|
justify-content: center;
|
|
2594
|
-
color: var(--color-text);
|
|
2597
|
+
color: var(--tl-color-text);
|
|
2595
2598
|
}
|
|
2596
2599
|
|
|
2597
2600
|
.tlui-page_menu__item__sortable {
|
|
@@ -2604,7 +2607,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2604
2607
|
flex-direction: row;
|
|
2605
2608
|
align-items: center;
|
|
2606
2609
|
overflow: hidden;
|
|
2607
|
-
z-index: var(--layer-above);
|
|
2610
|
+
z-index: var(--tl-layer-above);
|
|
2608
2611
|
}
|
|
2609
2612
|
|
|
2610
2613
|
.tlui-page_menu__item__sortable__title {
|
|
@@ -2616,7 +2619,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2616
2619
|
}
|
|
2617
2620
|
|
|
2618
2621
|
.tlui-page_menu__item__sortable:focus-visible {
|
|
2619
|
-
z-index: var(--layer-focused-input);
|
|
2622
|
+
z-index: var(--tl-layer-focused-input);
|
|
2620
2623
|
}
|
|
2621
2624
|
|
|
2622
2625
|
.tlui-page_menu__item__sortable__handle {
|
|
@@ -2625,7 +2628,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2625
2628
|
min-width: 0px;
|
|
2626
2629
|
height: 40px;
|
|
2627
2630
|
cursor: grab;
|
|
2628
|
-
color: var(--color-text-3);
|
|
2631
|
+
color: var(--tl-color-text-3);
|
|
2629
2632
|
flex-shrink: 0;
|
|
2630
2633
|
margin-right: -9px;
|
|
2631
2634
|
}
|
|
@@ -2667,13 +2670,13 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2667
2670
|
}
|
|
2668
2671
|
|
|
2669
2672
|
.tlui-page_menu__item__submenu > .tlui-button[data-state='open']::after {
|
|
2670
|
-
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
2673
|
+
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
2671
2674
|
opacity: 1;
|
|
2672
2675
|
}
|
|
2673
2676
|
|
|
2674
2677
|
@media (hover: hover) {
|
|
2675
2678
|
.tlui-page_menu__item__submenu > .tlui-button[data-state='open']:not(:hover)::after {
|
|
2676
|
-
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
2679
|
+
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
2677
2680
|
opacity: 1;
|
|
2678
2681
|
}
|
|
2679
2682
|
}
|
|
@@ -2709,7 +2712,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2709
2712
|
top: 48px;
|
|
2710
2713
|
left: -9999px;
|
|
2711
2714
|
padding: 8px 16px;
|
|
2712
|
-
z-index: var(--layer-toasts);
|
|
2715
|
+
z-index: var(--tl-layer-toasts);
|
|
2713
2716
|
}
|
|
2714
2717
|
|
|
2715
2718
|
.tl-skip-to-main-content:focus {
|
|
@@ -2721,11 +2724,11 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2721
2724
|
.tlui-offline-indicator {
|
|
2722
2725
|
display: flex;
|
|
2723
2726
|
flex-direction: row;
|
|
2724
|
-
gap: var(--space-3);
|
|
2725
|
-
color: var(--color-text);
|
|
2726
|
-
background-color: var(--color-low);
|
|
2727
|
-
border: 3px solid var(--color-background);
|
|
2728
|
-
padding: 0px var(--space-5);
|
|
2727
|
+
gap: var(--tl-space-3);
|
|
2728
|
+
color: var(--tl-color-text);
|
|
2729
|
+
background-color: var(--tl-color-low);
|
|
2730
|
+
border: 3px solid var(--tl-color-background);
|
|
2731
|
+
padding: 0px var(--tl-space-5);
|
|
2729
2732
|
height: 42px;
|
|
2730
2733
|
align-items: center;
|
|
2731
2734
|
justify-content: center;
|
|
@@ -2740,10 +2743,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2740
2743
|
/* ------------------- Style panel ------------------ */
|
|
2741
2744
|
|
|
2742
2745
|
.tlui-style-panel__wrapper {
|
|
2743
|
-
box-shadow: var(--shadow-2);
|
|
2744
|
-
border-radius: var(--radius-3);
|
|
2746
|
+
box-shadow: var(--tl-shadow-2);
|
|
2747
|
+
border-radius: var(--tl-radius-3);
|
|
2745
2748
|
pointer-events: all;
|
|
2746
|
-
background-color: var(--color-panel);
|
|
2749
|
+
background-color: var(--tl-color-panel);
|
|
2747
2750
|
height: fit-content;
|
|
2748
2751
|
max-height: 100%;
|
|
2749
2752
|
margin: 8px;
|
|
@@ -2752,7 +2755,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2752
2755
|
overscroll-behavior: none;
|
|
2753
2756
|
overflow-y: auto;
|
|
2754
2757
|
overflow-x: hidden;
|
|
2755
|
-
color: var(--color-text);
|
|
2758
|
+
color: var(--tl-color-text);
|
|
2756
2759
|
}
|
|
2757
2760
|
/* if the style panel is the only child (ie no share menu), increase the margin */
|
|
2758
2761
|
.tlui-style-panel__wrapper:only-child {
|
|
@@ -2761,7 +2764,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2761
2764
|
|
|
2762
2765
|
.tlui-style-panel {
|
|
2763
2766
|
position: relative;
|
|
2764
|
-
z-index: var(--layer-panels);
|
|
2767
|
+
z-index: var(--tl-layer-panels);
|
|
2765
2768
|
pointer-events: all;
|
|
2766
2769
|
width: 148px;
|
|
2767
2770
|
max-width: 148px;
|
|
@@ -2769,7 +2772,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2769
2772
|
|
|
2770
2773
|
.tlui-style-panel[data-show-ui-labels='true'] .tlui-button[data-isactive='true'] {
|
|
2771
2774
|
border-radius: 10px;
|
|
2772
|
-
outline: 2px solid var(--color-text);
|
|
2775
|
+
outline: 2px solid var(--tl-color-text);
|
|
2773
2776
|
outline-offset: -5px;
|
|
2774
2777
|
}
|
|
2775
2778
|
|
|
@@ -2788,7 +2791,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2788
2791
|
}
|
|
2789
2792
|
|
|
2790
2793
|
.tlui-style-panel__section:nth-of-type(n + 2):not(:last-child) {
|
|
2791
|
-
border-bottom: 1px solid var(--color-divider);
|
|
2794
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
2792
2795
|
}
|
|
2793
2796
|
|
|
2794
2797
|
.tlui-style-panel__section:empty {
|
|
@@ -2797,7 +2800,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2797
2800
|
|
|
2798
2801
|
.tlui-style-panel__section__common:not(:only-child) {
|
|
2799
2802
|
margin-bottom: 7px;
|
|
2800
|
-
border-bottom: 1px solid var(--color-divider);
|
|
2803
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
2801
2804
|
}
|
|
2802
2805
|
|
|
2803
2806
|
.tlui-style-panel__dropdown-picker:only-child {
|
|
@@ -2808,8 +2811,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2808
2811
|
display: flex;
|
|
2809
2812
|
grid-template-columns: 1fr auto;
|
|
2810
2813
|
align-items: center;
|
|
2811
|
-
padding-left: var(--space-4);
|
|
2812
|
-
color: var(--color-text-1);
|
|
2814
|
+
padding-left: var(--tl-space-4);
|
|
2815
|
+
color: var(--tl-color-text-1);
|
|
2813
2816
|
font-size: 12px;
|
|
2814
2817
|
}
|
|
2815
2818
|
|
|
@@ -2823,13 +2826,13 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2823
2826
|
|
|
2824
2827
|
.tlui-style-panel .tlui-button[data-state='open']::after {
|
|
2825
2828
|
opacity: 1;
|
|
2826
|
-
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
2829
|
+
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
2827
2830
|
}
|
|
2828
2831
|
|
|
2829
2832
|
@media (hover: hover) {
|
|
2830
2833
|
.tlui-style-panel .tlui-button[data-state='open']:not(:hover)::after {
|
|
2831
2834
|
opacity: 1;
|
|
2832
|
-
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
2835
|
+
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
2833
2836
|
}
|
|
2834
2837
|
}
|
|
2835
2838
|
|
|
@@ -2839,14 +2842,14 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2839
2842
|
.tlui-style-panel__section__common .tlui-style-panel__subheading,
|
|
2840
2843
|
.tlui-style-panel__subheading + .tlui-slider__container {
|
|
2841
2844
|
margin: 0;
|
|
2842
|
-
padding: var(--space-2) var(--space-3) 0px var(--space-4);
|
|
2845
|
+
padding: var(--tl-space-2) var(--tl-space-3) 0px var(--tl-space-4);
|
|
2843
2846
|
font-size: 12px;
|
|
2844
2847
|
font-weight: inherit;
|
|
2845
2848
|
line-height: inherit;
|
|
2846
2849
|
}
|
|
2847
2850
|
|
|
2848
2851
|
.tlui-style-panel .tlui-style-panel__subheading:nth-of-type(1) {
|
|
2849
|
-
padding-top: var(--space-3);
|
|
2852
|
+
padding-top: var(--tl-space-3);
|
|
2850
2853
|
}
|
|
2851
2854
|
|
|
2852
2855
|
.tlui-style-panel__subheading + .tlui-slider__container {
|
|
@@ -2858,7 +2861,6 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2858
2861
|
.tlui-layout__bottom {
|
|
2859
2862
|
grid-row: 2;
|
|
2860
2863
|
width: 100%;
|
|
2861
|
-
overflow: hidden;
|
|
2862
2864
|
}
|
|
2863
2865
|
|
|
2864
2866
|
.tlui-layout__bottom__main {
|
|
@@ -2874,7 +2876,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2874
2876
|
display: flex;
|
|
2875
2877
|
width: min-content;
|
|
2876
2878
|
flex-direction: column;
|
|
2877
|
-
z-index: var(--layer-panels);
|
|
2879
|
+
z-index: var(--tl-layer-panels);
|
|
2878
2880
|
pointer-events: all;
|
|
2879
2881
|
position: absolute;
|
|
2880
2882
|
left: 0px;
|
|
@@ -2887,10 +2889,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2887
2889
|
z-index: -1;
|
|
2888
2890
|
inset: -2px -2px 0px 0px;
|
|
2889
2891
|
border-radius: 0;
|
|
2890
|
-
border-top: 2px solid var(--color-background);
|
|
2891
|
-
border-right: 2px solid var(--color-background);
|
|
2892
|
-
border-top-right-radius: var(--radius-4);
|
|
2893
|
-
background-color: var(--color-low);
|
|
2892
|
+
border-top: 2px solid var(--tl-color-background);
|
|
2893
|
+
border-right: 2px solid var(--tl-color-background);
|
|
2894
|
+
border-top-right-radius: var(--tl-radius-4);
|
|
2895
|
+
background-color: var(--tl-color-low);
|
|
2894
2896
|
}
|
|
2895
2897
|
|
|
2896
2898
|
.tlui-navigation-panel[data-a11y='true']::before {
|
|
@@ -2904,7 +2906,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2904
2906
|
height: 96px;
|
|
2905
2907
|
min-height: 96px;
|
|
2906
2908
|
overflow: hidden;
|
|
2907
|
-
padding: var(--space-3);
|
|
2909
|
+
padding: var(--tl-space-3);
|
|
2908
2910
|
padding-top: 0px;
|
|
2909
2911
|
}
|
|
2910
2912
|
|
|
@@ -2927,7 +2929,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2927
2929
|
}
|
|
2928
2930
|
|
|
2929
2931
|
.tlui-main-toolbar--horizontal {
|
|
2930
|
-
padding-bottom: calc(var(--space-3) + var(--sab));
|
|
2932
|
+
padding-bottom: calc(var(--tl-space-3) + var(--tl-sab));
|
|
2931
2933
|
max-width: 100%;
|
|
2932
2934
|
}
|
|
2933
2935
|
|
|
@@ -2936,7 +2938,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2936
2938
|
left: 0;
|
|
2937
2939
|
top: 90px; /* height of page menu + 'back to content' button */
|
|
2938
2940
|
bottom: 140px; /* height of expanded mini-map */
|
|
2939
|
-
padding-left: calc(var(--space-3) + var(--sab));
|
|
2941
|
+
padding-left: calc(var(--tl-space-3) + var(--tl-sab));
|
|
2940
2942
|
}
|
|
2941
2943
|
|
|
2942
2944
|
[data-breakpoints-below*='6'] .tlui-main-toolbar--vertical {
|
|
@@ -2948,7 +2950,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2948
2950
|
position: relative;
|
|
2949
2951
|
width: fit-content;
|
|
2950
2952
|
display: flex;
|
|
2951
|
-
gap: var(--space-3);
|
|
2953
|
+
gap: var(--tl-space-3);
|
|
2952
2954
|
align-items: flex-start;
|
|
2953
2955
|
}
|
|
2954
2956
|
|
|
@@ -2967,7 +2969,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2967
2969
|
/* Row of controls + lock button */
|
|
2968
2970
|
.tlui-main-toolbar__extras {
|
|
2969
2971
|
position: relative;
|
|
2970
|
-
z-index: var(--layer-above);
|
|
2972
|
+
z-index: var(--tl-layer-above);
|
|
2971
2973
|
pointer-events: none;
|
|
2972
2974
|
align-self: stretch;
|
|
2973
2975
|
}
|
|
@@ -2988,23 +2990,23 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2988
2990
|
|
|
2989
2991
|
.tlui-main-toolbar__extras__controls {
|
|
2990
2992
|
position: relative;
|
|
2991
|
-
z-index: var(--layer-above);
|
|
2992
|
-
background-color: var(--color-low);
|
|
2993
|
-
border: 2px solid var(--color-background);
|
|
2993
|
+
z-index: var(--tl-layer-above);
|
|
2994
|
+
background-color: var(--tl-color-low);
|
|
2995
|
+
border: 2px solid var(--tl-color-background);
|
|
2994
2996
|
pointer-events: all;
|
|
2995
2997
|
}
|
|
2996
2998
|
|
|
2997
2999
|
.tlui-main-toolbar--horizontal .tlui-main-toolbar__extras__controls {
|
|
2998
|
-
border-top-left-radius: var(--radius-4);
|
|
2999
|
-
border-top-right-radius: var(--radius-4);
|
|
3000
|
+
border-top-left-radius: var(--tl-radius-4);
|
|
3001
|
+
border-top-right-radius: var(--tl-radius-4);
|
|
3000
3002
|
margin-left: 8px;
|
|
3001
3003
|
margin-right: 0px;
|
|
3002
3004
|
width: fit-content;
|
|
3003
3005
|
}
|
|
3004
3006
|
|
|
3005
3007
|
.tlui-main-toolbar--vertical .tlui-main-toolbar__extras__controls {
|
|
3006
|
-
border-top-right-radius: var(--radius-4);
|
|
3007
|
-
border-bottom-right-radius: var(--radius-4);
|
|
3008
|
+
border-top-right-radius: var(--tl-radius-4);
|
|
3009
|
+
border-bottom-right-radius: var(--tl-radius-4);
|
|
3008
3010
|
margin-top: 8px;
|
|
3009
3011
|
margin-left: -2px;
|
|
3010
3012
|
margin-bottom: 0px;
|
|
@@ -3012,12 +3014,12 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3012
3014
|
}
|
|
3013
3015
|
|
|
3014
3016
|
.tlui-main-toolbar__tools {
|
|
3015
|
-
border-radius: var(--radius-4);
|
|
3016
|
-
z-index: var(--layer-panels);
|
|
3017
|
+
border-radius: var(--tl-radius-4);
|
|
3018
|
+
z-index: var(--tl-layer-panels);
|
|
3017
3019
|
pointer-events: all;
|
|
3018
3020
|
position: relative;
|
|
3019
|
-
background: var(--color-panel);
|
|
3020
|
-
box-shadow: var(--shadow-2);
|
|
3021
|
+
background: var(--tl-color-panel);
|
|
3022
|
+
box-shadow: var(--tl-shadow-2);
|
|
3021
3023
|
}
|
|
3022
3024
|
|
|
3023
3025
|
.tlui-main-toolbar--horizontal .tlui-main-toolbar__mobile-style-panel {
|
|
@@ -3042,14 +3044,18 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3042
3044
|
}
|
|
3043
3045
|
|
|
3044
3046
|
.tlui-main-toolbar--horizontal *[data-state='open']::after {
|
|
3045
|
-
background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
3047
|
+
background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
3046
3048
|
opacity: 1;
|
|
3047
3049
|
}
|
|
3048
3050
|
.tlui-main-toolbar--vertical *[data-state='open']::after {
|
|
3049
|
-
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
3051
|
+
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
3050
3052
|
opacity: 1;
|
|
3051
3053
|
}
|
|
3052
3054
|
|
|
3055
|
+
.tlui-main-toolbar__overflow-content {
|
|
3056
|
+
touch-action: none;
|
|
3057
|
+
}
|
|
3058
|
+
|
|
3053
3059
|
.tlui-main-toolbar__tools [data-toolbar-visible='false'],
|
|
3054
3060
|
.tlui-main-toolbar__overflow-content [data-toolbar-visible='false'] {
|
|
3055
3061
|
display: none;
|
|
@@ -3078,11 +3084,11 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3078
3084
|
|
|
3079
3085
|
@media (hover: hover) {
|
|
3080
3086
|
.tlui-main-toolbar--horizontal *[data-state='open']:not(:hover)::after {
|
|
3081
|
-
background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
3087
|
+
background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
3082
3088
|
opacity: 1;
|
|
3083
3089
|
}
|
|
3084
3090
|
.tlui-main-toolbar--vertical *[data-state='open']:not(:hover)::after {
|
|
3085
|
-
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
3091
|
+
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
3086
3092
|
opacity: 1;
|
|
3087
3093
|
}
|
|
3088
3094
|
}
|
|
@@ -3093,44 +3099,40 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3093
3099
|
font-size: 12px;
|
|
3094
3100
|
padding: 2px 8px;
|
|
3095
3101
|
border-radius: 4px;
|
|
3096
|
-
background-color: var(--color-tooltip);
|
|
3102
|
+
background-color: var(--tl-color-tooltip);
|
|
3097
3103
|
box-shadow: none;
|
|
3098
|
-
color: var(--color-text-shadow);
|
|
3104
|
+
color: var(--tl-color-text-shadow);
|
|
3099
3105
|
max-width: 400px;
|
|
3100
3106
|
width: fit-content;
|
|
3101
3107
|
text-align: center;
|
|
3102
|
-
pointer-events: none;
|
|
3103
3108
|
will-change: transform, opacity;
|
|
3104
3109
|
z-index: 2;
|
|
3105
3110
|
}
|
|
3106
3111
|
|
|
3107
3112
|
.tlui-tooltip__arrow {
|
|
3108
|
-
fill: var(--color-tooltip);
|
|
3113
|
+
fill: var(--tl-color-tooltip);
|
|
3109
3114
|
will-change: opacity;
|
|
3110
3115
|
}
|
|
3111
3116
|
|
|
3112
3117
|
[data-radix-popper-content-wrapper]:has(.tlui-tooltip) {
|
|
3113
|
-
z-index: var(--layer-toasts) !important;
|
|
3114
|
-
|
|
3115
|
-
|
|
3116
|
-
[data-radix-popper-content-wrapper]:has(.tlui-tooltip[data-should-animate='true']) {
|
|
3117
|
-
transition: all 0.1s ease-out;
|
|
3118
|
+
z-index: var(--tl-layer-toasts) !important;
|
|
3119
|
+
pointer-events: none;
|
|
3118
3120
|
}
|
|
3119
3121
|
|
|
3120
3122
|
/* ------------------- Debug panel ------------------ */
|
|
3121
3123
|
|
|
3122
3124
|
.tlui-debug-panel {
|
|
3123
|
-
background-color: var(--color-low);
|
|
3125
|
+
background-color: var(--tl-color-low);
|
|
3124
3126
|
width: 100%;
|
|
3125
3127
|
display: grid;
|
|
3126
3128
|
align-items: center;
|
|
3127
3129
|
grid-template-columns: 1fr auto auto auto;
|
|
3128
3130
|
justify-content: space-between;
|
|
3129
|
-
padding-left: var(--space-4);
|
|
3130
|
-
border-top: 1px solid var(--color-background);
|
|
3131
|
+
padding-left: var(--tl-space-4);
|
|
3132
|
+
border-top: 1px solid var(--tl-color-background);
|
|
3131
3133
|
font-size: 12px;
|
|
3132
|
-
color: var(--color-text-1);
|
|
3133
|
-
z-index: var(--layer-panels);
|
|
3134
|
+
color: var(--tl-color-text-1);
|
|
3135
|
+
z-index: var(--tl-layer-panels);
|
|
3134
3136
|
pointer-events: all;
|
|
3135
3137
|
}
|
|
3136
3138
|
|
|
@@ -3146,7 +3148,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3146
3148
|
|
|
3147
3149
|
.tlui-debug-panel__fps__slow {
|
|
3148
3150
|
font-weight: bold;
|
|
3149
|
-
color: var(--color-danger);
|
|
3151
|
+
color: var(--tl-color-danger);
|
|
3150
3152
|
}
|
|
3151
3153
|
|
|
3152
3154
|
.tlui-a11y-audit {
|
|
@@ -3156,7 +3158,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3156
3158
|
.tlui-a11y-audit th,
|
|
3157
3159
|
.tlui-a11y-audit td {
|
|
3158
3160
|
padding: 8px;
|
|
3159
|
-
border: 1px solid var(--color-low-border);
|
|
3161
|
+
border: 1px solid var(--tl-color-low-border);
|
|
3160
3162
|
}
|
|
3161
3163
|
|
|
3162
3164
|
/* --------------------- Toasts --------------------- */
|
|
@@ -3169,10 +3171,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3169
3171
|
align-items: flex-end;
|
|
3170
3172
|
justify-content: flex-end;
|
|
3171
3173
|
flex-direction: column;
|
|
3172
|
-
gap: var(--space-3);
|
|
3174
|
+
gap: var(--tl-space-3);
|
|
3173
3175
|
pointer-events: none;
|
|
3174
|
-
padding: 0px var(--space-3) 64px 0px;
|
|
3175
|
-
z-index: var(--layer-toasts);
|
|
3176
|
+
padding: 0px var(--tl-space-3) 64px 0px;
|
|
3177
|
+
z-index: var(--tl-layer-toasts);
|
|
3176
3178
|
}
|
|
3177
3179
|
|
|
3178
3180
|
.tlui-toast__viewport > * {
|
|
@@ -3181,34 +3183,34 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3181
3183
|
|
|
3182
3184
|
.tlui-toast__icon {
|
|
3183
3185
|
padding-top: 11px;
|
|
3184
|
-
padding-left: var(--space-4);
|
|
3185
|
-
color: var(--color-text-1);
|
|
3186
|
+
padding-left: var(--tl-space-4);
|
|
3187
|
+
color: var(--tl-color-text-1);
|
|
3186
3188
|
}
|
|
3187
3189
|
|
|
3188
3190
|
.tlui-toast__container {
|
|
3189
3191
|
min-width: 200px;
|
|
3190
3192
|
display: flex;
|
|
3191
3193
|
flex-direction: row;
|
|
3192
|
-
background-color: var(--color-panel);
|
|
3193
|
-
box-shadow: var(--shadow-2);
|
|
3194
|
-
border-radius: var(--radius-3);
|
|
3194
|
+
background-color: var(--tl-color-panel);
|
|
3195
|
+
box-shadow: var(--tl-shadow-2);
|
|
3196
|
+
border-radius: var(--tl-radius-3);
|
|
3195
3197
|
font-size: 12px;
|
|
3196
3198
|
}
|
|
3197
3199
|
|
|
3198
3200
|
.tlui-toast__container[data-severity='success'] .tlui-icon {
|
|
3199
|
-
color: var(--color-success);
|
|
3201
|
+
color: var(--tl-color-success);
|
|
3200
3202
|
}
|
|
3201
3203
|
|
|
3202
3204
|
.tlui-toast__container[data-severity='info'] .tlui-icon {
|
|
3203
|
-
color: var(--color-info);
|
|
3205
|
+
color: var(--tl-color-info);
|
|
3204
3206
|
}
|
|
3205
3207
|
|
|
3206
3208
|
.tlui-toast__container[data-severity='warning'] .tlui-icon {
|
|
3207
|
-
color: var(--color-warning);
|
|
3209
|
+
color: var(--tl-color-warning);
|
|
3208
3210
|
}
|
|
3209
3211
|
|
|
3210
3212
|
.tlui-toast__container[data-severity='error'] .tlui-icon {
|
|
3211
|
-
color: var(--color-danger);
|
|
3213
|
+
color: var(--tl-color-danger);
|
|
3212
3214
|
}
|
|
3213
3215
|
|
|
3214
3216
|
.tlui-toast__main {
|
|
@@ -3217,27 +3219,27 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3217
3219
|
}
|
|
3218
3220
|
|
|
3219
3221
|
.tlui-toast__content {
|
|
3220
|
-
padding: var(--space-4);
|
|
3222
|
+
padding: var(--tl-space-4);
|
|
3221
3223
|
display: flex;
|
|
3222
3224
|
line-height: 1.4;
|
|
3223
3225
|
flex-direction: column;
|
|
3224
|
-
gap: var(--space-3);
|
|
3226
|
+
gap: var(--tl-space-3);
|
|
3225
3227
|
}
|
|
3226
3228
|
|
|
3227
3229
|
.tlui-toast__main[data-actions='true'] .tlui-toast__content {
|
|
3228
|
-
padding-bottom: var(--space-2);
|
|
3230
|
+
padding-bottom: var(--tl-space-2);
|
|
3229
3231
|
}
|
|
3230
3232
|
|
|
3231
3233
|
.tlui-toast__title {
|
|
3232
3234
|
font-weight: bold;
|
|
3233
|
-
color: var(--color-text-1);
|
|
3235
|
+
color: var(--tl-color-text-1);
|
|
3234
3236
|
/* this makes the default toast look better */
|
|
3235
3237
|
line-height: 16px;
|
|
3236
3238
|
}
|
|
3237
3239
|
|
|
3238
3240
|
.tlui-toast__description {
|
|
3239
|
-
color: var(--color-text-1);
|
|
3240
|
-
padding: var(--space-3);
|
|
3241
|
+
color: var(--tl-color-text-1);
|
|
3242
|
+
padding: var(--tl-space-3);
|
|
3241
3243
|
margin: 0px;
|
|
3242
3244
|
padding: 0px;
|
|
3243
3245
|
}
|
|
@@ -3289,14 +3291,14 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3289
3291
|
left: 0px;
|
|
3290
3292
|
width: 100%;
|
|
3291
3293
|
height: 100%;
|
|
3292
|
-
z-index: var(--layer-canvas-overlays);
|
|
3293
|
-
background-color: var(--color-overlay);
|
|
3294
|
+
z-index: var(--tl-layer-canvas-overlays);
|
|
3295
|
+
background-color: var(--tl-color-overlay);
|
|
3294
3296
|
pointer-events: all;
|
|
3295
3297
|
animation: tl-fade-in 0.12s ease-out;
|
|
3296
3298
|
display: grid;
|
|
3297
3299
|
place-items: center;
|
|
3298
3300
|
overflow-y: auto;
|
|
3299
|
-
padding: 0px var(--space-3);
|
|
3301
|
+
padding: 0px var(--tl-space-3);
|
|
3300
3302
|
}
|
|
3301
3303
|
|
|
3302
3304
|
.tlui-dialog__content {
|
|
@@ -3304,9 +3306,9 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3304
3306
|
flex-direction: column;
|
|
3305
3307
|
position: relative;
|
|
3306
3308
|
cursor: default;
|
|
3307
|
-
background-color: var(--color-panel);
|
|
3308
|
-
box-shadow: var(--shadow-3);
|
|
3309
|
-
border-radius: var(--radius-3);
|
|
3309
|
+
background-color: var(--tl-color-panel);
|
|
3310
|
+
box-shadow: var(--tl-shadow-3);
|
|
3311
|
+
border-radius: var(--tl-radius-3);
|
|
3310
3312
|
font-size: 12px;
|
|
3311
3313
|
overflow: hidden;
|
|
3312
3314
|
min-width: 300px;
|
|
@@ -3319,9 +3321,9 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3319
3321
|
display: flex;
|
|
3320
3322
|
align-items: center;
|
|
3321
3323
|
flex: 0;
|
|
3322
|
-
z-index: var(--layer-header-footer);
|
|
3323
|
-
padding-left: var(--space-4);
|
|
3324
|
-
color: var(--color-text);
|
|
3324
|
+
z-index: var(--tl-layer-header-footer);
|
|
3325
|
+
padding-left: var(--tl-space-4);
|
|
3326
|
+
color: var(--tl-color-text);
|
|
3325
3327
|
height: 40px;
|
|
3326
3328
|
}
|
|
3327
3329
|
|
|
@@ -3330,7 +3332,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3330
3332
|
font-weight: inherit;
|
|
3331
3333
|
font-size: 12px;
|
|
3332
3334
|
margin: 0px;
|
|
3333
|
-
color: var(--color-text-1);
|
|
3335
|
+
color: var(--tl-color-text-1);
|
|
3334
3336
|
}
|
|
3335
3337
|
|
|
3336
3338
|
.tlui-dialog__header__close {
|
|
@@ -3338,16 +3340,16 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3338
3340
|
}
|
|
3339
3341
|
|
|
3340
3342
|
.tlui-dialog__body {
|
|
3341
|
-
padding: var(--space-4) var(--space-4);
|
|
3343
|
+
padding: var(--tl-space-4) var(--tl-space-4);
|
|
3342
3344
|
flex: 0 1;
|
|
3343
3345
|
overflow-y: auto;
|
|
3344
3346
|
overflow-x: hidden;
|
|
3345
|
-
color: var(--color-text-1);
|
|
3347
|
+
color: var(--tl-color-text-1);
|
|
3346
3348
|
user-select: all;
|
|
3347
3349
|
-webkit-user-select: text;
|
|
3348
3350
|
}
|
|
3349
3351
|
.tlui-dialog__body a {
|
|
3350
|
-
color: var(--color-selected);
|
|
3352
|
+
color: var(--tl-color-selected);
|
|
3351
3353
|
}
|
|
3352
3354
|
|
|
3353
3355
|
.tlui-dialog__body ul,
|
|
@@ -3355,13 +3357,13 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3355
3357
|
padding-left: 16px;
|
|
3356
3358
|
display: flex;
|
|
3357
3359
|
flex-direction: column;
|
|
3358
|
-
gap: var(--space-2);
|
|
3360
|
+
gap: var(--tl-space-2);
|
|
3359
3361
|
}
|
|
3360
3362
|
|
|
3361
3363
|
.tlui-dialog__footer {
|
|
3362
3364
|
position: relative;
|
|
3363
3365
|
min-height: 12px;
|
|
3364
|
-
z-index: var(--layer-header-footer);
|
|
3366
|
+
z-index: var(--tl-layer-header-footer);
|
|
3365
3367
|
}
|
|
3366
3368
|
|
|
3367
3369
|
.tlui-dialog__footer__actions {
|
|
@@ -3381,15 +3383,15 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3381
3383
|
.tlui-edit-link-dialog {
|
|
3382
3384
|
display: flex;
|
|
3383
3385
|
flex-direction: column;
|
|
3384
|
-
gap: var(--space-4);
|
|
3385
|
-
color: var(--color-text);
|
|
3386
|
+
gap: var(--tl-space-4);
|
|
3387
|
+
color: var(--tl-color-text);
|
|
3386
3388
|
}
|
|
3387
3389
|
|
|
3388
3390
|
.tlui-edit-link-dialog__input {
|
|
3389
|
-
background-color: var(--color-muted-2);
|
|
3391
|
+
background-color: var(--tl-color-muted-2);
|
|
3390
3392
|
flex-grow: 2;
|
|
3391
|
-
border-radius: var(--radius-2);
|
|
3392
|
-
padding: 0px var(--space-4);
|
|
3393
|
+
border-radius: var(--tl-radius-2);
|
|
3394
|
+
padding: 0px var(--tl-space-4);
|
|
3393
3395
|
}
|
|
3394
3396
|
|
|
3395
3397
|
/* Embed Dialog */
|
|
@@ -3397,15 +3399,15 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3397
3399
|
.tlui-embed__spacer {
|
|
3398
3400
|
flex-grow: 2;
|
|
3399
3401
|
min-height: 0px;
|
|
3400
|
-
margin-left: calc(-1 * var(--space-4));
|
|
3401
|
-
margin-top: calc(-1 * var(--space-4));
|
|
3402
|
+
margin-left: calc(-1 * var(--tl-space-4));
|
|
3403
|
+
margin-top: calc(-1 * var(--tl-space-4));
|
|
3402
3404
|
pointer-events: none;
|
|
3403
3405
|
}
|
|
3404
3406
|
|
|
3405
3407
|
.tlui-embed-dialog__list {
|
|
3406
3408
|
display: flex;
|
|
3407
3409
|
flex-direction: column;
|
|
3408
|
-
padding: 0px var(--space-3) var(--space-4) var(--space-3);
|
|
3410
|
+
padding: 0px var(--tl-space-3) var(--tl-space-4) var(--tl-space-3);
|
|
3409
3411
|
}
|
|
3410
3412
|
|
|
3411
3413
|
.tlui-embed-dialog__item__image {
|
|
@@ -3417,49 +3419,49 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3417
3419
|
background-size: contain;
|
|
3418
3420
|
background-repeat: no-repeat;
|
|
3419
3421
|
background-position: center center;
|
|
3420
|
-
background-color: var(--color-selected-contrast);
|
|
3421
|
-
border-radius: var(--radius-1);
|
|
3422
|
+
background-color: var(--tl-color-selected-contrast);
|
|
3423
|
+
border-radius: var(--tl-radius-1);
|
|
3422
3424
|
}
|
|
3423
3425
|
|
|
3424
3426
|
.tlui-embed-dialog__enter {
|
|
3425
3427
|
display: flex;
|
|
3426
3428
|
flex-direction: column;
|
|
3427
|
-
gap: var(--space-4);
|
|
3428
|
-
color: var(--color-text-1);
|
|
3429
|
+
gap: var(--tl-space-4);
|
|
3430
|
+
color: var(--tl-color-text-1);
|
|
3429
3431
|
}
|
|
3430
3432
|
|
|
3431
3433
|
.tlui-embed-dialog__input {
|
|
3432
|
-
background-color: var(--color-muted-2);
|
|
3434
|
+
background-color: var(--tl-color-muted-2);
|
|
3433
3435
|
flex-grow: 2;
|
|
3434
|
-
border-radius: var(--radius-2);
|
|
3435
|
-
padding: 0px var(--space-4);
|
|
3436
|
+
border-radius: var(--tl-radius-2);
|
|
3437
|
+
padding: 0px var(--tl-space-4);
|
|
3436
3438
|
}
|
|
3437
3439
|
|
|
3438
3440
|
.tlui-embed-dialog__warning {
|
|
3439
|
-
color: var(--color-danger);
|
|
3441
|
+
color: var(--tl-color-danger);
|
|
3440
3442
|
text-shadow: none;
|
|
3441
3443
|
}
|
|
3442
3444
|
|
|
3443
3445
|
.tlui-embed-dialog__instruction__link {
|
|
3444
3446
|
display: flex;
|
|
3445
|
-
gap: var(--space-1);
|
|
3446
|
-
margin-top: var(--space-4);
|
|
3447
|
+
gap: var(--tl-space-1);
|
|
3448
|
+
margin-top: var(--tl-space-4);
|
|
3447
3449
|
}
|
|
3448
3450
|
|
|
3449
3451
|
.tlui-embed-dialog__enter a {
|
|
3450
|
-
color: var(--color-text-1);
|
|
3452
|
+
color: var(--tl-color-text-1);
|
|
3451
3453
|
}
|
|
3452
3454
|
|
|
3453
3455
|
/* --------------- Keyboard shortcuts --------------- */
|
|
3454
3456
|
|
|
3455
3457
|
.tlui-shortcuts-dialog__header {
|
|
3456
|
-
border-bottom: 1px solid var(--color-divider);
|
|
3458
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
3457
3459
|
}
|
|
3458
3460
|
|
|
3459
3461
|
.tlui-shortcuts-dialog__body {
|
|
3460
3462
|
position: relative;
|
|
3461
3463
|
columns: 3;
|
|
3462
|
-
column-gap: var(--space-9);
|
|
3464
|
+
column-gap: var(--tl-space-9);
|
|
3463
3465
|
pointer-events: all;
|
|
3464
3466
|
touch-action: auto;
|
|
3465
3467
|
|
|
@@ -3477,14 +3479,14 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3477
3479
|
|
|
3478
3480
|
.tlui-shortcuts-dialog__group {
|
|
3479
3481
|
break-inside: avoid-column;
|
|
3480
|
-
padding-bottom: var(--space-6);
|
|
3482
|
+
padding-bottom: var(--tl-space-6);
|
|
3481
3483
|
}
|
|
3482
3484
|
|
|
3483
3485
|
.tlui-shortcuts-dialog__group__title {
|
|
3484
3486
|
font-size: inherit;
|
|
3485
3487
|
font-weight: inherit;
|
|
3486
3488
|
margin: 0px;
|
|
3487
|
-
color: var(--color-text-3);
|
|
3489
|
+
color: var(--tl-color-text-3);
|
|
3488
3490
|
height: 32px;
|
|
3489
3491
|
display: flex;
|
|
3490
3492
|
align-items: center;
|
|
@@ -3493,12 +3495,12 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3493
3495
|
.tlui-shortcuts-dialog__group__content {
|
|
3494
3496
|
display: flex;
|
|
3495
3497
|
flex-direction: column;
|
|
3496
|
-
color: var(--color-text-1);
|
|
3498
|
+
color: var(--tl-color-text-1);
|
|
3497
3499
|
}
|
|
3498
3500
|
|
|
3499
3501
|
.tlui-shortcuts-dialog__key-pair {
|
|
3500
3502
|
display: flex;
|
|
3501
|
-
gap: var(--space-4);
|
|
3503
|
+
gap: var(--tl-space-4);
|
|
3502
3504
|
align-items: center;
|
|
3503
3505
|
justify-content: space-between;
|
|
3504
3506
|
height: 32px;
|
|
@@ -3525,12 +3527,12 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3525
3527
|
height: 24px;
|
|
3526
3528
|
background: linear-gradient(
|
|
3527
3529
|
to bottom,
|
|
3528
|
-
var(--color-panel-transparent) 0%,
|
|
3529
|
-
var(--color-panel) 90%,
|
|
3530
|
-
var(--color-panel) 100%
|
|
3530
|
+
var(--tl-color-panel-transparent) 0%,
|
|
3531
|
+
var(--tl-color-panel) 90%,
|
|
3532
|
+
var(--tl-color-panel) 100%
|
|
3531
3533
|
);
|
|
3532
|
-
border-bottom-left-radius: var(--radius-3);
|
|
3533
|
-
border-bottom-right-radius: var(--radius-3);
|
|
3534
|
+
border-bottom-left-radius: var(--tl-radius-3);
|
|
3535
|
+
border-bottom-right-radius: var(--tl-radius-3);
|
|
3534
3536
|
pointer-events: none;
|
|
3535
3537
|
}
|
|
3536
3538
|
|
|
@@ -3545,10 +3547,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3545
3547
|
.tlui-help-menu {
|
|
3546
3548
|
pointer-events: all;
|
|
3547
3549
|
position: absolute;
|
|
3548
|
-
bottom: var(--space-2);
|
|
3549
|
-
right: var(--space-2);
|
|
3550
|
-
z-index: var(--layer-panels);
|
|
3551
|
-
border: 2px solid var(--color-background);
|
|
3550
|
+
bottom: var(--tl-space-2);
|
|
3551
|
+
right: var(--tl-space-2);
|
|
3552
|
+
z-index: var(--tl-layer-panels);
|
|
3553
|
+
border: 2px solid var(--tl-color-background);
|
|
3552
3554
|
border-radius: 100%;
|
|
3553
3555
|
}
|
|
3554
3556
|
|
|
@@ -3559,7 +3561,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3559
3561
|
display: flex;
|
|
3560
3562
|
flex-direction: row;
|
|
3561
3563
|
justify-content: flex-end;
|
|
3562
|
-
z-index: var(--layer-panels);
|
|
3564
|
+
z-index: var(--tl-layer-panels);
|
|
3563
3565
|
align-items: center;
|
|
3564
3566
|
padding-top: 2px;
|
|
3565
3567
|
padding-right: 4px;
|
|
@@ -3575,7 +3577,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3575
3577
|
border: none;
|
|
3576
3578
|
cursor: pointer;
|
|
3577
3579
|
pointer-events: all;
|
|
3578
|
-
border-radius: var(--radius-1);
|
|
3580
|
+
border-radius: var(--tl-radius-1);
|
|
3579
3581
|
padding-right: 1px;
|
|
3580
3582
|
height: 100%;
|
|
3581
3583
|
}
|
|
@@ -3588,8 +3590,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3588
3590
|
.tlui-people-menu__avatar {
|
|
3589
3591
|
height: 24px;
|
|
3590
3592
|
width: 24px;
|
|
3591
|
-
border: 2px solid var(--color-background);
|
|
3592
|
-
background-color: var(--color-low);
|
|
3593
|
+
border: 2px solid var(--tl-color-background);
|
|
3594
|
+
background-color: var(--tl-color-low);
|
|
3593
3595
|
border-radius: 100%;
|
|
3594
3596
|
display: flex;
|
|
3595
3597
|
align-items: center;
|
|
@@ -3598,7 +3600,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3598
3600
|
font-size: 10px;
|
|
3599
3601
|
font-weight: bold;
|
|
3600
3602
|
text-align: center;
|
|
3601
|
-
color: var(--color-selected-contrast);
|
|
3603
|
+
color: var(--tl-color-selected-contrast);
|
|
3602
3604
|
z-index: 2;
|
|
3603
3605
|
}
|
|
3604
3606
|
|
|
@@ -3612,7 +3614,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3612
3614
|
|
|
3613
3615
|
@media (hover: hover) {
|
|
3614
3616
|
.tlui-people-menu__avatars-button:hover .tlui-people-menu__avatar {
|
|
3615
|
-
border-color: var(--color-low);
|
|
3617
|
+
border-color: var(--tl-color-low);
|
|
3616
3618
|
}
|
|
3617
3619
|
}
|
|
3618
3620
|
|
|
@@ -3620,12 +3622,12 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3620
3622
|
min-width: 0px;
|
|
3621
3623
|
font-size: 11px;
|
|
3622
3624
|
font-weight: 600;
|
|
3623
|
-
color: var(--color-text-1);
|
|
3625
|
+
color: var(--tl-color-text-1);
|
|
3624
3626
|
font-family: inherit;
|
|
3625
3627
|
padding: 0px 4px;
|
|
3626
3628
|
}
|
|
3627
3629
|
.tlui-people-menu__more::after {
|
|
3628
|
-
border-radius: var(--radius-2);
|
|
3630
|
+
border-radius: var(--tl-radius-2);
|
|
3629
3631
|
inset: 0px;
|
|
3630
3632
|
}
|
|
3631
3633
|
|
|
@@ -3654,7 +3656,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3654
3656
|
}
|
|
3655
3657
|
|
|
3656
3658
|
.tlui-people-menu__section:not(:last-child) {
|
|
3657
|
-
border-bottom: 1px solid var(--color-divider);
|
|
3659
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
3658
3660
|
}
|
|
3659
3661
|
|
|
3660
3662
|
.tlui-people-menu__user {
|
|
@@ -3673,7 +3675,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3673
3675
|
text-overflow: ellipsis;
|
|
3674
3676
|
white-space: nowrap;
|
|
3675
3677
|
font-size: 12px;
|
|
3676
|
-
color: var(--color-text-1);
|
|
3678
|
+
color: var(--tl-color-text-1);
|
|
3677
3679
|
max-width: 100%;
|
|
3678
3680
|
flex-grow: 1;
|
|
3679
3681
|
flex-shrink: 100;
|
|
@@ -3685,7 +3687,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3685
3687
|
text-overflow: ellipsis;
|
|
3686
3688
|
white-space: nowrap;
|
|
3687
3689
|
font-size: 12px;
|
|
3688
|
-
color: var(--color-text-3);
|
|
3690
|
+
color: var(--tl-color-text-3);
|
|
3689
3691
|
flex-grow: 100;
|
|
3690
3692
|
flex-shrink: 0;
|
|
3691
3693
|
margin-left: 4px;
|
|
@@ -3776,7 +3778,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3776
3778
|
inset: 0px;
|
|
3777
3779
|
border-width: 2px;
|
|
3778
3780
|
border-style: solid;
|
|
3779
|
-
z-index: var(--layer-following-indicator);
|
|
3781
|
+
z-index: var(--tl-layer-following-indicator);
|
|
3780
3782
|
pointer-events: none;
|
|
3781
3783
|
}
|
|
3782
3784
|
|
|
@@ -3795,7 +3797,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3795
3797
|
}
|
|
3796
3798
|
|
|
3797
3799
|
.tlui-contextual-toolbar [data-isactive='true']::after {
|
|
3798
|
-
background-color: var(--color-muted-2);
|
|
3800
|
+
background-color: var(--tl-color-muted-2);
|
|
3799
3801
|
opacity: 1;
|
|
3800
3802
|
}
|
|
3801
3803
|
|
|
@@ -3811,7 +3813,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3811
3813
|
|
|
3812
3814
|
.tlui-contextual-toolbar[data-visible='true'] {
|
|
3813
3815
|
opacity: 1;
|
|
3814
|
-
z-index: var(--layer-menus);
|
|
3816
|
+
z-index: var(--tl-layer-menus);
|
|
3815
3817
|
}
|
|
3816
3818
|
|
|
3817
3819
|
.tlui-contextual-toolbar[data-interactive='true'],
|
|
@@ -3870,7 +3872,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3870
3872
|
|
|
3871
3873
|
@keyframes tlui-slide-in {
|
|
3872
3874
|
from {
|
|
3873
|
-
transform: translateX(calc(100% + var(--space-3)));
|
|
3875
|
+
transform: translateX(calc(100% + var(--tl-space-3)));
|
|
3874
3876
|
}
|
|
3875
3877
|
to {
|
|
3876
3878
|
transform: translateX(0px);
|
|
@@ -3882,7 +3884,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3882
3884
|
transform: translateX(var(--radix-toast-swipe-end-x));
|
|
3883
3885
|
}
|
|
3884
3886
|
to {
|
|
3885
|
-
transform: translateX(calc(100% + var(--space-3)));
|
|
3887
|
+
transform: translateX(calc(100% + var(--tl-space-3)));
|
|
3886
3888
|
}
|
|
3887
3889
|
}
|
|
3888
3890
|
|