tldraw 3.16.0-canary.5dac57cf9465 → 3.16.0-canary.614a556981b7
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 +74 -4
- package/dist-cjs/index.js +5 -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/tools/SelectTool/childStates/Translating.js.map +2 -2
- 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 +106 -82
- 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/TldrawUiMenuGroup.js +30 -7
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuGroup.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js +152 -1
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js.map +2 -2
- package/dist-cjs/lib/ui/context/events.js.map +2 -2
- package/dist-cjs/lib/ui/hooks/useTools.js +76 -9
- 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 +74 -4
- package/dist-esm/index.mjs +10 -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/tools/SelectTool/childStates/Translating.mjs.map +2 -2
- 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 +108 -84
- 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/TldrawUiMenuGroup.mjs +30 -7
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuGroup.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs +160 -3
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs.map +2 -2
- package/dist-esm/lib/ui/context/events.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/useTools.mjs +83 -10
- 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 +7 -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 +13 -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/tools/SelectTool/childStates/Translating.ts +0 -1
- 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 +112 -82
- package/src/lib/ui/components/primitives/layout.tsx +79 -5
- package/src/lib/ui/components/primitives/menus/TldrawUiMenuGroup.tsx +30 -7
- package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx +218 -2
- package/src/lib/ui/context/events.tsx +1 -0
- package/src/lib/ui/hooks/useTools.tsx +118 -10
- package/src/lib/ui/version.ts +3 -3
- package/src/lib/ui.css +342 -238
- package/tldraw.css +635 -528
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,12 @@ 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%;
|
|
2864
|
+
overflow: hidden;
|
|
2840
2865
|
}
|
|
2841
2866
|
|
|
2842
2867
|
.tlui-layout__bottom__main {
|
|
2843
2868
|
width: 100%;
|
|
2844
|
-
position: relative;
|
|
2845
2869
|
display: flex;
|
|
2846
2870
|
align-items: flex-end;
|
|
2847
2871
|
justify-content: center;
|
|
@@ -2853,11 +2877,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2853
2877
|
display: flex;
|
|
2854
2878
|
width: min-content;
|
|
2855
2879
|
flex-direction: column;
|
|
2856
|
-
z-index: var(--layer-panels);
|
|
2880
|
+
z-index: var(--tl-layer-panels);
|
|
2857
2881
|
pointer-events: all;
|
|
2858
2882
|
position: absolute;
|
|
2859
2883
|
left: 0px;
|
|
2860
|
-
bottom: 0px;
|
|
2861
2884
|
}
|
|
2862
2885
|
|
|
2863
2886
|
.tlui-navigation-panel::before {
|
|
@@ -2867,10 +2890,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2867
2890
|
z-index: -1;
|
|
2868
2891
|
inset: -2px -2px 0px 0px;
|
|
2869
2892
|
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);
|
|
2893
|
+
border-top: 2px solid var(--tl-color-background);
|
|
2894
|
+
border-right: 2px solid var(--tl-color-background);
|
|
2895
|
+
border-top-right-radius: var(--tl-radius-4);
|
|
2896
|
+
background-color: var(--tl-color-low);
|
|
2874
2897
|
}
|
|
2875
2898
|
|
|
2876
2899
|
.tlui-navigation-panel[data-a11y='true']::before {
|
|
@@ -2884,7 +2907,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2884
2907
|
height: 96px;
|
|
2885
2908
|
min-height: 96px;
|
|
2886
2909
|
overflow: hidden;
|
|
2887
|
-
padding: var(--space-3);
|
|
2910
|
+
padding: var(--tl-space-3);
|
|
2888
2911
|
padding-top: 0px;
|
|
2889
2912
|
}
|
|
2890
2913
|
|
|
@@ -2904,7 +2927,23 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2904
2927
|
align-items: center;
|
|
2905
2928
|
justify-content: center;
|
|
2906
2929
|
flex-grow: 2;
|
|
2907
|
-
|
|
2930
|
+
}
|
|
2931
|
+
|
|
2932
|
+
.tlui-main-toolbar--horizontal {
|
|
2933
|
+
padding-bottom: calc(var(--tl-space-3) + var(--tl-sab));
|
|
2934
|
+
max-width: 100%;
|
|
2935
|
+
}
|
|
2936
|
+
|
|
2937
|
+
.tlui-main-toolbar--vertical {
|
|
2938
|
+
position: absolute;
|
|
2939
|
+
left: 0;
|
|
2940
|
+
top: 90px; /* height of page menu + 'back to content' button */
|
|
2941
|
+
bottom: 140px; /* height of expanded mini-map */
|
|
2942
|
+
padding-left: calc(var(--tl-space-3) + var(--tl-sab));
|
|
2943
|
+
}
|
|
2944
|
+
|
|
2945
|
+
[data-breakpoints-below*='6'] .tlui-main-toolbar--vertical {
|
|
2946
|
+
bottom: 90px; /* collapsed mini-map, but same as top to keep things looking even */
|
|
2908
2947
|
}
|
|
2909
2948
|
|
|
2910
2949
|
/* Centered Content */
|
|
@@ -2912,73 +2951,141 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2912
2951
|
position: relative;
|
|
2913
2952
|
width: fit-content;
|
|
2914
2953
|
display: flex;
|
|
2915
|
-
gap: var(--space-3);
|
|
2916
|
-
align-items: flex-
|
|
2954
|
+
gap: var(--tl-space-3);
|
|
2955
|
+
align-items: flex-start;
|
|
2917
2956
|
}
|
|
2918
2957
|
|
|
2919
|
-
.tlui-main-
|
|
2958
|
+
.tlui-main-toolbar--vertical .tlui-main-toolbar__inner {
|
|
2959
|
+
flex-direction: column;
|
|
2960
|
+
}
|
|
2961
|
+
|
|
2962
|
+
.tlui-main-toolbar--horizontal .tlui-main-toolbar__left {
|
|
2920
2963
|
width: fit-content;
|
|
2921
2964
|
}
|
|
2965
|
+
.tlui-main-toolbar--vertical .tlui-main-toolbar__left {
|
|
2966
|
+
display: flex;
|
|
2967
|
+
height: fit-content;
|
|
2968
|
+
}
|
|
2922
2969
|
|
|
2923
2970
|
/* Row of controls + lock button */
|
|
2924
2971
|
.tlui-main-toolbar__extras {
|
|
2925
2972
|
position: relative;
|
|
2926
|
-
z-index: var(--layer-above);
|
|
2927
|
-
width: 100%;
|
|
2973
|
+
z-index: var(--tl-layer-above);
|
|
2928
2974
|
pointer-events: none;
|
|
2929
|
-
|
|
2930
|
-
height: 48px;
|
|
2975
|
+
align-self: stretch;
|
|
2931
2976
|
}
|
|
2932
2977
|
|
|
2933
2978
|
.tlui-main-toolbar__extras:empty {
|
|
2934
2979
|
display: none;
|
|
2935
2980
|
}
|
|
2936
2981
|
|
|
2982
|
+
.tlui-main-toolbar--horizontal .tlui-main-toolbar__extras {
|
|
2983
|
+
height: 48px;
|
|
2984
|
+
top: 6px;
|
|
2985
|
+
}
|
|
2986
|
+
|
|
2987
|
+
.tlui-main-toolbar--vertical .tlui-main-toolbar__extras {
|
|
2988
|
+
width: 48px;
|
|
2989
|
+
order: 1;
|
|
2990
|
+
}
|
|
2991
|
+
|
|
2937
2992
|
.tlui-main-toolbar__extras__controls {
|
|
2938
|
-
display: flex;
|
|
2939
2993
|
position: relative;
|
|
2940
|
-
|
|
2941
|
-
|
|
2942
|
-
|
|
2943
|
-
|
|
2944
|
-
|
|
2945
|
-
|
|
2994
|
+
z-index: var(--tl-layer-above);
|
|
2995
|
+
background-color: var(--tl-color-low);
|
|
2996
|
+
border: 2px solid var(--tl-color-background);
|
|
2997
|
+
pointer-events: all;
|
|
2998
|
+
}
|
|
2999
|
+
|
|
3000
|
+
.tlui-main-toolbar--horizontal .tlui-main-toolbar__extras__controls {
|
|
3001
|
+
border-top-left-radius: var(--tl-radius-4);
|
|
3002
|
+
border-top-right-radius: var(--tl-radius-4);
|
|
2946
3003
|
margin-left: 8px;
|
|
2947
3004
|
margin-right: 0px;
|
|
2948
|
-
|
|
3005
|
+
width: fit-content;
|
|
3006
|
+
}
|
|
3007
|
+
|
|
3008
|
+
.tlui-main-toolbar--vertical .tlui-main-toolbar__extras__controls {
|
|
3009
|
+
border-top-right-radius: var(--tl-radius-4);
|
|
3010
|
+
border-bottom-right-radius: var(--tl-radius-4);
|
|
3011
|
+
margin-top: 8px;
|
|
3012
|
+
margin-left: -2px;
|
|
3013
|
+
margin-bottom: 0px;
|
|
2949
3014
|
width: fit-content;
|
|
2950
3015
|
}
|
|
2951
3016
|
|
|
2952
3017
|
.tlui-main-toolbar__tools {
|
|
2953
|
-
|
|
2954
|
-
|
|
2955
|
-
align-items: center;
|
|
2956
|
-
border-radius: var(--radius-4);
|
|
2957
|
-
z-index: var(--layer-panels);
|
|
3018
|
+
border-radius: var(--tl-radius-4);
|
|
3019
|
+
z-index: var(--tl-layer-panels);
|
|
2958
3020
|
pointer-events: all;
|
|
2959
3021
|
position: relative;
|
|
2960
|
-
background: var(--color-panel);
|
|
2961
|
-
box-shadow: var(--shadow-2);
|
|
3022
|
+
background: var(--tl-color-panel);
|
|
3023
|
+
box-shadow: var(--tl-shadow-2);
|
|
2962
3024
|
}
|
|
2963
3025
|
|
|
2964
|
-
.tlui-main-
|
|
3026
|
+
.tlui-main-toolbar--horizontal .tlui-main-toolbar__mobile-style-panel {
|
|
3027
|
+
align-self: flex-end;
|
|
3028
|
+
}
|
|
3029
|
+
.tlui-main-toolbar--vertical .tlui-main-toolbar__mobile-style-panel {
|
|
3030
|
+
align-self: flex-start;
|
|
3031
|
+
}
|
|
3032
|
+
|
|
3033
|
+
.tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {
|
|
2965
3034
|
width: 40px;
|
|
2966
3035
|
margin-left: 2px;
|
|
2967
3036
|
}
|
|
3037
|
+
.tlui-main-toolbar--vertical .tlui-main-toolbar__overflow {
|
|
3038
|
+
height: 40px;
|
|
3039
|
+
margin-top: 2px;
|
|
3040
|
+
}
|
|
2968
3041
|
|
|
2969
|
-
.tlui-layout__mobile .tlui-main-toolbar__overflow {
|
|
3042
|
+
.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {
|
|
2970
3043
|
width: 32px;
|
|
2971
3044
|
padding: 0px;
|
|
2972
3045
|
}
|
|
2973
3046
|
|
|
2974
|
-
.tlui-main-toolbar *[data-state='open']::after {
|
|
2975
|
-
background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
3047
|
+
.tlui-main-toolbar--horizontal *[data-state='open']::after {
|
|
3048
|
+
background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
2976
3049
|
opacity: 1;
|
|
2977
3050
|
}
|
|
3051
|
+
.tlui-main-toolbar--vertical *[data-state='open']::after {
|
|
3052
|
+
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
3053
|
+
opacity: 1;
|
|
3054
|
+
}
|
|
3055
|
+
|
|
3056
|
+
.tlui-main-toolbar__tools [data-toolbar-visible='false'],
|
|
3057
|
+
.tlui-main-toolbar__overflow-content [data-toolbar-visible='false'] {
|
|
3058
|
+
display: none;
|
|
3059
|
+
}
|
|
3060
|
+
|
|
3061
|
+
.tlui-main-toolbar__group:empty {
|
|
3062
|
+
display: none;
|
|
3063
|
+
}
|
|
3064
|
+
.tlui-row.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {
|
|
3065
|
+
border-right: 1px solid var(--color-divider);
|
|
3066
|
+
margin-right: 2px;
|
|
3067
|
+
}
|
|
3068
|
+
.tlui-column.tlui-main-toolbar__group:not(
|
|
3069
|
+
:nth-last-child(-n + 1 of [data-toolbar-visible='true'])
|
|
3070
|
+
) {
|
|
3071
|
+
border-bottom: 1px solid var(--color-divider);
|
|
3072
|
+
margin-bottom: 2px;
|
|
3073
|
+
}
|
|
3074
|
+
.tlui-grid.tlui-main-toolbar__group {
|
|
3075
|
+
grid-column: 1 / span 4;
|
|
3076
|
+
}
|
|
3077
|
+
.tlui-grid.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {
|
|
3078
|
+
border-bottom: 1px solid var(--color-divider);
|
|
3079
|
+
margin-bottom: 2px;
|
|
3080
|
+
}
|
|
2978
3081
|
|
|
2979
3082
|
@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%);
|
|
3083
|
+
.tlui-main-toolbar--horizontal *[data-state='open']:not(:hover)::after {
|
|
3084
|
+
background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
3085
|
+
opacity: 1;
|
|
3086
|
+
}
|
|
3087
|
+
.tlui-main-toolbar--vertical *[data-state='open']:not(:hover)::after {
|
|
3088
|
+
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
2982
3089
|
opacity: 1;
|
|
2983
3090
|
}
|
|
2984
3091
|
}
|
|
@@ -2989,9 +3096,9 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2989
3096
|
font-size: 12px;
|
|
2990
3097
|
padding: 2px 8px;
|
|
2991
3098
|
border-radius: 4px;
|
|
2992
|
-
background-color: var(--color-tooltip);
|
|
3099
|
+
background-color: var(--tl-color-tooltip);
|
|
2993
3100
|
box-shadow: none;
|
|
2994
|
-
color: var(--color-text-shadow);
|
|
3101
|
+
color: var(--tl-color-text-shadow);
|
|
2995
3102
|
max-width: 400px;
|
|
2996
3103
|
width: fit-content;
|
|
2997
3104
|
text-align: center;
|
|
@@ -3001,12 +3108,12 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3001
3108
|
}
|
|
3002
3109
|
|
|
3003
3110
|
.tlui-tooltip__arrow {
|
|
3004
|
-
fill: var(--color-tooltip);
|
|
3111
|
+
fill: var(--tl-color-tooltip);
|
|
3005
3112
|
will-change: opacity;
|
|
3006
3113
|
}
|
|
3007
3114
|
|
|
3008
3115
|
[data-radix-popper-content-wrapper]:has(.tlui-tooltip) {
|
|
3009
|
-
z-index: var(--layer-toasts) !important;
|
|
3116
|
+
z-index: var(--tl-layer-toasts) !important;
|
|
3010
3117
|
}
|
|
3011
3118
|
|
|
3012
3119
|
[data-radix-popper-content-wrapper]:has(.tlui-tooltip[data-should-animate='true']) {
|
|
@@ -3016,17 +3123,17 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3016
3123
|
/* ------------------- Debug panel ------------------ */
|
|
3017
3124
|
|
|
3018
3125
|
.tlui-debug-panel {
|
|
3019
|
-
background-color: var(--color-low);
|
|
3126
|
+
background-color: var(--tl-color-low);
|
|
3020
3127
|
width: 100%;
|
|
3021
3128
|
display: grid;
|
|
3022
3129
|
align-items: center;
|
|
3023
3130
|
grid-template-columns: 1fr auto auto auto;
|
|
3024
3131
|
justify-content: space-between;
|
|
3025
|
-
padding-left: var(--space-4);
|
|
3026
|
-
border-top: 1px solid var(--color-background);
|
|
3132
|
+
padding-left: var(--tl-space-4);
|
|
3133
|
+
border-top: 1px solid var(--tl-color-background);
|
|
3027
3134
|
font-size: 12px;
|
|
3028
|
-
color: var(--color-text-1);
|
|
3029
|
-
z-index: var(--layer-panels);
|
|
3135
|
+
color: var(--tl-color-text-1);
|
|
3136
|
+
z-index: var(--tl-layer-panels);
|
|
3030
3137
|
pointer-events: all;
|
|
3031
3138
|
}
|
|
3032
3139
|
|
|
@@ -3042,7 +3149,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3042
3149
|
|
|
3043
3150
|
.tlui-debug-panel__fps__slow {
|
|
3044
3151
|
font-weight: bold;
|
|
3045
|
-
color: var(--color-danger);
|
|
3152
|
+
color: var(--tl-color-danger);
|
|
3046
3153
|
}
|
|
3047
3154
|
|
|
3048
3155
|
.tlui-a11y-audit {
|
|
@@ -3052,7 +3159,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3052
3159
|
.tlui-a11y-audit th,
|
|
3053
3160
|
.tlui-a11y-audit td {
|
|
3054
3161
|
padding: 8px;
|
|
3055
|
-
border: 1px solid var(--color-low-border);
|
|
3162
|
+
border: 1px solid var(--tl-color-low-border);
|
|
3056
3163
|
}
|
|
3057
3164
|
|
|
3058
3165
|
/* --------------------- Toasts --------------------- */
|
|
@@ -3065,10 +3172,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3065
3172
|
align-items: flex-end;
|
|
3066
3173
|
justify-content: flex-end;
|
|
3067
3174
|
flex-direction: column;
|
|
3068
|
-
gap: var(--space-3);
|
|
3175
|
+
gap: var(--tl-space-3);
|
|
3069
3176
|
pointer-events: none;
|
|
3070
|
-
padding: 0px var(--space-3) 64px 0px;
|
|
3071
|
-
z-index: var(--layer-toasts);
|
|
3177
|
+
padding: 0px var(--tl-space-3) 64px 0px;
|
|
3178
|
+
z-index: var(--tl-layer-toasts);
|
|
3072
3179
|
}
|
|
3073
3180
|
|
|
3074
3181
|
.tlui-toast__viewport > * {
|
|
@@ -3077,34 +3184,34 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3077
3184
|
|
|
3078
3185
|
.tlui-toast__icon {
|
|
3079
3186
|
padding-top: 11px;
|
|
3080
|
-
padding-left: var(--space-4);
|
|
3081
|
-
color: var(--color-text-1);
|
|
3187
|
+
padding-left: var(--tl-space-4);
|
|
3188
|
+
color: var(--tl-color-text-1);
|
|
3082
3189
|
}
|
|
3083
3190
|
|
|
3084
3191
|
.tlui-toast__container {
|
|
3085
3192
|
min-width: 200px;
|
|
3086
3193
|
display: flex;
|
|
3087
3194
|
flex-direction: row;
|
|
3088
|
-
background-color: var(--color-panel);
|
|
3089
|
-
box-shadow: var(--shadow-2);
|
|
3090
|
-
border-radius: var(--radius-3);
|
|
3195
|
+
background-color: var(--tl-color-panel);
|
|
3196
|
+
box-shadow: var(--tl-shadow-2);
|
|
3197
|
+
border-radius: var(--tl-radius-3);
|
|
3091
3198
|
font-size: 12px;
|
|
3092
3199
|
}
|
|
3093
3200
|
|
|
3094
3201
|
.tlui-toast__container[data-severity='success'] .tlui-icon {
|
|
3095
|
-
color: var(--color-success);
|
|
3202
|
+
color: var(--tl-color-success);
|
|
3096
3203
|
}
|
|
3097
3204
|
|
|
3098
3205
|
.tlui-toast__container[data-severity='info'] .tlui-icon {
|
|
3099
|
-
color: var(--color-info);
|
|
3206
|
+
color: var(--tl-color-info);
|
|
3100
3207
|
}
|
|
3101
3208
|
|
|
3102
3209
|
.tlui-toast__container[data-severity='warning'] .tlui-icon {
|
|
3103
|
-
color: var(--color-warning);
|
|
3210
|
+
color: var(--tl-color-warning);
|
|
3104
3211
|
}
|
|
3105
3212
|
|
|
3106
3213
|
.tlui-toast__container[data-severity='error'] .tlui-icon {
|
|
3107
|
-
color: var(--color-danger);
|
|
3214
|
+
color: var(--tl-color-danger);
|
|
3108
3215
|
}
|
|
3109
3216
|
|
|
3110
3217
|
.tlui-toast__main {
|
|
@@ -3113,27 +3220,27 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3113
3220
|
}
|
|
3114
3221
|
|
|
3115
3222
|
.tlui-toast__content {
|
|
3116
|
-
padding: var(--space-4);
|
|
3223
|
+
padding: var(--tl-space-4);
|
|
3117
3224
|
display: flex;
|
|
3118
3225
|
line-height: 1.4;
|
|
3119
3226
|
flex-direction: column;
|
|
3120
|
-
gap: var(--space-3);
|
|
3227
|
+
gap: var(--tl-space-3);
|
|
3121
3228
|
}
|
|
3122
3229
|
|
|
3123
3230
|
.tlui-toast__main[data-actions='true'] .tlui-toast__content {
|
|
3124
|
-
padding-bottom: var(--space-2);
|
|
3231
|
+
padding-bottom: var(--tl-space-2);
|
|
3125
3232
|
}
|
|
3126
3233
|
|
|
3127
3234
|
.tlui-toast__title {
|
|
3128
3235
|
font-weight: bold;
|
|
3129
|
-
color: var(--color-text-1);
|
|
3236
|
+
color: var(--tl-color-text-1);
|
|
3130
3237
|
/* this makes the default toast look better */
|
|
3131
3238
|
line-height: 16px;
|
|
3132
3239
|
}
|
|
3133
3240
|
|
|
3134
3241
|
.tlui-toast__description {
|
|
3135
|
-
color: var(--color-text-1);
|
|
3136
|
-
padding: var(--space-3);
|
|
3242
|
+
color: var(--tl-color-text-1);
|
|
3243
|
+
padding: var(--tl-space-3);
|
|
3137
3244
|
margin: 0px;
|
|
3138
3245
|
padding: 0px;
|
|
3139
3246
|
}
|
|
@@ -3185,14 +3292,14 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3185
3292
|
left: 0px;
|
|
3186
3293
|
width: 100%;
|
|
3187
3294
|
height: 100%;
|
|
3188
|
-
z-index: var(--layer-canvas-overlays);
|
|
3189
|
-
background-color: var(--color-overlay);
|
|
3295
|
+
z-index: var(--tl-layer-canvas-overlays);
|
|
3296
|
+
background-color: var(--tl-color-overlay);
|
|
3190
3297
|
pointer-events: all;
|
|
3191
3298
|
animation: tl-fade-in 0.12s ease-out;
|
|
3192
3299
|
display: grid;
|
|
3193
3300
|
place-items: center;
|
|
3194
3301
|
overflow-y: auto;
|
|
3195
|
-
padding: 0px var(--space-3);
|
|
3302
|
+
padding: 0px var(--tl-space-3);
|
|
3196
3303
|
}
|
|
3197
3304
|
|
|
3198
3305
|
.tlui-dialog__content {
|
|
@@ -3200,9 +3307,9 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3200
3307
|
flex-direction: column;
|
|
3201
3308
|
position: relative;
|
|
3202
3309
|
cursor: default;
|
|
3203
|
-
background-color: var(--color-panel);
|
|
3204
|
-
box-shadow: var(--shadow-3);
|
|
3205
|
-
border-radius: var(--radius-3);
|
|
3310
|
+
background-color: var(--tl-color-panel);
|
|
3311
|
+
box-shadow: var(--tl-shadow-3);
|
|
3312
|
+
border-radius: var(--tl-radius-3);
|
|
3206
3313
|
font-size: 12px;
|
|
3207
3314
|
overflow: hidden;
|
|
3208
3315
|
min-width: 300px;
|
|
@@ -3215,9 +3322,9 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3215
3322
|
display: flex;
|
|
3216
3323
|
align-items: center;
|
|
3217
3324
|
flex: 0;
|
|
3218
|
-
z-index: var(--layer-header-footer);
|
|
3219
|
-
padding-left: var(--space-4);
|
|
3220
|
-
color: var(--color-text);
|
|
3325
|
+
z-index: var(--tl-layer-header-footer);
|
|
3326
|
+
padding-left: var(--tl-space-4);
|
|
3327
|
+
color: var(--tl-color-text);
|
|
3221
3328
|
height: 40px;
|
|
3222
3329
|
}
|
|
3223
3330
|
|
|
@@ -3226,7 +3333,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3226
3333
|
font-weight: inherit;
|
|
3227
3334
|
font-size: 12px;
|
|
3228
3335
|
margin: 0px;
|
|
3229
|
-
color: var(--color-text-1);
|
|
3336
|
+
color: var(--tl-color-text-1);
|
|
3230
3337
|
}
|
|
3231
3338
|
|
|
3232
3339
|
.tlui-dialog__header__close {
|
|
@@ -3234,16 +3341,16 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3234
3341
|
}
|
|
3235
3342
|
|
|
3236
3343
|
.tlui-dialog__body {
|
|
3237
|
-
padding: var(--space-4) var(--space-4);
|
|
3344
|
+
padding: var(--tl-space-4) var(--tl-space-4);
|
|
3238
3345
|
flex: 0 1;
|
|
3239
3346
|
overflow-y: auto;
|
|
3240
3347
|
overflow-x: hidden;
|
|
3241
|
-
color: var(--color-text-1);
|
|
3348
|
+
color: var(--tl-color-text-1);
|
|
3242
3349
|
user-select: all;
|
|
3243
3350
|
-webkit-user-select: text;
|
|
3244
3351
|
}
|
|
3245
3352
|
.tlui-dialog__body a {
|
|
3246
|
-
color: var(--color-selected);
|
|
3353
|
+
color: var(--tl-color-selected);
|
|
3247
3354
|
}
|
|
3248
3355
|
|
|
3249
3356
|
.tlui-dialog__body ul,
|
|
@@ -3251,13 +3358,13 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3251
3358
|
padding-left: 16px;
|
|
3252
3359
|
display: flex;
|
|
3253
3360
|
flex-direction: column;
|
|
3254
|
-
gap: var(--space-2);
|
|
3361
|
+
gap: var(--tl-space-2);
|
|
3255
3362
|
}
|
|
3256
3363
|
|
|
3257
3364
|
.tlui-dialog__footer {
|
|
3258
3365
|
position: relative;
|
|
3259
3366
|
min-height: 12px;
|
|
3260
|
-
z-index: var(--layer-header-footer);
|
|
3367
|
+
z-index: var(--tl-layer-header-footer);
|
|
3261
3368
|
}
|
|
3262
3369
|
|
|
3263
3370
|
.tlui-dialog__footer__actions {
|
|
@@ -3277,15 +3384,15 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3277
3384
|
.tlui-edit-link-dialog {
|
|
3278
3385
|
display: flex;
|
|
3279
3386
|
flex-direction: column;
|
|
3280
|
-
gap: var(--space-4);
|
|
3281
|
-
color: var(--color-text);
|
|
3387
|
+
gap: var(--tl-space-4);
|
|
3388
|
+
color: var(--tl-color-text);
|
|
3282
3389
|
}
|
|
3283
3390
|
|
|
3284
3391
|
.tlui-edit-link-dialog__input {
|
|
3285
|
-
background-color: var(--color-muted-2);
|
|
3392
|
+
background-color: var(--tl-color-muted-2);
|
|
3286
3393
|
flex-grow: 2;
|
|
3287
|
-
border-radius: var(--radius-2);
|
|
3288
|
-
padding: 0px var(--space-4);
|
|
3394
|
+
border-radius: var(--tl-radius-2);
|
|
3395
|
+
padding: 0px var(--tl-space-4);
|
|
3289
3396
|
}
|
|
3290
3397
|
|
|
3291
3398
|
/* Embed Dialog */
|
|
@@ -3293,15 +3400,15 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3293
3400
|
.tlui-embed__spacer {
|
|
3294
3401
|
flex-grow: 2;
|
|
3295
3402
|
min-height: 0px;
|
|
3296
|
-
margin-left: calc(-1 * var(--space-4));
|
|
3297
|
-
margin-top: calc(-1 * var(--space-4));
|
|
3403
|
+
margin-left: calc(-1 * var(--tl-space-4));
|
|
3404
|
+
margin-top: calc(-1 * var(--tl-space-4));
|
|
3298
3405
|
pointer-events: none;
|
|
3299
3406
|
}
|
|
3300
3407
|
|
|
3301
3408
|
.tlui-embed-dialog__list {
|
|
3302
3409
|
display: flex;
|
|
3303
3410
|
flex-direction: column;
|
|
3304
|
-
padding: 0px var(--space-3) var(--space-4) var(--space-3);
|
|
3411
|
+
padding: 0px var(--tl-space-3) var(--tl-space-4) var(--tl-space-3);
|
|
3305
3412
|
}
|
|
3306
3413
|
|
|
3307
3414
|
.tlui-embed-dialog__item__image {
|
|
@@ -3313,49 +3420,49 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3313
3420
|
background-size: contain;
|
|
3314
3421
|
background-repeat: no-repeat;
|
|
3315
3422
|
background-position: center center;
|
|
3316
|
-
background-color: var(--color-selected-contrast);
|
|
3317
|
-
border-radius: var(--radius-1);
|
|
3423
|
+
background-color: var(--tl-color-selected-contrast);
|
|
3424
|
+
border-radius: var(--tl-radius-1);
|
|
3318
3425
|
}
|
|
3319
3426
|
|
|
3320
3427
|
.tlui-embed-dialog__enter {
|
|
3321
3428
|
display: flex;
|
|
3322
3429
|
flex-direction: column;
|
|
3323
|
-
gap: var(--space-4);
|
|
3324
|
-
color: var(--color-text-1);
|
|
3430
|
+
gap: var(--tl-space-4);
|
|
3431
|
+
color: var(--tl-color-text-1);
|
|
3325
3432
|
}
|
|
3326
3433
|
|
|
3327
3434
|
.tlui-embed-dialog__input {
|
|
3328
|
-
background-color: var(--color-muted-2);
|
|
3435
|
+
background-color: var(--tl-color-muted-2);
|
|
3329
3436
|
flex-grow: 2;
|
|
3330
|
-
border-radius: var(--radius-2);
|
|
3331
|
-
padding: 0px var(--space-4);
|
|
3437
|
+
border-radius: var(--tl-radius-2);
|
|
3438
|
+
padding: 0px var(--tl-space-4);
|
|
3332
3439
|
}
|
|
3333
3440
|
|
|
3334
3441
|
.tlui-embed-dialog__warning {
|
|
3335
|
-
color: var(--color-danger);
|
|
3442
|
+
color: var(--tl-color-danger);
|
|
3336
3443
|
text-shadow: none;
|
|
3337
3444
|
}
|
|
3338
3445
|
|
|
3339
3446
|
.tlui-embed-dialog__instruction__link {
|
|
3340
3447
|
display: flex;
|
|
3341
|
-
gap: var(--space-1);
|
|
3342
|
-
margin-top: var(--space-4);
|
|
3448
|
+
gap: var(--tl-space-1);
|
|
3449
|
+
margin-top: var(--tl-space-4);
|
|
3343
3450
|
}
|
|
3344
3451
|
|
|
3345
3452
|
.tlui-embed-dialog__enter a {
|
|
3346
|
-
color: var(--color-text-1);
|
|
3453
|
+
color: var(--tl-color-text-1);
|
|
3347
3454
|
}
|
|
3348
3455
|
|
|
3349
3456
|
/* --------------- Keyboard shortcuts --------------- */
|
|
3350
3457
|
|
|
3351
3458
|
.tlui-shortcuts-dialog__header {
|
|
3352
|
-
border-bottom: 1px solid var(--color-divider);
|
|
3459
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
3353
3460
|
}
|
|
3354
3461
|
|
|
3355
3462
|
.tlui-shortcuts-dialog__body {
|
|
3356
3463
|
position: relative;
|
|
3357
3464
|
columns: 3;
|
|
3358
|
-
column-gap: var(--space-9);
|
|
3465
|
+
column-gap: var(--tl-space-9);
|
|
3359
3466
|
pointer-events: all;
|
|
3360
3467
|
touch-action: auto;
|
|
3361
3468
|
|
|
@@ -3373,14 +3480,14 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3373
3480
|
|
|
3374
3481
|
.tlui-shortcuts-dialog__group {
|
|
3375
3482
|
break-inside: avoid-column;
|
|
3376
|
-
padding-bottom: var(--space-6);
|
|
3483
|
+
padding-bottom: var(--tl-space-6);
|
|
3377
3484
|
}
|
|
3378
3485
|
|
|
3379
3486
|
.tlui-shortcuts-dialog__group__title {
|
|
3380
3487
|
font-size: inherit;
|
|
3381
3488
|
font-weight: inherit;
|
|
3382
3489
|
margin: 0px;
|
|
3383
|
-
color: var(--color-text-3);
|
|
3490
|
+
color: var(--tl-color-text-3);
|
|
3384
3491
|
height: 32px;
|
|
3385
3492
|
display: flex;
|
|
3386
3493
|
align-items: center;
|
|
@@ -3389,12 +3496,12 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3389
3496
|
.tlui-shortcuts-dialog__group__content {
|
|
3390
3497
|
display: flex;
|
|
3391
3498
|
flex-direction: column;
|
|
3392
|
-
color: var(--color-text-1);
|
|
3499
|
+
color: var(--tl-color-text-1);
|
|
3393
3500
|
}
|
|
3394
3501
|
|
|
3395
3502
|
.tlui-shortcuts-dialog__key-pair {
|
|
3396
3503
|
display: flex;
|
|
3397
|
-
gap: var(--space-4);
|
|
3504
|
+
gap: var(--tl-space-4);
|
|
3398
3505
|
align-items: center;
|
|
3399
3506
|
justify-content: space-between;
|
|
3400
3507
|
height: 32px;
|
|
@@ -3421,12 +3528,12 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3421
3528
|
height: 24px;
|
|
3422
3529
|
background: linear-gradient(
|
|
3423
3530
|
to bottom,
|
|
3424
|
-
var(--color-panel-transparent) 0%,
|
|
3425
|
-
var(--color-panel) 90%,
|
|
3426
|
-
var(--color-panel) 100%
|
|
3531
|
+
var(--tl-color-panel-transparent) 0%,
|
|
3532
|
+
var(--tl-color-panel) 90%,
|
|
3533
|
+
var(--tl-color-panel) 100%
|
|
3427
3534
|
);
|
|
3428
|
-
border-bottom-left-radius: var(--radius-3);
|
|
3429
|
-
border-bottom-right-radius: var(--radius-3);
|
|
3535
|
+
border-bottom-left-radius: var(--tl-radius-3);
|
|
3536
|
+
border-bottom-right-radius: var(--tl-radius-3);
|
|
3430
3537
|
pointer-events: none;
|
|
3431
3538
|
}
|
|
3432
3539
|
|
|
@@ -3441,10 +3548,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3441
3548
|
.tlui-help-menu {
|
|
3442
3549
|
pointer-events: all;
|
|
3443
3550
|
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);
|
|
3551
|
+
bottom: var(--tl-space-2);
|
|
3552
|
+
right: var(--tl-space-2);
|
|
3553
|
+
z-index: var(--tl-layer-panels);
|
|
3554
|
+
border: 2px solid var(--tl-color-background);
|
|
3448
3555
|
border-radius: 100%;
|
|
3449
3556
|
}
|
|
3450
3557
|
|
|
@@ -3455,7 +3562,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3455
3562
|
display: flex;
|
|
3456
3563
|
flex-direction: row;
|
|
3457
3564
|
justify-content: flex-end;
|
|
3458
|
-
z-index: var(--layer-panels);
|
|
3565
|
+
z-index: var(--tl-layer-panels);
|
|
3459
3566
|
align-items: center;
|
|
3460
3567
|
padding-top: 2px;
|
|
3461
3568
|
padding-right: 4px;
|
|
@@ -3471,7 +3578,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3471
3578
|
border: none;
|
|
3472
3579
|
cursor: pointer;
|
|
3473
3580
|
pointer-events: all;
|
|
3474
|
-
border-radius: var(--radius-1);
|
|
3581
|
+
border-radius: var(--tl-radius-1);
|
|
3475
3582
|
padding-right: 1px;
|
|
3476
3583
|
height: 100%;
|
|
3477
3584
|
}
|
|
@@ -3484,8 +3591,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3484
3591
|
.tlui-people-menu__avatar {
|
|
3485
3592
|
height: 24px;
|
|
3486
3593
|
width: 24px;
|
|
3487
|
-
border: 2px solid var(--color-background);
|
|
3488
|
-
background-color: var(--color-low);
|
|
3594
|
+
border: 2px solid var(--tl-color-background);
|
|
3595
|
+
background-color: var(--tl-color-low);
|
|
3489
3596
|
border-radius: 100%;
|
|
3490
3597
|
display: flex;
|
|
3491
3598
|
align-items: center;
|
|
@@ -3494,7 +3601,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3494
3601
|
font-size: 10px;
|
|
3495
3602
|
font-weight: bold;
|
|
3496
3603
|
text-align: center;
|
|
3497
|
-
color: var(--color-selected-contrast);
|
|
3604
|
+
color: var(--tl-color-selected-contrast);
|
|
3498
3605
|
z-index: 2;
|
|
3499
3606
|
}
|
|
3500
3607
|
|
|
@@ -3508,7 +3615,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3508
3615
|
|
|
3509
3616
|
@media (hover: hover) {
|
|
3510
3617
|
.tlui-people-menu__avatars-button:hover .tlui-people-menu__avatar {
|
|
3511
|
-
border-color: var(--color-low);
|
|
3618
|
+
border-color: var(--tl-color-low);
|
|
3512
3619
|
}
|
|
3513
3620
|
}
|
|
3514
3621
|
|
|
@@ -3516,12 +3623,12 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3516
3623
|
min-width: 0px;
|
|
3517
3624
|
font-size: 11px;
|
|
3518
3625
|
font-weight: 600;
|
|
3519
|
-
color: var(--color-text-1);
|
|
3626
|
+
color: var(--tl-color-text-1);
|
|
3520
3627
|
font-family: inherit;
|
|
3521
3628
|
padding: 0px 4px;
|
|
3522
3629
|
}
|
|
3523
3630
|
.tlui-people-menu__more::after {
|
|
3524
|
-
border-radius: var(--radius-2);
|
|
3631
|
+
border-radius: var(--tl-radius-2);
|
|
3525
3632
|
inset: 0px;
|
|
3526
3633
|
}
|
|
3527
3634
|
|
|
@@ -3550,7 +3657,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3550
3657
|
}
|
|
3551
3658
|
|
|
3552
3659
|
.tlui-people-menu__section:not(:last-child) {
|
|
3553
|
-
border-bottom: 1px solid var(--color-divider);
|
|
3660
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
3554
3661
|
}
|
|
3555
3662
|
|
|
3556
3663
|
.tlui-people-menu__user {
|
|
@@ -3569,7 +3676,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3569
3676
|
text-overflow: ellipsis;
|
|
3570
3677
|
white-space: nowrap;
|
|
3571
3678
|
font-size: 12px;
|
|
3572
|
-
color: var(--color-text-1);
|
|
3679
|
+
color: var(--tl-color-text-1);
|
|
3573
3680
|
max-width: 100%;
|
|
3574
3681
|
flex-grow: 1;
|
|
3575
3682
|
flex-shrink: 100;
|
|
@@ -3581,7 +3688,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3581
3688
|
text-overflow: ellipsis;
|
|
3582
3689
|
white-space: nowrap;
|
|
3583
3690
|
font-size: 12px;
|
|
3584
|
-
color: var(--color-text-3);
|
|
3691
|
+
color: var(--tl-color-text-3);
|
|
3585
3692
|
flex-grow: 100;
|
|
3586
3693
|
flex-shrink: 0;
|
|
3587
3694
|
margin-left: 4px;
|
|
@@ -3672,7 +3779,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3672
3779
|
inset: 0px;
|
|
3673
3780
|
border-width: 2px;
|
|
3674
3781
|
border-style: solid;
|
|
3675
|
-
z-index: var(--layer-following-indicator);
|
|
3782
|
+
z-index: var(--tl-layer-following-indicator);
|
|
3676
3783
|
pointer-events: none;
|
|
3677
3784
|
}
|
|
3678
3785
|
|
|
@@ -3691,7 +3798,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3691
3798
|
}
|
|
3692
3799
|
|
|
3693
3800
|
.tlui-contextual-toolbar [data-isactive='true']::after {
|
|
3694
|
-
background-color: var(--color-muted-2);
|
|
3801
|
+
background-color: var(--tl-color-muted-2);
|
|
3695
3802
|
opacity: 1;
|
|
3696
3803
|
}
|
|
3697
3804
|
|
|
@@ -3707,7 +3814,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3707
3814
|
|
|
3708
3815
|
.tlui-contextual-toolbar[data-visible='true'] {
|
|
3709
3816
|
opacity: 1;
|
|
3710
|
-
z-index: var(--layer-menus);
|
|
3817
|
+
z-index: var(--tl-layer-menus);
|
|
3711
3818
|
}
|
|
3712
3819
|
|
|
3713
3820
|
.tlui-contextual-toolbar[data-interactive='true'],
|
|
@@ -3766,7 +3873,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3766
3873
|
|
|
3767
3874
|
@keyframes tlui-slide-in {
|
|
3768
3875
|
from {
|
|
3769
|
-
transform: translateX(calc(100% + var(--space-3)));
|
|
3876
|
+
transform: translateX(calc(100% + var(--tl-space-3)));
|
|
3770
3877
|
}
|
|
3771
3878
|
to {
|
|
3772
3879
|
transform: translateX(0px);
|
|
@@ -3778,7 +3885,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3778
3885
|
transform: translateX(var(--radix-toast-swipe-end-x));
|
|
3779
3886
|
}
|
|
3780
3887
|
to {
|
|
3781
|
-
transform: translateX(calc(100% + var(--space-3)));
|
|
3888
|
+
transform: translateX(calc(100% + var(--tl-space-3)));
|
|
3782
3889
|
}
|
|
3783
3890
|
}
|
|
3784
3891
|
|