tldraw 3.16.0-canary.cf24aedcd577 → 3.16.0-canary.d3a23ebd1b0b
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 +93 -1
- package/dist-cjs/index.js +9 -1
- package/dist-cjs/index.js.map +2 -2
- package/dist-cjs/lib/Tldraw.js +12 -2
- package/dist-cjs/lib/Tldraw.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/defaultExternalContentHandlers.js +5 -4
- package/dist-cjs/lib/defaultExternalContentHandlers.js.map +2 -2
- package/dist-cjs/lib/shapes/arrow/elbow/ElbowArrowDebug.js +3 -3
- package/dist-cjs/lib/shapes/arrow/elbow/ElbowArrowDebug.js.map +1 -1
- package/dist-cjs/lib/shapes/embed/EmbedShapeUtil.js +1 -1
- package/dist-cjs/lib/shapes/embed/EmbedShapeUtil.js.map +1 -1
- package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js +7 -4
- package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/frame/components/FrameHeading.js +1 -1
- package/dist-cjs/lib/shapes/frame/components/FrameHeading.js.map +2 -2
- package/dist-cjs/lib/shapes/image/ImageShapeUtil.js +6 -3
- package/dist-cjs/lib/shapes/image/ImageShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/ShapeFill.js +1 -1
- package/dist-cjs/lib/shapes/shared/ShapeFill.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/freehand/svg.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/EraserTool/childStates/Erasing.js +25 -1
- package/dist-cjs/lib/tools/EraserTool/childStates/Erasing.js.map +2 -2
- package/dist-cjs/lib/tools/EraserTool/childStates/Pointing.js +12 -0
- package/dist-cjs/lib/tools/EraserTool/childStates/Pointing.js.map +2 -2
- package/dist-cjs/lib/ui/TldrawUi.js +13 -12
- package/dist-cjs/lib/ui/TldrawUi.js.map +2 -2
- package/dist-cjs/lib/ui/assetUrls.js +13 -10
- package/dist-cjs/lib/ui/assetUrls.js.map +2 -2
- package/dist-cjs/lib/ui/components/{FollowingIndicator.js → DefaultFollowingIndicator.js} +6 -6
- package/dist-cjs/lib/ui/components/DefaultFollowingIndicator.js.map +7 -0
- package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js +6 -6
- package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js.map +1 -1
- package/dist-cjs/lib/ui/components/Minimap/MinimapManager.js +4 -4
- package/dist-cjs/lib/ui/components/Minimap/MinimapManager.js.map +2 -2
- package/dist-cjs/lib/ui/components/MobileStylePanel.js +1 -1
- package/dist-cjs/lib/ui/components/MobileStylePanel.js.map +2 -2
- package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js +1 -1
- package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js.map +2 -2
- package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js +1 -1
- package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js +6 -4
- package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js +94 -123
- package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuContext.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuGroup.js +0 -10
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuGroup.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js +3 -19
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js.map +2 -2
- package/dist-cjs/lib/ui/context/actions.js +16 -2
- package/dist-cjs/lib/ui/context/actions.js.map +2 -2
- package/dist-cjs/lib/ui/context/components.js +2 -0
- package/dist-cjs/lib/ui/context/components.js.map +2 -2
- package/dist-cjs/lib/ui/hooks/useTools.js +21 -3
- package/dist-cjs/lib/ui/hooks/useTools.js.map +2 -2
- package/dist-cjs/lib/ui/kbd-utils.js +9 -3
- package/dist-cjs/lib/ui/kbd-utils.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 +93 -1
- package/dist-esm/index.mjs +11 -2
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/lib/Tldraw.mjs +14 -4
- package/dist-esm/lib/Tldraw.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/defaultExternalContentHandlers.mjs +5 -4
- package/dist-esm/lib/defaultExternalContentHandlers.mjs.map +2 -2
- package/dist-esm/lib/shapes/arrow/elbow/ElbowArrowDebug.mjs +3 -3
- package/dist-esm/lib/shapes/arrow/elbow/ElbowArrowDebug.mjs.map +1 -1
- package/dist-esm/lib/shapes/embed/EmbedShapeUtil.mjs +1 -1
- package/dist-esm/lib/shapes/embed/EmbedShapeUtil.mjs.map +1 -1
- package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs +7 -4
- package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/frame/components/FrameHeading.mjs +1 -1
- package/dist-esm/lib/shapes/frame/components/FrameHeading.mjs.map +2 -2
- package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs +6 -3
- package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/ShapeFill.mjs +1 -1
- package/dist-esm/lib/shapes/shared/ShapeFill.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/freehand/svg.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/EraserTool/childStates/Erasing.mjs +26 -1
- package/dist-esm/lib/tools/EraserTool/childStates/Erasing.mjs.map +2 -2
- package/dist-esm/lib/tools/EraserTool/childStates/Pointing.mjs +13 -0
- package/dist-esm/lib/tools/EraserTool/childStates/Pointing.mjs.map +2 -2
- package/dist-esm/lib/ui/TldrawUi.mjs +13 -12
- package/dist-esm/lib/ui/TldrawUi.mjs.map +2 -2
- package/dist-esm/lib/ui/assetUrls.mjs +13 -10
- package/dist-esm/lib/ui/assetUrls.mjs.map +2 -2
- package/dist-esm/lib/ui/components/{FollowingIndicator.mjs → DefaultFollowingIndicator.mjs} +3 -3
- package/dist-esm/lib/ui/components/DefaultFollowingIndicator.mjs.map +7 -0
- package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs +6 -6
- package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs.map +1 -1
- package/dist-esm/lib/ui/components/Minimap/MinimapManager.mjs +4 -4
- package/dist-esm/lib/ui/components/Minimap/MinimapManager.mjs.map +2 -2
- package/dist-esm/lib/ui/components/MobileStylePanel.mjs +1 -1
- package/dist-esm/lib/ui/components/MobileStylePanel.mjs.map +2 -2
- package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs +1 -1
- package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs +1 -1
- package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs +6 -4
- package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs +103 -125
- package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuContext.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuGroup.mjs +0 -10
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuGroup.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs +3 -19
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs.map +2 -2
- package/dist-esm/lib/ui/context/actions.mjs +16 -2
- package/dist-esm/lib/ui/context/actions.mjs.map +2 -2
- package/dist-esm/lib/ui/context/components.mjs +2 -0
- package/dist-esm/lib/ui/context/components.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/useTools.mjs +22 -3
- package/dist-esm/lib/ui/hooks/useTools.mjs.map +2 -2
- package/dist-esm/lib/ui/kbd-utils.mjs +9 -3
- package/dist-esm/lib/ui/kbd-utils.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 +11 -34
- package/src/index.ts +6 -1
- package/src/lib/Tldraw.tsx +15 -2
- package/src/lib/canvas/TldrawScribble.tsx +1 -1
- package/src/lib/defaultExternalContentHandlers.ts +12 -4
- package/src/lib/shapes/arrow/ArrowShapeOptions.test.ts +2 -1
- package/src/lib/shapes/arrow/ArrowShapeTool.test.ts +4 -3
- package/src/lib/shapes/arrow/ArrowShapeUtil.test.ts +7 -6
- package/src/lib/shapes/arrow/elbow/ElbowArrowDebug.tsx +3 -3
- package/src/lib/shapes/draw/DrawShapeTool.test.ts +0 -5
- package/src/lib/shapes/embed/EmbedShapeUtil.tsx +1 -1
- package/src/lib/shapes/frame/FrameShapeUtil.tsx +16 -4
- package/src/lib/shapes/frame/components/FrameHeading.tsx +1 -1
- package/src/lib/shapes/image/ImageShapeUtil.tsx +6 -3
- package/src/lib/shapes/line/LineShapeUtil.test.tsx +4 -3
- package/src/lib/shapes/line/__snapshots__/LineShapeUtil.test.tsx.snap +2 -2
- package/src/lib/shapes/shared/ShapeFill.tsx +1 -1
- package/src/lib/shapes/shared/freehand/svg.ts +2 -0
- package/src/lib/shapes/text/TextShapeTool.test.ts +6 -5
- package/src/lib/shapes/video/VideoShapeUtil.tsx +3 -3
- package/src/lib/tools/EraserTool/childStates/Erasing.ts +34 -1
- package/src/lib/tools/EraserTool/childStates/Pointing.ts +20 -0
- package/src/lib/ui/TldrawUi.tsx +16 -10
- package/src/lib/ui/assetUrls.ts +13 -10
- package/src/lib/ui/components/{FollowingIndicator.tsx → DefaultFollowingIndicator.tsx} +2 -1
- package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx +6 -6
- package/src/lib/ui/components/Minimap/MinimapManager.ts +4 -4
- package/src/lib/ui/components/MobileStylePanel.tsx +1 -1
- package/src/lib/ui/components/StylePanel/DropdownPicker.tsx +1 -1
- package/src/lib/ui/components/Toolbar/DefaultImageToolbarContent.tsx +1 -1
- package/src/lib/ui/components/primitives/TldrawUiSlider.tsx +35 -30
- package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx +109 -127
- package/src/lib/ui/components/primitives/menus/TldrawUiMenuContext.tsx +0 -1
- package/src/lib/ui/components/primitives/menus/TldrawUiMenuGroup.tsx +0 -10
- package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx +5 -18
- package/src/lib/ui/context/actions.tsx +16 -2
- package/src/lib/ui/context/components.tsx +3 -0
- package/src/lib/ui/hooks/useTools.tsx +25 -3
- package/src/lib/ui/kbd-utils.ts +10 -3
- package/src/lib/ui/version.ts +3 -3
- package/src/lib/ui.css +230 -228
- package/src/lib/utils/excalidraw/__snapshots__/putExcalidrawContent.test.tsx.snap +5 -5
- package/src/lib/utils/tldr/__snapshots__/buildFromV1Document.test.ts.snap +4 -4
- package/src/test/A11y.test.tsx +3 -2
- package/src/test/ClickManager.test.ts +7 -6
- package/src/test/Editor.test.tsx +20 -19
- package/src/test/EraserTool.test.ts +184 -13
- package/src/test/HandTool.test.ts +10 -9
- package/src/test/HighlightShape.test.ts +2 -1
- package/src/test/SelectTool.test.ts +3 -2
- package/src/test/TLUserPreferences.test.ts +4 -3
- package/src/test/TestEditor.ts +13 -15
- package/src/test/TldrawEditor.test.tsx +11 -10
- package/src/test/ZoomTool.test.ts +7 -6
- package/src/test/__snapshots__/drawing.test.ts.snap +2 -2
- package/src/test/__snapshots__/groups.test.tsx.snap +6 -6
- package/src/test/__snapshots__/resizing.test.ts.snap +2 -2
- package/src/test/arrows-megabus.test.tsx +5 -4
- package/src/test/bindings.test.tsx +24 -37
- package/src/test/bookmark-shapes.test.ts +1 -8
- package/src/test/commands/__snapshots__/getSvgString.test.ts.snap +23 -7
- package/src/test/commands/__snapshots__/packShapes.test.ts.snap +8 -8
- package/src/test/commands/__snapshots__/zoomToFit.test.ts.snap +2 -2
- package/src/test/commands/alignShapes.test.tsx +25 -24
- package/src/test/commands/animationSpeed.test.ts +2 -1
- package/src/test/commands/centerOnPoint.test.ts +3 -2
- package/src/test/commands/clipboard.test.ts +3 -2
- package/src/test/commands/createShapes.test.ts +2 -1
- package/src/test/commands/deleteShapes.test.ts +2 -1
- package/src/test/commands/distributeShapes.test.tsx +11 -10
- package/src/test/commands/getSvgString.test.ts +2 -1
- package/src/test/commands/packShapes.test.ts +5 -4
- package/src/test/commands/resizeShape.test.ts +2 -1
- package/src/test/commands/rotateShapes.test.ts +7 -6
- package/src/test/commands/setCamera.test.ts +4 -3
- package/src/test/commands/setCurrentPage.test.ts +3 -2
- package/src/test/commands/stackShapes.test.ts +11 -10
- package/src/test/commands/stretch.test.tsx +13 -12
- package/src/test/createDeepLink.test.tsx +2 -1
- package/src/test/cropping.test.ts +3 -2
- package/src/test/drawing.test.ts +2 -1
- package/src/test/flipShapes.test.ts +4 -3
- package/src/test/frames.test.ts +25 -24
- package/src/test/getCulledShapes.test.tsx +3 -2
- package/src/test/groups.test.tsx +1 -1
- package/src/test/handleDeepLink.test.tsx +2 -1
- package/src/test/maxShapes.test.ts +3 -2
- package/src/test/modifiers.test.ts +5 -4
- package/src/test/navigation.test.ts +12 -11
- package/src/test/panning.test.ts +2 -1
- package/src/test/perf/perf.test.ts +2 -1
- package/src/test/registerDeepLinkListener.test.tsx +10 -9
- package/src/test/resizing.test.ts +39 -38
- package/src/test/select.test.tsx +4 -3
- package/src/test/selection-omnibus.test.ts +11 -10
- package/src/test/shapeutils.test.ts +4 -3
- package/src/test/translating.test.ts +9 -8
- package/tldraw.css +531 -518
- package/dist-cjs/lib/ui/components/FollowingIndicator.js.map +0 -7
- package/dist-esm/lib/ui/components/FollowingIndicator.mjs.map +0 -7
package/tldraw.css
CHANGED
|
@@ -9,57 +9,58 @@
|
|
|
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-
|
|
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-in-front: 600;
|
|
37
|
+
--tl-layer-canvas-blocker: 10000;
|
|
37
38
|
|
|
38
39
|
/* 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;
|
|
40
|
+
--tl-layer-overlays-collaborator-scribble: 10;
|
|
41
|
+
--tl-layer-overlays-collaborator-brush: 20;
|
|
42
|
+
--tl-layer-overlays-collaborator-shape-indicator: 30;
|
|
43
|
+
--tl-layer-overlays-user-scribble: 40;
|
|
44
|
+
--tl-layer-overlays-user-brush: 50;
|
|
45
|
+
--tl-layer-overlays-user-snapline: 90;
|
|
46
|
+
--tl-layer-overlays-selection-fg: 100;
|
|
46
47
|
/* 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;
|
|
48
|
+
--tl-layer-overlays-user-handles: 105;
|
|
49
|
+
--tl-layer-overlays-user-indicator-hint: 110;
|
|
50
|
+
--tl-layer-overlays-custom: 115;
|
|
51
|
+
--tl-layer-overlays-collaborator-cursor-hint: 120;
|
|
52
|
+
--tl-layer-overlays-collaborator-cursor: 130;
|
|
52
53
|
|
|
53
54
|
/* Text editor z-index */
|
|
54
|
-
--layer-text-container: 1;
|
|
55
|
-
--layer-text-content: 3;
|
|
56
|
-
--layer-text-editor: 4;
|
|
55
|
+
--tl-layer-text-container: 1;
|
|
56
|
+
--tl-layer-text-content: 3;
|
|
57
|
+
--tl-layer-text-editor: 4;
|
|
57
58
|
|
|
58
59
|
/* 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;
|
|
60
|
+
--tl-layer-error-overlay: 1;
|
|
61
|
+
--tl-layer-error-canvas: 2;
|
|
62
|
+
--tl-layer-error-canvas-after: 3;
|
|
63
|
+
--tl-layer-error-content: 4;
|
|
63
64
|
|
|
64
65
|
/* Misc */
|
|
65
66
|
--tl-zoom: 1;
|
|
@@ -124,12 +125,15 @@
|
|
|
124
125
|
--tl-font-serif: 'tldraw_serif', serif;
|
|
125
126
|
--tl-font-mono: 'tldraw_mono', monospace;
|
|
126
127
|
/* text outline */
|
|
127
|
-
--a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px);
|
|
128
|
-
--b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px);
|
|
128
|
+
--tl-text-outline-a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px);
|
|
129
|
+
--tl-text-outline-b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px);
|
|
129
130
|
--tl-text-outline-reference:
|
|
130
|
-
0 var(--b) 0 var(--
|
|
131
|
-
|
|
132
|
-
var(--
|
|
131
|
+
0 var(--tl-text-outline-b) 0 var(--tl-color-background),
|
|
132
|
+
0 var(--tl-text-outline-a) 0 var(--tl-color-background),
|
|
133
|
+
var(--tl-text-outline-b) var(--tl-text-outline-b) 0 var(--tl-color-background),
|
|
134
|
+
var(--tl-text-outline-a) var(--tl-text-outline-b) 0 var(--tl-color-background),
|
|
135
|
+
var(--tl-text-outline-a) var(--tl-text-outline-a) 0 var(--tl-color-background),
|
|
136
|
+
var(--tl-text-outline-b) var(--tl-text-outline-a) 0 var(--tl-color-background);
|
|
133
137
|
--tl-text-outline: var(--tl-text-outline-reference);
|
|
134
138
|
/* own properties */
|
|
135
139
|
position: relative;
|
|
@@ -137,118 +141,118 @@
|
|
|
137
141
|
height: 100%;
|
|
138
142
|
width: 100%;
|
|
139
143
|
overflow: clip;
|
|
140
|
-
color: var(--color-text);
|
|
144
|
+
color: var(--tl-color-text);
|
|
141
145
|
}
|
|
142
146
|
|
|
143
147
|
.tl-theme__light {
|
|
144
148
|
/* 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%);
|
|
149
|
+
--tl-color-snap: hsl(0, 76%, 60%);
|
|
150
|
+
--tl-color-selection-fill: hsl(210, 100%, 56%, 24%);
|
|
151
|
+
--tl-color-selection-stroke: hsl(214, 84%, 56%);
|
|
152
|
+
--tl-color-background: hsl(210, 20%, 98%);
|
|
153
|
+
--tl-color-brush-fill: hsl(0, 0%, 56%, 10.2%);
|
|
154
|
+
--tl-color-brush-stroke: hsl(0, 0%, 56%, 25.1%);
|
|
155
|
+
--tl-color-grid: hsl(0, 0%, 43%);
|
|
152
156
|
/* 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);
|
|
157
|
+
--tl-color-low: hsl(204, 16%, 94%);
|
|
158
|
+
--tl-color-low-border: hsl(204, 16%, 92%);
|
|
159
|
+
--tl-color-culled: hsl(204, 14%, 93%);
|
|
160
|
+
--tl-color-muted-none: hsl(0, 0%, 0%, 0%);
|
|
161
|
+
--tl-color-muted-0: hsl(0, 0%, 0%, 2%);
|
|
162
|
+
--tl-color-muted-1: hsl(0, 0%, 0%, 10%);
|
|
163
|
+
--tl-color-muted-2: hsl(0, 0%, 0%, 4.3%);
|
|
164
|
+
--tl-color-hint: hsl(0, 0%, 0%, 5.5%);
|
|
165
|
+
--tl-color-overlay: hsl(0, 0%, 0%, 20%);
|
|
166
|
+
--tl-color-divider: hsl(0, 0%, 91%);
|
|
167
|
+
--tl-color-panel: hsl(0, 0%, 99%);
|
|
168
|
+
--tl-color-panel-contrast: hsl(0, 0%, 100%);
|
|
169
|
+
--tl-color-panel-overlay: hsl(0, 0%, 100%, 82%);
|
|
170
|
+
--tl-color-panel-transparent: hsla(0, 0%, 99%, 0%);
|
|
171
|
+
--tl-color-selected: hsl(214, 84%, 56%);
|
|
172
|
+
--tl-color-selected-contrast: hsl(0, 0%, 100%);
|
|
173
|
+
--tl-color-focus: hsl(219, 65%, 50%);
|
|
174
|
+
--tl-color-tooltip: hsla(200, 14%, 4%, 1);
|
|
171
175
|
/* 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);
|
|
176
|
+
--tl-color-text: hsl(0, 0%, 0%);
|
|
177
|
+
--tl-color-text-0: hsl(0, 0%, 11%);
|
|
178
|
+
--tl-color-text-1: hsl(0, 0%, 18%);
|
|
179
|
+
--tl-color-text-3: hsl(204, 4%, 45%);
|
|
180
|
+
--tl-color-text-shadow: hsl(0, 0%, 100%);
|
|
181
|
+
--tl-color-text-highlight: hsl(52, 100%, 50%);
|
|
182
|
+
--tl-color-text-highlight-p3: color(display-p3 0.972 0.8205 0.05);
|
|
179
183
|
/* 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%);
|
|
184
|
+
--tl-color-primary: hsl(214, 84%, 56%);
|
|
185
|
+
--tl-color-success: hsl(123, 46%, 34%);
|
|
186
|
+
--tl-color-info: hsl(201, 98%, 41%);
|
|
187
|
+
--tl-color-warning: hsl(27, 98%, 47%);
|
|
188
|
+
--tl-color-danger: hsl(0, 90%, 43%);
|
|
189
|
+
--tl-color-laser: hsl(0, 100%, 50%);
|
|
186
190
|
/* Shadows */
|
|
187
|
-
--shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%);
|
|
188
|
-
--shadow-2:
|
|
191
|
+
--tl-shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%);
|
|
192
|
+
--tl-shadow-2:
|
|
189
193
|
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:
|
|
194
|
+
0px 2px 6px hsl(0, 0%, 0%, 0.1), inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
|
|
195
|
+
--tl-shadow-3:
|
|
192
196
|
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:
|
|
197
|
+
inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
|
|
198
|
+
--tl-shadow-4:
|
|
195
199
|
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);
|
|
200
|
+
0px 2px 16px hsl(0, 0%, 0%, 6%), inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
|
|
197
201
|
}
|
|
198
202
|
|
|
199
203
|
.tl-theme__dark {
|
|
200
204
|
/* 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%);
|
|
205
|
+
--tl-color-snap: hsl(0, 76%, 60%);
|
|
206
|
+
--tl-color-selection-fill: hsl(209, 100%, 57%, 20%);
|
|
207
|
+
--tl-color-selection-stroke: hsl(214, 84%, 56%);
|
|
208
|
+
--tl-color-background: hsl(240, 5%, 6.5%);
|
|
209
|
+
--tl-color-brush-fill: hsl(0, 0%, 71%, 5.1%);
|
|
210
|
+
--tl-color-brush-stroke: hsl(0, 0%, 71%, 25.1%);
|
|
211
|
+
--tl-color-grid: hsl(0, 0%, 40%);
|
|
208
212
|
/* 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);
|
|
213
|
+
--tl-color-low: hsl(260, 4.5%, 10.5%);
|
|
214
|
+
--tl-color-low-border: hsl(207, 10%, 10%);
|
|
215
|
+
--tl-color-culled: hsl(210, 11%, 19%);
|
|
216
|
+
--tl-color-muted-none: hsl(0, 0%, 100%, 0%);
|
|
217
|
+
--tl-color-muted-0: hsl(0, 0%, 100%, 2%);
|
|
218
|
+
--tl-color-muted-1: hsl(0, 0%, 100%, 10%);
|
|
219
|
+
--tl-color-muted-2: hsl(0, 0%, 100%, 5%);
|
|
220
|
+
--tl-color-hint: hsl(0, 0%, 100%, 7%);
|
|
221
|
+
--tl-color-overlay: hsl(0, 0%, 0%, 50%);
|
|
222
|
+
--tl-color-divider: hsl(240, 9%, 22%);
|
|
223
|
+
--tl-color-panel: hsl(235, 6.8%, 13.5%);
|
|
224
|
+
--tl-color-panel-contrast: hsl(245, 12%, 23%);
|
|
225
|
+
--tl-color-panel-overlay: hsl(210, 10%, 24%, 82%);
|
|
226
|
+
--tl-color-panel-transparent: hsla(235, 6.8%, 13.5%, 0%);
|
|
227
|
+
--tl-color-selected: hsl(217, 89%, 61%);
|
|
228
|
+
--tl-color-selected-contrast: hsl(0, 0%, 100%);
|
|
229
|
+
--tl-color-focus: hsl(217, 76%, 80%);
|
|
230
|
+
--tl-color-tooltip: hsla(0, 0%, 100%, 1);
|
|
227
231
|
/* 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);
|
|
232
|
+
--tl-color-text: hsl(210, 17%, 98%);
|
|
233
|
+
--tl-color-text-0: hsl(0, 9%, 94%);
|
|
234
|
+
--tl-color-text-1: hsl(0, 0%, 85%);
|
|
235
|
+
--tl-color-text-3: hsl(204, 4%, 75%);
|
|
236
|
+
--tl-color-text-shadow: hsl(210, 13%, 18%);
|
|
237
|
+
--tl-color-text-highlight: hsl(52, 100%, 41%);
|
|
238
|
+
--tl-color-text-highlight-p3: color(display-p3 0.8078 0.6225 0.0312);
|
|
235
239
|
/* 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%);
|
|
240
|
+
--tl-color-primary: hsl(214, 84%, 56%);
|
|
241
|
+
--tl-color-success: hsl(123, 38%, 57%);
|
|
242
|
+
--tl-color-info: hsl(199, 92%, 56%);
|
|
243
|
+
--tl-color-warning: hsl(36, 100%, 57%);
|
|
244
|
+
--tl-color-danger: hsl(0, 82%, 66%);
|
|
245
|
+
--tl-color-laser: hsl(0, 100%, 50%);
|
|
242
246
|
/* Shadows */
|
|
243
|
-
--shadow-1:
|
|
247
|
+
--tl-shadow-1:
|
|
244
248
|
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:
|
|
249
|
+
inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
|
|
250
|
+
--tl-shadow-2:
|
|
247
251
|
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:
|
|
252
|
+
inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
|
|
253
|
+
--tl-shadow-3:
|
|
250
254
|
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);
|
|
255
|
+
inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
|
|
252
256
|
}
|
|
253
257
|
|
|
254
258
|
.tl-counter-scaled {
|
|
@@ -274,7 +278,7 @@
|
|
|
274
278
|
}
|
|
275
279
|
|
|
276
280
|
.tl-container__focused {
|
|
277
|
-
outline: 1px solid var(--color-low);
|
|
281
|
+
outline: 1px solid var(--tl-color-low);
|
|
278
282
|
}
|
|
279
283
|
|
|
280
284
|
input,
|
|
@@ -290,7 +294,7 @@ input,
|
|
|
290
294
|
inset: 0px;
|
|
291
295
|
height: 100%;
|
|
292
296
|
width: 100%;
|
|
293
|
-
color: var(--color-text);
|
|
297
|
+
color: var(--tl-color-text);
|
|
294
298
|
cursor: var(--tl-cursor);
|
|
295
299
|
overflow: clip;
|
|
296
300
|
content-visibility: auto;
|
|
@@ -298,9 +302,16 @@ input,
|
|
|
298
302
|
contain: strict;
|
|
299
303
|
}
|
|
300
304
|
|
|
305
|
+
.tl-canvas__in-front {
|
|
306
|
+
position: absolute;
|
|
307
|
+
inset: 0;
|
|
308
|
+
pointer-events: none;
|
|
309
|
+
z-index: var(--tl-layer-canvas-in-front);
|
|
310
|
+
}
|
|
311
|
+
|
|
301
312
|
.tl-shapes {
|
|
302
313
|
position: relative;
|
|
303
|
-
z-index: var(--layer-canvas-shapes);
|
|
314
|
+
z-index: var(--tl-layer-canvas-shapes);
|
|
304
315
|
}
|
|
305
316
|
|
|
306
317
|
.tl-overlays {
|
|
@@ -311,7 +322,7 @@ input,
|
|
|
311
322
|
width: 100%;
|
|
312
323
|
contain: strict;
|
|
313
324
|
pointer-events: none;
|
|
314
|
-
z-index: var(--layer-canvas-overlays);
|
|
325
|
+
z-index: var(--tl-layer-canvas-overlays);
|
|
315
326
|
}
|
|
316
327
|
|
|
317
328
|
.tl-overlays__item {
|
|
@@ -335,7 +346,7 @@ input,
|
|
|
335
346
|
/* ------------------- Background ------------------- */
|
|
336
347
|
|
|
337
348
|
.tl-background__wrapper {
|
|
338
|
-
z-index: var(--layer-canvas-background);
|
|
349
|
+
z-index: var(--tl-layer-canvas-background);
|
|
339
350
|
position: absolute;
|
|
340
351
|
inset: 0px;
|
|
341
352
|
height: 100%;
|
|
@@ -343,7 +354,7 @@ input,
|
|
|
343
354
|
}
|
|
344
355
|
|
|
345
356
|
.tl-background {
|
|
346
|
-
background-color: var(--color-background);
|
|
357
|
+
background-color: var(--tl-color-background);
|
|
347
358
|
width: 100%;
|
|
348
359
|
height: 100%;
|
|
349
360
|
}
|
|
@@ -357,12 +368,12 @@ input,
|
|
|
357
368
|
height: 100%;
|
|
358
369
|
touch-action: none;
|
|
359
370
|
pointer-events: none;
|
|
360
|
-
z-index: var(--layer-canvas-grid);
|
|
371
|
+
z-index: var(--tl-layer-canvas-grid);
|
|
361
372
|
contain: strict;
|
|
362
373
|
}
|
|
363
374
|
|
|
364
375
|
.tl-grid-dot {
|
|
365
|
-
fill: var(--color-grid);
|
|
376
|
+
fill: var(--tl-color-grid);
|
|
366
377
|
}
|
|
367
378
|
|
|
368
379
|
/* --------------------- Layers --------------------- */
|
|
@@ -380,54 +391,54 @@ input,
|
|
|
380
391
|
|
|
381
392
|
/* back of the stack, behind user's stuff */
|
|
382
393
|
.tl-collaborator__scribble {
|
|
383
|
-
z-index: var(--layer-overlays-collaborator-scribble);
|
|
394
|
+
z-index: var(--tl-layer-overlays-collaborator-scribble);
|
|
384
395
|
}
|
|
385
396
|
|
|
386
397
|
.tl-collaborator__brush {
|
|
387
|
-
z-index: var(--layer-overlays-collaborator-brush);
|
|
398
|
+
z-index: var(--tl-layer-overlays-collaborator-brush);
|
|
388
399
|
}
|
|
389
400
|
|
|
390
401
|
.tl-collaborator__shape-indicator {
|
|
391
|
-
z-index: var(--layer-overlays-collaborator-shape-indicator);
|
|
402
|
+
z-index: var(--tl-layer-overlays-collaborator-shape-indicator);
|
|
392
403
|
}
|
|
393
404
|
|
|
394
405
|
.tl-user-scribble {
|
|
395
|
-
z-index: var(--layer-overlays-user-scribble);
|
|
406
|
+
z-index: var(--tl-layer-overlays-user-scribble);
|
|
396
407
|
}
|
|
397
408
|
|
|
398
409
|
.tl-user-brush {
|
|
399
|
-
z-index: var(--layer-overlays-user-brush);
|
|
410
|
+
z-index: var(--tl-layer-overlays-user-brush);
|
|
400
411
|
}
|
|
401
412
|
|
|
402
413
|
.tl-user-handles {
|
|
403
|
-
z-index: var(--layer-overlays-user-handles);
|
|
414
|
+
z-index: var(--tl-layer-overlays-user-handles);
|
|
404
415
|
}
|
|
405
416
|
|
|
406
417
|
.tl-user-snapline {
|
|
407
|
-
z-index: var(--layer-overlays-user-snapline);
|
|
418
|
+
z-index: var(--tl-layer-overlays-user-snapline);
|
|
408
419
|
}
|
|
409
420
|
|
|
410
421
|
.tl-selection__fg {
|
|
411
422
|
pointer-events: none;
|
|
412
|
-
z-index: var(--layer-overlays-selection-fg);
|
|
423
|
+
z-index: var(--tl-layer-overlays-selection-fg);
|
|
413
424
|
}
|
|
414
425
|
|
|
415
426
|
.tl-user-indicator__hint {
|
|
416
|
-
z-index: var(--layer-overlays-user-indicator-hint);
|
|
427
|
+
z-index: var(--tl-layer-overlays-user-indicator-hint);
|
|
417
428
|
stroke-width: calc(2.5px * var(--tl-scale));
|
|
418
429
|
}
|
|
419
430
|
|
|
420
431
|
.tl-custom-overlays {
|
|
421
|
-
z-index: var(--layer-overlays-custom);
|
|
432
|
+
z-index: var(--tl-layer-overlays-custom);
|
|
422
433
|
}
|
|
423
434
|
|
|
424
435
|
/* behind collaborator cursor */
|
|
425
436
|
.tl-collaborator__cursor-hint {
|
|
426
|
-
z-index: var(--layer-overlays-collaborator-cursor-hint);
|
|
437
|
+
z-index: var(--tl-layer-overlays-collaborator-cursor-hint);
|
|
427
438
|
}
|
|
428
439
|
|
|
429
440
|
.tl-collaborator__cursor {
|
|
430
|
-
z-index: var(--layer-overlays-collaborator-cursor);
|
|
441
|
+
z-index: var(--tl-layer-overlays-collaborator-cursor);
|
|
431
442
|
}
|
|
432
443
|
|
|
433
444
|
.tl-cursor {
|
|
@@ -448,32 +459,32 @@ input,
|
|
|
448
459
|
.tl-selection__fg__outline {
|
|
449
460
|
fill: none;
|
|
450
461
|
pointer-events: none;
|
|
451
|
-
stroke: var(--color-selection-stroke);
|
|
462
|
+
stroke: var(--tl-color-selection-stroke);
|
|
452
463
|
stroke-width: calc(1.5px * var(--tl-scale));
|
|
453
464
|
}
|
|
454
465
|
|
|
455
466
|
.tl-corner-handle {
|
|
456
467
|
pointer-events: none;
|
|
457
|
-
stroke: var(--color-selection-stroke);
|
|
458
|
-
fill: var(--color-background);
|
|
468
|
+
stroke: var(--tl-color-selection-stroke);
|
|
469
|
+
fill: var(--tl-color-background);
|
|
459
470
|
stroke-width: calc(1.5px * var(--tl-scale));
|
|
460
471
|
}
|
|
461
472
|
|
|
462
473
|
.tl-text-handle {
|
|
463
474
|
pointer-events: none;
|
|
464
|
-
fill: var(--color-selection-stroke);
|
|
475
|
+
fill: var(--tl-color-selection-stroke);
|
|
465
476
|
}
|
|
466
477
|
|
|
467
478
|
.tl-corner-crop-handle {
|
|
468
479
|
pointer-events: none;
|
|
469
480
|
fill: none;
|
|
470
|
-
stroke: var(--color-selection-stroke);
|
|
481
|
+
stroke: var(--tl-color-selection-stroke);
|
|
471
482
|
}
|
|
472
483
|
|
|
473
484
|
.tl-corner-crop-edge-handle {
|
|
474
485
|
pointer-events: none;
|
|
475
486
|
fill: none;
|
|
476
|
-
stroke: var(--color-selection-stroke);
|
|
487
|
+
stroke: var(--tl-color-selection-stroke);
|
|
477
488
|
}
|
|
478
489
|
|
|
479
490
|
.tl-mobile-rotate__bg {
|
|
@@ -483,8 +494,8 @@ input,
|
|
|
483
494
|
|
|
484
495
|
.tl-mobile-rotate__fg {
|
|
485
496
|
pointer-events: none;
|
|
486
|
-
stroke: var(--color-selection-stroke);
|
|
487
|
-
fill: var(--color-background);
|
|
497
|
+
stroke: var(--tl-color-selection-stroke);
|
|
498
|
+
fill: var(--tl-color-background);
|
|
488
499
|
stroke-width: calc(1.5px * var(--tl-scale));
|
|
489
500
|
}
|
|
490
501
|
|
|
@@ -514,8 +525,8 @@ input,
|
|
|
514
525
|
text-overflow: ellipsis;
|
|
515
526
|
font-size: 12px;
|
|
516
527
|
font-family: var(--font-body);
|
|
517
|
-
border-radius: var(--radius-2);
|
|
518
|
-
color: var(--color-selected-contrast);
|
|
528
|
+
border-radius: var(--tl-radius-2);
|
|
529
|
+
color: var(--tl-color-selected-contrast);
|
|
519
530
|
}
|
|
520
531
|
|
|
521
532
|
.tl-nametag-title {
|
|
@@ -533,7 +544,7 @@ input,
|
|
|
533
544
|
font-size: 12px;
|
|
534
545
|
font-family: var(--font-body);
|
|
535
546
|
text-shadow: var(--tl-text-outline);
|
|
536
|
-
color: var(--color-selected-contrast);
|
|
547
|
+
color: var(--tl-color-selected-contrast);
|
|
537
548
|
}
|
|
538
549
|
|
|
539
550
|
.tl-nametag-chat {
|
|
@@ -542,31 +553,31 @@ input,
|
|
|
542
553
|
left: 13px;
|
|
543
554
|
width: fit-content;
|
|
544
555
|
height: fit-content;
|
|
545
|
-
color: var(--color-selected-contrast);
|
|
556
|
+
color: var(--tl-color-selected-contrast);
|
|
546
557
|
white-space: nowrap;
|
|
547
558
|
position: absolute;
|
|
548
559
|
padding: 3px 6px;
|
|
549
560
|
font-size: 12px;
|
|
550
561
|
font-family: var(--font-body);
|
|
551
562
|
opacity: 1;
|
|
552
|
-
border-radius: var(--radius-2);
|
|
563
|
+
border-radius: var(--tl-radius-2);
|
|
553
564
|
}
|
|
554
565
|
|
|
555
566
|
.tl-cursor-chat {
|
|
556
567
|
position: absolute;
|
|
557
|
-
color: var(--color-selected-contrast);
|
|
568
|
+
color: var(--tl-color-selected-contrast);
|
|
558
569
|
white-space: nowrap;
|
|
559
570
|
padding: 3px 6px;
|
|
560
571
|
font-size: 12px;
|
|
561
572
|
font-family: var(--font-body);
|
|
562
573
|
pointer-events: none;
|
|
563
|
-
z-index: var(--layer-cursor);
|
|
574
|
+
z-index: var(--tl-layer-cursor);
|
|
564
575
|
margin-top: 16px;
|
|
565
576
|
margin-left: 13px;
|
|
566
577
|
opacity: 1;
|
|
567
578
|
border: none;
|
|
568
579
|
user-select: text;
|
|
569
|
-
border-radius: var(--radius-2);
|
|
580
|
+
border-radius: var(--tl-radius-2);
|
|
570
581
|
}
|
|
571
582
|
|
|
572
583
|
.tl-cursor-chat .tl-cursor-chat__bubble {
|
|
@@ -574,13 +585,13 @@ input,
|
|
|
574
585
|
}
|
|
575
586
|
|
|
576
587
|
.tl-cursor-chat::selection {
|
|
577
|
-
background: var(--color-selected);
|
|
578
|
-
color: var(--color-selected-contrast);
|
|
588
|
+
background: var(--tl-color-selected);
|
|
589
|
+
color: var(--tl-color-selected-contrast);
|
|
579
590
|
text-shadow: none;
|
|
580
591
|
}
|
|
581
592
|
|
|
582
593
|
.tl-cursor-chat::placeholder {
|
|
583
|
-
color: var(--color-selected-contrast);
|
|
594
|
+
color: var(--tl-color-selected-contrast);
|
|
584
595
|
opacity: 0.7;
|
|
585
596
|
}
|
|
586
597
|
|
|
@@ -651,7 +662,7 @@ input,
|
|
|
651
662
|
background: none;
|
|
652
663
|
border-image: none;
|
|
653
664
|
border: 0px;
|
|
654
|
-
caret-color: var(--color-text);
|
|
665
|
+
caret-color: var(--tl-color-text);
|
|
655
666
|
color: inherit;
|
|
656
667
|
column-count: initial !important;
|
|
657
668
|
display: inline-block;
|
|
@@ -683,7 +694,7 @@ input,
|
|
|
683
694
|
|
|
684
695
|
.tl-text-measure {
|
|
685
696
|
position: absolute;
|
|
686
|
-
z-index: var(--layer-canvas-hidden);
|
|
697
|
+
z-index: var(--tl-layer-canvas-hidden);
|
|
687
698
|
top: 0px;
|
|
688
699
|
left: 0px;
|
|
689
700
|
opacity: 0;
|
|
@@ -746,8 +757,8 @@ input,
|
|
|
746
757
|
}
|
|
747
758
|
|
|
748
759
|
.tl-text-input::selection {
|
|
749
|
-
background: var(--color-selected);
|
|
750
|
-
color: var(--color-selected-contrast);
|
|
760
|
+
background: var(--tl-color-selected);
|
|
761
|
+
color: var(--tl-color-selected-contrast);
|
|
751
762
|
text-shadow: none;
|
|
752
763
|
}
|
|
753
764
|
|
|
@@ -757,7 +768,7 @@ input,
|
|
|
757
768
|
display: flex;
|
|
758
769
|
justify-content: center;
|
|
759
770
|
align-items: center;
|
|
760
|
-
color: var(--color-text);
|
|
771
|
+
color: var(--tl-color-text);
|
|
761
772
|
text-shadow: var(--tl-text-outline);
|
|
762
773
|
line-height: inherit;
|
|
763
774
|
position: absolute;
|
|
@@ -801,7 +812,7 @@ input,
|
|
|
801
812
|
|
|
802
813
|
.tl-text-wrapper .tl-text-content {
|
|
803
814
|
pointer-events: all;
|
|
804
|
-
z-index: var(--layer-text-content);
|
|
815
|
+
z-index: var(--tl-layer-text-content);
|
|
805
816
|
}
|
|
806
817
|
|
|
807
818
|
.tl-text-label__inner > .tl-text-content {
|
|
@@ -811,7 +822,7 @@ input,
|
|
|
811
822
|
padding: inherit;
|
|
812
823
|
height: fit-content;
|
|
813
824
|
width: fit-content;
|
|
814
|
-
border-radius: var(--radius-1);
|
|
825
|
+
border-radius: var(--tl-radius-1);
|
|
815
826
|
max-width: 100%;
|
|
816
827
|
}
|
|
817
828
|
|
|
@@ -824,7 +835,7 @@ input,
|
|
|
824
835
|
}
|
|
825
836
|
|
|
826
837
|
.tl-text-wrapper[data-isselected='true'] .tl-text-input {
|
|
827
|
-
z-index: var(--layer-text-editor);
|
|
838
|
+
z-index: var(--tl-layer-text-editor);
|
|
828
839
|
pointer-events: all;
|
|
829
840
|
}
|
|
830
841
|
|
|
@@ -919,7 +930,7 @@ input,
|
|
|
919
930
|
}
|
|
920
931
|
|
|
921
932
|
.tl-rich-text a {
|
|
922
|
-
color: var(--color-primary);
|
|
933
|
+
color: var(--tl-color-primary);
|
|
923
934
|
text-decoration: underline;
|
|
924
935
|
}
|
|
925
936
|
|
|
@@ -942,14 +953,14 @@ input,
|
|
|
942
953
|
}
|
|
943
954
|
|
|
944
955
|
.tl-theme__dark .tl-rich-text mark {
|
|
945
|
-
background-color: var(--color-text-highlight);
|
|
956
|
+
background-color: var(--tl-color-text-highlight);
|
|
946
957
|
color: currentColor;
|
|
947
958
|
}
|
|
948
959
|
|
|
949
960
|
@supports (color: color(display-p3 1 1 1)) {
|
|
950
961
|
@media (color-gamut: p3) {
|
|
951
962
|
.tl-container:not(.tl-theme__force-sRGB) .tl-rich-text mark {
|
|
952
|
-
background-color: var(--color-text-highlight-p3);
|
|
963
|
+
background-color: var(--tl-color-text-highlight-p3);
|
|
953
964
|
}
|
|
954
965
|
}
|
|
955
966
|
}
|
|
@@ -961,15 +972,15 @@ input,
|
|
|
961
972
|
/* --------------------- Loading -------------------- */
|
|
962
973
|
|
|
963
974
|
.tl-loading {
|
|
964
|
-
background-color: var(--color-background);
|
|
965
|
-
color: var(--color-text-1);
|
|
975
|
+
background-color: var(--tl-color-background);
|
|
976
|
+
color: var(--tl-color-text-1);
|
|
966
977
|
height: 100%;
|
|
967
978
|
width: 100%;
|
|
968
979
|
display: flex;
|
|
969
980
|
flex-direction: column;
|
|
970
981
|
justify-content: center;
|
|
971
982
|
align-items: center;
|
|
972
|
-
gap: var(--space-2);
|
|
983
|
+
gap: var(--tl-space-2);
|
|
973
984
|
font-size: 14px;
|
|
974
985
|
font-weight: 500;
|
|
975
986
|
opacity: 0;
|
|
@@ -977,7 +988,7 @@ input,
|
|
|
977
988
|
animation-delay: 0.2s;
|
|
978
989
|
position: absolute;
|
|
979
990
|
inset: 0px;
|
|
980
|
-
z-index: var(--layer-canvas-blocker);
|
|
991
|
+
z-index: var(--tl-layer-canvas-blocker);
|
|
981
992
|
}
|
|
982
993
|
|
|
983
994
|
@keyframes tl-fade-in {
|
|
@@ -1010,8 +1021,8 @@ input,
|
|
|
1010
1021
|
}
|
|
1011
1022
|
|
|
1012
1023
|
.tl-brush__default {
|
|
1013
|
-
stroke: var(--color-brush-stroke);
|
|
1014
|
-
fill: var(--color-brush-fill);
|
|
1024
|
+
stroke: var(--tl-color-brush-stroke);
|
|
1025
|
+
fill: var(--tl-color-brush-fill);
|
|
1015
1026
|
}
|
|
1016
1027
|
|
|
1017
1028
|
/* -------------------- Scribble -------------------- */
|
|
@@ -1026,13 +1037,13 @@ input,
|
|
|
1026
1037
|
/* ---------------------- Snaps --------------------- */
|
|
1027
1038
|
|
|
1028
1039
|
.tl-snap-indicator {
|
|
1029
|
-
stroke: var(--color-snap);
|
|
1040
|
+
stroke: var(--tl-color-snap);
|
|
1030
1041
|
stroke-width: calc(1px * var(--tl-scale));
|
|
1031
1042
|
fill: none;
|
|
1032
1043
|
}
|
|
1033
1044
|
|
|
1034
1045
|
.tl-snap-point {
|
|
1035
|
-
stroke: var(--color-snap);
|
|
1046
|
+
stroke: var(--tl-color-snap);
|
|
1036
1047
|
stroke-width: calc(1px * var(--tl-scale));
|
|
1037
1048
|
fill: none;
|
|
1038
1049
|
}
|
|
@@ -1052,7 +1063,7 @@ input,
|
|
|
1052
1063
|
justify-content: center;
|
|
1053
1064
|
font-size: 12px;
|
|
1054
1065
|
font-weight: 400;
|
|
1055
|
-
color: var(--color-text-1);
|
|
1066
|
+
color: var(--tl-color-text-1);
|
|
1056
1067
|
padding: 13px;
|
|
1057
1068
|
cursor: var(--tl-cursor-pointer);
|
|
1058
1069
|
border: none;
|
|
@@ -1070,13 +1081,13 @@ input,
|
|
|
1070
1081
|
display: block;
|
|
1071
1082
|
width: calc(100% - 12px);
|
|
1072
1083
|
height: calc(100% - 12px);
|
|
1073
|
-
border-radius: var(--radius-1);
|
|
1074
|
-
background-color: var(--color-background);
|
|
1084
|
+
border-radius: var(--tl-radius-1);
|
|
1085
|
+
background-color: var(--tl-color-background);
|
|
1075
1086
|
pointer-events: none;
|
|
1076
1087
|
}
|
|
1077
1088
|
|
|
1078
1089
|
.tl-hyperlink-button:focus-visible {
|
|
1079
|
-
color: var(--color-selected);
|
|
1090
|
+
color: var(--tl-color-selected);
|
|
1080
1091
|
}
|
|
1081
1092
|
|
|
1082
1093
|
.tl-hyperlink__icon {
|
|
@@ -1103,8 +1114,8 @@ input,
|
|
|
1103
1114
|
}
|
|
1104
1115
|
|
|
1105
1116
|
.tl-handle__fg {
|
|
1106
|
-
fill: var(--color-selected-contrast);
|
|
1107
|
-
stroke: var(--color-selection-stroke);
|
|
1117
|
+
fill: var(--tl-color-selected-contrast);
|
|
1118
|
+
stroke: var(--tl-color-selection-stroke);
|
|
1108
1119
|
stroke-width: calc(1.5px * var(--tl-scale));
|
|
1109
1120
|
pointer-events: none;
|
|
1110
1121
|
}
|
|
@@ -1114,7 +1125,7 @@ input,
|
|
|
1114
1125
|
}
|
|
1115
1126
|
|
|
1116
1127
|
.tl-handle__clone > .tl-handle__fg {
|
|
1117
|
-
fill: var(--color-selection-stroke);
|
|
1128
|
+
fill: var(--tl-color-selection-stroke);
|
|
1118
1129
|
stroke: none;
|
|
1119
1130
|
}
|
|
1120
1131
|
|
|
@@ -1124,7 +1135,7 @@ input,
|
|
|
1124
1135
|
|
|
1125
1136
|
@media (pointer: coarse) {
|
|
1126
1137
|
.tl-handle__bg:active {
|
|
1127
|
-
fill: var(--color-selection-fill);
|
|
1138
|
+
fill: var(--tl-color-selection-fill);
|
|
1128
1139
|
}
|
|
1129
1140
|
|
|
1130
1141
|
.tl-handle__create {
|
|
@@ -1180,13 +1191,13 @@ input,
|
|
|
1180
1191
|
stroke-linejoin: round;
|
|
1181
1192
|
/* content-visibility: auto; */
|
|
1182
1193
|
transform-origin: top left;
|
|
1183
|
-
color: var(--color-text-1);
|
|
1194
|
+
color: var(--tl-color-text-1);
|
|
1184
1195
|
}
|
|
1185
1196
|
|
|
1186
1197
|
/* -------------------- Group shape ------------------ */
|
|
1187
1198
|
|
|
1188
1199
|
.tl-group {
|
|
1189
|
-
stroke: var(--color-text);
|
|
1200
|
+
stroke: var(--tl-color-text);
|
|
1190
1201
|
stroke-width: calc(1px * var(--tl-scale));
|
|
1191
1202
|
opacity: 0.5;
|
|
1192
1203
|
}
|
|
@@ -1204,12 +1215,12 @@ input,
|
|
|
1204
1215
|
justify-content: center;
|
|
1205
1216
|
align-items: center;
|
|
1206
1217
|
text-align: center;
|
|
1207
|
-
color: var(--color-text);
|
|
1218
|
+
color: var(--tl-color-text);
|
|
1208
1219
|
text-shadow: var(--tl-text-outline);
|
|
1209
1220
|
}
|
|
1210
1221
|
|
|
1211
1222
|
.tl-shape[data-shape-type='arrow'] .tl-text-label__inner {
|
|
1212
|
-
border-radius: var(--radius-1);
|
|
1223
|
+
border-radius: var(--tl-radius-1);
|
|
1213
1224
|
box-sizing: content-box;
|
|
1214
1225
|
height: max-content;
|
|
1215
1226
|
width: max-content;
|
|
@@ -1220,22 +1231,22 @@ input,
|
|
|
1220
1231
|
}
|
|
1221
1232
|
|
|
1222
1233
|
.tl-arrow-hint {
|
|
1223
|
-
stroke: var(--color-text-1);
|
|
1234
|
+
stroke: var(--tl-color-text-1);
|
|
1224
1235
|
fill: none;
|
|
1225
1236
|
stroke-linecap: round;
|
|
1226
1237
|
overflow: visible;
|
|
1227
1238
|
}
|
|
1228
1239
|
|
|
1229
1240
|
.tl-arrow-hint-handle {
|
|
1230
|
-
fill: var(--color-selected-contrast);
|
|
1231
|
-
stroke: var(--color-selection-stroke);
|
|
1241
|
+
fill: var(--tl-color-selected-contrast);
|
|
1242
|
+
stroke: var(--tl-color-selection-stroke);
|
|
1232
1243
|
stroke-width: calc(1.5px * var(--tl-scale));
|
|
1233
1244
|
r: calc(4px * var(--tl-scale));
|
|
1234
1245
|
}
|
|
1235
1246
|
|
|
1236
1247
|
.tl-arrow-hint-snap {
|
|
1237
1248
|
stroke: transparent;
|
|
1238
|
-
fill: var(--color-selection-fill);
|
|
1249
|
+
fill: var(--tl-color-selection-fill);
|
|
1239
1250
|
r: calc(12px * var(--tl-scale));
|
|
1240
1251
|
}
|
|
1241
1252
|
|
|
@@ -1255,40 +1266,40 @@ input,
|
|
|
1255
1266
|
width: 100%;
|
|
1256
1267
|
height: 100%;
|
|
1257
1268
|
position: relative;
|
|
1258
|
-
border: 1px solid var(--color-panel-contrast);
|
|
1259
|
-
background-color: var(--color-panel);
|
|
1260
|
-
border-radius: var(--radius-2);
|
|
1269
|
+
border: 1px solid var(--tl-color-panel-contrast);
|
|
1270
|
+
background-color: var(--tl-color-panel);
|
|
1271
|
+
border-radius: var(--tl-radius-2);
|
|
1261
1272
|
display: flex;
|
|
1262
1273
|
flex-direction: column;
|
|
1263
1274
|
overflow: hidden;
|
|
1264
1275
|
}
|
|
1265
1276
|
|
|
1266
1277
|
.tl-bookmark__container--safariExport {
|
|
1267
|
-
border: 1px solid var(--color-divider);
|
|
1278
|
+
border: 1px solid var(--tl-color-divider);
|
|
1268
1279
|
}
|
|
1269
1280
|
|
|
1270
1281
|
.tl-bookmark__image_container {
|
|
1271
1282
|
flex: 1 1 100%;
|
|
1272
1283
|
overflow: hidden;
|
|
1273
|
-
border-top-left-radius: var(--radius-1);
|
|
1274
|
-
border-top-right-radius: var(--radius-1);
|
|
1284
|
+
border-top-left-radius: var(--tl-radius-1);
|
|
1285
|
+
border-top-right-radius: var(--tl-radius-1);
|
|
1275
1286
|
width: 100%;
|
|
1276
1287
|
height: 100%;
|
|
1277
1288
|
display: flex;
|
|
1278
1289
|
justify-content: flex-end;
|
|
1279
1290
|
align-items: flex-start;
|
|
1280
|
-
box-shadow: inset 0px 0px 0px 1px var(--color-divider);
|
|
1291
|
+
box-shadow: inset 0px 0px 0px 1px var(--tl-color-divider);
|
|
1281
1292
|
}
|
|
1282
1293
|
|
|
1283
1294
|
.tl-bookmark__image_container > .tl-hyperlink-button::after {
|
|
1284
|
-
background-color: var(--color-panel);
|
|
1295
|
+
background-color: var(--tl-color-panel);
|
|
1285
1296
|
}
|
|
1286
1297
|
|
|
1287
1298
|
.tl-bookmark__placeholder {
|
|
1288
1299
|
width: 100%;
|
|
1289
1300
|
height: 100%;
|
|
1290
|
-
background-color: var(--color-muted-2);
|
|
1291
|
-
border-bottom: 1px solid var(--color-muted-2);
|
|
1301
|
+
background-color: var(--tl-color-muted-2);
|
|
1302
|
+
border-bottom: 1px solid var(--tl-color-muted-2);
|
|
1292
1303
|
}
|
|
1293
1304
|
|
|
1294
1305
|
.tl-bookmark__image {
|
|
@@ -1296,12 +1307,12 @@ input,
|
|
|
1296
1307
|
height: 100%;
|
|
1297
1308
|
object-fit: cover;
|
|
1298
1309
|
object-position: center;
|
|
1299
|
-
border-bottom: 1px solid var(--color-muted-2);
|
|
1310
|
+
border-bottom: 1px solid var(--tl-color-muted-2);
|
|
1300
1311
|
}
|
|
1301
1312
|
|
|
1302
1313
|
.tl-bookmark__copy_container {
|
|
1303
|
-
background-color: var(--color-muted-0);
|
|
1304
|
-
padding: var(--space-4);
|
|
1314
|
+
background-color: var(--tl-color-muted-0);
|
|
1315
|
+
padding: var(--tl-space-4);
|
|
1305
1316
|
pointer-events: all;
|
|
1306
1317
|
display: flex;
|
|
1307
1318
|
flex-direction: column;
|
|
@@ -1321,7 +1332,7 @@ input,
|
|
|
1321
1332
|
font-size: 16px;
|
|
1322
1333
|
line-height: 1.6;
|
|
1323
1334
|
font-weight: bold;
|
|
1324
|
-
padding-bottom: var(--space-2);
|
|
1335
|
+
padding-bottom: var(--tl-space-2);
|
|
1325
1336
|
overflow: hidden;
|
|
1326
1337
|
max-height: calc((16px * 1.6) * 2);
|
|
1327
1338
|
-webkit-box-orient: vertical;
|
|
@@ -1341,19 +1352,19 @@ input,
|
|
|
1341
1352
|
line-clamp: 3;
|
|
1342
1353
|
text-overflow: ellipsis;
|
|
1343
1354
|
display: -webkit-box;
|
|
1344
|
-
color: var(--color-text-2);
|
|
1345
|
-
margin: var(--space-2) 0px;
|
|
1355
|
+
color: var(--tl-color-text-2);
|
|
1356
|
+
margin: var(--tl-space-2) 0px;
|
|
1346
1357
|
}
|
|
1347
1358
|
|
|
1348
1359
|
.tl-bookmark__heading + .tl-bookmark__link,
|
|
1349
1360
|
.tl-bookmark__description + .tl-bookmark__link {
|
|
1350
|
-
margin-top: var(--space-3);
|
|
1361
|
+
margin-top: var(--tl-space-3);
|
|
1351
1362
|
}
|
|
1352
1363
|
.tl-bookmark__link {
|
|
1353
1364
|
font-size: 12px;
|
|
1354
1365
|
pointer-events: all;
|
|
1355
1366
|
display: flex;
|
|
1356
|
-
color: var(--color-text-2);
|
|
1367
|
+
color: var(--tl-color-text-2);
|
|
1357
1368
|
align-items: center;
|
|
1358
1369
|
cursor: var(--tl-cursor-pointer);
|
|
1359
1370
|
width: fit-content;
|
|
@@ -1395,7 +1406,7 @@ input,
|
|
|
1395
1406
|
width: 100%;
|
|
1396
1407
|
height: 100%;
|
|
1397
1408
|
pointer-events: all;
|
|
1398
|
-
/* background-color: var(--color-background); */
|
|
1409
|
+
/* background-color: var(--tl-color-background); */
|
|
1399
1410
|
|
|
1400
1411
|
display: flex;
|
|
1401
1412
|
justify-content: center;
|
|
@@ -1424,7 +1435,7 @@ input,
|
|
|
1424
1435
|
height: 100%;
|
|
1425
1436
|
pointer-events: all;
|
|
1426
1437
|
opacity: 1;
|
|
1427
|
-
z-index: var(--layer-text-container);
|
|
1438
|
+
z-index: var(--tl-layer-text-container);
|
|
1428
1439
|
border-radius: 1px;
|
|
1429
1440
|
}
|
|
1430
1441
|
|
|
@@ -1440,22 +1451,22 @@ input,
|
|
|
1440
1451
|
}
|
|
1441
1452
|
|
|
1442
1453
|
.tl-frame__creating {
|
|
1443
|
-
stroke: var(--color-selected);
|
|
1454
|
+
stroke: var(--tl-color-selected);
|
|
1444
1455
|
fill: none;
|
|
1445
1456
|
}
|
|
1446
1457
|
|
|
1447
1458
|
.tl-frame-heading {
|
|
1448
|
-
--frame-padding-x: 6px;
|
|
1449
|
-
--frame-height: 24px;
|
|
1450
|
-
--frame-minimum-width: 32px;
|
|
1451
|
-
--frame-offset-width: 16px;
|
|
1459
|
+
--tl-frame-padding-x: 6px;
|
|
1460
|
+
--tl-frame-height: 24px;
|
|
1461
|
+
--tl-frame-minimum-width: 32px;
|
|
1462
|
+
--tl-frame-offset-width: 16px;
|
|
1452
1463
|
display: flex;
|
|
1453
1464
|
align-items: center;
|
|
1454
1465
|
position: absolute;
|
|
1455
1466
|
transform-origin: 0% 100%;
|
|
1456
1467
|
overflow: hidden;
|
|
1457
1468
|
max-width: 100%;
|
|
1458
|
-
min-width: var(--frame-minimum-width);
|
|
1469
|
+
min-width: var(--tl-frame-minimum-width);
|
|
1459
1470
|
height: auto;
|
|
1460
1471
|
font-size: 12px;
|
|
1461
1472
|
padding-bottom: 4px;
|
|
@@ -1467,18 +1478,18 @@ input,
|
|
|
1467
1478
|
/* scale from bottom left corner so we can pin it to the top left corner of the frame */
|
|
1468
1479
|
transform-origin: 0% 100%;
|
|
1469
1480
|
display: flex;
|
|
1470
|
-
height: var(--frame-height);
|
|
1481
|
+
height: var(--tl-frame-height);
|
|
1471
1482
|
width: 100%;
|
|
1472
1483
|
align-items: center;
|
|
1473
|
-
border-radius: var(--radius-1);
|
|
1484
|
+
border-radius: var(--tl-radius-1);
|
|
1474
1485
|
}
|
|
1475
1486
|
|
|
1476
1487
|
.tl-frame-label {
|
|
1477
1488
|
pointer-events: all;
|
|
1478
1489
|
overflow: hidden;
|
|
1479
1490
|
text-overflow: ellipsis;
|
|
1480
|
-
padding: 0px var(--frame-padding-x);
|
|
1481
|
-
border-radius: var(--radius-1);
|
|
1491
|
+
padding: 0px var(--tl-frame-padding-x);
|
|
1492
|
+
border-radius: var(--tl-radius-1);
|
|
1482
1493
|
position: relative;
|
|
1483
1494
|
font-size: inherit;
|
|
1484
1495
|
white-space: pre;
|
|
@@ -1488,12 +1499,12 @@ input,
|
|
|
1488
1499
|
color: transparent;
|
|
1489
1500
|
white-space: pre;
|
|
1490
1501
|
width: auto;
|
|
1491
|
-
min-width: var(--frame-minimum-width);
|
|
1502
|
+
min-width: var(--tl-frame-minimum-width);
|
|
1492
1503
|
height: 100%;
|
|
1493
1504
|
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);
|
|
1505
|
+
background-color: var(--tl-color-panel);
|
|
1506
|
+
border-color: var(--tl-color-selected);
|
|
1507
|
+
box-shadow: inset 0px 0px 0px 1.5px var(--tl-color-selected);
|
|
1497
1508
|
}
|
|
1498
1509
|
|
|
1499
1510
|
.tl-frame-name-input {
|
|
@@ -1501,7 +1512,7 @@ input,
|
|
|
1501
1512
|
border: none;
|
|
1502
1513
|
background: none;
|
|
1503
1514
|
outline: none;
|
|
1504
|
-
padding: 0px var(--frame-padding-x);
|
|
1515
|
+
padding: 0px var(--tl-frame-padding-x);
|
|
1505
1516
|
inset: 0px;
|
|
1506
1517
|
height: 100%;
|
|
1507
1518
|
width: 100%;
|
|
@@ -1509,8 +1520,8 @@ input,
|
|
|
1509
1520
|
font-family: inherit;
|
|
1510
1521
|
font-weight: inherit;
|
|
1511
1522
|
width: 100%;
|
|
1512
|
-
color: var(--color-text-1);
|
|
1513
|
-
border-radius: var(--radius-1);
|
|
1523
|
+
color: var(--tl-color-text-1);
|
|
1524
|
+
border-radius: var(--tl-radius-1);
|
|
1514
1525
|
user-select: all;
|
|
1515
1526
|
-webkit-user-select: text;
|
|
1516
1527
|
white-space: pre;
|
|
@@ -1530,7 +1541,7 @@ input,
|
|
|
1530
1541
|
|
|
1531
1542
|
.tl-embed {
|
|
1532
1543
|
border: none;
|
|
1533
|
-
border-radius: var(--radius-2);
|
|
1544
|
+
border-radius: var(--tl-radius-2);
|
|
1534
1545
|
}
|
|
1535
1546
|
|
|
1536
1547
|
/* -------------- Shape error boundary -------------- */
|
|
@@ -1538,11 +1549,11 @@ input,
|
|
|
1538
1549
|
.tl-shape-error-boundary {
|
|
1539
1550
|
width: 100%;
|
|
1540
1551
|
height: 100%;
|
|
1541
|
-
background-color: var(--color-muted-1);
|
|
1552
|
+
background-color: var(--tl-color-muted-1);
|
|
1542
1553
|
border-width: calc(1px * var(--tl-scale));
|
|
1543
|
-
border-color: var(--color-muted-1);
|
|
1554
|
+
border-color: var(--tl-color-muted-1);
|
|
1544
1555
|
border-style: solid;
|
|
1545
|
-
border-radius: calc(var(--radius-1) * var(--tl-scale));
|
|
1556
|
+
border-radius: calc(var(--tl-radius-1) * var(--tl-scale));
|
|
1546
1557
|
display: flex;
|
|
1547
1558
|
flex-direction: column;
|
|
1548
1559
|
align-items: center;
|
|
@@ -1551,7 +1562,7 @@ input,
|
|
|
1551
1562
|
position: relative;
|
|
1552
1563
|
pointer-events: all;
|
|
1553
1564
|
overflow: hidden;
|
|
1554
|
-
padding: var(--space-2);
|
|
1565
|
+
padding: var(--tl-space-2);
|
|
1555
1566
|
}
|
|
1556
1567
|
|
|
1557
1568
|
.tl-shape-error-boundary::before {
|
|
@@ -1559,7 +1570,7 @@ input,
|
|
|
1559
1570
|
content: 'Error';
|
|
1560
1571
|
font-size: 12px;
|
|
1561
1572
|
font-family: inherit;
|
|
1562
|
-
color: var(--color-text-0);
|
|
1573
|
+
color: var(--tl-color-text-0);
|
|
1563
1574
|
}
|
|
1564
1575
|
|
|
1565
1576
|
/* ----------------- Error boundary ----------------- */
|
|
@@ -1570,9 +1581,9 @@ input,
|
|
|
1570
1581
|
display: flex;
|
|
1571
1582
|
align-items: center;
|
|
1572
1583
|
justify-content: center;
|
|
1573
|
-
padding: var(--space-4);
|
|
1574
|
-
background-color: var(--color-background);
|
|
1575
|
-
color: var(--color-text-1);
|
|
1584
|
+
padding: var(--tl-space-4);
|
|
1585
|
+
background-color: var(--tl-color-background);
|
|
1586
|
+
color: var(--tl-color-text-1);
|
|
1576
1587
|
position: absolute;
|
|
1577
1588
|
}
|
|
1578
1589
|
|
|
@@ -1581,8 +1592,8 @@ input,
|
|
|
1581
1592
|
inset: 0px;
|
|
1582
1593
|
height: 100%;
|
|
1583
1594
|
width: 100%;
|
|
1584
|
-
z-index: var(--layer-error-overlay);
|
|
1585
|
-
background-color: var(--color-overlay);
|
|
1595
|
+
z-index: var(--tl-layer-error-overlay);
|
|
1596
|
+
background-color: var(--tl-color-overlay);
|
|
1586
1597
|
}
|
|
1587
1598
|
|
|
1588
1599
|
.tl-error-boundary__content * {
|
|
@@ -1597,7 +1608,7 @@ input,
|
|
|
1597
1608
|
inset: 0px;
|
|
1598
1609
|
height: 100%;
|
|
1599
1610
|
width: 100%;
|
|
1600
|
-
z-index: var(--layer-error-canvas);
|
|
1611
|
+
z-index: var(--tl-layer-error-canvas);
|
|
1601
1612
|
}
|
|
1602
1613
|
|
|
1603
1614
|
/* some browsers seem to have some weird interactions between stacking contexts
|
|
@@ -1610,7 +1621,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1610
1621
|
inset: 0px;
|
|
1611
1622
|
height: 100%;
|
|
1612
1623
|
width: 100%;
|
|
1613
|
-
z-index: var(--layer-error-canvas-after);
|
|
1624
|
+
z-index: var(--tl-layer-error-canvas-after);
|
|
1614
1625
|
pointer-events: all;
|
|
1615
1626
|
}
|
|
1616
1627
|
|
|
@@ -1620,16 +1631,16 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1620
1631
|
max-width: 100%;
|
|
1621
1632
|
width: 400px;
|
|
1622
1633
|
max-height: 100%;
|
|
1623
|
-
background-color: var(--color-panel);
|
|
1634
|
+
background-color: var(--tl-color-panel);
|
|
1624
1635
|
padding: 16px;
|
|
1625
1636
|
border-radius: 16px;
|
|
1626
|
-
box-shadow: var(--shadow-2);
|
|
1637
|
+
box-shadow: var(--tl-shadow-2);
|
|
1627
1638
|
font-size: 14px;
|
|
1628
1639
|
font-weight: 400;
|
|
1629
1640
|
display: flex;
|
|
1630
1641
|
flex-direction: column;
|
|
1631
1642
|
overflow: auto;
|
|
1632
|
-
z-index: var(--layer-error-content);
|
|
1643
|
+
z-index: var(--tl-layer-error-content);
|
|
1633
1644
|
gap: 12px;
|
|
1634
1645
|
}
|
|
1635
1646
|
|
|
@@ -1644,10 +1655,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1644
1655
|
}
|
|
1645
1656
|
|
|
1646
1657
|
.tl-error-boundary__content h4 {
|
|
1647
|
-
border: 1px solid var(--color-low-border);
|
|
1658
|
+
border: 1px solid var(--tl-color-low-border);
|
|
1648
1659
|
margin: -6px 0 0 0;
|
|
1649
|
-
padding: var(--space-5);
|
|
1650
|
-
border-radius: var(--radius-2);
|
|
1660
|
+
padding: var(--tl-space-5);
|
|
1661
|
+
border-radius: var(--tl-radius-2);
|
|
1651
1662
|
font-weight: normal;
|
|
1652
1663
|
}
|
|
1653
1664
|
|
|
@@ -1657,10 +1668,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1657
1668
|
}
|
|
1658
1669
|
|
|
1659
1670
|
.tl-error-boundary__content pre {
|
|
1660
|
-
background-color: var(--color-muted-2);
|
|
1671
|
+
background-color: var(--tl-color-muted-2);
|
|
1661
1672
|
margin-top: 0;
|
|
1662
|
-
padding: var(--space-5);
|
|
1663
|
-
border-radius: var(--radius-2);
|
|
1673
|
+
padding: var(--tl-space-5);
|
|
1674
|
+
border-radius: var(--tl-radius-2);
|
|
1664
1675
|
overflow: auto;
|
|
1665
1676
|
font-size: 12px;
|
|
1666
1677
|
max-height: 320px;
|
|
@@ -1672,15 +1683,15 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1672
1683
|
font-family: inherit;
|
|
1673
1684
|
font-size: 14px;
|
|
1674
1685
|
font-weight: 500;
|
|
1675
|
-
padding: var(--space-4);
|
|
1676
|
-
border-radius: var(--radius-3);
|
|
1686
|
+
padding: var(--tl-space-4);
|
|
1687
|
+
border-radius: var(--tl-radius-3);
|
|
1677
1688
|
cursor: var(--tl-cursor-pointer);
|
|
1678
1689
|
color: inherit;
|
|
1679
1690
|
background-color: transparent;
|
|
1680
1691
|
}
|
|
1681
1692
|
|
|
1682
1693
|
.tl-error-boundary__content a {
|
|
1683
|
-
color: var(--color-selected);
|
|
1694
|
+
color: var(--tl-color-selected);
|
|
1684
1695
|
font-weight: 500;
|
|
1685
1696
|
text-decoration: none;
|
|
1686
1697
|
}
|
|
@@ -1692,31 +1703,31 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1692
1703
|
|
|
1693
1704
|
.tl-error-boundary__content__error button {
|
|
1694
1705
|
position: absolute;
|
|
1695
|
-
top: var(--space-2);
|
|
1696
|
-
right: var(--space-2);
|
|
1706
|
+
top: var(--tl-space-2);
|
|
1707
|
+
right: var(--tl-space-2);
|
|
1697
1708
|
font-size: 12px;
|
|
1698
|
-
padding: var(--space-2) var(--space-3);
|
|
1699
|
-
background-color: var(--color-panel);
|
|
1700
|
-
border-radius: var(--radius-1);
|
|
1709
|
+
padding: var(--tl-space-2) var(--tl-space-3);
|
|
1710
|
+
background-color: var(--tl-color-panel);
|
|
1711
|
+
border-radius: var(--tl-radius-1);
|
|
1701
1712
|
}
|
|
1702
1713
|
|
|
1703
1714
|
.tl-error-boundary__content__actions {
|
|
1704
1715
|
display: flex;
|
|
1705
1716
|
justify-content: space-between;
|
|
1706
|
-
gap: var(--space-4);
|
|
1717
|
+
gap: var(--tl-space-4);
|
|
1707
1718
|
margin: 0px;
|
|
1708
1719
|
margin-left: -4px;
|
|
1709
1720
|
}
|
|
1710
1721
|
.tl-error-boundary__content__actions__group {
|
|
1711
1722
|
display: flex;
|
|
1712
|
-
gap: var(--space-4);
|
|
1723
|
+
gap: var(--tl-space-4);
|
|
1713
1724
|
}
|
|
1714
1725
|
.tl-error-boundary__content .tl-error-boundary__reset {
|
|
1715
|
-
color: var(--color-danger);
|
|
1726
|
+
color: var(--tl-color-danger);
|
|
1716
1727
|
}
|
|
1717
1728
|
.tl-error-boundary__content .tl-error-boundary__refresh {
|
|
1718
|
-
background-color: var(--color-primary);
|
|
1719
|
-
color: var(--color-selected-contrast);
|
|
1729
|
+
background-color: var(--tl-color-primary);
|
|
1730
|
+
color: var(--tl-color-selected-contrast);
|
|
1720
1731
|
}
|
|
1721
1732
|
.tl-container__focused:not(.tl-container__no-focus-ring)
|
|
1722
1733
|
.tlui-button.tl-error-boundary__refresh:focus-visible {
|
|
@@ -1728,7 +1739,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1728
1739
|
|
|
1729
1740
|
.tl-hit-test-blocker {
|
|
1730
1741
|
position: absolute;
|
|
1731
|
-
z-index: var(--layer-canvas-blocker);
|
|
1742
|
+
z-index: var(--tl-layer-canvas-blocker);
|
|
1732
1743
|
inset: 0px;
|
|
1733
1744
|
width: 100%;
|
|
1734
1745
|
height: 100%;
|
|
@@ -1748,32 +1759,32 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1748
1759
|
|
|
1749
1760
|
.tl-handle__bg:hover {
|
|
1750
1761
|
cursor: var(--tl-cursor-grab);
|
|
1751
|
-
fill: var(--color-selection-fill);
|
|
1762
|
+
fill: var(--tl-color-selection-fill);
|
|
1752
1763
|
}
|
|
1753
1764
|
|
|
1754
1765
|
.tl-bookmark__link:hover {
|
|
1755
|
-
color: var(--color-selected);
|
|
1766
|
+
color: var(--tl-color-selected);
|
|
1756
1767
|
}
|
|
1757
1768
|
|
|
1758
1769
|
.tl-hyperlink-button:hover {
|
|
1759
|
-
color: var(--color-selected);
|
|
1770
|
+
color: var(--tl-color-selected);
|
|
1760
1771
|
}
|
|
1761
1772
|
|
|
1762
1773
|
.tl-error-boundary__content button:hover {
|
|
1763
|
-
background-color: var(--color-low);
|
|
1774
|
+
background-color: var(--tl-color-low);
|
|
1764
1775
|
}
|
|
1765
1776
|
.tl-error-boundary__content a:hover {
|
|
1766
|
-
color: var(--color-text-1);
|
|
1777
|
+
color: var(--tl-color-text-1);
|
|
1767
1778
|
}
|
|
1768
1779
|
.tl-error-boundary__content .tl-error-boundary__refresh:hover {
|
|
1769
|
-
background-color: var(--color-primary);
|
|
1780
|
+
background-color: var(--tl-color-primary);
|
|
1770
1781
|
opacity: 0.9;
|
|
1771
1782
|
}
|
|
1772
1783
|
|
|
1773
1784
|
/* These three rules help preserve clicking into specific points in text areas *while*
|
|
1774
1785
|
* already in edit mode when jumping from shape to shape. */
|
|
1775
1786
|
.tl-canvas[data-iseditinganything='true'] .tl-text-wrapper:hover .tl-text-input {
|
|
1776
|
-
z-index: var(--layer-text-editor);
|
|
1787
|
+
z-index: var(--tl-layer-text-editor);
|
|
1777
1788
|
pointer-events: all;
|
|
1778
1789
|
}
|
|
1779
1790
|
}
|
|
@@ -1781,15 +1792,15 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1781
1792
|
/* @tldraw/ui */
|
|
1782
1793
|
|
|
1783
1794
|
.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;
|
|
1795
|
+
--tl-layer-above: 1;
|
|
1796
|
+
--tl-layer-focused-input: 10;
|
|
1797
|
+
--tl-layer-menu-click-capture: 250;
|
|
1798
|
+
--tl-layer-panels: 300;
|
|
1799
|
+
--tl-layer-menus: 400;
|
|
1800
|
+
--tl-layer-toasts: 650;
|
|
1801
|
+
--tl-layer-cursor: 700;
|
|
1802
|
+
--tl-layer-header-footer: 999;
|
|
1803
|
+
--tl-layer-following-indicator: 1000;
|
|
1793
1804
|
}
|
|
1794
1805
|
|
|
1795
1806
|
/* Button */
|
|
@@ -1813,23 +1824,23 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1813
1824
|
text-rendering: optimizeLegibility;
|
|
1814
1825
|
font-size: 12px;
|
|
1815
1826
|
gap: 0px;
|
|
1816
|
-
color: var(--color-text-1);
|
|
1827
|
+
color: var(--tl-color-text-1);
|
|
1817
1828
|
z-index: 0;
|
|
1818
1829
|
}
|
|
1819
1830
|
|
|
1820
1831
|
.tlui-button:disabled {
|
|
1821
|
-
color: var(--color-text-3);
|
|
1832
|
+
color: var(--tl-color-text-3);
|
|
1822
1833
|
text-shadow: none;
|
|
1823
1834
|
cursor: default;
|
|
1824
1835
|
}
|
|
1825
1836
|
|
|
1826
1837
|
.tlui-button:disabled .tlui-kbd {
|
|
1827
|
-
color: var(--color-text-3);
|
|
1838
|
+
color: var(--tl-color-text-3);
|
|
1828
1839
|
}
|
|
1829
1840
|
|
|
1830
1841
|
.tlui-button > * {
|
|
1831
1842
|
position: relative;
|
|
1832
|
-
z-index: var(--layer-above);
|
|
1843
|
+
z-index: var(--tl-layer-above);
|
|
1833
1844
|
}
|
|
1834
1845
|
|
|
1835
1846
|
.tlui-button__label {
|
|
@@ -1845,7 +1856,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1845
1856
|
*/
|
|
1846
1857
|
.tl-container__focused:not(.tl-container__no-focus-ring) .tlui-button:focus-visible {
|
|
1847
1858
|
border-radius: 10px;
|
|
1848
|
-
outline: 2px solid var(--color-focus);
|
|
1859
|
+
outline: 2px solid var(--tl-color-focus);
|
|
1849
1860
|
outline-offset: -5px;
|
|
1850
1861
|
}
|
|
1851
1862
|
.tl-container__focused:not(.tl-container__no-focus-ring) .tlui-button__tool:focus-visible {
|
|
@@ -1853,7 +1864,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1853
1864
|
}
|
|
1854
1865
|
.tlui-slider__container:has(.tlui-slider__thumb:focus-visible) {
|
|
1855
1866
|
border-radius: 10px;
|
|
1856
|
-
outline: 2px solid var(--color-focus);
|
|
1867
|
+
outline: 2px solid var(--tl-color-focus);
|
|
1857
1868
|
outline-offset: -5px;
|
|
1858
1869
|
}
|
|
1859
1870
|
|
|
@@ -1862,8 +1873,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1862
1873
|
content: '';
|
|
1863
1874
|
position: absolute;
|
|
1864
1875
|
inset: 4px;
|
|
1865
|
-
border-radius: var(--radius-2);
|
|
1866
|
-
background: var(--color-muted-2);
|
|
1876
|
+
border-radius: var(--tl-radius-2);
|
|
1877
|
+
background: var(--tl-color-muted-2);
|
|
1867
1878
|
opacity: 0;
|
|
1868
1879
|
}
|
|
1869
1880
|
|
|
@@ -1873,18 +1884,18 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1873
1884
|
|
|
1874
1885
|
.tlui-button[data-isactive='true']::after,
|
|
1875
1886
|
.tlui-button[data-isactive='true']:not(:disabled, :focus-visible):active:after {
|
|
1876
|
-
background: var(--color-hint);
|
|
1887
|
+
background: var(--tl-color-hint);
|
|
1877
1888
|
opacity: 1;
|
|
1878
1889
|
}
|
|
1879
1890
|
|
|
1880
1891
|
.tlui-button[aria-expanded='true'][data-direction='left'] {
|
|
1881
|
-
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
1892
|
+
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
1882
1893
|
opacity: 1;
|
|
1883
1894
|
}
|
|
1884
1895
|
|
|
1885
1896
|
@media (hover: hover) {
|
|
1886
1897
|
.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%);
|
|
1898
|
+
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
1888
1899
|
opacity: 1;
|
|
1889
1900
|
}
|
|
1890
1901
|
|
|
@@ -1898,18 +1909,18 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1898
1909
|
}
|
|
1899
1910
|
|
|
1900
1911
|
.tlui-button__icon + .tlui-button__label {
|
|
1901
|
-
margin-left: var(--space-2);
|
|
1912
|
+
margin-left: var(--tl-space-2);
|
|
1902
1913
|
}
|
|
1903
1914
|
|
|
1904
1915
|
/* Low button */
|
|
1905
1916
|
|
|
1906
1917
|
.tlui-button__low {
|
|
1907
|
-
border-radius: var(--radius-3);
|
|
1908
|
-
background-color: var(--color-low);
|
|
1918
|
+
border-radius: var(--tl-radius-3);
|
|
1919
|
+
background-color: var(--tl-color-low);
|
|
1909
1920
|
}
|
|
1910
1921
|
|
|
1911
1922
|
.tlui-button__low::after {
|
|
1912
|
-
background-color: var(--color-muted-2);
|
|
1923
|
+
background-color: var(--tl-color-muted-2);
|
|
1913
1924
|
opacity: 0;
|
|
1914
1925
|
}
|
|
1915
1926
|
|
|
@@ -1922,21 +1933,21 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1922
1933
|
/* Primary / danger buttons */
|
|
1923
1934
|
|
|
1924
1935
|
.tlui-button__primary {
|
|
1925
|
-
color: var(--color-primary);
|
|
1936
|
+
color: var(--tl-color-primary);
|
|
1926
1937
|
}
|
|
1927
1938
|
|
|
1928
1939
|
.tlui-button__danger {
|
|
1929
|
-
color: var(--color-danger);
|
|
1940
|
+
color: var(--tl-color-danger);
|
|
1930
1941
|
text-shadow: none;
|
|
1931
1942
|
}
|
|
1932
1943
|
|
|
1933
1944
|
@media (hover: hover) {
|
|
1934
1945
|
.tlui-button__primary:not(:disabled, :focus-visible):hover {
|
|
1935
|
-
color: var(--color-primary);
|
|
1946
|
+
color: var(--tl-color-primary);
|
|
1936
1947
|
}
|
|
1937
1948
|
|
|
1938
1949
|
.tlui-button__danger:not(:disabled, :focus-visible):hover {
|
|
1939
|
-
color: var(--color-danger);
|
|
1950
|
+
color: var(--tl-color-danger);
|
|
1940
1951
|
text-shadow: none;
|
|
1941
1952
|
}
|
|
1942
1953
|
}
|
|
@@ -1953,7 +1964,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1953
1964
|
|
|
1954
1965
|
.tlui-button__menu::after {
|
|
1955
1966
|
inset: 4px;
|
|
1956
|
-
border-radius: var(--radius-2);
|
|
1967
|
+
border-radius: var(--tl-radius-2);
|
|
1957
1968
|
}
|
|
1958
1969
|
|
|
1959
1970
|
.tlui-button__menu > .tlui-icon + .tlui-button__label {
|
|
@@ -1986,7 +1997,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1986
1997
|
pointer-events: all;
|
|
1987
1998
|
height: 40px;
|
|
1988
1999
|
width: 40px;
|
|
1989
|
-
border-radius: var(--radius-2);
|
|
2000
|
+
border-radius: var(--tl-radius-2);
|
|
1990
2001
|
}
|
|
1991
2002
|
|
|
1992
2003
|
.tlui-main-toolbar--horizontal .tlui-main-toolbar__lock-button {
|
|
@@ -2020,15 +2031,15 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2020
2031
|
}
|
|
2021
2032
|
|
|
2022
2033
|
.tlui-button__tool[aria-pressed='true'] {
|
|
2023
|
-
color: var(--color-selected-contrast);
|
|
2034
|
+
color: var(--tl-color-selected-contrast);
|
|
2024
2035
|
}
|
|
2025
2036
|
|
|
2026
2037
|
.tlui-button__tool[aria-pressed='true']:not(:disabled, :focus-visible):active {
|
|
2027
|
-
color: var(--color-selected-contrast);
|
|
2038
|
+
color: var(--tl-color-selected-contrast);
|
|
2028
2039
|
}
|
|
2029
2040
|
|
|
2030
2041
|
.tlui-button__tool[aria-pressed='true']:not(:disabled)::after {
|
|
2031
|
-
background: var(--color-selected);
|
|
2042
|
+
background: var(--tl-color-selected);
|
|
2032
2043
|
opacity: 1;
|
|
2033
2044
|
}
|
|
2034
2045
|
|
|
@@ -2101,9 +2112,9 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2101
2112
|
pointer-events: none;
|
|
2102
2113
|
user-select: none;
|
|
2103
2114
|
contain: strict;
|
|
2104
|
-
z-index: var(--layer-panels);
|
|
2115
|
+
z-index: var(--tl-layer-panels);
|
|
2105
2116
|
transform: translate3d(0, 0, 0);
|
|
2106
|
-
--sab: env(safe-area-inset-bottom);
|
|
2117
|
+
--tl-sab: env(safe-area-inset-bottom);
|
|
2107
2118
|
font-weight: 500;
|
|
2108
2119
|
line-height: 1.6;
|
|
2109
2120
|
-webkit-font-smoothing: antialiased;
|
|
@@ -2156,11 +2167,11 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2156
2167
|
justify-content: flex-start;
|
|
2157
2168
|
align-items: flex-start;
|
|
2158
2169
|
width: min-content;
|
|
2159
|
-
gap: var(--space-3);
|
|
2160
|
-
margin: var(--space-2) var(--space-3);
|
|
2170
|
+
gap: var(--tl-space-3);
|
|
2171
|
+
margin: var(--tl-space-2) var(--tl-space-3);
|
|
2161
2172
|
white-space: nowrap;
|
|
2162
2173
|
pointer-events: none;
|
|
2163
|
-
z-index: var(--layer-panels);
|
|
2174
|
+
z-index: var(--tl-layer-panels);
|
|
2164
2175
|
}
|
|
2165
2176
|
|
|
2166
2177
|
/* ---------------------- Icon ---------------------- */
|
|
@@ -2188,7 +2199,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2188
2199
|
|
|
2189
2200
|
.tlui-slider__container {
|
|
2190
2201
|
width: 100%;
|
|
2191
|
-
padding: 0px var(--space-4);
|
|
2202
|
+
padding: 0px var(--tl-space-4);
|
|
2192
2203
|
}
|
|
2193
2204
|
|
|
2194
2205
|
.tlui-slider {
|
|
@@ -2214,7 +2225,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2214
2225
|
content: '';
|
|
2215
2226
|
height: 3px;
|
|
2216
2227
|
width: 100%;
|
|
2217
|
-
background-color: var(--color-muted-1);
|
|
2228
|
+
background-color: var(--tl-color-muted-1);
|
|
2218
2229
|
border-radius: 14px;
|
|
2219
2230
|
}
|
|
2220
2231
|
|
|
@@ -2223,7 +2234,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2223
2234
|
top: calc(50% - 2px);
|
|
2224
2235
|
left: 0px;
|
|
2225
2236
|
height: 3px;
|
|
2226
|
-
background-color: var(--color-selected);
|
|
2237
|
+
background-color: var(--tl-color-selected);
|
|
2227
2238
|
border-radius: 14px;
|
|
2228
2239
|
}
|
|
2229
2240
|
|
|
@@ -2235,16 +2246,16 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2235
2246
|
height: 18px;
|
|
2236
2247
|
position: relative;
|
|
2237
2248
|
top: -1px;
|
|
2238
|
-
background-color: var(--color-panel);
|
|
2249
|
+
background-color: var(--tl-color-panel);
|
|
2239
2250
|
border-radius: 999px;
|
|
2240
|
-
box-shadow: inset 0px 0px 0px 2px var(--color-text-1);
|
|
2251
|
+
box-shadow: inset 0px 0px 0px 2px var(--tl-color-text-1);
|
|
2241
2252
|
}
|
|
2242
2253
|
|
|
2243
2254
|
.tlui-slider__thumb:active {
|
|
2244
2255
|
cursor: grabbing;
|
|
2245
2256
|
box-shadow:
|
|
2246
|
-
inset 0px 0px 0px 2px var(--color-text-1),
|
|
2247
|
-
var(--shadow-1);
|
|
2257
|
+
inset 0px 0px 0px 2px var(--tl-color-text-1),
|
|
2258
|
+
var(--tl-shadow-1);
|
|
2248
2259
|
}
|
|
2249
2260
|
|
|
2250
2261
|
/* ---------------------- Input --------------------- */
|
|
@@ -2253,7 +2264,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2253
2264
|
background: none;
|
|
2254
2265
|
margin: 0px;
|
|
2255
2266
|
position: relative;
|
|
2256
|
-
z-index: var(--layer-above);
|
|
2267
|
+
z-index: var(--tl-layer-above);
|
|
2257
2268
|
height: 40px;
|
|
2258
2269
|
max-height: 40px;
|
|
2259
2270
|
display: flex;
|
|
@@ -2262,8 +2273,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2262
2273
|
font-family: inherit;
|
|
2263
2274
|
font-size: 12px;
|
|
2264
2275
|
font-weight: inherit;
|
|
2265
|
-
color: var(--color-text-1);
|
|
2266
|
-
padding: var(--space-4);
|
|
2276
|
+
color: var(--tl-color-text-1);
|
|
2277
|
+
padding: var(--tl-space-4);
|
|
2267
2278
|
padding-left: 0px;
|
|
2268
2279
|
border: none;
|
|
2269
2280
|
outline: none;
|
|
@@ -2279,8 +2290,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2279
2290
|
height: 44px;
|
|
2280
2291
|
display: flex;
|
|
2281
2292
|
align-items: center;
|
|
2282
|
-
gap: var(--space-4);
|
|
2283
|
-
color: var(--color-text);
|
|
2293
|
+
gap: var(--tl-space-4);
|
|
2294
|
+
color: var(--tl-color-text);
|
|
2284
2295
|
}
|
|
2285
2296
|
|
|
2286
2297
|
.tlui-input__wrapper > .tlui-icon {
|
|
@@ -2312,7 +2323,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2312
2323
|
grid-auto-columns: minmax(1em, auto);
|
|
2313
2324
|
align-self: bottom;
|
|
2314
2325
|
color: currentColor;
|
|
2315
|
-
margin-left: var(--space-4);
|
|
2326
|
+
margin-left: var(--tl-space-4);
|
|
2316
2327
|
}
|
|
2317
2328
|
|
|
2318
2329
|
.tlui-kbd > span {
|
|
@@ -2329,13 +2340,13 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2329
2340
|
}
|
|
2330
2341
|
|
|
2331
2342
|
.tlui-kbd:not(:last-child) {
|
|
2332
|
-
margin-right: var(--space-2);
|
|
2343
|
+
margin-right: var(--tl-space-2);
|
|
2333
2344
|
}
|
|
2334
2345
|
|
|
2335
2346
|
/* Focus Mode Button */
|
|
2336
2347
|
|
|
2337
2348
|
.tlui-focus-button {
|
|
2338
|
-
z-index: var(--layer-panels);
|
|
2349
|
+
z-index: var(--tl-layer-panels);
|
|
2339
2350
|
pointer-events: all;
|
|
2340
2351
|
}
|
|
2341
2352
|
|
|
@@ -2346,16 +2357,16 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2346
2357
|
}
|
|
2347
2358
|
|
|
2348
2359
|
.tlui-menu {
|
|
2349
|
-
z-index: var(--layer-menus);
|
|
2360
|
+
z-index: var(--tl-layer-menus);
|
|
2350
2361
|
height: fit-content;
|
|
2351
2362
|
width: fit-content;
|
|
2352
|
-
border-radius: var(--radius-3);
|
|
2363
|
+
border-radius: var(--tl-radius-3);
|
|
2353
2364
|
pointer-events: all;
|
|
2354
2365
|
touch-action: auto;
|
|
2355
2366
|
overflow-y: auto;
|
|
2356
2367
|
overscroll-behavior: none;
|
|
2357
|
-
background-color: var(--color-panel);
|
|
2358
|
-
box-shadow: var(--shadow-3);
|
|
2368
|
+
background-color: var(--tl-color-panel);
|
|
2369
|
+
box-shadow: var(--tl-shadow-3);
|
|
2359
2370
|
}
|
|
2360
2371
|
|
|
2361
2372
|
.tlui-menu::-webkit-scrollbar {
|
|
@@ -2373,7 +2384,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2373
2384
|
}
|
|
2374
2385
|
|
|
2375
2386
|
.tlui-menu__group {
|
|
2376
|
-
border-bottom: 1px solid var(--color-divider);
|
|
2387
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
2377
2388
|
}
|
|
2378
2389
|
.tlui-menu__group:nth-last-of-type(1) {
|
|
2379
2390
|
border-bottom: none;
|
|
@@ -2383,23 +2394,23 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2383
2394
|
|
|
2384
2395
|
.tlui-menu__submenu__trigger[data-state='open']::after {
|
|
2385
2396
|
opacity: 1;
|
|
2386
|
-
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
2397
|
+
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
2387
2398
|
}
|
|
2388
2399
|
|
|
2389
2400
|
.tlui-menu__submenu__trigger[data-direction='left'][data-state='open']::after {
|
|
2390
2401
|
opacity: 1;
|
|
2391
|
-
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
2402
|
+
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
2392
2403
|
}
|
|
2393
2404
|
|
|
2394
2405
|
@media (hover: hover) {
|
|
2395
2406
|
.tlui-menu__submenu__trigger[data-state='open']:not(:hover)::after {
|
|
2396
2407
|
opacity: 1;
|
|
2397
|
-
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
2408
|
+
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
2398
2409
|
}
|
|
2399
2410
|
|
|
2400
2411
|
.tlui-menu__submenu__trigger[data-direction='left'][data-state='open']:not(:hover)::after {
|
|
2401
2412
|
opacity: 1;
|
|
2402
|
-
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
2413
|
+
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
2403
2414
|
}
|
|
2404
2415
|
}
|
|
2405
2416
|
|
|
@@ -2424,7 +2435,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2424
2435
|
.tlui-menu-click-capture {
|
|
2425
2436
|
position: fixed;
|
|
2426
2437
|
inset: 0;
|
|
2427
|
-
z-index: var(--layer-menu-click-capture);
|
|
2438
|
+
z-index: var(--tl-layer-menu-click-capture);
|
|
2428
2439
|
}
|
|
2429
2440
|
|
|
2430
2441
|
/* --------------------- Popover -------------------- */
|
|
@@ -2440,10 +2451,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2440
2451
|
max-height: calc(var(--radix-popover-content-available-height) - 8px);
|
|
2441
2452
|
margin: 0px;
|
|
2442
2453
|
border: none;
|
|
2443
|
-
border-radius: var(--radius-3);
|
|
2444
|
-
background-color: var(--color-panel);
|
|
2445
|
-
box-shadow: var(--shadow-3);
|
|
2446
|
-
z-index: var(--layer-menus);
|
|
2454
|
+
border-radius: var(--tl-radius-3);
|
|
2455
|
+
background-color: var(--tl-color-panel);
|
|
2456
|
+
box-shadow: var(--tl-shadow-3);
|
|
2457
|
+
z-index: var(--tl-layer-menus);
|
|
2447
2458
|
overflow: hidden;
|
|
2448
2459
|
overflow-y: auto;
|
|
2449
2460
|
touch-action: auto;
|
|
@@ -2456,22 +2467,22 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2456
2467
|
|
|
2457
2468
|
.tlui-menu-zone {
|
|
2458
2469
|
position: relative;
|
|
2459
|
-
z-index: var(--layer-panels);
|
|
2470
|
+
z-index: var(--tl-layer-panels);
|
|
2460
2471
|
width: fit-content;
|
|
2461
|
-
border-right: 2px solid var(--color-background);
|
|
2462
|
-
border-bottom: 2px solid var(--color-background);
|
|
2463
|
-
border-bottom-right-radius: var(--radius-4);
|
|
2464
|
-
background-color: var(--color-low);
|
|
2472
|
+
border-right: 2px solid var(--tl-color-background);
|
|
2473
|
+
border-bottom: 2px solid var(--tl-color-background);
|
|
2474
|
+
border-bottom-right-radius: var(--tl-radius-4);
|
|
2475
|
+
background-color: var(--tl-color-low);
|
|
2465
2476
|
}
|
|
2466
2477
|
|
|
2467
2478
|
.tlui-menu-zone *[data-state='open']::after {
|
|
2468
|
-
background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
2479
|
+
background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
2469
2480
|
opacity: 1;
|
|
2470
2481
|
}
|
|
2471
2482
|
|
|
2472
2483
|
@media (hover: hover) {
|
|
2473
2484
|
.tlui-menu-zone *[data-state='open']:not(:hover)::after {
|
|
2474
|
-
background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
2485
|
+
background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
2475
2486
|
opacity: 1;
|
|
2476
2487
|
}
|
|
2477
2488
|
}
|
|
@@ -2497,8 +2508,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2497
2508
|
align-items: center;
|
|
2498
2509
|
width: 100%;
|
|
2499
2510
|
height: 40px;
|
|
2500
|
-
padding-left: var(--space-4);
|
|
2501
|
-
border-bottom: 1px solid var(--color-divider);
|
|
2511
|
+
padding-left: var(--tl-space-4);
|
|
2512
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
2502
2513
|
}
|
|
2503
2514
|
|
|
2504
2515
|
.tlui-page-menu__header > .tlui-button:nth-of-type(1) {
|
|
@@ -2506,7 +2517,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2506
2517
|
}
|
|
2507
2518
|
|
|
2508
2519
|
.tlui-page-menu__header__title {
|
|
2509
|
-
color: var(--color-text);
|
|
2520
|
+
color: var(--tl-color-text);
|
|
2510
2521
|
font-size: 12px;
|
|
2511
2522
|
flex-grow: 2;
|
|
2512
2523
|
}
|
|
@@ -2591,7 +2602,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2591
2602
|
display: inline-flex;
|
|
2592
2603
|
align-items: center;
|
|
2593
2604
|
justify-content: center;
|
|
2594
|
-
color: var(--color-text);
|
|
2605
|
+
color: var(--tl-color-text);
|
|
2595
2606
|
}
|
|
2596
2607
|
|
|
2597
2608
|
.tlui-page_menu__item__sortable {
|
|
@@ -2604,7 +2615,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2604
2615
|
flex-direction: row;
|
|
2605
2616
|
align-items: center;
|
|
2606
2617
|
overflow: hidden;
|
|
2607
|
-
z-index: var(--layer-above);
|
|
2618
|
+
z-index: var(--tl-layer-above);
|
|
2608
2619
|
}
|
|
2609
2620
|
|
|
2610
2621
|
.tlui-page_menu__item__sortable__title {
|
|
@@ -2616,7 +2627,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2616
2627
|
}
|
|
2617
2628
|
|
|
2618
2629
|
.tlui-page_menu__item__sortable:focus-visible {
|
|
2619
|
-
z-index: var(--layer-focused-input);
|
|
2630
|
+
z-index: var(--tl-layer-focused-input);
|
|
2620
2631
|
}
|
|
2621
2632
|
|
|
2622
2633
|
.tlui-page_menu__item__sortable__handle {
|
|
@@ -2625,7 +2636,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2625
2636
|
min-width: 0px;
|
|
2626
2637
|
height: 40px;
|
|
2627
2638
|
cursor: grab;
|
|
2628
|
-
color: var(--color-text-3);
|
|
2639
|
+
color: var(--tl-color-text-3);
|
|
2629
2640
|
flex-shrink: 0;
|
|
2630
2641
|
margin-right: -9px;
|
|
2631
2642
|
}
|
|
@@ -2667,13 +2678,13 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2667
2678
|
}
|
|
2668
2679
|
|
|
2669
2680
|
.tlui-page_menu__item__submenu > .tlui-button[data-state='open']::after {
|
|
2670
|
-
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
2681
|
+
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
2671
2682
|
opacity: 1;
|
|
2672
2683
|
}
|
|
2673
2684
|
|
|
2674
2685
|
@media (hover: hover) {
|
|
2675
2686
|
.tlui-page_menu__item__submenu > .tlui-button[data-state='open']:not(:hover)::after {
|
|
2676
|
-
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
2687
|
+
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
2677
2688
|
opacity: 1;
|
|
2678
2689
|
}
|
|
2679
2690
|
}
|
|
@@ -2709,7 +2720,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2709
2720
|
top: 48px;
|
|
2710
2721
|
left: -9999px;
|
|
2711
2722
|
padding: 8px 16px;
|
|
2712
|
-
z-index: var(--layer-toasts);
|
|
2723
|
+
z-index: var(--tl-layer-toasts);
|
|
2713
2724
|
}
|
|
2714
2725
|
|
|
2715
2726
|
.tl-skip-to-main-content:focus {
|
|
@@ -2721,11 +2732,11 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2721
2732
|
.tlui-offline-indicator {
|
|
2722
2733
|
display: flex;
|
|
2723
2734
|
flex-direction: row;
|
|
2724
|
-
gap: var(--space-3);
|
|
2725
|
-
color: var(--color-text);
|
|
2726
|
-
background-color: var(--color-low);
|
|
2727
|
-
border: 3px solid var(--color-background);
|
|
2728
|
-
padding: 0px var(--space-5);
|
|
2735
|
+
gap: var(--tl-space-3);
|
|
2736
|
+
color: var(--tl-color-text);
|
|
2737
|
+
background-color: var(--tl-color-low);
|
|
2738
|
+
border: 3px solid var(--tl-color-background);
|
|
2739
|
+
padding: 0px var(--tl-space-5);
|
|
2729
2740
|
height: 42px;
|
|
2730
2741
|
align-items: center;
|
|
2731
2742
|
justify-content: center;
|
|
@@ -2740,10 +2751,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2740
2751
|
/* ------------------- Style panel ------------------ */
|
|
2741
2752
|
|
|
2742
2753
|
.tlui-style-panel__wrapper {
|
|
2743
|
-
box-shadow: var(--shadow-2);
|
|
2744
|
-
border-radius: var(--radius-3);
|
|
2754
|
+
box-shadow: var(--tl-shadow-2);
|
|
2755
|
+
border-radius: var(--tl-radius-3);
|
|
2745
2756
|
pointer-events: all;
|
|
2746
|
-
background-color: var(--color-panel);
|
|
2757
|
+
background-color: var(--tl-color-panel);
|
|
2747
2758
|
height: fit-content;
|
|
2748
2759
|
max-height: 100%;
|
|
2749
2760
|
margin: 8px;
|
|
@@ -2752,7 +2763,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2752
2763
|
overscroll-behavior: none;
|
|
2753
2764
|
overflow-y: auto;
|
|
2754
2765
|
overflow-x: hidden;
|
|
2755
|
-
color: var(--color-text);
|
|
2766
|
+
color: var(--tl-color-text);
|
|
2756
2767
|
}
|
|
2757
2768
|
/* if the style panel is the only child (ie no share menu), increase the margin */
|
|
2758
2769
|
.tlui-style-panel__wrapper:only-child {
|
|
@@ -2761,7 +2772,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2761
2772
|
|
|
2762
2773
|
.tlui-style-panel {
|
|
2763
2774
|
position: relative;
|
|
2764
|
-
z-index: var(--layer-panels);
|
|
2775
|
+
z-index: var(--tl-layer-panels);
|
|
2765
2776
|
pointer-events: all;
|
|
2766
2777
|
width: 148px;
|
|
2767
2778
|
max-width: 148px;
|
|
@@ -2769,7 +2780,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2769
2780
|
|
|
2770
2781
|
.tlui-style-panel[data-show-ui-labels='true'] .tlui-button[data-isactive='true'] {
|
|
2771
2782
|
border-radius: 10px;
|
|
2772
|
-
outline: 2px solid var(--color-text);
|
|
2783
|
+
outline: 2px solid var(--tl-color-text);
|
|
2773
2784
|
outline-offset: -5px;
|
|
2774
2785
|
}
|
|
2775
2786
|
|
|
@@ -2788,7 +2799,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2788
2799
|
}
|
|
2789
2800
|
|
|
2790
2801
|
.tlui-style-panel__section:nth-of-type(n + 2):not(:last-child) {
|
|
2791
|
-
border-bottom: 1px solid var(--color-divider);
|
|
2802
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
2792
2803
|
}
|
|
2793
2804
|
|
|
2794
2805
|
.tlui-style-panel__section:empty {
|
|
@@ -2797,7 +2808,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2797
2808
|
|
|
2798
2809
|
.tlui-style-panel__section__common:not(:only-child) {
|
|
2799
2810
|
margin-bottom: 7px;
|
|
2800
|
-
border-bottom: 1px solid var(--color-divider);
|
|
2811
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
2801
2812
|
}
|
|
2802
2813
|
|
|
2803
2814
|
.tlui-style-panel__dropdown-picker:only-child {
|
|
@@ -2808,8 +2819,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2808
2819
|
display: flex;
|
|
2809
2820
|
grid-template-columns: 1fr auto;
|
|
2810
2821
|
align-items: center;
|
|
2811
|
-
padding-left: var(--space-4);
|
|
2812
|
-
color: var(--color-text-1);
|
|
2822
|
+
padding-left: var(--tl-space-4);
|
|
2823
|
+
color: var(--tl-color-text-1);
|
|
2813
2824
|
font-size: 12px;
|
|
2814
2825
|
}
|
|
2815
2826
|
|
|
@@ -2823,13 +2834,16 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2823
2834
|
|
|
2824
2835
|
.tlui-style-panel .tlui-button[data-state='open']::after {
|
|
2825
2836
|
opacity: 1;
|
|
2826
|
-
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
2837
|
+
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
2827
2838
|
}
|
|
2828
2839
|
|
|
2829
2840
|
@media (hover: hover) {
|
|
2841
|
+
.tlui-style-panel .tlui-button[aria-expanded='true'] {
|
|
2842
|
+
background: none;
|
|
2843
|
+
}
|
|
2830
2844
|
.tlui-style-panel .tlui-button[data-state='open']:not(:hover)::after {
|
|
2831
2845
|
opacity: 1;
|
|
2832
|
-
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
2846
|
+
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
2833
2847
|
}
|
|
2834
2848
|
}
|
|
2835
2849
|
|
|
@@ -2839,14 +2853,14 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2839
2853
|
.tlui-style-panel__section__common .tlui-style-panel__subheading,
|
|
2840
2854
|
.tlui-style-panel__subheading + .tlui-slider__container {
|
|
2841
2855
|
margin: 0;
|
|
2842
|
-
padding: var(--space-2) var(--space-3) 0px var(--space-4);
|
|
2856
|
+
padding: var(--tl-space-2) var(--tl-space-3) 0px var(--tl-space-4);
|
|
2843
2857
|
font-size: 12px;
|
|
2844
2858
|
font-weight: inherit;
|
|
2845
2859
|
line-height: inherit;
|
|
2846
2860
|
}
|
|
2847
2861
|
|
|
2848
2862
|
.tlui-style-panel .tlui-style-panel__subheading:nth-of-type(1) {
|
|
2849
|
-
padding-top: var(--space-3);
|
|
2863
|
+
padding-top: var(--tl-space-3);
|
|
2850
2864
|
}
|
|
2851
2865
|
|
|
2852
2866
|
.tlui-style-panel__subheading + .tlui-slider__container {
|
|
@@ -2858,7 +2872,6 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2858
2872
|
.tlui-layout__bottom {
|
|
2859
2873
|
grid-row: 2;
|
|
2860
2874
|
width: 100%;
|
|
2861
|
-
overflow: hidden;
|
|
2862
2875
|
}
|
|
2863
2876
|
|
|
2864
2877
|
.tlui-layout__bottom__main {
|
|
@@ -2874,7 +2887,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2874
2887
|
display: flex;
|
|
2875
2888
|
width: min-content;
|
|
2876
2889
|
flex-direction: column;
|
|
2877
|
-
z-index: var(--layer-panels);
|
|
2890
|
+
z-index: var(--tl-layer-panels);
|
|
2878
2891
|
pointer-events: all;
|
|
2879
2892
|
position: absolute;
|
|
2880
2893
|
left: 0px;
|
|
@@ -2887,10 +2900,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2887
2900
|
z-index: -1;
|
|
2888
2901
|
inset: -2px -2px 0px 0px;
|
|
2889
2902
|
border-radius: 0;
|
|
2890
|
-
border-top: 2px solid var(--color-background);
|
|
2891
|
-
border-right: 2px solid var(--color-background);
|
|
2892
|
-
border-top-right-radius: var(--radius-4);
|
|
2893
|
-
background-color: var(--color-low);
|
|
2903
|
+
border-top: 2px solid var(--tl-color-background);
|
|
2904
|
+
border-right: 2px solid var(--tl-color-background);
|
|
2905
|
+
border-top-right-radius: var(--tl-radius-4);
|
|
2906
|
+
background-color: var(--tl-color-low);
|
|
2894
2907
|
}
|
|
2895
2908
|
|
|
2896
2909
|
.tlui-navigation-panel[data-a11y='true']::before {
|
|
@@ -2904,7 +2917,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2904
2917
|
height: 96px;
|
|
2905
2918
|
min-height: 96px;
|
|
2906
2919
|
overflow: hidden;
|
|
2907
|
-
padding: var(--space-3);
|
|
2920
|
+
padding: var(--tl-space-3);
|
|
2908
2921
|
padding-top: 0px;
|
|
2909
2922
|
}
|
|
2910
2923
|
|
|
@@ -2927,7 +2940,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2927
2940
|
}
|
|
2928
2941
|
|
|
2929
2942
|
.tlui-main-toolbar--horizontal {
|
|
2930
|
-
padding-bottom: calc(var(--space-3) + var(--sab));
|
|
2943
|
+
padding-bottom: calc(var(--tl-space-3) + var(--tl-sab));
|
|
2931
2944
|
max-width: 100%;
|
|
2932
2945
|
}
|
|
2933
2946
|
|
|
@@ -2936,7 +2949,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2936
2949
|
left: 0;
|
|
2937
2950
|
top: 90px; /* height of page menu + 'back to content' button */
|
|
2938
2951
|
bottom: 140px; /* height of expanded mini-map */
|
|
2939
|
-
padding-left: calc(var(--space-3) + var(--sab));
|
|
2952
|
+
padding-left: calc(var(--tl-space-3) + var(--tl-sab));
|
|
2940
2953
|
}
|
|
2941
2954
|
|
|
2942
2955
|
[data-breakpoints-below*='6'] .tlui-main-toolbar--vertical {
|
|
@@ -2948,7 +2961,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2948
2961
|
position: relative;
|
|
2949
2962
|
width: fit-content;
|
|
2950
2963
|
display: flex;
|
|
2951
|
-
gap: var(--space-3);
|
|
2964
|
+
gap: var(--tl-space-3);
|
|
2952
2965
|
align-items: flex-start;
|
|
2953
2966
|
}
|
|
2954
2967
|
|
|
@@ -2967,7 +2980,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2967
2980
|
/* Row of controls + lock button */
|
|
2968
2981
|
.tlui-main-toolbar__extras {
|
|
2969
2982
|
position: relative;
|
|
2970
|
-
z-index: var(--layer-above);
|
|
2983
|
+
z-index: var(--tl-layer-above);
|
|
2971
2984
|
pointer-events: none;
|
|
2972
2985
|
align-self: stretch;
|
|
2973
2986
|
}
|
|
@@ -2988,23 +3001,23 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2988
3001
|
|
|
2989
3002
|
.tlui-main-toolbar__extras__controls {
|
|
2990
3003
|
position: relative;
|
|
2991
|
-
z-index: var(--layer-above);
|
|
2992
|
-
background-color: var(--color-low);
|
|
2993
|
-
border: 2px solid var(--color-background);
|
|
3004
|
+
z-index: var(--tl-layer-above);
|
|
3005
|
+
background-color: var(--tl-color-low);
|
|
3006
|
+
border: 2px solid var(--tl-color-background);
|
|
2994
3007
|
pointer-events: all;
|
|
2995
3008
|
}
|
|
2996
3009
|
|
|
2997
3010
|
.tlui-main-toolbar--horizontal .tlui-main-toolbar__extras__controls {
|
|
2998
|
-
border-top-left-radius: var(--radius-4);
|
|
2999
|
-
border-top-right-radius: var(--radius-4);
|
|
3011
|
+
border-top-left-radius: var(--tl-radius-4);
|
|
3012
|
+
border-top-right-radius: var(--tl-radius-4);
|
|
3000
3013
|
margin-left: 8px;
|
|
3001
3014
|
margin-right: 0px;
|
|
3002
3015
|
width: fit-content;
|
|
3003
3016
|
}
|
|
3004
3017
|
|
|
3005
3018
|
.tlui-main-toolbar--vertical .tlui-main-toolbar__extras__controls {
|
|
3006
|
-
border-top-right-radius: var(--radius-4);
|
|
3007
|
-
border-bottom-right-radius: var(--radius-4);
|
|
3019
|
+
border-top-right-radius: var(--tl-radius-4);
|
|
3020
|
+
border-bottom-right-radius: var(--tl-radius-4);
|
|
3008
3021
|
margin-top: 8px;
|
|
3009
3022
|
margin-left: -2px;
|
|
3010
3023
|
margin-bottom: 0px;
|
|
@@ -3012,12 +3025,12 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3012
3025
|
}
|
|
3013
3026
|
|
|
3014
3027
|
.tlui-main-toolbar__tools {
|
|
3015
|
-
border-radius: var(--radius-4);
|
|
3016
|
-
z-index: var(--layer-panels);
|
|
3028
|
+
border-radius: var(--tl-radius-4);
|
|
3029
|
+
z-index: var(--tl-layer-panels);
|
|
3017
3030
|
pointer-events: all;
|
|
3018
3031
|
position: relative;
|
|
3019
|
-
background: var(--color-panel);
|
|
3020
|
-
box-shadow: var(--shadow-2);
|
|
3032
|
+
background: var(--tl-color-panel);
|
|
3033
|
+
box-shadow: var(--tl-shadow-2);
|
|
3021
3034
|
}
|
|
3022
3035
|
|
|
3023
3036
|
.tlui-main-toolbar--horizontal .tlui-main-toolbar__mobile-style-panel {
|
|
@@ -3042,14 +3055,18 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3042
3055
|
}
|
|
3043
3056
|
|
|
3044
3057
|
.tlui-main-toolbar--horizontal *[data-state='open']::after {
|
|
3045
|
-
background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
3058
|
+
background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
3046
3059
|
opacity: 1;
|
|
3047
3060
|
}
|
|
3048
3061
|
.tlui-main-toolbar--vertical *[data-state='open']::after {
|
|
3049
|
-
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
3062
|
+
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
3050
3063
|
opacity: 1;
|
|
3051
3064
|
}
|
|
3052
3065
|
|
|
3066
|
+
.tlui-main-toolbar__overflow-content {
|
|
3067
|
+
touch-action: none;
|
|
3068
|
+
}
|
|
3069
|
+
|
|
3053
3070
|
.tlui-main-toolbar__tools [data-toolbar-visible='false'],
|
|
3054
3071
|
.tlui-main-toolbar__overflow-content [data-toolbar-visible='false'] {
|
|
3055
3072
|
display: none;
|
|
@@ -3078,11 +3095,11 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3078
3095
|
|
|
3079
3096
|
@media (hover: hover) {
|
|
3080
3097
|
.tlui-main-toolbar--horizontal *[data-state='open']:not(:hover)::after {
|
|
3081
|
-
background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
3098
|
+
background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
3082
3099
|
opacity: 1;
|
|
3083
3100
|
}
|
|
3084
3101
|
.tlui-main-toolbar--vertical *[data-state='open']:not(:hover)::after {
|
|
3085
|
-
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
3102
|
+
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
3086
3103
|
opacity: 1;
|
|
3087
3104
|
}
|
|
3088
3105
|
}
|
|
@@ -3093,44 +3110,40 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3093
3110
|
font-size: 12px;
|
|
3094
3111
|
padding: 2px 8px;
|
|
3095
3112
|
border-radius: 4px;
|
|
3096
|
-
background-color: var(--color-tooltip);
|
|
3113
|
+
background-color: var(--tl-color-tooltip);
|
|
3097
3114
|
box-shadow: none;
|
|
3098
|
-
color: var(--color-text-shadow);
|
|
3115
|
+
color: var(--tl-color-text-shadow);
|
|
3099
3116
|
max-width: 400px;
|
|
3100
3117
|
width: fit-content;
|
|
3101
3118
|
text-align: center;
|
|
3102
|
-
pointer-events: none;
|
|
3103
3119
|
will-change: transform, opacity;
|
|
3104
3120
|
z-index: 2;
|
|
3105
3121
|
}
|
|
3106
3122
|
|
|
3107
3123
|
.tlui-tooltip__arrow {
|
|
3108
|
-
fill: var(--color-tooltip);
|
|
3124
|
+
fill: var(--tl-color-tooltip);
|
|
3109
3125
|
will-change: opacity;
|
|
3110
3126
|
}
|
|
3111
3127
|
|
|
3112
3128
|
[data-radix-popper-content-wrapper]:has(.tlui-tooltip) {
|
|
3113
|
-
z-index: var(--layer-toasts) !important;
|
|
3114
|
-
|
|
3115
|
-
|
|
3116
|
-
[data-radix-popper-content-wrapper]:has(.tlui-tooltip[data-should-animate='true']) {
|
|
3117
|
-
transition: all 0.1s ease-out;
|
|
3129
|
+
z-index: var(--tl-layer-toasts) !important;
|
|
3130
|
+
pointer-events: none;
|
|
3118
3131
|
}
|
|
3119
3132
|
|
|
3120
3133
|
/* ------------------- Debug panel ------------------ */
|
|
3121
3134
|
|
|
3122
3135
|
.tlui-debug-panel {
|
|
3123
|
-
background-color: var(--color-low);
|
|
3136
|
+
background-color: var(--tl-color-low);
|
|
3124
3137
|
width: 100%;
|
|
3125
3138
|
display: grid;
|
|
3126
3139
|
align-items: center;
|
|
3127
3140
|
grid-template-columns: 1fr auto auto auto;
|
|
3128
3141
|
justify-content: space-between;
|
|
3129
|
-
padding-left: var(--space-4);
|
|
3130
|
-
border-top: 1px solid var(--color-background);
|
|
3142
|
+
padding-left: var(--tl-space-4);
|
|
3143
|
+
border-top: 1px solid var(--tl-color-background);
|
|
3131
3144
|
font-size: 12px;
|
|
3132
|
-
color: var(--color-text-1);
|
|
3133
|
-
z-index: var(--layer-panels);
|
|
3145
|
+
color: var(--tl-color-text-1);
|
|
3146
|
+
z-index: var(--tl-layer-panels);
|
|
3134
3147
|
pointer-events: all;
|
|
3135
3148
|
}
|
|
3136
3149
|
|
|
@@ -3146,7 +3159,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3146
3159
|
|
|
3147
3160
|
.tlui-debug-panel__fps__slow {
|
|
3148
3161
|
font-weight: bold;
|
|
3149
|
-
color: var(--color-danger);
|
|
3162
|
+
color: var(--tl-color-danger);
|
|
3150
3163
|
}
|
|
3151
3164
|
|
|
3152
3165
|
.tlui-a11y-audit {
|
|
@@ -3156,7 +3169,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3156
3169
|
.tlui-a11y-audit th,
|
|
3157
3170
|
.tlui-a11y-audit td {
|
|
3158
3171
|
padding: 8px;
|
|
3159
|
-
border: 1px solid var(--color-low-border);
|
|
3172
|
+
border: 1px solid var(--tl-color-low-border);
|
|
3160
3173
|
}
|
|
3161
3174
|
|
|
3162
3175
|
/* --------------------- Toasts --------------------- */
|
|
@@ -3169,10 +3182,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3169
3182
|
align-items: flex-end;
|
|
3170
3183
|
justify-content: flex-end;
|
|
3171
3184
|
flex-direction: column;
|
|
3172
|
-
gap: var(--space-3);
|
|
3185
|
+
gap: var(--tl-space-3);
|
|
3173
3186
|
pointer-events: none;
|
|
3174
|
-
padding: 0px var(--space-3) 64px 0px;
|
|
3175
|
-
z-index: var(--layer-toasts);
|
|
3187
|
+
padding: 0px var(--tl-space-3) 64px 0px;
|
|
3188
|
+
z-index: var(--tl-layer-toasts);
|
|
3176
3189
|
}
|
|
3177
3190
|
|
|
3178
3191
|
.tlui-toast__viewport > * {
|
|
@@ -3181,34 +3194,34 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3181
3194
|
|
|
3182
3195
|
.tlui-toast__icon {
|
|
3183
3196
|
padding-top: 11px;
|
|
3184
|
-
padding-left: var(--space-4);
|
|
3185
|
-
color: var(--color-text-1);
|
|
3197
|
+
padding-left: var(--tl-space-4);
|
|
3198
|
+
color: var(--tl-color-text-1);
|
|
3186
3199
|
}
|
|
3187
3200
|
|
|
3188
3201
|
.tlui-toast__container {
|
|
3189
3202
|
min-width: 200px;
|
|
3190
3203
|
display: flex;
|
|
3191
3204
|
flex-direction: row;
|
|
3192
|
-
background-color: var(--color-panel);
|
|
3193
|
-
box-shadow: var(--shadow-2);
|
|
3194
|
-
border-radius: var(--radius-3);
|
|
3205
|
+
background-color: var(--tl-color-panel);
|
|
3206
|
+
box-shadow: var(--tl-shadow-2);
|
|
3207
|
+
border-radius: var(--tl-radius-3);
|
|
3195
3208
|
font-size: 12px;
|
|
3196
3209
|
}
|
|
3197
3210
|
|
|
3198
3211
|
.tlui-toast__container[data-severity='success'] .tlui-icon {
|
|
3199
|
-
color: var(--color-success);
|
|
3212
|
+
color: var(--tl-color-success);
|
|
3200
3213
|
}
|
|
3201
3214
|
|
|
3202
3215
|
.tlui-toast__container[data-severity='info'] .tlui-icon {
|
|
3203
|
-
color: var(--color-info);
|
|
3216
|
+
color: var(--tl-color-info);
|
|
3204
3217
|
}
|
|
3205
3218
|
|
|
3206
3219
|
.tlui-toast__container[data-severity='warning'] .tlui-icon {
|
|
3207
|
-
color: var(--color-warning);
|
|
3220
|
+
color: var(--tl-color-warning);
|
|
3208
3221
|
}
|
|
3209
3222
|
|
|
3210
3223
|
.tlui-toast__container[data-severity='error'] .tlui-icon {
|
|
3211
|
-
color: var(--color-danger);
|
|
3224
|
+
color: var(--tl-color-danger);
|
|
3212
3225
|
}
|
|
3213
3226
|
|
|
3214
3227
|
.tlui-toast__main {
|
|
@@ -3217,27 +3230,27 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3217
3230
|
}
|
|
3218
3231
|
|
|
3219
3232
|
.tlui-toast__content {
|
|
3220
|
-
padding: var(--space-4);
|
|
3233
|
+
padding: var(--tl-space-4);
|
|
3221
3234
|
display: flex;
|
|
3222
3235
|
line-height: 1.4;
|
|
3223
3236
|
flex-direction: column;
|
|
3224
|
-
gap: var(--space-3);
|
|
3237
|
+
gap: var(--tl-space-3);
|
|
3225
3238
|
}
|
|
3226
3239
|
|
|
3227
3240
|
.tlui-toast__main[data-actions='true'] .tlui-toast__content {
|
|
3228
|
-
padding-bottom: var(--space-2);
|
|
3241
|
+
padding-bottom: var(--tl-space-2);
|
|
3229
3242
|
}
|
|
3230
3243
|
|
|
3231
3244
|
.tlui-toast__title {
|
|
3232
3245
|
font-weight: bold;
|
|
3233
|
-
color: var(--color-text-1);
|
|
3246
|
+
color: var(--tl-color-text-1);
|
|
3234
3247
|
/* this makes the default toast look better */
|
|
3235
3248
|
line-height: 16px;
|
|
3236
3249
|
}
|
|
3237
3250
|
|
|
3238
3251
|
.tlui-toast__description {
|
|
3239
|
-
color: var(--color-text-1);
|
|
3240
|
-
padding: var(--space-3);
|
|
3252
|
+
color: var(--tl-color-text-1);
|
|
3253
|
+
padding: var(--tl-space-3);
|
|
3241
3254
|
margin: 0px;
|
|
3242
3255
|
padding: 0px;
|
|
3243
3256
|
}
|
|
@@ -3289,14 +3302,14 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3289
3302
|
left: 0px;
|
|
3290
3303
|
width: 100%;
|
|
3291
3304
|
height: 100%;
|
|
3292
|
-
z-index: var(--layer-canvas-overlays);
|
|
3293
|
-
background-color: var(--color-overlay);
|
|
3305
|
+
z-index: var(--tl-layer-canvas-overlays);
|
|
3306
|
+
background-color: var(--tl-color-overlay);
|
|
3294
3307
|
pointer-events: all;
|
|
3295
3308
|
animation: tl-fade-in 0.12s ease-out;
|
|
3296
3309
|
display: grid;
|
|
3297
3310
|
place-items: center;
|
|
3298
3311
|
overflow-y: auto;
|
|
3299
|
-
padding: 0px var(--space-3);
|
|
3312
|
+
padding: 0px var(--tl-space-3);
|
|
3300
3313
|
}
|
|
3301
3314
|
|
|
3302
3315
|
.tlui-dialog__content {
|
|
@@ -3304,9 +3317,9 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3304
3317
|
flex-direction: column;
|
|
3305
3318
|
position: relative;
|
|
3306
3319
|
cursor: default;
|
|
3307
|
-
background-color: var(--color-panel);
|
|
3308
|
-
box-shadow: var(--shadow-3);
|
|
3309
|
-
border-radius: var(--radius-3);
|
|
3320
|
+
background-color: var(--tl-color-panel);
|
|
3321
|
+
box-shadow: var(--tl-shadow-3);
|
|
3322
|
+
border-radius: var(--tl-radius-3);
|
|
3310
3323
|
font-size: 12px;
|
|
3311
3324
|
overflow: hidden;
|
|
3312
3325
|
min-width: 300px;
|
|
@@ -3319,9 +3332,9 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3319
3332
|
display: flex;
|
|
3320
3333
|
align-items: center;
|
|
3321
3334
|
flex: 0;
|
|
3322
|
-
z-index: var(--layer-header-footer);
|
|
3323
|
-
padding-left: var(--space-4);
|
|
3324
|
-
color: var(--color-text);
|
|
3335
|
+
z-index: var(--tl-layer-header-footer);
|
|
3336
|
+
padding-left: var(--tl-space-4);
|
|
3337
|
+
color: var(--tl-color-text);
|
|
3325
3338
|
height: 40px;
|
|
3326
3339
|
}
|
|
3327
3340
|
|
|
@@ -3330,7 +3343,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3330
3343
|
font-weight: inherit;
|
|
3331
3344
|
font-size: 12px;
|
|
3332
3345
|
margin: 0px;
|
|
3333
|
-
color: var(--color-text-1);
|
|
3346
|
+
color: var(--tl-color-text-1);
|
|
3334
3347
|
}
|
|
3335
3348
|
|
|
3336
3349
|
.tlui-dialog__header__close {
|
|
@@ -3338,16 +3351,16 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3338
3351
|
}
|
|
3339
3352
|
|
|
3340
3353
|
.tlui-dialog__body {
|
|
3341
|
-
padding: var(--space-4) var(--space-4);
|
|
3354
|
+
padding: var(--tl-space-4) var(--tl-space-4);
|
|
3342
3355
|
flex: 0 1;
|
|
3343
3356
|
overflow-y: auto;
|
|
3344
3357
|
overflow-x: hidden;
|
|
3345
|
-
color: var(--color-text-1);
|
|
3358
|
+
color: var(--tl-color-text-1);
|
|
3346
3359
|
user-select: all;
|
|
3347
3360
|
-webkit-user-select: text;
|
|
3348
3361
|
}
|
|
3349
3362
|
.tlui-dialog__body a {
|
|
3350
|
-
color: var(--color-selected);
|
|
3363
|
+
color: var(--tl-color-selected);
|
|
3351
3364
|
}
|
|
3352
3365
|
|
|
3353
3366
|
.tlui-dialog__body ul,
|
|
@@ -3355,13 +3368,13 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3355
3368
|
padding-left: 16px;
|
|
3356
3369
|
display: flex;
|
|
3357
3370
|
flex-direction: column;
|
|
3358
|
-
gap: var(--space-2);
|
|
3371
|
+
gap: var(--tl-space-2);
|
|
3359
3372
|
}
|
|
3360
3373
|
|
|
3361
3374
|
.tlui-dialog__footer {
|
|
3362
3375
|
position: relative;
|
|
3363
3376
|
min-height: 12px;
|
|
3364
|
-
z-index: var(--layer-header-footer);
|
|
3377
|
+
z-index: var(--tl-layer-header-footer);
|
|
3365
3378
|
}
|
|
3366
3379
|
|
|
3367
3380
|
.tlui-dialog__footer__actions {
|
|
@@ -3381,15 +3394,15 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3381
3394
|
.tlui-edit-link-dialog {
|
|
3382
3395
|
display: flex;
|
|
3383
3396
|
flex-direction: column;
|
|
3384
|
-
gap: var(--space-4);
|
|
3385
|
-
color: var(--color-text);
|
|
3397
|
+
gap: var(--tl-space-4);
|
|
3398
|
+
color: var(--tl-color-text);
|
|
3386
3399
|
}
|
|
3387
3400
|
|
|
3388
3401
|
.tlui-edit-link-dialog__input {
|
|
3389
|
-
background-color: var(--color-muted-2);
|
|
3402
|
+
background-color: var(--tl-color-muted-2);
|
|
3390
3403
|
flex-grow: 2;
|
|
3391
|
-
border-radius: var(--radius-2);
|
|
3392
|
-
padding: 0px var(--space-4);
|
|
3404
|
+
border-radius: var(--tl-radius-2);
|
|
3405
|
+
padding: 0px var(--tl-space-4);
|
|
3393
3406
|
}
|
|
3394
3407
|
|
|
3395
3408
|
/* Embed Dialog */
|
|
@@ -3397,15 +3410,15 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3397
3410
|
.tlui-embed__spacer {
|
|
3398
3411
|
flex-grow: 2;
|
|
3399
3412
|
min-height: 0px;
|
|
3400
|
-
margin-left: calc(-1 * var(--space-4));
|
|
3401
|
-
margin-top: calc(-1 * var(--space-4));
|
|
3413
|
+
margin-left: calc(-1 * var(--tl-space-4));
|
|
3414
|
+
margin-top: calc(-1 * var(--tl-space-4));
|
|
3402
3415
|
pointer-events: none;
|
|
3403
3416
|
}
|
|
3404
3417
|
|
|
3405
3418
|
.tlui-embed-dialog__list {
|
|
3406
3419
|
display: flex;
|
|
3407
3420
|
flex-direction: column;
|
|
3408
|
-
padding: 0px var(--space-3) var(--space-4) var(--space-3);
|
|
3421
|
+
padding: 0px var(--tl-space-3) var(--tl-space-4) var(--tl-space-3);
|
|
3409
3422
|
}
|
|
3410
3423
|
|
|
3411
3424
|
.tlui-embed-dialog__item__image {
|
|
@@ -3417,49 +3430,49 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3417
3430
|
background-size: contain;
|
|
3418
3431
|
background-repeat: no-repeat;
|
|
3419
3432
|
background-position: center center;
|
|
3420
|
-
background-color: var(--color-selected-contrast);
|
|
3421
|
-
border-radius: var(--radius-1);
|
|
3433
|
+
background-color: var(--tl-color-selected-contrast);
|
|
3434
|
+
border-radius: var(--tl-radius-1);
|
|
3422
3435
|
}
|
|
3423
3436
|
|
|
3424
3437
|
.tlui-embed-dialog__enter {
|
|
3425
3438
|
display: flex;
|
|
3426
3439
|
flex-direction: column;
|
|
3427
|
-
gap: var(--space-4);
|
|
3428
|
-
color: var(--color-text-1);
|
|
3440
|
+
gap: var(--tl-space-4);
|
|
3441
|
+
color: var(--tl-color-text-1);
|
|
3429
3442
|
}
|
|
3430
3443
|
|
|
3431
3444
|
.tlui-embed-dialog__input {
|
|
3432
|
-
background-color: var(--color-muted-2);
|
|
3445
|
+
background-color: var(--tl-color-muted-2);
|
|
3433
3446
|
flex-grow: 2;
|
|
3434
|
-
border-radius: var(--radius-2);
|
|
3435
|
-
padding: 0px var(--space-4);
|
|
3447
|
+
border-radius: var(--tl-radius-2);
|
|
3448
|
+
padding: 0px var(--tl-space-4);
|
|
3436
3449
|
}
|
|
3437
3450
|
|
|
3438
3451
|
.tlui-embed-dialog__warning {
|
|
3439
|
-
color: var(--color-danger);
|
|
3452
|
+
color: var(--tl-color-danger);
|
|
3440
3453
|
text-shadow: none;
|
|
3441
3454
|
}
|
|
3442
3455
|
|
|
3443
3456
|
.tlui-embed-dialog__instruction__link {
|
|
3444
3457
|
display: flex;
|
|
3445
|
-
gap: var(--space-1);
|
|
3446
|
-
margin-top: var(--space-4);
|
|
3458
|
+
gap: var(--tl-space-1);
|
|
3459
|
+
margin-top: var(--tl-space-4);
|
|
3447
3460
|
}
|
|
3448
3461
|
|
|
3449
3462
|
.tlui-embed-dialog__enter a {
|
|
3450
|
-
color: var(--color-text-1);
|
|
3463
|
+
color: var(--tl-color-text-1);
|
|
3451
3464
|
}
|
|
3452
3465
|
|
|
3453
3466
|
/* --------------- Keyboard shortcuts --------------- */
|
|
3454
3467
|
|
|
3455
3468
|
.tlui-shortcuts-dialog__header {
|
|
3456
|
-
border-bottom: 1px solid var(--color-divider);
|
|
3469
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
3457
3470
|
}
|
|
3458
3471
|
|
|
3459
3472
|
.tlui-shortcuts-dialog__body {
|
|
3460
3473
|
position: relative;
|
|
3461
3474
|
columns: 3;
|
|
3462
|
-
column-gap: var(--space-9);
|
|
3475
|
+
column-gap: var(--tl-space-9);
|
|
3463
3476
|
pointer-events: all;
|
|
3464
3477
|
touch-action: auto;
|
|
3465
3478
|
|
|
@@ -3477,14 +3490,14 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3477
3490
|
|
|
3478
3491
|
.tlui-shortcuts-dialog__group {
|
|
3479
3492
|
break-inside: avoid-column;
|
|
3480
|
-
padding-bottom: var(--space-6);
|
|
3493
|
+
padding-bottom: var(--tl-space-6);
|
|
3481
3494
|
}
|
|
3482
3495
|
|
|
3483
3496
|
.tlui-shortcuts-dialog__group__title {
|
|
3484
3497
|
font-size: inherit;
|
|
3485
3498
|
font-weight: inherit;
|
|
3486
3499
|
margin: 0px;
|
|
3487
|
-
color: var(--color-text-3);
|
|
3500
|
+
color: var(--tl-color-text-3);
|
|
3488
3501
|
height: 32px;
|
|
3489
3502
|
display: flex;
|
|
3490
3503
|
align-items: center;
|
|
@@ -3493,12 +3506,12 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3493
3506
|
.tlui-shortcuts-dialog__group__content {
|
|
3494
3507
|
display: flex;
|
|
3495
3508
|
flex-direction: column;
|
|
3496
|
-
color: var(--color-text-1);
|
|
3509
|
+
color: var(--tl-color-text-1);
|
|
3497
3510
|
}
|
|
3498
3511
|
|
|
3499
3512
|
.tlui-shortcuts-dialog__key-pair {
|
|
3500
3513
|
display: flex;
|
|
3501
|
-
gap: var(--space-4);
|
|
3514
|
+
gap: var(--tl-space-4);
|
|
3502
3515
|
align-items: center;
|
|
3503
3516
|
justify-content: space-between;
|
|
3504
3517
|
height: 32px;
|
|
@@ -3525,12 +3538,12 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3525
3538
|
height: 24px;
|
|
3526
3539
|
background: linear-gradient(
|
|
3527
3540
|
to bottom,
|
|
3528
|
-
var(--color-panel-transparent) 0%,
|
|
3529
|
-
var(--color-panel) 90%,
|
|
3530
|
-
var(--color-panel) 100%
|
|
3541
|
+
var(--tl-color-panel-transparent) 0%,
|
|
3542
|
+
var(--tl-color-panel) 90%,
|
|
3543
|
+
var(--tl-color-panel) 100%
|
|
3531
3544
|
);
|
|
3532
|
-
border-bottom-left-radius: var(--radius-3);
|
|
3533
|
-
border-bottom-right-radius: var(--radius-3);
|
|
3545
|
+
border-bottom-left-radius: var(--tl-radius-3);
|
|
3546
|
+
border-bottom-right-radius: var(--tl-radius-3);
|
|
3534
3547
|
pointer-events: none;
|
|
3535
3548
|
}
|
|
3536
3549
|
|
|
@@ -3545,10 +3558,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3545
3558
|
.tlui-help-menu {
|
|
3546
3559
|
pointer-events: all;
|
|
3547
3560
|
position: absolute;
|
|
3548
|
-
bottom: var(--space-2);
|
|
3549
|
-
right: var(--space-2);
|
|
3550
|
-
z-index: var(--layer-panels);
|
|
3551
|
-
border: 2px solid var(--color-background);
|
|
3561
|
+
bottom: var(--tl-space-2);
|
|
3562
|
+
right: var(--tl-space-2);
|
|
3563
|
+
z-index: var(--tl-layer-panels);
|
|
3564
|
+
border: 2px solid var(--tl-color-background);
|
|
3552
3565
|
border-radius: 100%;
|
|
3553
3566
|
}
|
|
3554
3567
|
|
|
@@ -3559,7 +3572,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3559
3572
|
display: flex;
|
|
3560
3573
|
flex-direction: row;
|
|
3561
3574
|
justify-content: flex-end;
|
|
3562
|
-
z-index: var(--layer-panels);
|
|
3575
|
+
z-index: var(--tl-layer-panels);
|
|
3563
3576
|
align-items: center;
|
|
3564
3577
|
padding-top: 2px;
|
|
3565
3578
|
padding-right: 4px;
|
|
@@ -3575,7 +3588,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3575
3588
|
border: none;
|
|
3576
3589
|
cursor: pointer;
|
|
3577
3590
|
pointer-events: all;
|
|
3578
|
-
border-radius: var(--radius-1);
|
|
3591
|
+
border-radius: var(--tl-radius-1);
|
|
3579
3592
|
padding-right: 1px;
|
|
3580
3593
|
height: 100%;
|
|
3581
3594
|
}
|
|
@@ -3588,8 +3601,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3588
3601
|
.tlui-people-menu__avatar {
|
|
3589
3602
|
height: 24px;
|
|
3590
3603
|
width: 24px;
|
|
3591
|
-
border: 2px solid var(--color-background);
|
|
3592
|
-
background-color: var(--color-low);
|
|
3604
|
+
border: 2px solid var(--tl-color-background);
|
|
3605
|
+
background-color: var(--tl-color-low);
|
|
3593
3606
|
border-radius: 100%;
|
|
3594
3607
|
display: flex;
|
|
3595
3608
|
align-items: center;
|
|
@@ -3598,7 +3611,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3598
3611
|
font-size: 10px;
|
|
3599
3612
|
font-weight: bold;
|
|
3600
3613
|
text-align: center;
|
|
3601
|
-
color: var(--color-selected-contrast);
|
|
3614
|
+
color: var(--tl-color-selected-contrast);
|
|
3602
3615
|
z-index: 2;
|
|
3603
3616
|
}
|
|
3604
3617
|
|
|
@@ -3612,7 +3625,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3612
3625
|
|
|
3613
3626
|
@media (hover: hover) {
|
|
3614
3627
|
.tlui-people-menu__avatars-button:hover .tlui-people-menu__avatar {
|
|
3615
|
-
border-color: var(--color-low);
|
|
3628
|
+
border-color: var(--tl-color-low);
|
|
3616
3629
|
}
|
|
3617
3630
|
}
|
|
3618
3631
|
|
|
@@ -3620,12 +3633,12 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3620
3633
|
min-width: 0px;
|
|
3621
3634
|
font-size: 11px;
|
|
3622
3635
|
font-weight: 600;
|
|
3623
|
-
color: var(--color-text-1);
|
|
3636
|
+
color: var(--tl-color-text-1);
|
|
3624
3637
|
font-family: inherit;
|
|
3625
3638
|
padding: 0px 4px;
|
|
3626
3639
|
}
|
|
3627
3640
|
.tlui-people-menu__more::after {
|
|
3628
|
-
border-radius: var(--radius-2);
|
|
3641
|
+
border-radius: var(--tl-radius-2);
|
|
3629
3642
|
inset: 0px;
|
|
3630
3643
|
}
|
|
3631
3644
|
|
|
@@ -3654,7 +3667,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3654
3667
|
}
|
|
3655
3668
|
|
|
3656
3669
|
.tlui-people-menu__section:not(:last-child) {
|
|
3657
|
-
border-bottom: 1px solid var(--color-divider);
|
|
3670
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
3658
3671
|
}
|
|
3659
3672
|
|
|
3660
3673
|
.tlui-people-menu__user {
|
|
@@ -3673,7 +3686,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3673
3686
|
text-overflow: ellipsis;
|
|
3674
3687
|
white-space: nowrap;
|
|
3675
3688
|
font-size: 12px;
|
|
3676
|
-
color: var(--color-text-1);
|
|
3689
|
+
color: var(--tl-color-text-1);
|
|
3677
3690
|
max-width: 100%;
|
|
3678
3691
|
flex-grow: 1;
|
|
3679
3692
|
flex-shrink: 100;
|
|
@@ -3685,7 +3698,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3685
3698
|
text-overflow: ellipsis;
|
|
3686
3699
|
white-space: nowrap;
|
|
3687
3700
|
font-size: 12px;
|
|
3688
|
-
color: var(--color-text-3);
|
|
3701
|
+
color: var(--tl-color-text-3);
|
|
3689
3702
|
flex-grow: 100;
|
|
3690
3703
|
flex-shrink: 0;
|
|
3691
3704
|
margin-left: 4px;
|
|
@@ -3776,7 +3789,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3776
3789
|
inset: 0px;
|
|
3777
3790
|
border-width: 2px;
|
|
3778
3791
|
border-style: solid;
|
|
3779
|
-
z-index: var(--layer-following-indicator);
|
|
3792
|
+
z-index: var(--tl-layer-following-indicator);
|
|
3780
3793
|
pointer-events: none;
|
|
3781
3794
|
}
|
|
3782
3795
|
|
|
@@ -3795,7 +3808,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3795
3808
|
}
|
|
3796
3809
|
|
|
3797
3810
|
.tlui-contextual-toolbar [data-isactive='true']::after {
|
|
3798
|
-
background-color: var(--color-muted-2);
|
|
3811
|
+
background-color: var(--tl-color-muted-2);
|
|
3799
3812
|
opacity: 1;
|
|
3800
3813
|
}
|
|
3801
3814
|
|
|
@@ -3811,7 +3824,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3811
3824
|
|
|
3812
3825
|
.tlui-contextual-toolbar[data-visible='true'] {
|
|
3813
3826
|
opacity: 1;
|
|
3814
|
-
z-index: var(--layer-menus);
|
|
3827
|
+
z-index: var(--tl-layer-menus);
|
|
3815
3828
|
}
|
|
3816
3829
|
|
|
3817
3830
|
.tlui-contextual-toolbar[data-interactive='true'],
|
|
@@ -3870,7 +3883,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3870
3883
|
|
|
3871
3884
|
@keyframes tlui-slide-in {
|
|
3872
3885
|
from {
|
|
3873
|
-
transform: translateX(calc(100% + var(--space-3)));
|
|
3886
|
+
transform: translateX(calc(100% + var(--tl-space-3)));
|
|
3874
3887
|
}
|
|
3875
3888
|
to {
|
|
3876
3889
|
transform: translateX(0px);
|
|
@@ -3882,7 +3895,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3882
3895
|
transform: translateX(var(--radix-toast-swipe-end-x));
|
|
3883
3896
|
}
|
|
3884
3897
|
to {
|
|
3885
|
-
transform: translateX(calc(100% + var(--space-3)));
|
|
3898
|
+
transform: translateX(calc(100% + var(--tl-space-3)));
|
|
3886
3899
|
}
|
|
3887
3900
|
}
|
|
3888
3901
|
|