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