tldraw 3.16.0-canary.da3348c13973 → 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 +43 -4
- package/dist-cjs/index.js +4 -1
- package/dist-cjs/index.js.map +2 -2
- 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/ArrowShapeUtil.js +3 -3
- package/dist-cjs/lib/shapes/arrow/ArrowShapeUtil.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/draw/DrawShapeUtil.js +3 -3
- package/dist-cjs/lib/shapes/draw/DrawShapeUtil.js.map +2 -2
- 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 +12 -12
- 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/geo/GeoShapeUtil.js +2 -2
- package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/geo/components/GeoShapeBody.js +2 -1
- package/dist-cjs/lib/shapes/geo/components/GeoShapeBody.js.map +2 -2
- package/dist-cjs/lib/shapes/highlight/HighlightShapeUtil.js +5 -1
- package/dist-cjs/lib/shapes/highlight/HighlightShapeUtil.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/line/LineShapeUtil.js +5 -1
- package/dist-cjs/lib/shapes/line/LineShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/note/NoteShapeUtil.js +4 -4
- package/dist-cjs/lib/shapes/note/NoteShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/ShapeFill.js +5 -5
- package/dist-cjs/lib/shapes/shared/ShapeFill.js.map +2 -2
- package/dist-cjs/lib/shapes/text/TextShapeUtil.js +2 -2
- package/dist-cjs/lib/shapes/text/TextShapeUtil.js.map +2 -2
- 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/TldrawUi.js +14 -0
- package/dist-cjs/lib/ui/TldrawUi.js.map +3 -3
- package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenu.js +10 -2
- package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenu.js.map +2 -2
- 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 +5 -3
- 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/Toolbar/DefaultToolbar.js +66 -22
- package/dist-cjs/lib/ui/components/Toolbar/DefaultToolbar.js.map +3 -3
- package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js +188 -78
- package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js.map +3 -3
- package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js +1 -1
- package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js +15 -3
- package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js +127 -158
- package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/layout.js +30 -5
- package/dist-cjs/lib/ui/components/primitives/layout.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 +25 -12
- 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 +43 -4
- package/dist-esm/index.mjs +8 -2
- package/dist-esm/index.mjs.map +2 -2
- 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/ArrowShapeUtil.mjs +4 -3
- package/dist-esm/lib/shapes/arrow/ArrowShapeUtil.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/draw/DrawShapeUtil.mjs +4 -3
- package/dist-esm/lib/shapes/draw/DrawShapeUtil.mjs.map +2 -2
- 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 +13 -12
- 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/geo/GeoShapeUtil.mjs +3 -2
- package/dist-esm/lib/shapes/geo/GeoShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/geo/components/GeoShapeBody.mjs +2 -1
- package/dist-esm/lib/shapes/geo/components/GeoShapeBody.mjs.map +2 -2
- package/dist-esm/lib/shapes/highlight/HighlightShapeUtil.mjs +6 -1
- package/dist-esm/lib/shapes/highlight/HighlightShapeUtil.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/line/LineShapeUtil.mjs +6 -1
- package/dist-esm/lib/shapes/line/LineShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs +5 -4
- package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/ShapeFill.mjs +6 -5
- package/dist-esm/lib/shapes/shared/ShapeFill.mjs.map +2 -2
- package/dist-esm/lib/shapes/text/TextShapeUtil.mjs +3 -2
- package/dist-esm/lib/shapes/text/TextShapeUtil.mjs.map +2 -2
- 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/TldrawUi.mjs +16 -2
- package/dist-esm/lib/ui/TldrawUi.mjs.map +3 -3
- package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenu.mjs +10 -2
- package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenu.mjs.map +2 -2
- 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 +6 -3
- 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/Toolbar/DefaultToolbar.mjs +56 -22
- package/dist-esm/lib/ui/components/Toolbar/DefaultToolbar.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs +192 -80
- package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs.map +3 -3
- package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs +2 -1
- package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs +16 -4
- package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs +136 -160
- package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/layout.mjs +31 -6
- package/dist-esm/lib/ui/components/primitives/layout.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 +25 -12
- 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/index.ts +5 -0
- package/src/lib/canvas/TldrawScribble.tsx +1 -1
- package/src/lib/shapes/arrow/ArrowShapeUtil.tsx +4 -3
- package/src/lib/shapes/arrow/elbow/ElbowArrowDebug.tsx +3 -3
- package/src/lib/shapes/draw/DrawShapeUtil.tsx +4 -3
- package/src/lib/shapes/embed/EmbedShapeUtil.tsx +1 -1
- package/src/lib/shapes/frame/FrameShapeUtil.tsx +21 -14
- package/src/lib/shapes/frame/components/FrameHeading.tsx +1 -1
- package/src/lib/shapes/geo/GeoShapeUtil.tsx +3 -2
- package/src/lib/shapes/geo/components/GeoShapeBody.tsx +2 -2
- package/src/lib/shapes/highlight/HighlightShapeUtil.tsx +7 -1
- package/src/lib/shapes/image/ImageShapeUtil.tsx +3 -3
- package/src/lib/shapes/line/LineShapeUtil.tsx +6 -1
- package/src/lib/shapes/note/NoteShapeUtil.tsx +9 -4
- package/src/lib/shapes/shared/ShapeFill.tsx +6 -5
- package/src/lib/shapes/text/TextShapeUtil.tsx +3 -2
- package/src/lib/shapes/video/VideoShapeUtil.tsx +3 -3
- package/src/lib/ui/TldrawUi.tsx +17 -2
- package/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx +13 -2
- package/src/lib/ui/components/Minimap/MinimapManager.ts +4 -4
- package/src/lib/ui/components/MobileStylePanel.tsx +9 -6
- package/src/lib/ui/components/Toolbar/DefaultImageToolbarContent.tsx +1 -1
- package/src/lib/ui/components/Toolbar/DefaultToolbar.tsx +55 -24
- package/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx +208 -56
- package/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx +3 -2
- package/src/lib/ui/components/primitives/TldrawUiToolbar.tsx +22 -5
- package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx +145 -176
- package/src/lib/ui/components/primitives/layout.tsx +79 -5
- package/src/lib/ui/components/primitives/menus/TldrawUiMenuContext.tsx +0 -1
- package/src/lib/ui/components/primitives/menus/TldrawUiMenuGroup.tsx +29 -16
- 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 +346 -243
- package/tldraw.css +639 -533
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 {
|
|
@@ -1983,13 +1986,21 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1983
1986
|
|
|
1984
1987
|
.tlui-main-toolbar__lock-button {
|
|
1985
1988
|
position: absolute;
|
|
1986
|
-
top: 4px;
|
|
1987
|
-
right: 0px;
|
|
1988
1989
|
pointer-events: all;
|
|
1989
1990
|
height: 40px;
|
|
1990
1991
|
width: 40px;
|
|
1992
|
+
border-radius: var(--tl-radius-2);
|
|
1993
|
+
}
|
|
1994
|
+
|
|
1995
|
+
.tlui-main-toolbar--horizontal .tlui-main-toolbar__lock-button {
|
|
1996
|
+
top: 4px;
|
|
1997
|
+
right: 0px;
|
|
1991
1998
|
min-width: 0px;
|
|
1992
|
-
|
|
1999
|
+
}
|
|
2000
|
+
|
|
2001
|
+
.tlui-main-toolbar--vertical .tlui-main-toolbar__lock-button {
|
|
2002
|
+
bottom: 0px;
|
|
2003
|
+
min-height: 0px;
|
|
1993
2004
|
}
|
|
1994
2005
|
|
|
1995
2006
|
.tlui-main-toolbar__lock-button::after {
|
|
@@ -2012,24 +2023,24 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2012
2023
|
}
|
|
2013
2024
|
|
|
2014
2025
|
.tlui-button__tool[aria-pressed='true'] {
|
|
2015
|
-
color: var(--color-selected-contrast);
|
|
2026
|
+
color: var(--tl-color-selected-contrast);
|
|
2016
2027
|
}
|
|
2017
2028
|
|
|
2018
2029
|
.tlui-button__tool[aria-pressed='true']:not(:disabled, :focus-visible):active {
|
|
2019
|
-
color: var(--color-selected-contrast);
|
|
2030
|
+
color: var(--tl-color-selected-contrast);
|
|
2020
2031
|
}
|
|
2021
2032
|
|
|
2022
2033
|
.tlui-button__tool[aria-pressed='true']:not(:disabled)::after {
|
|
2023
|
-
background: var(--color-selected);
|
|
2034
|
+
background: var(--tl-color-selected);
|
|
2024
2035
|
opacity: 1;
|
|
2025
2036
|
}
|
|
2026
2037
|
|
|
2027
|
-
.tlui-layout__mobile .tlui-button__tool {
|
|
2038
|
+
.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-button__tool {
|
|
2028
2039
|
height: 48px;
|
|
2029
2040
|
width: 43px;
|
|
2030
2041
|
}
|
|
2031
2042
|
|
|
2032
|
-
.tlui-layout__mobile .tlui-button__tool > .tlui-icon {
|
|
2043
|
+
.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-button__tool > .tlui-icon {
|
|
2033
2044
|
height: 16px;
|
|
2034
2045
|
width: 16px;
|
|
2035
2046
|
}
|
|
@@ -2046,6 +2057,18 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2046
2057
|
margin-right: -2px;
|
|
2047
2058
|
}
|
|
2048
2059
|
|
|
2060
|
+
/* Column layout */
|
|
2061
|
+
|
|
2062
|
+
.tlui-column {
|
|
2063
|
+
display: flex;
|
|
2064
|
+
flex-direction: column;
|
|
2065
|
+
padding: 2px 0;
|
|
2066
|
+
}
|
|
2067
|
+
.tlui-column > * {
|
|
2068
|
+
margin-top: -2px;
|
|
2069
|
+
margin-bottom: -2px;
|
|
2070
|
+
}
|
|
2071
|
+
|
|
2049
2072
|
/* Grid layout */
|
|
2050
2073
|
|
|
2051
2074
|
.tlui-grid {
|
|
@@ -2081,9 +2104,9 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2081
2104
|
pointer-events: none;
|
|
2082
2105
|
user-select: none;
|
|
2083
2106
|
contain: strict;
|
|
2084
|
-
z-index: var(--layer-panels);
|
|
2107
|
+
z-index: var(--tl-layer-panels);
|
|
2085
2108
|
transform: translate3d(0, 0, 0);
|
|
2086
|
-
--sab: env(safe-area-inset-bottom);
|
|
2109
|
+
--tl-sab: env(safe-area-inset-bottom);
|
|
2087
2110
|
font-weight: 500;
|
|
2088
2111
|
line-height: 1.6;
|
|
2089
2112
|
-webkit-font-smoothing: antialiased;
|
|
@@ -2136,11 +2159,11 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2136
2159
|
justify-content: flex-start;
|
|
2137
2160
|
align-items: flex-start;
|
|
2138
2161
|
width: min-content;
|
|
2139
|
-
gap: var(--space-3);
|
|
2140
|
-
margin: var(--space-2) var(--space-3);
|
|
2162
|
+
gap: var(--tl-space-3);
|
|
2163
|
+
margin: var(--tl-space-2) var(--tl-space-3);
|
|
2141
2164
|
white-space: nowrap;
|
|
2142
2165
|
pointer-events: none;
|
|
2143
|
-
z-index: var(--layer-panels);
|
|
2166
|
+
z-index: var(--tl-layer-panels);
|
|
2144
2167
|
}
|
|
2145
2168
|
|
|
2146
2169
|
/* ---------------------- Icon ---------------------- */
|
|
@@ -2168,7 +2191,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2168
2191
|
|
|
2169
2192
|
.tlui-slider__container {
|
|
2170
2193
|
width: 100%;
|
|
2171
|
-
padding: 0px var(--space-4);
|
|
2194
|
+
padding: 0px var(--tl-space-4);
|
|
2172
2195
|
}
|
|
2173
2196
|
|
|
2174
2197
|
.tlui-slider {
|
|
@@ -2194,7 +2217,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2194
2217
|
content: '';
|
|
2195
2218
|
height: 3px;
|
|
2196
2219
|
width: 100%;
|
|
2197
|
-
background-color: var(--color-muted-1);
|
|
2220
|
+
background-color: var(--tl-color-muted-1);
|
|
2198
2221
|
border-radius: 14px;
|
|
2199
2222
|
}
|
|
2200
2223
|
|
|
@@ -2203,7 +2226,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2203
2226
|
top: calc(50% - 2px);
|
|
2204
2227
|
left: 0px;
|
|
2205
2228
|
height: 3px;
|
|
2206
|
-
background-color: var(--color-selected);
|
|
2229
|
+
background-color: var(--tl-color-selected);
|
|
2207
2230
|
border-radius: 14px;
|
|
2208
2231
|
}
|
|
2209
2232
|
|
|
@@ -2215,16 +2238,16 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2215
2238
|
height: 18px;
|
|
2216
2239
|
position: relative;
|
|
2217
2240
|
top: -1px;
|
|
2218
|
-
background-color: var(--color-panel);
|
|
2241
|
+
background-color: var(--tl-color-panel);
|
|
2219
2242
|
border-radius: 999px;
|
|
2220
|
-
box-shadow: inset 0px 0px 0px 2px var(--color-text-1);
|
|
2243
|
+
box-shadow: inset 0px 0px 0px 2px var(--tl-color-text-1);
|
|
2221
2244
|
}
|
|
2222
2245
|
|
|
2223
2246
|
.tlui-slider__thumb:active {
|
|
2224
2247
|
cursor: grabbing;
|
|
2225
2248
|
box-shadow:
|
|
2226
|
-
inset 0px 0px 0px 2px var(--color-text-1),
|
|
2227
|
-
var(--shadow-1);
|
|
2249
|
+
inset 0px 0px 0px 2px var(--tl-color-text-1),
|
|
2250
|
+
var(--tl-shadow-1);
|
|
2228
2251
|
}
|
|
2229
2252
|
|
|
2230
2253
|
/* ---------------------- Input --------------------- */
|
|
@@ -2233,7 +2256,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2233
2256
|
background: none;
|
|
2234
2257
|
margin: 0px;
|
|
2235
2258
|
position: relative;
|
|
2236
|
-
z-index: var(--layer-above);
|
|
2259
|
+
z-index: var(--tl-layer-above);
|
|
2237
2260
|
height: 40px;
|
|
2238
2261
|
max-height: 40px;
|
|
2239
2262
|
display: flex;
|
|
@@ -2242,8 +2265,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2242
2265
|
font-family: inherit;
|
|
2243
2266
|
font-size: 12px;
|
|
2244
2267
|
font-weight: inherit;
|
|
2245
|
-
color: var(--color-text-1);
|
|
2246
|
-
padding: var(--space-4);
|
|
2268
|
+
color: var(--tl-color-text-1);
|
|
2269
|
+
padding: var(--tl-space-4);
|
|
2247
2270
|
padding-left: 0px;
|
|
2248
2271
|
border: none;
|
|
2249
2272
|
outline: none;
|
|
@@ -2259,8 +2282,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2259
2282
|
height: 44px;
|
|
2260
2283
|
display: flex;
|
|
2261
2284
|
align-items: center;
|
|
2262
|
-
gap: var(--space-4);
|
|
2263
|
-
color: var(--color-text);
|
|
2285
|
+
gap: var(--tl-space-4);
|
|
2286
|
+
color: var(--tl-color-text);
|
|
2264
2287
|
}
|
|
2265
2288
|
|
|
2266
2289
|
.tlui-input__wrapper > .tlui-icon {
|
|
@@ -2292,7 +2315,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2292
2315
|
grid-auto-columns: minmax(1em, auto);
|
|
2293
2316
|
align-self: bottom;
|
|
2294
2317
|
color: currentColor;
|
|
2295
|
-
margin-left: var(--space-4);
|
|
2318
|
+
margin-left: var(--tl-space-4);
|
|
2296
2319
|
}
|
|
2297
2320
|
|
|
2298
2321
|
.tlui-kbd > span {
|
|
@@ -2309,13 +2332,13 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2309
2332
|
}
|
|
2310
2333
|
|
|
2311
2334
|
.tlui-kbd:not(:last-child) {
|
|
2312
|
-
margin-right: var(--space-2);
|
|
2335
|
+
margin-right: var(--tl-space-2);
|
|
2313
2336
|
}
|
|
2314
2337
|
|
|
2315
2338
|
/* Focus Mode Button */
|
|
2316
2339
|
|
|
2317
2340
|
.tlui-focus-button {
|
|
2318
|
-
z-index: var(--layer-panels);
|
|
2341
|
+
z-index: var(--tl-layer-panels);
|
|
2319
2342
|
pointer-events: all;
|
|
2320
2343
|
}
|
|
2321
2344
|
|
|
@@ -2326,16 +2349,16 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2326
2349
|
}
|
|
2327
2350
|
|
|
2328
2351
|
.tlui-menu {
|
|
2329
|
-
z-index: var(--layer-menus);
|
|
2352
|
+
z-index: var(--tl-layer-menus);
|
|
2330
2353
|
height: fit-content;
|
|
2331
2354
|
width: fit-content;
|
|
2332
|
-
border-radius: var(--radius-3);
|
|
2355
|
+
border-radius: var(--tl-radius-3);
|
|
2333
2356
|
pointer-events: all;
|
|
2334
2357
|
touch-action: auto;
|
|
2335
2358
|
overflow-y: auto;
|
|
2336
2359
|
overscroll-behavior: none;
|
|
2337
|
-
background-color: var(--color-panel);
|
|
2338
|
-
box-shadow: var(--shadow-3);
|
|
2360
|
+
background-color: var(--tl-color-panel);
|
|
2361
|
+
box-shadow: var(--tl-shadow-3);
|
|
2339
2362
|
}
|
|
2340
2363
|
|
|
2341
2364
|
.tlui-menu::-webkit-scrollbar {
|
|
@@ -2353,7 +2376,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2353
2376
|
}
|
|
2354
2377
|
|
|
2355
2378
|
.tlui-menu__group {
|
|
2356
|
-
border-bottom: 1px solid var(--color-divider);
|
|
2379
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
2357
2380
|
}
|
|
2358
2381
|
.tlui-menu__group:nth-last-of-type(1) {
|
|
2359
2382
|
border-bottom: none;
|
|
@@ -2363,23 +2386,23 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2363
2386
|
|
|
2364
2387
|
.tlui-menu__submenu__trigger[data-state='open']::after {
|
|
2365
2388
|
opacity: 1;
|
|
2366
|
-
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%);
|
|
2367
2390
|
}
|
|
2368
2391
|
|
|
2369
2392
|
.tlui-menu__submenu__trigger[data-direction='left'][data-state='open']::after {
|
|
2370
2393
|
opacity: 1;
|
|
2371
|
-
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%);
|
|
2372
2395
|
}
|
|
2373
2396
|
|
|
2374
2397
|
@media (hover: hover) {
|
|
2375
2398
|
.tlui-menu__submenu__trigger[data-state='open']:not(:hover)::after {
|
|
2376
2399
|
opacity: 1;
|
|
2377
|
-
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%);
|
|
2378
2401
|
}
|
|
2379
2402
|
|
|
2380
2403
|
.tlui-menu__submenu__trigger[data-direction='left'][data-state='open']:not(:hover)::after {
|
|
2381
2404
|
opacity: 1;
|
|
2382
|
-
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%);
|
|
2383
2406
|
}
|
|
2384
2407
|
}
|
|
2385
2408
|
|
|
@@ -2404,7 +2427,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2404
2427
|
.tlui-menu-click-capture {
|
|
2405
2428
|
position: fixed;
|
|
2406
2429
|
inset: 0;
|
|
2407
|
-
z-index: var(--layer-menu-click-capture);
|
|
2430
|
+
z-index: var(--tl-layer-menu-click-capture);
|
|
2408
2431
|
}
|
|
2409
2432
|
|
|
2410
2433
|
/* --------------------- Popover -------------------- */
|
|
@@ -2420,10 +2443,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2420
2443
|
max-height: calc(var(--radix-popover-content-available-height) - 8px);
|
|
2421
2444
|
margin: 0px;
|
|
2422
2445
|
border: none;
|
|
2423
|
-
border-radius: var(--radius-3);
|
|
2424
|
-
background-color: var(--color-panel);
|
|
2425
|
-
box-shadow: var(--shadow-3);
|
|
2426
|
-
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);
|
|
2427
2450
|
overflow: hidden;
|
|
2428
2451
|
overflow-y: auto;
|
|
2429
2452
|
touch-action: auto;
|
|
@@ -2436,22 +2459,22 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2436
2459
|
|
|
2437
2460
|
.tlui-menu-zone {
|
|
2438
2461
|
position: relative;
|
|
2439
|
-
z-index: var(--layer-panels);
|
|
2462
|
+
z-index: var(--tl-layer-panels);
|
|
2440
2463
|
width: fit-content;
|
|
2441
|
-
border-right: 2px solid var(--color-background);
|
|
2442
|
-
border-bottom: 2px solid var(--color-background);
|
|
2443
|
-
border-bottom-right-radius: var(--radius-4);
|
|
2444
|
-
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);
|
|
2445
2468
|
}
|
|
2446
2469
|
|
|
2447
2470
|
.tlui-menu-zone *[data-state='open']::after {
|
|
2448
|
-
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%);
|
|
2449
2472
|
opacity: 1;
|
|
2450
2473
|
}
|
|
2451
2474
|
|
|
2452
2475
|
@media (hover: hover) {
|
|
2453
2476
|
.tlui-menu-zone *[data-state='open']:not(:hover)::after {
|
|
2454
|
-
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%);
|
|
2455
2478
|
opacity: 1;
|
|
2456
2479
|
}
|
|
2457
2480
|
}
|
|
@@ -2477,8 +2500,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2477
2500
|
align-items: center;
|
|
2478
2501
|
width: 100%;
|
|
2479
2502
|
height: 40px;
|
|
2480
|
-
padding-left: var(--space-4);
|
|
2481
|
-
border-bottom: 1px solid var(--color-divider);
|
|
2503
|
+
padding-left: var(--tl-space-4);
|
|
2504
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
2482
2505
|
}
|
|
2483
2506
|
|
|
2484
2507
|
.tlui-page-menu__header > .tlui-button:nth-of-type(1) {
|
|
@@ -2486,7 +2509,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2486
2509
|
}
|
|
2487
2510
|
|
|
2488
2511
|
.tlui-page-menu__header__title {
|
|
2489
|
-
color: var(--color-text);
|
|
2512
|
+
color: var(--tl-color-text);
|
|
2490
2513
|
font-size: 12px;
|
|
2491
2514
|
flex-grow: 2;
|
|
2492
2515
|
}
|
|
@@ -2571,7 +2594,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2571
2594
|
display: inline-flex;
|
|
2572
2595
|
align-items: center;
|
|
2573
2596
|
justify-content: center;
|
|
2574
|
-
color: var(--color-text);
|
|
2597
|
+
color: var(--tl-color-text);
|
|
2575
2598
|
}
|
|
2576
2599
|
|
|
2577
2600
|
.tlui-page_menu__item__sortable {
|
|
@@ -2584,7 +2607,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2584
2607
|
flex-direction: row;
|
|
2585
2608
|
align-items: center;
|
|
2586
2609
|
overflow: hidden;
|
|
2587
|
-
z-index: var(--layer-above);
|
|
2610
|
+
z-index: var(--tl-layer-above);
|
|
2588
2611
|
}
|
|
2589
2612
|
|
|
2590
2613
|
.tlui-page_menu__item__sortable__title {
|
|
@@ -2596,7 +2619,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2596
2619
|
}
|
|
2597
2620
|
|
|
2598
2621
|
.tlui-page_menu__item__sortable:focus-visible {
|
|
2599
|
-
z-index: var(--layer-focused-input);
|
|
2622
|
+
z-index: var(--tl-layer-focused-input);
|
|
2600
2623
|
}
|
|
2601
2624
|
|
|
2602
2625
|
.tlui-page_menu__item__sortable__handle {
|
|
@@ -2605,7 +2628,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2605
2628
|
min-width: 0px;
|
|
2606
2629
|
height: 40px;
|
|
2607
2630
|
cursor: grab;
|
|
2608
|
-
color: var(--color-text-3);
|
|
2631
|
+
color: var(--tl-color-text-3);
|
|
2609
2632
|
flex-shrink: 0;
|
|
2610
2633
|
margin-right: -9px;
|
|
2611
2634
|
}
|
|
@@ -2647,13 +2670,13 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2647
2670
|
}
|
|
2648
2671
|
|
|
2649
2672
|
.tlui-page_menu__item__submenu > .tlui-button[data-state='open']::after {
|
|
2650
|
-
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%);
|
|
2651
2674
|
opacity: 1;
|
|
2652
2675
|
}
|
|
2653
2676
|
|
|
2654
2677
|
@media (hover: hover) {
|
|
2655
2678
|
.tlui-page_menu__item__submenu > .tlui-button[data-state='open']:not(:hover)::after {
|
|
2656
|
-
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%);
|
|
2657
2680
|
opacity: 1;
|
|
2658
2681
|
}
|
|
2659
2682
|
}
|
|
@@ -2689,7 +2712,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2689
2712
|
top: 48px;
|
|
2690
2713
|
left: -9999px;
|
|
2691
2714
|
padding: 8px 16px;
|
|
2692
|
-
z-index: var(--layer-toasts);
|
|
2715
|
+
z-index: var(--tl-layer-toasts);
|
|
2693
2716
|
}
|
|
2694
2717
|
|
|
2695
2718
|
.tl-skip-to-main-content:focus {
|
|
@@ -2701,11 +2724,11 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2701
2724
|
.tlui-offline-indicator {
|
|
2702
2725
|
display: flex;
|
|
2703
2726
|
flex-direction: row;
|
|
2704
|
-
gap: var(--space-3);
|
|
2705
|
-
color: var(--color-text);
|
|
2706
|
-
background-color: var(--color-low);
|
|
2707
|
-
border: 3px solid var(--color-background);
|
|
2708
|
-
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);
|
|
2709
2732
|
height: 42px;
|
|
2710
2733
|
align-items: center;
|
|
2711
2734
|
justify-content: center;
|
|
@@ -2720,10 +2743,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2720
2743
|
/* ------------------- Style panel ------------------ */
|
|
2721
2744
|
|
|
2722
2745
|
.tlui-style-panel__wrapper {
|
|
2723
|
-
box-shadow: var(--shadow-2);
|
|
2724
|
-
border-radius: var(--radius-3);
|
|
2746
|
+
box-shadow: var(--tl-shadow-2);
|
|
2747
|
+
border-radius: var(--tl-radius-3);
|
|
2725
2748
|
pointer-events: all;
|
|
2726
|
-
background-color: var(--color-panel);
|
|
2749
|
+
background-color: var(--tl-color-panel);
|
|
2727
2750
|
height: fit-content;
|
|
2728
2751
|
max-height: 100%;
|
|
2729
2752
|
margin: 8px;
|
|
@@ -2732,7 +2755,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2732
2755
|
overscroll-behavior: none;
|
|
2733
2756
|
overflow-y: auto;
|
|
2734
2757
|
overflow-x: hidden;
|
|
2735
|
-
color: var(--color-text);
|
|
2758
|
+
color: var(--tl-color-text);
|
|
2736
2759
|
}
|
|
2737
2760
|
/* if the style panel is the only child (ie no share menu), increase the margin */
|
|
2738
2761
|
.tlui-style-panel__wrapper:only-child {
|
|
@@ -2741,7 +2764,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2741
2764
|
|
|
2742
2765
|
.tlui-style-panel {
|
|
2743
2766
|
position: relative;
|
|
2744
|
-
z-index: var(--layer-panels);
|
|
2767
|
+
z-index: var(--tl-layer-panels);
|
|
2745
2768
|
pointer-events: all;
|
|
2746
2769
|
width: 148px;
|
|
2747
2770
|
max-width: 148px;
|
|
@@ -2749,7 +2772,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2749
2772
|
|
|
2750
2773
|
.tlui-style-panel[data-show-ui-labels='true'] .tlui-button[data-isactive='true'] {
|
|
2751
2774
|
border-radius: 10px;
|
|
2752
|
-
outline: 2px solid var(--color-text);
|
|
2775
|
+
outline: 2px solid var(--tl-color-text);
|
|
2753
2776
|
outline-offset: -5px;
|
|
2754
2777
|
}
|
|
2755
2778
|
|
|
@@ -2768,7 +2791,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2768
2791
|
}
|
|
2769
2792
|
|
|
2770
2793
|
.tlui-style-panel__section:nth-of-type(n + 2):not(:last-child) {
|
|
2771
|
-
border-bottom: 1px solid var(--color-divider);
|
|
2794
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
2772
2795
|
}
|
|
2773
2796
|
|
|
2774
2797
|
.tlui-style-panel__section:empty {
|
|
@@ -2777,7 +2800,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2777
2800
|
|
|
2778
2801
|
.tlui-style-panel__section__common:not(:only-child) {
|
|
2779
2802
|
margin-bottom: 7px;
|
|
2780
|
-
border-bottom: 1px solid var(--color-divider);
|
|
2803
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
2781
2804
|
}
|
|
2782
2805
|
|
|
2783
2806
|
.tlui-style-panel__dropdown-picker:only-child {
|
|
@@ -2788,8 +2811,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2788
2811
|
display: flex;
|
|
2789
2812
|
grid-template-columns: 1fr auto;
|
|
2790
2813
|
align-items: center;
|
|
2791
|
-
padding-left: var(--space-4);
|
|
2792
|
-
color: var(--color-text-1);
|
|
2814
|
+
padding-left: var(--tl-space-4);
|
|
2815
|
+
color: var(--tl-color-text-1);
|
|
2793
2816
|
font-size: 12px;
|
|
2794
2817
|
}
|
|
2795
2818
|
|
|
@@ -2803,13 +2826,13 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2803
2826
|
|
|
2804
2827
|
.tlui-style-panel .tlui-button[data-state='open']::after {
|
|
2805
2828
|
opacity: 1;
|
|
2806
|
-
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%);
|
|
2807
2830
|
}
|
|
2808
2831
|
|
|
2809
2832
|
@media (hover: hover) {
|
|
2810
2833
|
.tlui-style-panel .tlui-button[data-state='open']:not(:hover)::after {
|
|
2811
2834
|
opacity: 1;
|
|
2812
|
-
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%);
|
|
2813
2836
|
}
|
|
2814
2837
|
}
|
|
2815
2838
|
|
|
@@ -2819,14 +2842,14 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2819
2842
|
.tlui-style-panel__section__common .tlui-style-panel__subheading,
|
|
2820
2843
|
.tlui-style-panel__subheading + .tlui-slider__container {
|
|
2821
2844
|
margin: 0;
|
|
2822
|
-
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);
|
|
2823
2846
|
font-size: 12px;
|
|
2824
2847
|
font-weight: inherit;
|
|
2825
2848
|
line-height: inherit;
|
|
2826
2849
|
}
|
|
2827
2850
|
|
|
2828
2851
|
.tlui-style-panel .tlui-style-panel__subheading:nth-of-type(1) {
|
|
2829
|
-
padding-top: var(--space-3);
|
|
2852
|
+
padding-top: var(--tl-space-3);
|
|
2830
2853
|
}
|
|
2831
2854
|
|
|
2832
2855
|
.tlui-style-panel__subheading + .tlui-slider__container {
|
|
@@ -2837,11 +2860,11 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2837
2860
|
|
|
2838
2861
|
.tlui-layout__bottom {
|
|
2839
2862
|
grid-row: 2;
|
|
2863
|
+
width: 100%;
|
|
2840
2864
|
}
|
|
2841
2865
|
|
|
2842
2866
|
.tlui-layout__bottom__main {
|
|
2843
2867
|
width: 100%;
|
|
2844
|
-
position: relative;
|
|
2845
2868
|
display: flex;
|
|
2846
2869
|
align-items: flex-end;
|
|
2847
2870
|
justify-content: center;
|
|
@@ -2853,11 +2876,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2853
2876
|
display: flex;
|
|
2854
2877
|
width: min-content;
|
|
2855
2878
|
flex-direction: column;
|
|
2856
|
-
z-index: var(--layer-panels);
|
|
2879
|
+
z-index: var(--tl-layer-panels);
|
|
2857
2880
|
pointer-events: all;
|
|
2858
2881
|
position: absolute;
|
|
2859
2882
|
left: 0px;
|
|
2860
|
-
bottom: 0px;
|
|
2861
2883
|
}
|
|
2862
2884
|
|
|
2863
2885
|
.tlui-navigation-panel::before {
|
|
@@ -2867,10 +2889,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2867
2889
|
z-index: -1;
|
|
2868
2890
|
inset: -2px -2px 0px 0px;
|
|
2869
2891
|
border-radius: 0;
|
|
2870
|
-
border-top: 2px solid var(--color-background);
|
|
2871
|
-
border-right: 2px solid var(--color-background);
|
|
2872
|
-
border-top-right-radius: var(--radius-4);
|
|
2873
|
-
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);
|
|
2874
2896
|
}
|
|
2875
2897
|
|
|
2876
2898
|
.tlui-navigation-panel[data-a11y='true']::before {
|
|
@@ -2884,7 +2906,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2884
2906
|
height: 96px;
|
|
2885
2907
|
min-height: 96px;
|
|
2886
2908
|
overflow: hidden;
|
|
2887
|
-
padding: var(--space-3);
|
|
2909
|
+
padding: var(--tl-space-3);
|
|
2888
2910
|
padding-top: 0px;
|
|
2889
2911
|
}
|
|
2890
2912
|
|
|
@@ -2904,7 +2926,23 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2904
2926
|
align-items: center;
|
|
2905
2927
|
justify-content: center;
|
|
2906
2928
|
flex-grow: 2;
|
|
2907
|
-
|
|
2929
|
+
}
|
|
2930
|
+
|
|
2931
|
+
.tlui-main-toolbar--horizontal {
|
|
2932
|
+
padding-bottom: calc(var(--tl-space-3) + var(--tl-sab));
|
|
2933
|
+
max-width: 100%;
|
|
2934
|
+
}
|
|
2935
|
+
|
|
2936
|
+
.tlui-main-toolbar--vertical {
|
|
2937
|
+
position: absolute;
|
|
2938
|
+
left: 0;
|
|
2939
|
+
top: 90px; /* height of page menu + 'back to content' button */
|
|
2940
|
+
bottom: 140px; /* height of expanded mini-map */
|
|
2941
|
+
padding-left: calc(var(--tl-space-3) + var(--tl-sab));
|
|
2942
|
+
}
|
|
2943
|
+
|
|
2944
|
+
[data-breakpoints-below*='6'] .tlui-main-toolbar--vertical {
|
|
2945
|
+
bottom: 90px; /* collapsed mini-map, but same as top to keep things looking even */
|
|
2908
2946
|
}
|
|
2909
2947
|
|
|
2910
2948
|
/* Centered Content */
|
|
@@ -2912,73 +2950,145 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2912
2950
|
position: relative;
|
|
2913
2951
|
width: fit-content;
|
|
2914
2952
|
display: flex;
|
|
2915
|
-
gap: var(--space-3);
|
|
2916
|
-
align-items: flex-
|
|
2953
|
+
gap: var(--tl-space-3);
|
|
2954
|
+
align-items: flex-start;
|
|
2955
|
+
}
|
|
2956
|
+
|
|
2957
|
+
.tlui-main-toolbar--vertical .tlui-main-toolbar__inner {
|
|
2958
|
+
flex-direction: column;
|
|
2917
2959
|
}
|
|
2918
2960
|
|
|
2919
|
-
.tlui-main-toolbar__left {
|
|
2961
|
+
.tlui-main-toolbar--horizontal .tlui-main-toolbar__left {
|
|
2920
2962
|
width: fit-content;
|
|
2921
2963
|
}
|
|
2964
|
+
.tlui-main-toolbar--vertical .tlui-main-toolbar__left {
|
|
2965
|
+
display: flex;
|
|
2966
|
+
height: fit-content;
|
|
2967
|
+
}
|
|
2922
2968
|
|
|
2923
2969
|
/* Row of controls + lock button */
|
|
2924
2970
|
.tlui-main-toolbar__extras {
|
|
2925
2971
|
position: relative;
|
|
2926
|
-
z-index: var(--layer-above);
|
|
2927
|
-
width: 100%;
|
|
2972
|
+
z-index: var(--tl-layer-above);
|
|
2928
2973
|
pointer-events: none;
|
|
2929
|
-
|
|
2930
|
-
height: 48px;
|
|
2974
|
+
align-self: stretch;
|
|
2931
2975
|
}
|
|
2932
2976
|
|
|
2933
2977
|
.tlui-main-toolbar__extras:empty {
|
|
2934
2978
|
display: none;
|
|
2935
2979
|
}
|
|
2936
2980
|
|
|
2981
|
+
.tlui-main-toolbar--horizontal .tlui-main-toolbar__extras {
|
|
2982
|
+
height: 48px;
|
|
2983
|
+
top: 6px;
|
|
2984
|
+
}
|
|
2985
|
+
|
|
2986
|
+
.tlui-main-toolbar--vertical .tlui-main-toolbar__extras {
|
|
2987
|
+
width: 48px;
|
|
2988
|
+
order: 1;
|
|
2989
|
+
}
|
|
2990
|
+
|
|
2937
2991
|
.tlui-main-toolbar__extras__controls {
|
|
2938
|
-
display: flex;
|
|
2939
2992
|
position: relative;
|
|
2940
|
-
|
|
2941
|
-
|
|
2942
|
-
|
|
2943
|
-
|
|
2944
|
-
|
|
2945
|
-
|
|
2993
|
+
z-index: var(--tl-layer-above);
|
|
2994
|
+
background-color: var(--tl-color-low);
|
|
2995
|
+
border: 2px solid var(--tl-color-background);
|
|
2996
|
+
pointer-events: all;
|
|
2997
|
+
}
|
|
2998
|
+
|
|
2999
|
+
.tlui-main-toolbar--horizontal .tlui-main-toolbar__extras__controls {
|
|
3000
|
+
border-top-left-radius: var(--tl-radius-4);
|
|
3001
|
+
border-top-right-radius: var(--tl-radius-4);
|
|
2946
3002
|
margin-left: 8px;
|
|
2947
3003
|
margin-right: 0px;
|
|
2948
|
-
|
|
3004
|
+
width: fit-content;
|
|
3005
|
+
}
|
|
3006
|
+
|
|
3007
|
+
.tlui-main-toolbar--vertical .tlui-main-toolbar__extras__controls {
|
|
3008
|
+
border-top-right-radius: var(--tl-radius-4);
|
|
3009
|
+
border-bottom-right-radius: var(--tl-radius-4);
|
|
3010
|
+
margin-top: 8px;
|
|
3011
|
+
margin-left: -2px;
|
|
3012
|
+
margin-bottom: 0px;
|
|
2949
3013
|
width: fit-content;
|
|
2950
3014
|
}
|
|
2951
3015
|
|
|
2952
3016
|
.tlui-main-toolbar__tools {
|
|
2953
|
-
|
|
2954
|
-
|
|
2955
|
-
align-items: center;
|
|
2956
|
-
border-radius: var(--radius-4);
|
|
2957
|
-
z-index: var(--layer-panels);
|
|
3017
|
+
border-radius: var(--tl-radius-4);
|
|
3018
|
+
z-index: var(--tl-layer-panels);
|
|
2958
3019
|
pointer-events: all;
|
|
2959
3020
|
position: relative;
|
|
2960
|
-
background: var(--color-panel);
|
|
2961
|
-
box-shadow: var(--shadow-2);
|
|
3021
|
+
background: var(--tl-color-panel);
|
|
3022
|
+
box-shadow: var(--tl-shadow-2);
|
|
3023
|
+
}
|
|
3024
|
+
|
|
3025
|
+
.tlui-main-toolbar--horizontal .tlui-main-toolbar__mobile-style-panel {
|
|
3026
|
+
align-self: flex-end;
|
|
3027
|
+
}
|
|
3028
|
+
.tlui-main-toolbar--vertical .tlui-main-toolbar__mobile-style-panel {
|
|
3029
|
+
align-self: flex-start;
|
|
2962
3030
|
}
|
|
2963
3031
|
|
|
2964
|
-
.tlui-main-toolbar__overflow {
|
|
3032
|
+
.tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {
|
|
2965
3033
|
width: 40px;
|
|
2966
3034
|
margin-left: 2px;
|
|
2967
3035
|
}
|
|
3036
|
+
.tlui-main-toolbar--vertical .tlui-main-toolbar__overflow {
|
|
3037
|
+
height: 40px;
|
|
3038
|
+
margin-top: 2px;
|
|
3039
|
+
}
|
|
2968
3040
|
|
|
2969
|
-
.tlui-layout__mobile .tlui-main-toolbar__overflow {
|
|
3041
|
+
.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {
|
|
2970
3042
|
width: 32px;
|
|
2971
3043
|
padding: 0px;
|
|
2972
3044
|
}
|
|
2973
3045
|
|
|
2974
|
-
.tlui-main-toolbar *[data-state='open']::after {
|
|
2975
|
-
background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
3046
|
+
.tlui-main-toolbar--horizontal *[data-state='open']::after {
|
|
3047
|
+
background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
3048
|
+
opacity: 1;
|
|
3049
|
+
}
|
|
3050
|
+
.tlui-main-toolbar--vertical *[data-state='open']::after {
|
|
3051
|
+
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
2976
3052
|
opacity: 1;
|
|
2977
3053
|
}
|
|
2978
3054
|
|
|
3055
|
+
.tlui-main-toolbar__overflow-content {
|
|
3056
|
+
touch-action: none;
|
|
3057
|
+
}
|
|
3058
|
+
|
|
3059
|
+
.tlui-main-toolbar__tools [data-toolbar-visible='false'],
|
|
3060
|
+
.tlui-main-toolbar__overflow-content [data-toolbar-visible='false'] {
|
|
3061
|
+
display: none;
|
|
3062
|
+
}
|
|
3063
|
+
|
|
3064
|
+
.tlui-main-toolbar__group:empty {
|
|
3065
|
+
display: none;
|
|
3066
|
+
}
|
|
3067
|
+
.tlui-row.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {
|
|
3068
|
+
border-right: 1px solid var(--color-divider);
|
|
3069
|
+
margin-right: 2px;
|
|
3070
|
+
}
|
|
3071
|
+
.tlui-column.tlui-main-toolbar__group:not(
|
|
3072
|
+
:nth-last-child(-n + 1 of [data-toolbar-visible='true'])
|
|
3073
|
+
) {
|
|
3074
|
+
border-bottom: 1px solid var(--color-divider);
|
|
3075
|
+
margin-bottom: 2px;
|
|
3076
|
+
}
|
|
3077
|
+
.tlui-grid.tlui-main-toolbar__group {
|
|
3078
|
+
grid-column: 1 / span 4;
|
|
3079
|
+
}
|
|
3080
|
+
.tlui-grid.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {
|
|
3081
|
+
border-bottom: 1px solid var(--color-divider);
|
|
3082
|
+
margin-bottom: 2px;
|
|
3083
|
+
}
|
|
3084
|
+
|
|
2979
3085
|
@media (hover: hover) {
|
|
2980
|
-
.tlui-main-toolbar *[data-state='open']:not(:hover)::after {
|
|
2981
|
-
background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
3086
|
+
.tlui-main-toolbar--horizontal *[data-state='open']:not(:hover)::after {
|
|
3087
|
+
background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
3088
|
+
opacity: 1;
|
|
3089
|
+
}
|
|
3090
|
+
.tlui-main-toolbar--vertical *[data-state='open']:not(:hover)::after {
|
|
3091
|
+
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
2982
3092
|
opacity: 1;
|
|
2983
3093
|
}
|
|
2984
3094
|
}
|
|
@@ -2989,44 +3099,40 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2989
3099
|
font-size: 12px;
|
|
2990
3100
|
padding: 2px 8px;
|
|
2991
3101
|
border-radius: 4px;
|
|
2992
|
-
background-color: var(--color-tooltip);
|
|
3102
|
+
background-color: var(--tl-color-tooltip);
|
|
2993
3103
|
box-shadow: none;
|
|
2994
|
-
color: var(--color-text-shadow);
|
|
3104
|
+
color: var(--tl-color-text-shadow);
|
|
2995
3105
|
max-width: 400px;
|
|
2996
3106
|
width: fit-content;
|
|
2997
3107
|
text-align: center;
|
|
2998
|
-
pointer-events: none;
|
|
2999
3108
|
will-change: transform, opacity;
|
|
3000
3109
|
z-index: 2;
|
|
3001
3110
|
}
|
|
3002
3111
|
|
|
3003
3112
|
.tlui-tooltip__arrow {
|
|
3004
|
-
fill: var(--color-tooltip);
|
|
3113
|
+
fill: var(--tl-color-tooltip);
|
|
3005
3114
|
will-change: opacity;
|
|
3006
3115
|
}
|
|
3007
3116
|
|
|
3008
3117
|
[data-radix-popper-content-wrapper]:has(.tlui-tooltip) {
|
|
3009
|
-
z-index: var(--layer-toasts) !important;
|
|
3010
|
-
|
|
3011
|
-
|
|
3012
|
-
[data-radix-popper-content-wrapper]:has(.tlui-tooltip[data-should-animate='true']) {
|
|
3013
|
-
transition: all 0.1s ease-out;
|
|
3118
|
+
z-index: var(--tl-layer-toasts) !important;
|
|
3119
|
+
pointer-events: none;
|
|
3014
3120
|
}
|
|
3015
3121
|
|
|
3016
3122
|
/* ------------------- Debug panel ------------------ */
|
|
3017
3123
|
|
|
3018
3124
|
.tlui-debug-panel {
|
|
3019
|
-
background-color: var(--color-low);
|
|
3125
|
+
background-color: var(--tl-color-low);
|
|
3020
3126
|
width: 100%;
|
|
3021
3127
|
display: grid;
|
|
3022
3128
|
align-items: center;
|
|
3023
3129
|
grid-template-columns: 1fr auto auto auto;
|
|
3024
3130
|
justify-content: space-between;
|
|
3025
|
-
padding-left: var(--space-4);
|
|
3026
|
-
border-top: 1px solid var(--color-background);
|
|
3131
|
+
padding-left: var(--tl-space-4);
|
|
3132
|
+
border-top: 1px solid var(--tl-color-background);
|
|
3027
3133
|
font-size: 12px;
|
|
3028
|
-
color: var(--color-text-1);
|
|
3029
|
-
z-index: var(--layer-panels);
|
|
3134
|
+
color: var(--tl-color-text-1);
|
|
3135
|
+
z-index: var(--tl-layer-panels);
|
|
3030
3136
|
pointer-events: all;
|
|
3031
3137
|
}
|
|
3032
3138
|
|
|
@@ -3042,7 +3148,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3042
3148
|
|
|
3043
3149
|
.tlui-debug-panel__fps__slow {
|
|
3044
3150
|
font-weight: bold;
|
|
3045
|
-
color: var(--color-danger);
|
|
3151
|
+
color: var(--tl-color-danger);
|
|
3046
3152
|
}
|
|
3047
3153
|
|
|
3048
3154
|
.tlui-a11y-audit {
|
|
@@ -3052,7 +3158,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3052
3158
|
.tlui-a11y-audit th,
|
|
3053
3159
|
.tlui-a11y-audit td {
|
|
3054
3160
|
padding: 8px;
|
|
3055
|
-
border: 1px solid var(--color-low-border);
|
|
3161
|
+
border: 1px solid var(--tl-color-low-border);
|
|
3056
3162
|
}
|
|
3057
3163
|
|
|
3058
3164
|
/* --------------------- Toasts --------------------- */
|
|
@@ -3065,10 +3171,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3065
3171
|
align-items: flex-end;
|
|
3066
3172
|
justify-content: flex-end;
|
|
3067
3173
|
flex-direction: column;
|
|
3068
|
-
gap: var(--space-3);
|
|
3174
|
+
gap: var(--tl-space-3);
|
|
3069
3175
|
pointer-events: none;
|
|
3070
|
-
padding: 0px var(--space-3) 64px 0px;
|
|
3071
|
-
z-index: var(--layer-toasts);
|
|
3176
|
+
padding: 0px var(--tl-space-3) 64px 0px;
|
|
3177
|
+
z-index: var(--tl-layer-toasts);
|
|
3072
3178
|
}
|
|
3073
3179
|
|
|
3074
3180
|
.tlui-toast__viewport > * {
|
|
@@ -3077,34 +3183,34 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3077
3183
|
|
|
3078
3184
|
.tlui-toast__icon {
|
|
3079
3185
|
padding-top: 11px;
|
|
3080
|
-
padding-left: var(--space-4);
|
|
3081
|
-
color: var(--color-text-1);
|
|
3186
|
+
padding-left: var(--tl-space-4);
|
|
3187
|
+
color: var(--tl-color-text-1);
|
|
3082
3188
|
}
|
|
3083
3189
|
|
|
3084
3190
|
.tlui-toast__container {
|
|
3085
3191
|
min-width: 200px;
|
|
3086
3192
|
display: flex;
|
|
3087
3193
|
flex-direction: row;
|
|
3088
|
-
background-color: var(--color-panel);
|
|
3089
|
-
box-shadow: var(--shadow-2);
|
|
3090
|
-
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);
|
|
3091
3197
|
font-size: 12px;
|
|
3092
3198
|
}
|
|
3093
3199
|
|
|
3094
3200
|
.tlui-toast__container[data-severity='success'] .tlui-icon {
|
|
3095
|
-
color: var(--color-success);
|
|
3201
|
+
color: var(--tl-color-success);
|
|
3096
3202
|
}
|
|
3097
3203
|
|
|
3098
3204
|
.tlui-toast__container[data-severity='info'] .tlui-icon {
|
|
3099
|
-
color: var(--color-info);
|
|
3205
|
+
color: var(--tl-color-info);
|
|
3100
3206
|
}
|
|
3101
3207
|
|
|
3102
3208
|
.tlui-toast__container[data-severity='warning'] .tlui-icon {
|
|
3103
|
-
color: var(--color-warning);
|
|
3209
|
+
color: var(--tl-color-warning);
|
|
3104
3210
|
}
|
|
3105
3211
|
|
|
3106
3212
|
.tlui-toast__container[data-severity='error'] .tlui-icon {
|
|
3107
|
-
color: var(--color-danger);
|
|
3213
|
+
color: var(--tl-color-danger);
|
|
3108
3214
|
}
|
|
3109
3215
|
|
|
3110
3216
|
.tlui-toast__main {
|
|
@@ -3113,27 +3219,27 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3113
3219
|
}
|
|
3114
3220
|
|
|
3115
3221
|
.tlui-toast__content {
|
|
3116
|
-
padding: var(--space-4);
|
|
3222
|
+
padding: var(--tl-space-4);
|
|
3117
3223
|
display: flex;
|
|
3118
3224
|
line-height: 1.4;
|
|
3119
3225
|
flex-direction: column;
|
|
3120
|
-
gap: var(--space-3);
|
|
3226
|
+
gap: var(--tl-space-3);
|
|
3121
3227
|
}
|
|
3122
3228
|
|
|
3123
3229
|
.tlui-toast__main[data-actions='true'] .tlui-toast__content {
|
|
3124
|
-
padding-bottom: var(--space-2);
|
|
3230
|
+
padding-bottom: var(--tl-space-2);
|
|
3125
3231
|
}
|
|
3126
3232
|
|
|
3127
3233
|
.tlui-toast__title {
|
|
3128
3234
|
font-weight: bold;
|
|
3129
|
-
color: var(--color-text-1);
|
|
3235
|
+
color: var(--tl-color-text-1);
|
|
3130
3236
|
/* this makes the default toast look better */
|
|
3131
3237
|
line-height: 16px;
|
|
3132
3238
|
}
|
|
3133
3239
|
|
|
3134
3240
|
.tlui-toast__description {
|
|
3135
|
-
color: var(--color-text-1);
|
|
3136
|
-
padding: var(--space-3);
|
|
3241
|
+
color: var(--tl-color-text-1);
|
|
3242
|
+
padding: var(--tl-space-3);
|
|
3137
3243
|
margin: 0px;
|
|
3138
3244
|
padding: 0px;
|
|
3139
3245
|
}
|
|
@@ -3185,14 +3291,14 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3185
3291
|
left: 0px;
|
|
3186
3292
|
width: 100%;
|
|
3187
3293
|
height: 100%;
|
|
3188
|
-
z-index: var(--layer-canvas-overlays);
|
|
3189
|
-
background-color: var(--color-overlay);
|
|
3294
|
+
z-index: var(--tl-layer-canvas-overlays);
|
|
3295
|
+
background-color: var(--tl-color-overlay);
|
|
3190
3296
|
pointer-events: all;
|
|
3191
3297
|
animation: tl-fade-in 0.12s ease-out;
|
|
3192
3298
|
display: grid;
|
|
3193
3299
|
place-items: center;
|
|
3194
3300
|
overflow-y: auto;
|
|
3195
|
-
padding: 0px var(--space-3);
|
|
3301
|
+
padding: 0px var(--tl-space-3);
|
|
3196
3302
|
}
|
|
3197
3303
|
|
|
3198
3304
|
.tlui-dialog__content {
|
|
@@ -3200,9 +3306,9 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3200
3306
|
flex-direction: column;
|
|
3201
3307
|
position: relative;
|
|
3202
3308
|
cursor: default;
|
|
3203
|
-
background-color: var(--color-panel);
|
|
3204
|
-
box-shadow: var(--shadow-3);
|
|
3205
|
-
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);
|
|
3206
3312
|
font-size: 12px;
|
|
3207
3313
|
overflow: hidden;
|
|
3208
3314
|
min-width: 300px;
|
|
@@ -3215,9 +3321,9 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3215
3321
|
display: flex;
|
|
3216
3322
|
align-items: center;
|
|
3217
3323
|
flex: 0;
|
|
3218
|
-
z-index: var(--layer-header-footer);
|
|
3219
|
-
padding-left: var(--space-4);
|
|
3220
|
-
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);
|
|
3221
3327
|
height: 40px;
|
|
3222
3328
|
}
|
|
3223
3329
|
|
|
@@ -3226,7 +3332,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3226
3332
|
font-weight: inherit;
|
|
3227
3333
|
font-size: 12px;
|
|
3228
3334
|
margin: 0px;
|
|
3229
|
-
color: var(--color-text-1);
|
|
3335
|
+
color: var(--tl-color-text-1);
|
|
3230
3336
|
}
|
|
3231
3337
|
|
|
3232
3338
|
.tlui-dialog__header__close {
|
|
@@ -3234,16 +3340,16 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3234
3340
|
}
|
|
3235
3341
|
|
|
3236
3342
|
.tlui-dialog__body {
|
|
3237
|
-
padding: var(--space-4) var(--space-4);
|
|
3343
|
+
padding: var(--tl-space-4) var(--tl-space-4);
|
|
3238
3344
|
flex: 0 1;
|
|
3239
3345
|
overflow-y: auto;
|
|
3240
3346
|
overflow-x: hidden;
|
|
3241
|
-
color: var(--color-text-1);
|
|
3347
|
+
color: var(--tl-color-text-1);
|
|
3242
3348
|
user-select: all;
|
|
3243
3349
|
-webkit-user-select: text;
|
|
3244
3350
|
}
|
|
3245
3351
|
.tlui-dialog__body a {
|
|
3246
|
-
color: var(--color-selected);
|
|
3352
|
+
color: var(--tl-color-selected);
|
|
3247
3353
|
}
|
|
3248
3354
|
|
|
3249
3355
|
.tlui-dialog__body ul,
|
|
@@ -3251,13 +3357,13 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3251
3357
|
padding-left: 16px;
|
|
3252
3358
|
display: flex;
|
|
3253
3359
|
flex-direction: column;
|
|
3254
|
-
gap: var(--space-2);
|
|
3360
|
+
gap: var(--tl-space-2);
|
|
3255
3361
|
}
|
|
3256
3362
|
|
|
3257
3363
|
.tlui-dialog__footer {
|
|
3258
3364
|
position: relative;
|
|
3259
3365
|
min-height: 12px;
|
|
3260
|
-
z-index: var(--layer-header-footer);
|
|
3366
|
+
z-index: var(--tl-layer-header-footer);
|
|
3261
3367
|
}
|
|
3262
3368
|
|
|
3263
3369
|
.tlui-dialog__footer__actions {
|
|
@@ -3277,15 +3383,15 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3277
3383
|
.tlui-edit-link-dialog {
|
|
3278
3384
|
display: flex;
|
|
3279
3385
|
flex-direction: column;
|
|
3280
|
-
gap: var(--space-4);
|
|
3281
|
-
color: var(--color-text);
|
|
3386
|
+
gap: var(--tl-space-4);
|
|
3387
|
+
color: var(--tl-color-text);
|
|
3282
3388
|
}
|
|
3283
3389
|
|
|
3284
3390
|
.tlui-edit-link-dialog__input {
|
|
3285
|
-
background-color: var(--color-muted-2);
|
|
3391
|
+
background-color: var(--tl-color-muted-2);
|
|
3286
3392
|
flex-grow: 2;
|
|
3287
|
-
border-radius: var(--radius-2);
|
|
3288
|
-
padding: 0px var(--space-4);
|
|
3393
|
+
border-radius: var(--tl-radius-2);
|
|
3394
|
+
padding: 0px var(--tl-space-4);
|
|
3289
3395
|
}
|
|
3290
3396
|
|
|
3291
3397
|
/* Embed Dialog */
|
|
@@ -3293,15 +3399,15 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3293
3399
|
.tlui-embed__spacer {
|
|
3294
3400
|
flex-grow: 2;
|
|
3295
3401
|
min-height: 0px;
|
|
3296
|
-
margin-left: calc(-1 * var(--space-4));
|
|
3297
|
-
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));
|
|
3298
3404
|
pointer-events: none;
|
|
3299
3405
|
}
|
|
3300
3406
|
|
|
3301
3407
|
.tlui-embed-dialog__list {
|
|
3302
3408
|
display: flex;
|
|
3303
3409
|
flex-direction: column;
|
|
3304
|
-
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);
|
|
3305
3411
|
}
|
|
3306
3412
|
|
|
3307
3413
|
.tlui-embed-dialog__item__image {
|
|
@@ -3313,49 +3419,49 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3313
3419
|
background-size: contain;
|
|
3314
3420
|
background-repeat: no-repeat;
|
|
3315
3421
|
background-position: center center;
|
|
3316
|
-
background-color: var(--color-selected-contrast);
|
|
3317
|
-
border-radius: var(--radius-1);
|
|
3422
|
+
background-color: var(--tl-color-selected-contrast);
|
|
3423
|
+
border-radius: var(--tl-radius-1);
|
|
3318
3424
|
}
|
|
3319
3425
|
|
|
3320
3426
|
.tlui-embed-dialog__enter {
|
|
3321
3427
|
display: flex;
|
|
3322
3428
|
flex-direction: column;
|
|
3323
|
-
gap: var(--space-4);
|
|
3324
|
-
color: var(--color-text-1);
|
|
3429
|
+
gap: var(--tl-space-4);
|
|
3430
|
+
color: var(--tl-color-text-1);
|
|
3325
3431
|
}
|
|
3326
3432
|
|
|
3327
3433
|
.tlui-embed-dialog__input {
|
|
3328
|
-
background-color: var(--color-muted-2);
|
|
3434
|
+
background-color: var(--tl-color-muted-2);
|
|
3329
3435
|
flex-grow: 2;
|
|
3330
|
-
border-radius: var(--radius-2);
|
|
3331
|
-
padding: 0px var(--space-4);
|
|
3436
|
+
border-radius: var(--tl-radius-2);
|
|
3437
|
+
padding: 0px var(--tl-space-4);
|
|
3332
3438
|
}
|
|
3333
3439
|
|
|
3334
3440
|
.tlui-embed-dialog__warning {
|
|
3335
|
-
color: var(--color-danger);
|
|
3441
|
+
color: var(--tl-color-danger);
|
|
3336
3442
|
text-shadow: none;
|
|
3337
3443
|
}
|
|
3338
3444
|
|
|
3339
3445
|
.tlui-embed-dialog__instruction__link {
|
|
3340
3446
|
display: flex;
|
|
3341
|
-
gap: var(--space-1);
|
|
3342
|
-
margin-top: var(--space-4);
|
|
3447
|
+
gap: var(--tl-space-1);
|
|
3448
|
+
margin-top: var(--tl-space-4);
|
|
3343
3449
|
}
|
|
3344
3450
|
|
|
3345
3451
|
.tlui-embed-dialog__enter a {
|
|
3346
|
-
color: var(--color-text-1);
|
|
3452
|
+
color: var(--tl-color-text-1);
|
|
3347
3453
|
}
|
|
3348
3454
|
|
|
3349
3455
|
/* --------------- Keyboard shortcuts --------------- */
|
|
3350
3456
|
|
|
3351
3457
|
.tlui-shortcuts-dialog__header {
|
|
3352
|
-
border-bottom: 1px solid var(--color-divider);
|
|
3458
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
3353
3459
|
}
|
|
3354
3460
|
|
|
3355
3461
|
.tlui-shortcuts-dialog__body {
|
|
3356
3462
|
position: relative;
|
|
3357
3463
|
columns: 3;
|
|
3358
|
-
column-gap: var(--space-9);
|
|
3464
|
+
column-gap: var(--tl-space-9);
|
|
3359
3465
|
pointer-events: all;
|
|
3360
3466
|
touch-action: auto;
|
|
3361
3467
|
|
|
@@ -3373,14 +3479,14 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3373
3479
|
|
|
3374
3480
|
.tlui-shortcuts-dialog__group {
|
|
3375
3481
|
break-inside: avoid-column;
|
|
3376
|
-
padding-bottom: var(--space-6);
|
|
3482
|
+
padding-bottom: var(--tl-space-6);
|
|
3377
3483
|
}
|
|
3378
3484
|
|
|
3379
3485
|
.tlui-shortcuts-dialog__group__title {
|
|
3380
3486
|
font-size: inherit;
|
|
3381
3487
|
font-weight: inherit;
|
|
3382
3488
|
margin: 0px;
|
|
3383
|
-
color: var(--color-text-3);
|
|
3489
|
+
color: var(--tl-color-text-3);
|
|
3384
3490
|
height: 32px;
|
|
3385
3491
|
display: flex;
|
|
3386
3492
|
align-items: center;
|
|
@@ -3389,12 +3495,12 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3389
3495
|
.tlui-shortcuts-dialog__group__content {
|
|
3390
3496
|
display: flex;
|
|
3391
3497
|
flex-direction: column;
|
|
3392
|
-
color: var(--color-text-1);
|
|
3498
|
+
color: var(--tl-color-text-1);
|
|
3393
3499
|
}
|
|
3394
3500
|
|
|
3395
3501
|
.tlui-shortcuts-dialog__key-pair {
|
|
3396
3502
|
display: flex;
|
|
3397
|
-
gap: var(--space-4);
|
|
3503
|
+
gap: var(--tl-space-4);
|
|
3398
3504
|
align-items: center;
|
|
3399
3505
|
justify-content: space-between;
|
|
3400
3506
|
height: 32px;
|
|
@@ -3421,12 +3527,12 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3421
3527
|
height: 24px;
|
|
3422
3528
|
background: linear-gradient(
|
|
3423
3529
|
to bottom,
|
|
3424
|
-
var(--color-panel-transparent) 0%,
|
|
3425
|
-
var(--color-panel) 90%,
|
|
3426
|
-
var(--color-panel) 100%
|
|
3530
|
+
var(--tl-color-panel-transparent) 0%,
|
|
3531
|
+
var(--tl-color-panel) 90%,
|
|
3532
|
+
var(--tl-color-panel) 100%
|
|
3427
3533
|
);
|
|
3428
|
-
border-bottom-left-radius: var(--radius-3);
|
|
3429
|
-
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);
|
|
3430
3536
|
pointer-events: none;
|
|
3431
3537
|
}
|
|
3432
3538
|
|
|
@@ -3441,10 +3547,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3441
3547
|
.tlui-help-menu {
|
|
3442
3548
|
pointer-events: all;
|
|
3443
3549
|
position: absolute;
|
|
3444
|
-
bottom: var(--space-2);
|
|
3445
|
-
right: var(--space-2);
|
|
3446
|
-
z-index: var(--layer-panels);
|
|
3447
|
-
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);
|
|
3448
3554
|
border-radius: 100%;
|
|
3449
3555
|
}
|
|
3450
3556
|
|
|
@@ -3455,7 +3561,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3455
3561
|
display: flex;
|
|
3456
3562
|
flex-direction: row;
|
|
3457
3563
|
justify-content: flex-end;
|
|
3458
|
-
z-index: var(--layer-panels);
|
|
3564
|
+
z-index: var(--tl-layer-panels);
|
|
3459
3565
|
align-items: center;
|
|
3460
3566
|
padding-top: 2px;
|
|
3461
3567
|
padding-right: 4px;
|
|
@@ -3471,7 +3577,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3471
3577
|
border: none;
|
|
3472
3578
|
cursor: pointer;
|
|
3473
3579
|
pointer-events: all;
|
|
3474
|
-
border-radius: var(--radius-1);
|
|
3580
|
+
border-radius: var(--tl-radius-1);
|
|
3475
3581
|
padding-right: 1px;
|
|
3476
3582
|
height: 100%;
|
|
3477
3583
|
}
|
|
@@ -3484,8 +3590,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3484
3590
|
.tlui-people-menu__avatar {
|
|
3485
3591
|
height: 24px;
|
|
3486
3592
|
width: 24px;
|
|
3487
|
-
border: 2px solid var(--color-background);
|
|
3488
|
-
background-color: var(--color-low);
|
|
3593
|
+
border: 2px solid var(--tl-color-background);
|
|
3594
|
+
background-color: var(--tl-color-low);
|
|
3489
3595
|
border-radius: 100%;
|
|
3490
3596
|
display: flex;
|
|
3491
3597
|
align-items: center;
|
|
@@ -3494,7 +3600,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3494
3600
|
font-size: 10px;
|
|
3495
3601
|
font-weight: bold;
|
|
3496
3602
|
text-align: center;
|
|
3497
|
-
color: var(--color-selected-contrast);
|
|
3603
|
+
color: var(--tl-color-selected-contrast);
|
|
3498
3604
|
z-index: 2;
|
|
3499
3605
|
}
|
|
3500
3606
|
|
|
@@ -3508,7 +3614,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3508
3614
|
|
|
3509
3615
|
@media (hover: hover) {
|
|
3510
3616
|
.tlui-people-menu__avatars-button:hover .tlui-people-menu__avatar {
|
|
3511
|
-
border-color: var(--color-low);
|
|
3617
|
+
border-color: var(--tl-color-low);
|
|
3512
3618
|
}
|
|
3513
3619
|
}
|
|
3514
3620
|
|
|
@@ -3516,12 +3622,12 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3516
3622
|
min-width: 0px;
|
|
3517
3623
|
font-size: 11px;
|
|
3518
3624
|
font-weight: 600;
|
|
3519
|
-
color: var(--color-text-1);
|
|
3625
|
+
color: var(--tl-color-text-1);
|
|
3520
3626
|
font-family: inherit;
|
|
3521
3627
|
padding: 0px 4px;
|
|
3522
3628
|
}
|
|
3523
3629
|
.tlui-people-menu__more::after {
|
|
3524
|
-
border-radius: var(--radius-2);
|
|
3630
|
+
border-radius: var(--tl-radius-2);
|
|
3525
3631
|
inset: 0px;
|
|
3526
3632
|
}
|
|
3527
3633
|
|
|
@@ -3550,7 +3656,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3550
3656
|
}
|
|
3551
3657
|
|
|
3552
3658
|
.tlui-people-menu__section:not(:last-child) {
|
|
3553
|
-
border-bottom: 1px solid var(--color-divider);
|
|
3659
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
3554
3660
|
}
|
|
3555
3661
|
|
|
3556
3662
|
.tlui-people-menu__user {
|
|
@@ -3569,7 +3675,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3569
3675
|
text-overflow: ellipsis;
|
|
3570
3676
|
white-space: nowrap;
|
|
3571
3677
|
font-size: 12px;
|
|
3572
|
-
color: var(--color-text-1);
|
|
3678
|
+
color: var(--tl-color-text-1);
|
|
3573
3679
|
max-width: 100%;
|
|
3574
3680
|
flex-grow: 1;
|
|
3575
3681
|
flex-shrink: 100;
|
|
@@ -3581,7 +3687,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3581
3687
|
text-overflow: ellipsis;
|
|
3582
3688
|
white-space: nowrap;
|
|
3583
3689
|
font-size: 12px;
|
|
3584
|
-
color: var(--color-text-3);
|
|
3690
|
+
color: var(--tl-color-text-3);
|
|
3585
3691
|
flex-grow: 100;
|
|
3586
3692
|
flex-shrink: 0;
|
|
3587
3693
|
margin-left: 4px;
|
|
@@ -3672,7 +3778,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3672
3778
|
inset: 0px;
|
|
3673
3779
|
border-width: 2px;
|
|
3674
3780
|
border-style: solid;
|
|
3675
|
-
z-index: var(--layer-following-indicator);
|
|
3781
|
+
z-index: var(--tl-layer-following-indicator);
|
|
3676
3782
|
pointer-events: none;
|
|
3677
3783
|
}
|
|
3678
3784
|
|
|
@@ -3691,7 +3797,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3691
3797
|
}
|
|
3692
3798
|
|
|
3693
3799
|
.tlui-contextual-toolbar [data-isactive='true']::after {
|
|
3694
|
-
background-color: var(--color-muted-2);
|
|
3800
|
+
background-color: var(--tl-color-muted-2);
|
|
3695
3801
|
opacity: 1;
|
|
3696
3802
|
}
|
|
3697
3803
|
|
|
@@ -3707,7 +3813,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3707
3813
|
|
|
3708
3814
|
.tlui-contextual-toolbar[data-visible='true'] {
|
|
3709
3815
|
opacity: 1;
|
|
3710
|
-
z-index: var(--layer-menus);
|
|
3816
|
+
z-index: var(--tl-layer-menus);
|
|
3711
3817
|
}
|
|
3712
3818
|
|
|
3713
3819
|
.tlui-contextual-toolbar[data-interactive='true'],
|
|
@@ -3766,7 +3872,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3766
3872
|
|
|
3767
3873
|
@keyframes tlui-slide-in {
|
|
3768
3874
|
from {
|
|
3769
|
-
transform: translateX(calc(100% + var(--space-3)));
|
|
3875
|
+
transform: translateX(calc(100% + var(--tl-space-3)));
|
|
3770
3876
|
}
|
|
3771
3877
|
to {
|
|
3772
3878
|
transform: translateX(0px);
|
|
@@ -3778,7 +3884,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3778
3884
|
transform: translateX(var(--radix-toast-swipe-end-x));
|
|
3779
3885
|
}
|
|
3780
3886
|
to {
|
|
3781
|
-
transform: translateX(calc(100% + var(--space-3)));
|
|
3887
|
+
transform: translateX(calc(100% + var(--tl-space-3)));
|
|
3782
3888
|
}
|
|
3783
3889
|
}
|
|
3784
3890
|
|