tldraw 3.16.0-canary.ffdf566dd0a8 → 3.16.0-internal.51e99e128bd4
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 +173 -5
- package/dist-cjs/index.js +12 -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/tools/SelectTool/childStates/Translating.js.map +2 -2
- package/dist-cjs/lib/ui/TldrawUi.js +14 -0
- package/dist-cjs/lib/ui/TldrawUi.js.map +3 -3
- package/dist-cjs/lib/ui/assetUrls.js +13 -10
- package/dist-cjs/lib/ui/assetUrls.js.map +2 -2
- package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenu.js +12 -3
- package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenu.js.map +2 -2
- package/dist-cjs/lib/ui/components/DefaultMenuPanel.js +3 -2
- package/dist-cjs/lib/ui/components/DefaultMenuPanel.js.map +2 -2
- package/dist-cjs/lib/ui/components/Minimap/MinimapManager.js +4 -4
- package/dist-cjs/lib/ui/components/Minimap/MinimapManager.js.map +2 -2
- package/dist-cjs/lib/ui/components/MobileStylePanel.js +5 -3
- package/dist-cjs/lib/ui/components/MobileStylePanel.js.map +2 -2
- package/dist-cjs/lib/ui/components/NavigationPanel/DefaultNavigationPanel.js +1 -1
- package/dist-cjs/lib/ui/components/NavigationPanel/DefaultNavigationPanel.js.map +2 -2
- package/dist-cjs/lib/ui/components/PageMenu/DefaultPageMenu.js +2 -1
- package/dist-cjs/lib/ui/components/PageMenu/DefaultPageMenu.js.map +2 -2
- package/dist-cjs/lib/ui/components/SharePanel/PeopleMenuItem.js +3 -2
- package/dist-cjs/lib/ui/components/SharePanel/PeopleMenuItem.js.map +2 -2
- package/dist-cjs/lib/ui/components/SharePanel/UserPresenceColorPicker.js +2 -2
- package/dist-cjs/lib/ui/components/SharePanel/UserPresenceColorPicker.js.map +2 -2
- package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js +14 -14
- package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js.map +2 -2
- package/dist-cjs/lib/ui/components/StylePanel/DoubleDropdownPicker.js +3 -3
- package/dist-cjs/lib/ui/components/StylePanel/DoubleDropdownPicker.js.map +2 -2
- package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js +26 -25
- package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js.map +3 -3
- 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 -21
- package/dist-cjs/lib/ui/components/Toolbar/DefaultToolbar.js.map +3 -3
- package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js +189 -80
- package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js.map +3 -3
- package/dist-cjs/lib/ui/components/Toolbar/ToggleToolLockedButton.js +2 -2
- package/dist-cjs/lib/ui/components/Toolbar/ToggleToolLockedButton.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js +5 -16
- package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js.map +3 -3
- package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js +1 -1
- package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiPopover.js +3 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiPopover.js.map +3 -3
- package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js +19 -4
- package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js +153 -152
- package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/layout.js +76 -0
- package/dist-cjs/lib/ui/components/primitives/layout.js.map +7 -0
- 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 +154 -20
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js.map +2 -2
- package/dist-cjs/lib/ui/context/events.js.map +2 -2
- package/dist-cjs/lib/ui/hooks/useTools.js +94 -9
- package/dist-cjs/lib/ui/hooks/useTools.js.map +2 -2
- package/dist-cjs/lib/ui/version.js +3 -3
- package/dist-cjs/lib/ui/version.js.map +1 -1
- package/dist-esm/index.d.mts +173 -5
- package/dist-esm/index.mjs +19 -1
- 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/tools/SelectTool/childStates/Translating.mjs.map +2 -2
- package/dist-esm/lib/ui/TldrawUi.mjs +16 -2
- package/dist-esm/lib/ui/TldrawUi.mjs.map +3 -3
- package/dist-esm/lib/ui/assetUrls.mjs +13 -10
- package/dist-esm/lib/ui/assetUrls.mjs.map +2 -2
- package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenu.mjs +12 -3
- package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenu.mjs.map +2 -2
- package/dist-esm/lib/ui/components/DefaultMenuPanel.mjs +3 -2
- package/dist-esm/lib/ui/components/DefaultMenuPanel.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Minimap/MinimapManager.mjs +4 -4
- package/dist-esm/lib/ui/components/Minimap/MinimapManager.mjs.map +2 -2
- package/dist-esm/lib/ui/components/MobileStylePanel.mjs +6 -3
- package/dist-esm/lib/ui/components/MobileStylePanel.mjs.map +2 -2
- package/dist-esm/lib/ui/components/NavigationPanel/DefaultNavigationPanel.mjs +1 -1
- package/dist-esm/lib/ui/components/NavigationPanel/DefaultNavigationPanel.mjs.map +2 -2
- package/dist-esm/lib/ui/components/PageMenu/DefaultPageMenu.mjs +2 -1
- package/dist-esm/lib/ui/components/PageMenu/DefaultPageMenu.mjs.map +2 -2
- package/dist-esm/lib/ui/components/SharePanel/PeopleMenuItem.mjs +3 -2
- package/dist-esm/lib/ui/components/SharePanel/PeopleMenuItem.mjs.map +2 -2
- package/dist-esm/lib/ui/components/SharePanel/UserPresenceColorPicker.mjs +2 -2
- package/dist-esm/lib/ui/components/SharePanel/UserPresenceColorPicker.mjs.map +2 -2
- package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs +14 -14
- package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs.map +2 -2
- package/dist-esm/lib/ui/components/StylePanel/DoubleDropdownPicker.mjs +3 -3
- package/dist-esm/lib/ui/components/StylePanel/DoubleDropdownPicker.mjs.map +2 -2
- package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs +26 -25
- 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 -21
- package/dist-esm/lib/ui/components/Toolbar/DefaultToolbar.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs +192 -81
- package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs.map +3 -3
- package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs +2 -2
- package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs +6 -6
- package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs +1 -1
- package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiPopover.mjs +3 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiPopover.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs +19 -4
- package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs +162 -154
- package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/layout.mjs +46 -0
- package/dist-esm/lib/ui/components/primitives/layout.mjs.map +7 -0
- 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 +162 -22
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs.map +2 -2
- package/dist-esm/lib/ui/context/events.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/useTools.mjs +102 -10
- package/dist-esm/lib/ui/hooks/useTools.mjs.map +2 -2
- package/dist-esm/lib/ui/version.mjs +3 -3
- package/dist-esm/lib/ui/version.mjs.map +1 -1
- package/package.json +11 -34
- package/src/index.ts +15 -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/tools/SelectTool/childStates/Translating.ts +0 -1
- package/src/lib/ui/TldrawUi.tsx +17 -2
- package/src/lib/ui/assetUrls.ts +13 -10
- package/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx +15 -3
- package/src/lib/ui/components/DefaultMenuPanel.tsx +4 -3
- package/src/lib/ui/components/Minimap/MinimapManager.ts +4 -4
- package/src/lib/ui/components/MobileStylePanel.tsx +9 -6
- package/src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx +1 -1
- package/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx +3 -2
- package/src/lib/ui/components/SharePanel/PeopleMenuItem.tsx +4 -3
- package/src/lib/ui/components/SharePanel/UserPresenceColorPicker.tsx +3 -3
- package/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx +39 -43
- package/src/lib/ui/components/StylePanel/DoubleDropdownPicker.tsx +3 -3
- package/src/lib/ui/components/StylePanel/DropdownPicker.tsx +7 -6
- package/src/lib/ui/components/Toolbar/DefaultImageToolbarContent.tsx +1 -1
- package/src/lib/ui/components/Toolbar/DefaultToolbar.tsx +55 -23
- package/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx +212 -61
- package/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx +2 -2
- package/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx +40 -37
- package/src/lib/ui/components/primitives/TldrawUiContextualToolbar.tsx +1 -1
- package/src/lib/ui/components/primitives/TldrawUiPopover.tsx +4 -2
- package/src/lib/ui/components/primitives/TldrawUiToolbar.tsx +32 -9
- package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx +186 -172
- package/src/lib/ui/components/primitives/layout.tsx +107 -0
- 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 +221 -19
- package/src/lib/ui/context/events.tsx +1 -0
- package/src/lib/ui/hooks/useTools.tsx +140 -10
- package/src/lib/ui/version.ts +3 -3
- package/src/lib/ui.css +363 -305
- 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 +656 -595
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,31 +1925,25 @@ 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
|
}
|
|
1943
1946
|
|
|
1944
|
-
/* Panel button */
|
|
1945
|
-
|
|
1946
|
-
.tlui-button__panel {
|
|
1947
|
-
position: relative;
|
|
1948
|
-
}
|
|
1949
|
-
|
|
1950
1947
|
/* Menu button */
|
|
1951
1948
|
|
|
1952
1949
|
.tlui-button__menu {
|
|
@@ -1959,7 +1956,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1959
1956
|
|
|
1960
1957
|
.tlui-button__menu::after {
|
|
1961
1958
|
inset: 4px;
|
|
1962
|
-
border-radius: var(--radius-2);
|
|
1959
|
+
border-radius: var(--tl-radius-2);
|
|
1963
1960
|
}
|
|
1964
1961
|
|
|
1965
1962
|
.tlui-button__menu > .tlui-icon + .tlui-button__label {
|
|
@@ -1987,18 +1984,26 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1987
1984
|
|
|
1988
1985
|
/* Tool lock button */
|
|
1989
1986
|
|
|
1990
|
-
.tlui-toolbar__lock-button {
|
|
1987
|
+
.tlui-main-toolbar__lock-button {
|
|
1991
1988
|
position: absolute;
|
|
1992
|
-
top: 4px;
|
|
1993
|
-
right: 0px;
|
|
1994
1989
|
pointer-events: all;
|
|
1995
1990
|
height: 40px;
|
|
1996
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;
|
|
1997
1998
|
min-width: 0px;
|
|
1998
|
-
border-radius: var(--radius-2);
|
|
1999
1999
|
}
|
|
2000
2000
|
|
|
2001
|
-
.tlui-toolbar__lock-button
|
|
2001
|
+
.tlui-main-toolbar--vertical .tlui-main-toolbar__lock-button {
|
|
2002
|
+
bottom: 0px;
|
|
2003
|
+
min-height: 0px;
|
|
2004
|
+
}
|
|
2005
|
+
|
|
2006
|
+
.tlui-main-toolbar__lock-button::after {
|
|
2002
2007
|
top: 4px;
|
|
2003
2008
|
left: 8px;
|
|
2004
2009
|
inset: 4px;
|
|
@@ -2010,16 +2015,6 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2010
2015
|
position: relative;
|
|
2011
2016
|
height: 48px;
|
|
2012
2017
|
width: 48px;
|
|
2013
|
-
margin-left: -2px;
|
|
2014
|
-
margin-right: -2px;
|
|
2015
|
-
}
|
|
2016
|
-
|
|
2017
|
-
.tlui-button__tool:nth-of-type(1) {
|
|
2018
|
-
margin-left: 0px;
|
|
2019
|
-
}
|
|
2020
|
-
|
|
2021
|
-
.tlui-button__tool:nth-last-of-type(1) {
|
|
2022
|
-
margin-right: 0px;
|
|
2023
2018
|
}
|
|
2024
2019
|
|
|
2025
2020
|
.tlui-button__tool::after {
|
|
@@ -2028,69 +2023,64 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2028
2023
|
}
|
|
2029
2024
|
|
|
2030
2025
|
.tlui-button__tool[aria-pressed='true'] {
|
|
2031
|
-
color: var(--color-selected-contrast);
|
|
2026
|
+
color: var(--tl-color-selected-contrast);
|
|
2032
2027
|
}
|
|
2033
2028
|
|
|
2034
2029
|
.tlui-button__tool[aria-pressed='true']:not(:disabled, :focus-visible):active {
|
|
2035
|
-
color: var(--color-selected-contrast);
|
|
2030
|
+
color: var(--tl-color-selected-contrast);
|
|
2036
2031
|
}
|
|
2037
2032
|
|
|
2038
2033
|
.tlui-button__tool[aria-pressed='true']:not(:disabled)::after {
|
|
2039
|
-
background: var(--color-selected);
|
|
2034
|
+
background: var(--tl-color-selected);
|
|
2040
2035
|
opacity: 1;
|
|
2041
2036
|
}
|
|
2042
2037
|
|
|
2043
|
-
.tlui-layout__mobile .tlui-button__tool {
|
|
2038
|
+
.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-button__tool {
|
|
2044
2039
|
height: 48px;
|
|
2045
2040
|
width: 43px;
|
|
2046
2041
|
}
|
|
2047
2042
|
|
|
2048
|
-
.tlui-layout__mobile .tlui-button__tool > .tlui-icon {
|
|
2043
|
+
.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-button__tool > .tlui-icon {
|
|
2049
2044
|
height: 16px;
|
|
2050
2045
|
width: 16px;
|
|
2051
2046
|
}
|
|
2052
2047
|
|
|
2053
|
-
/*
|
|
2048
|
+
/* Row layout */
|
|
2054
2049
|
|
|
2055
|
-
.tlui-
|
|
2050
|
+
.tlui-row {
|
|
2056
2051
|
display: flex;
|
|
2057
2052
|
flex-direction: row;
|
|
2053
|
+
padding: 0 2px;
|
|
2058
2054
|
}
|
|
2059
|
-
.tlui-
|
|
2055
|
+
.tlui-row > * {
|
|
2060
2056
|
margin-left: -2px;
|
|
2061
2057
|
margin-right: -2px;
|
|
2062
2058
|
}
|
|
2063
|
-
|
|
2064
|
-
|
|
2059
|
+
|
|
2060
|
+
/* Column layout */
|
|
2061
|
+
|
|
2062
|
+
.tlui-column {
|
|
2063
|
+
display: flex;
|
|
2064
|
+
flex-direction: column;
|
|
2065
|
+
padding: 2px 0;
|
|
2065
2066
|
}
|
|
2066
|
-
.tlui-
|
|
2067
|
-
margin-
|
|
2067
|
+
.tlui-column > * {
|
|
2068
|
+
margin-top: -2px;
|
|
2069
|
+
margin-bottom: -2px;
|
|
2068
2070
|
}
|
|
2069
2071
|
|
|
2070
|
-
/*
|
|
2072
|
+
/* Grid layout */
|
|
2071
2073
|
|
|
2072
|
-
.tlui-
|
|
2074
|
+
.tlui-grid {
|
|
2073
2075
|
display: grid;
|
|
2074
|
-
grid-template-columns: repeat(4,
|
|
2076
|
+
grid-template-columns: repeat(4, 1fr);
|
|
2075
2077
|
grid-auto-flow: row;
|
|
2076
2078
|
overflow: hidden;
|
|
2079
|
+
padding: 2px;
|
|
2077
2080
|
}
|
|
2078
|
-
.tlui-
|
|
2081
|
+
.tlui-grid > * {
|
|
2079
2082
|
margin: -2px;
|
|
2080
2083
|
}
|
|
2081
|
-
.tlui-buttons__grid > .tlui-button:nth-of-type(4n),
|
|
2082
|
-
.tlui-buttons__vertical-align > .tlui-button:nth-of-type(3n) {
|
|
2083
|
-
margin-right: 0px;
|
|
2084
|
-
}
|
|
2085
|
-
.tlui-buttons__grid > .tlui-button:nth-of-type(4n - 3) {
|
|
2086
|
-
margin-left: 0px;
|
|
2087
|
-
}
|
|
2088
|
-
.tlui-buttons__grid > .tlui-button:nth-of-type(-n + 4) {
|
|
2089
|
-
margin-top: 0px;
|
|
2090
|
-
}
|
|
2091
|
-
.tlui-buttons__grid > .tlui-button:nth-last-of-type(-n + 4) {
|
|
2092
|
-
margin-bottom: 0px;
|
|
2093
|
-
}
|
|
2094
2084
|
|
|
2095
2085
|
/* Zoom button */
|
|
2096
2086
|
|
|
@@ -2114,9 +2104,9 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2114
2104
|
pointer-events: none;
|
|
2115
2105
|
user-select: none;
|
|
2116
2106
|
contain: strict;
|
|
2117
|
-
z-index: var(--layer-panels);
|
|
2107
|
+
z-index: var(--tl-layer-panels);
|
|
2118
2108
|
transform: translate3d(0, 0, 0);
|
|
2119
|
-
--sab: env(safe-area-inset-bottom);
|
|
2109
|
+
--tl-sab: env(safe-area-inset-bottom);
|
|
2120
2110
|
font-weight: 500;
|
|
2121
2111
|
line-height: 1.6;
|
|
2122
2112
|
-webkit-font-smoothing: antialiased;
|
|
@@ -2169,11 +2159,11 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2169
2159
|
justify-content: flex-start;
|
|
2170
2160
|
align-items: flex-start;
|
|
2171
2161
|
width: min-content;
|
|
2172
|
-
gap: var(--space-3);
|
|
2173
|
-
margin: var(--space-2) var(--space-3);
|
|
2162
|
+
gap: var(--tl-space-3);
|
|
2163
|
+
margin: var(--tl-space-2) var(--tl-space-3);
|
|
2174
2164
|
white-space: nowrap;
|
|
2175
2165
|
pointer-events: none;
|
|
2176
|
-
z-index: var(--layer-panels);
|
|
2166
|
+
z-index: var(--tl-layer-panels);
|
|
2177
2167
|
}
|
|
2178
2168
|
|
|
2179
2169
|
/* ---------------------- Icon ---------------------- */
|
|
@@ -2201,7 +2191,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2201
2191
|
|
|
2202
2192
|
.tlui-slider__container {
|
|
2203
2193
|
width: 100%;
|
|
2204
|
-
padding: 0px var(--space-4);
|
|
2194
|
+
padding: 0px var(--tl-space-4);
|
|
2205
2195
|
}
|
|
2206
2196
|
|
|
2207
2197
|
.tlui-slider {
|
|
@@ -2227,7 +2217,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2227
2217
|
content: '';
|
|
2228
2218
|
height: 3px;
|
|
2229
2219
|
width: 100%;
|
|
2230
|
-
background-color: var(--color-muted-1);
|
|
2220
|
+
background-color: var(--tl-color-muted-1);
|
|
2231
2221
|
border-radius: 14px;
|
|
2232
2222
|
}
|
|
2233
2223
|
|
|
@@ -2236,7 +2226,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2236
2226
|
top: calc(50% - 2px);
|
|
2237
2227
|
left: 0px;
|
|
2238
2228
|
height: 3px;
|
|
2239
|
-
background-color: var(--color-selected);
|
|
2229
|
+
background-color: var(--tl-color-selected);
|
|
2240
2230
|
border-radius: 14px;
|
|
2241
2231
|
}
|
|
2242
2232
|
|
|
@@ -2248,16 +2238,16 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2248
2238
|
height: 18px;
|
|
2249
2239
|
position: relative;
|
|
2250
2240
|
top: -1px;
|
|
2251
|
-
background-color: var(--color-panel);
|
|
2241
|
+
background-color: var(--tl-color-panel);
|
|
2252
2242
|
border-radius: 999px;
|
|
2253
|
-
box-shadow: inset 0px 0px 0px 2px var(--color-text-1);
|
|
2243
|
+
box-shadow: inset 0px 0px 0px 2px var(--tl-color-text-1);
|
|
2254
2244
|
}
|
|
2255
2245
|
|
|
2256
2246
|
.tlui-slider__thumb:active {
|
|
2257
2247
|
cursor: grabbing;
|
|
2258
2248
|
box-shadow:
|
|
2259
|
-
inset 0px 0px 0px 2px var(--color-text-1),
|
|
2260
|
-
var(--shadow-1);
|
|
2249
|
+
inset 0px 0px 0px 2px var(--tl-color-text-1),
|
|
2250
|
+
var(--tl-shadow-1);
|
|
2261
2251
|
}
|
|
2262
2252
|
|
|
2263
2253
|
/* ---------------------- Input --------------------- */
|
|
@@ -2266,7 +2256,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2266
2256
|
background: none;
|
|
2267
2257
|
margin: 0px;
|
|
2268
2258
|
position: relative;
|
|
2269
|
-
z-index: var(--layer-above);
|
|
2259
|
+
z-index: var(--tl-layer-above);
|
|
2270
2260
|
height: 40px;
|
|
2271
2261
|
max-height: 40px;
|
|
2272
2262
|
display: flex;
|
|
@@ -2275,8 +2265,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2275
2265
|
font-family: inherit;
|
|
2276
2266
|
font-size: 12px;
|
|
2277
2267
|
font-weight: inherit;
|
|
2278
|
-
color: var(--color-text-1);
|
|
2279
|
-
padding: var(--space-4);
|
|
2268
|
+
color: var(--tl-color-text-1);
|
|
2269
|
+
padding: var(--tl-space-4);
|
|
2280
2270
|
padding-left: 0px;
|
|
2281
2271
|
border: none;
|
|
2282
2272
|
outline: none;
|
|
@@ -2292,8 +2282,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2292
2282
|
height: 44px;
|
|
2293
2283
|
display: flex;
|
|
2294
2284
|
align-items: center;
|
|
2295
|
-
gap: var(--space-4);
|
|
2296
|
-
color: var(--color-text);
|
|
2285
|
+
gap: var(--tl-space-4);
|
|
2286
|
+
color: var(--tl-color-text);
|
|
2297
2287
|
}
|
|
2298
2288
|
|
|
2299
2289
|
.tlui-input__wrapper > .tlui-icon {
|
|
@@ -2325,7 +2315,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2325
2315
|
grid-auto-columns: minmax(1em, auto);
|
|
2326
2316
|
align-self: bottom;
|
|
2327
2317
|
color: currentColor;
|
|
2328
|
-
margin-left: var(--space-4);
|
|
2318
|
+
margin-left: var(--tl-space-4);
|
|
2329
2319
|
}
|
|
2330
2320
|
|
|
2331
2321
|
.tlui-kbd > span {
|
|
@@ -2342,13 +2332,13 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2342
2332
|
}
|
|
2343
2333
|
|
|
2344
2334
|
.tlui-kbd:not(:last-child) {
|
|
2345
|
-
margin-right: var(--space-2);
|
|
2335
|
+
margin-right: var(--tl-space-2);
|
|
2346
2336
|
}
|
|
2347
2337
|
|
|
2348
2338
|
/* Focus Mode Button */
|
|
2349
2339
|
|
|
2350
2340
|
.tlui-focus-button {
|
|
2351
|
-
z-index: var(--layer-panels);
|
|
2341
|
+
z-index: var(--tl-layer-panels);
|
|
2352
2342
|
pointer-events: all;
|
|
2353
2343
|
}
|
|
2354
2344
|
|
|
@@ -2359,16 +2349,16 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2359
2349
|
}
|
|
2360
2350
|
|
|
2361
2351
|
.tlui-menu {
|
|
2362
|
-
z-index: var(--layer-menus);
|
|
2352
|
+
z-index: var(--tl-layer-menus);
|
|
2363
2353
|
height: fit-content;
|
|
2364
2354
|
width: fit-content;
|
|
2365
|
-
border-radius: var(--radius-3);
|
|
2355
|
+
border-radius: var(--tl-radius-3);
|
|
2366
2356
|
pointer-events: all;
|
|
2367
2357
|
touch-action: auto;
|
|
2368
2358
|
overflow-y: auto;
|
|
2369
2359
|
overscroll-behavior: none;
|
|
2370
|
-
background-color: var(--color-panel);
|
|
2371
|
-
box-shadow: var(--shadow-3);
|
|
2360
|
+
background-color: var(--tl-color-panel);
|
|
2361
|
+
box-shadow: var(--tl-shadow-3);
|
|
2372
2362
|
}
|
|
2373
2363
|
|
|
2374
2364
|
.tlui-menu::-webkit-scrollbar {
|
|
@@ -2386,7 +2376,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2386
2376
|
}
|
|
2387
2377
|
|
|
2388
2378
|
.tlui-menu__group {
|
|
2389
|
-
border-bottom: 1px solid var(--color-divider);
|
|
2379
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
2390
2380
|
}
|
|
2391
2381
|
.tlui-menu__group:nth-last-of-type(1) {
|
|
2392
2382
|
border-bottom: none;
|
|
@@ -2396,23 +2386,23 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2396
2386
|
|
|
2397
2387
|
.tlui-menu__submenu__trigger[data-state='open']::after {
|
|
2398
2388
|
opacity: 1;
|
|
2399
|
-
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%);
|
|
2400
2390
|
}
|
|
2401
2391
|
|
|
2402
2392
|
.tlui-menu__submenu__trigger[data-direction='left'][data-state='open']::after {
|
|
2403
2393
|
opacity: 1;
|
|
2404
|
-
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%);
|
|
2405
2395
|
}
|
|
2406
2396
|
|
|
2407
2397
|
@media (hover: hover) {
|
|
2408
2398
|
.tlui-menu__submenu__trigger[data-state='open']:not(:hover)::after {
|
|
2409
2399
|
opacity: 1;
|
|
2410
|
-
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%);
|
|
2411
2401
|
}
|
|
2412
2402
|
|
|
2413
2403
|
.tlui-menu__submenu__trigger[data-direction='left'][data-state='open']:not(:hover)::after {
|
|
2414
2404
|
opacity: 1;
|
|
2415
|
-
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%);
|
|
2416
2406
|
}
|
|
2417
2407
|
}
|
|
2418
2408
|
|
|
@@ -2437,7 +2427,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2437
2427
|
.tlui-menu-click-capture {
|
|
2438
2428
|
position: fixed;
|
|
2439
2429
|
inset: 0;
|
|
2440
|
-
z-index: var(--layer-menu-click-capture);
|
|
2430
|
+
z-index: var(--tl-layer-menu-click-capture);
|
|
2441
2431
|
}
|
|
2442
2432
|
|
|
2443
2433
|
/* --------------------- Popover -------------------- */
|
|
@@ -2453,10 +2443,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2453
2443
|
max-height: calc(var(--radix-popover-content-available-height) - 8px);
|
|
2454
2444
|
margin: 0px;
|
|
2455
2445
|
border: none;
|
|
2456
|
-
border-radius: var(--radius-3);
|
|
2457
|
-
background-color: var(--color-panel);
|
|
2458
|
-
box-shadow: var(--shadow-3);
|
|
2459
|
-
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);
|
|
2460
2450
|
overflow: hidden;
|
|
2461
2451
|
overflow-y: auto;
|
|
2462
2452
|
touch-action: auto;
|
|
@@ -2469,22 +2459,22 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2469
2459
|
|
|
2470
2460
|
.tlui-menu-zone {
|
|
2471
2461
|
position: relative;
|
|
2472
|
-
z-index: var(--layer-panels);
|
|
2462
|
+
z-index: var(--tl-layer-panels);
|
|
2473
2463
|
width: fit-content;
|
|
2474
|
-
border-right: 2px solid var(--color-background);
|
|
2475
|
-
border-bottom: 2px solid var(--color-background);
|
|
2476
|
-
border-bottom-right-radius: var(--radius-4);
|
|
2477
|
-
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);
|
|
2478
2468
|
}
|
|
2479
2469
|
|
|
2480
2470
|
.tlui-menu-zone *[data-state='open']::after {
|
|
2481
|
-
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%);
|
|
2482
2472
|
opacity: 1;
|
|
2483
2473
|
}
|
|
2484
2474
|
|
|
2485
2475
|
@media (hover: hover) {
|
|
2486
2476
|
.tlui-menu-zone *[data-state='open']:not(:hover)::after {
|
|
2487
|
-
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%);
|
|
2488
2478
|
opacity: 1;
|
|
2489
2479
|
}
|
|
2490
2480
|
}
|
|
@@ -2510,8 +2500,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2510
2500
|
align-items: center;
|
|
2511
2501
|
width: 100%;
|
|
2512
2502
|
height: 40px;
|
|
2513
|
-
padding-left: var(--space-4);
|
|
2514
|
-
border-bottom: 1px solid var(--color-divider);
|
|
2503
|
+
padding-left: var(--tl-space-4);
|
|
2504
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
2515
2505
|
}
|
|
2516
2506
|
|
|
2517
2507
|
.tlui-page-menu__header > .tlui-button:nth-of-type(1) {
|
|
@@ -2519,7 +2509,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2519
2509
|
}
|
|
2520
2510
|
|
|
2521
2511
|
.tlui-page-menu__header__title {
|
|
2522
|
-
color: var(--color-text);
|
|
2512
|
+
color: var(--tl-color-text);
|
|
2523
2513
|
font-size: 12px;
|
|
2524
2514
|
flex-grow: 2;
|
|
2525
2515
|
}
|
|
@@ -2604,7 +2594,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2604
2594
|
display: inline-flex;
|
|
2605
2595
|
align-items: center;
|
|
2606
2596
|
justify-content: center;
|
|
2607
|
-
color: var(--color-text);
|
|
2597
|
+
color: var(--tl-color-text);
|
|
2608
2598
|
}
|
|
2609
2599
|
|
|
2610
2600
|
.tlui-page_menu__item__sortable {
|
|
@@ -2617,7 +2607,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2617
2607
|
flex-direction: row;
|
|
2618
2608
|
align-items: center;
|
|
2619
2609
|
overflow: hidden;
|
|
2620
|
-
z-index: var(--layer-above);
|
|
2610
|
+
z-index: var(--tl-layer-above);
|
|
2621
2611
|
}
|
|
2622
2612
|
|
|
2623
2613
|
.tlui-page_menu__item__sortable__title {
|
|
@@ -2629,7 +2619,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2629
2619
|
}
|
|
2630
2620
|
|
|
2631
2621
|
.tlui-page_menu__item__sortable:focus-visible {
|
|
2632
|
-
z-index: var(--layer-focused-input);
|
|
2622
|
+
z-index: var(--tl-layer-focused-input);
|
|
2633
2623
|
}
|
|
2634
2624
|
|
|
2635
2625
|
.tlui-page_menu__item__sortable__handle {
|
|
@@ -2638,7 +2628,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2638
2628
|
min-width: 0px;
|
|
2639
2629
|
height: 40px;
|
|
2640
2630
|
cursor: grab;
|
|
2641
|
-
color: var(--color-text-3);
|
|
2631
|
+
color: var(--tl-color-text-3);
|
|
2642
2632
|
flex-shrink: 0;
|
|
2643
2633
|
margin-right: -9px;
|
|
2644
2634
|
}
|
|
@@ -2680,13 +2670,13 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2680
2670
|
}
|
|
2681
2671
|
|
|
2682
2672
|
.tlui-page_menu__item__submenu > .tlui-button[data-state='open']::after {
|
|
2683
|
-
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%);
|
|
2684
2674
|
opacity: 1;
|
|
2685
2675
|
}
|
|
2686
2676
|
|
|
2687
2677
|
@media (hover: hover) {
|
|
2688
2678
|
.tlui-page_menu__item__submenu > .tlui-button[data-state='open']:not(:hover)::after {
|
|
2689
|
-
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%);
|
|
2690
2680
|
opacity: 1;
|
|
2691
2681
|
}
|
|
2692
2682
|
}
|
|
@@ -2722,7 +2712,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2722
2712
|
top: 48px;
|
|
2723
2713
|
left: -9999px;
|
|
2724
2714
|
padding: 8px 16px;
|
|
2725
|
-
z-index: var(--layer-toasts);
|
|
2715
|
+
z-index: var(--tl-layer-toasts);
|
|
2726
2716
|
}
|
|
2727
2717
|
|
|
2728
2718
|
.tl-skip-to-main-content:focus {
|
|
@@ -2734,11 +2724,11 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2734
2724
|
.tlui-offline-indicator {
|
|
2735
2725
|
display: flex;
|
|
2736
2726
|
flex-direction: row;
|
|
2737
|
-
gap: var(--space-3);
|
|
2738
|
-
color: var(--color-text);
|
|
2739
|
-
background-color: var(--color-low);
|
|
2740
|
-
border: 3px solid var(--color-background);
|
|
2741
|
-
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);
|
|
2742
2732
|
height: 42px;
|
|
2743
2733
|
align-items: center;
|
|
2744
2734
|
justify-content: center;
|
|
@@ -2753,10 +2743,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2753
2743
|
/* ------------------- Style panel ------------------ */
|
|
2754
2744
|
|
|
2755
2745
|
.tlui-style-panel__wrapper {
|
|
2756
|
-
box-shadow: var(--shadow-2);
|
|
2757
|
-
border-radius: var(--radius-3);
|
|
2746
|
+
box-shadow: var(--tl-shadow-2);
|
|
2747
|
+
border-radius: var(--tl-radius-3);
|
|
2758
2748
|
pointer-events: all;
|
|
2759
|
-
background-color: var(--color-panel);
|
|
2749
|
+
background-color: var(--tl-color-panel);
|
|
2760
2750
|
height: fit-content;
|
|
2761
2751
|
max-height: 100%;
|
|
2762
2752
|
margin: 8px;
|
|
@@ -2765,7 +2755,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2765
2755
|
overscroll-behavior: none;
|
|
2766
2756
|
overflow-y: auto;
|
|
2767
2757
|
overflow-x: hidden;
|
|
2768
|
-
color: var(--color-text);
|
|
2758
|
+
color: var(--tl-color-text);
|
|
2769
2759
|
}
|
|
2770
2760
|
/* if the style panel is the only child (ie no share menu), increase the margin */
|
|
2771
2761
|
.tlui-style-panel__wrapper:only-child {
|
|
@@ -2774,7 +2764,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2774
2764
|
|
|
2775
2765
|
.tlui-style-panel {
|
|
2776
2766
|
position: relative;
|
|
2777
|
-
z-index: var(--layer-panels);
|
|
2767
|
+
z-index: var(--tl-layer-panels);
|
|
2778
2768
|
pointer-events: all;
|
|
2779
2769
|
width: 148px;
|
|
2780
2770
|
max-width: 148px;
|
|
@@ -2782,7 +2772,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2782
2772
|
|
|
2783
2773
|
.tlui-style-panel[data-show-ui-labels='true'] .tlui-button[data-isactive='true'] {
|
|
2784
2774
|
border-radius: 10px;
|
|
2785
|
-
outline: 2px solid var(--color-text);
|
|
2775
|
+
outline: 2px solid var(--tl-color-text);
|
|
2786
2776
|
outline-offset: -5px;
|
|
2787
2777
|
}
|
|
2788
2778
|
|
|
@@ -2801,7 +2791,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2801
2791
|
}
|
|
2802
2792
|
|
|
2803
2793
|
.tlui-style-panel__section:nth-of-type(n + 2):not(:last-child) {
|
|
2804
|
-
border-bottom: 1px solid var(--color-divider);
|
|
2794
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
2805
2795
|
}
|
|
2806
2796
|
|
|
2807
2797
|
.tlui-style-panel__section:empty {
|
|
@@ -2810,23 +2800,19 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2810
2800
|
|
|
2811
2801
|
.tlui-style-panel__section__common:not(:only-child) {
|
|
2812
2802
|
margin-bottom: 7px;
|
|
2813
|
-
border-bottom: 1px solid var(--color-divider);
|
|
2803
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
2814
2804
|
}
|
|
2815
2805
|
|
|
2816
|
-
.tlui-style-
|
|
2817
|
-
|
|
2818
|
-
}
|
|
2819
|
-
/* Only really used for the alignment picker */
|
|
2820
|
-
.tlui-style-panel__row__extra-button {
|
|
2821
|
-
margin-left: -2px;
|
|
2806
|
+
.tlui-style-panel__dropdown-picker:only-child {
|
|
2807
|
+
width: 100%;
|
|
2822
2808
|
}
|
|
2823
2809
|
|
|
2824
2810
|
.tlui-style-panel__double-select-picker {
|
|
2825
2811
|
display: flex;
|
|
2826
2812
|
grid-template-columns: 1fr auto;
|
|
2827
2813
|
align-items: center;
|
|
2828
|
-
padding-left: var(--space-4);
|
|
2829
|
-
color: var(--color-text-1);
|
|
2814
|
+
padding-left: var(--tl-space-4);
|
|
2815
|
+
color: var(--tl-color-text-1);
|
|
2830
2816
|
font-size: 12px;
|
|
2831
2817
|
}
|
|
2832
2818
|
|
|
@@ -2840,13 +2826,13 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2840
2826
|
|
|
2841
2827
|
.tlui-style-panel .tlui-button[data-state='open']::after {
|
|
2842
2828
|
opacity: 1;
|
|
2843
|
-
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%);
|
|
2844
2830
|
}
|
|
2845
2831
|
|
|
2846
2832
|
@media (hover: hover) {
|
|
2847
2833
|
.tlui-style-panel .tlui-button[data-state='open']:not(:hover)::after {
|
|
2848
2834
|
opacity: 1;
|
|
2849
|
-
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
2835
|
+
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
2850
2836
|
}
|
|
2851
2837
|
}
|
|
2852
2838
|
|
|
@@ -2856,14 +2842,14 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2856
2842
|
.tlui-style-panel__section__common .tlui-style-panel__subheading,
|
|
2857
2843
|
.tlui-style-panel__subheading + .tlui-slider__container {
|
|
2858
2844
|
margin: 0;
|
|
2859
|
-
padding: var(--space-2) var(--space-3) 0px var(--space-4);
|
|
2845
|
+
padding: var(--tl-space-2) var(--tl-space-3) 0px var(--tl-space-4);
|
|
2860
2846
|
font-size: 12px;
|
|
2861
2847
|
font-weight: inherit;
|
|
2862
2848
|
line-height: inherit;
|
|
2863
2849
|
}
|
|
2864
2850
|
|
|
2865
2851
|
.tlui-style-panel .tlui-style-panel__subheading:nth-of-type(1) {
|
|
2866
|
-
padding-top: var(--space-3);
|
|
2852
|
+
padding-top: var(--tl-space-3);
|
|
2867
2853
|
}
|
|
2868
2854
|
|
|
2869
2855
|
.tlui-style-panel__subheading + .tlui-slider__container {
|
|
@@ -2874,11 +2860,11 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2874
2860
|
|
|
2875
2861
|
.tlui-layout__bottom {
|
|
2876
2862
|
grid-row: 2;
|
|
2863
|
+
width: 100%;
|
|
2877
2864
|
}
|
|
2878
2865
|
|
|
2879
2866
|
.tlui-layout__bottom__main {
|
|
2880
2867
|
width: 100%;
|
|
2881
|
-
position: relative;
|
|
2882
2868
|
display: flex;
|
|
2883
2869
|
align-items: flex-end;
|
|
2884
2870
|
justify-content: center;
|
|
@@ -2890,11 +2876,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2890
2876
|
display: flex;
|
|
2891
2877
|
width: min-content;
|
|
2892
2878
|
flex-direction: column;
|
|
2893
|
-
z-index: var(--layer-panels);
|
|
2879
|
+
z-index: var(--tl-layer-panels);
|
|
2894
2880
|
pointer-events: all;
|
|
2895
2881
|
position: absolute;
|
|
2896
2882
|
left: 0px;
|
|
2897
|
-
bottom: 0px;
|
|
2898
2883
|
}
|
|
2899
2884
|
|
|
2900
2885
|
.tlui-navigation-panel::before {
|
|
@@ -2904,10 +2889,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2904
2889
|
z-index: -1;
|
|
2905
2890
|
inset: -2px -2px 0px 0px;
|
|
2906
2891
|
border-radius: 0;
|
|
2907
|
-
border-top: 2px solid var(--color-background);
|
|
2908
|
-
border-right: 2px solid var(--color-background);
|
|
2909
|
-
border-top-right-radius: var(--radius-4);
|
|
2910
|
-
background-color: var(--color-low);
|
|
2892
|
+
border-top: 2px solid var(--tl-color-background);
|
|
2893
|
+
border-right: 2px solid var(--tl-color-background);
|
|
2894
|
+
border-top-right-radius: var(--tl-radius-4);
|
|
2895
|
+
background-color: var(--tl-color-low);
|
|
2911
2896
|
}
|
|
2912
2897
|
|
|
2913
2898
|
.tlui-navigation-panel[data-a11y='true']::before {
|
|
@@ -2921,7 +2906,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2921
2906
|
height: 96px;
|
|
2922
2907
|
min-height: 96px;
|
|
2923
2908
|
overflow: hidden;
|
|
2924
|
-
padding: var(--space-3);
|
|
2909
|
+
padding: var(--tl-space-3);
|
|
2925
2910
|
padding-top: 0px;
|
|
2926
2911
|
}
|
|
2927
2912
|
|
|
@@ -2934,98 +2919,178 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2934
2919
|
/* --------------------- Toolbar -------------------- */
|
|
2935
2920
|
|
|
2936
2921
|
/* Wide container */
|
|
2937
|
-
.tlui-toolbar {
|
|
2922
|
+
.tlui-main-toolbar {
|
|
2938
2923
|
grid-column: 1 / span 3;
|
|
2939
2924
|
grid-row: 1;
|
|
2940
2925
|
display: flex;
|
|
2941
2926
|
align-items: center;
|
|
2942
2927
|
justify-content: center;
|
|
2943
2928
|
flex-grow: 2;
|
|
2944
|
-
|
|
2929
|
+
}
|
|
2930
|
+
|
|
2931
|
+
.tlui-main-toolbar--horizontal {
|
|
2932
|
+
padding-bottom: calc(var(--tl-space-3) + var(--tl-sab));
|
|
2933
|
+
max-width: 100%;
|
|
2934
|
+
}
|
|
2935
|
+
|
|
2936
|
+
.tlui-main-toolbar--vertical {
|
|
2937
|
+
position: absolute;
|
|
2938
|
+
left: 0;
|
|
2939
|
+
top: 90px; /* height of page menu + 'back to content' button */
|
|
2940
|
+
bottom: 140px; /* height of expanded mini-map */
|
|
2941
|
+
padding-left: calc(var(--tl-space-3) + var(--tl-sab));
|
|
2942
|
+
}
|
|
2943
|
+
|
|
2944
|
+
[data-breakpoints-below*='6'] .tlui-main-toolbar--vertical {
|
|
2945
|
+
bottom: 90px; /* collapsed mini-map, but same as top to keep things looking even */
|
|
2945
2946
|
}
|
|
2946
2947
|
|
|
2947
2948
|
/* Centered Content */
|
|
2948
|
-
.tlui-toolbar__inner {
|
|
2949
|
+
.tlui-main-toolbar__inner {
|
|
2949
2950
|
position: relative;
|
|
2950
2951
|
width: fit-content;
|
|
2951
2952
|
display: flex;
|
|
2952
|
-
gap: var(--space-3);
|
|
2953
|
-
align-items: flex-
|
|
2953
|
+
gap: var(--tl-space-3);
|
|
2954
|
+
align-items: flex-start;
|
|
2954
2955
|
}
|
|
2955
2956
|
|
|
2956
|
-
.tlui-
|
|
2957
|
+
.tlui-main-toolbar--vertical .tlui-main-toolbar__inner {
|
|
2958
|
+
flex-direction: column;
|
|
2959
|
+
}
|
|
2960
|
+
|
|
2961
|
+
.tlui-main-toolbar--horizontal .tlui-main-toolbar__left {
|
|
2957
2962
|
width: fit-content;
|
|
2958
2963
|
}
|
|
2964
|
+
.tlui-main-toolbar--vertical .tlui-main-toolbar__left {
|
|
2965
|
+
display: flex;
|
|
2966
|
+
height: fit-content;
|
|
2967
|
+
}
|
|
2959
2968
|
|
|
2960
2969
|
/* Row of controls + lock button */
|
|
2961
|
-
.tlui-toolbar__extras {
|
|
2970
|
+
.tlui-main-toolbar__extras {
|
|
2962
2971
|
position: relative;
|
|
2963
|
-
z-index: var(--layer-above);
|
|
2964
|
-
width: 100%;
|
|
2972
|
+
z-index: var(--tl-layer-above);
|
|
2965
2973
|
pointer-events: none;
|
|
2966
|
-
|
|
2967
|
-
height: 48px;
|
|
2974
|
+
align-self: stretch;
|
|
2968
2975
|
}
|
|
2969
2976
|
|
|
2970
|
-
.tlui-toolbar__extras:empty {
|
|
2977
|
+
.tlui-main-toolbar__extras:empty {
|
|
2971
2978
|
display: none;
|
|
2972
2979
|
}
|
|
2973
2980
|
|
|
2974
|
-
.tlui-
|
|
2975
|
-
|
|
2981
|
+
.tlui-main-toolbar--horizontal .tlui-main-toolbar__extras {
|
|
2982
|
+
height: 48px;
|
|
2983
|
+
top: 6px;
|
|
2984
|
+
}
|
|
2985
|
+
|
|
2986
|
+
.tlui-main-toolbar--vertical .tlui-main-toolbar__extras {
|
|
2987
|
+
width: 48px;
|
|
2988
|
+
order: 1;
|
|
2989
|
+
}
|
|
2990
|
+
|
|
2991
|
+
.tlui-main-toolbar__extras__controls {
|
|
2976
2992
|
position: relative;
|
|
2977
|
-
|
|
2978
|
-
|
|
2979
|
-
|
|
2980
|
-
|
|
2981
|
-
|
|
2982
|
-
|
|
2993
|
+
z-index: var(--tl-layer-above);
|
|
2994
|
+
background-color: var(--tl-color-low);
|
|
2995
|
+
border: 2px solid var(--tl-color-background);
|
|
2996
|
+
pointer-events: all;
|
|
2997
|
+
}
|
|
2998
|
+
|
|
2999
|
+
.tlui-main-toolbar--horizontal .tlui-main-toolbar__extras__controls {
|
|
3000
|
+
border-top-left-radius: var(--tl-radius-4);
|
|
3001
|
+
border-top-right-radius: var(--tl-radius-4);
|
|
2983
3002
|
margin-left: 8px;
|
|
2984
3003
|
margin-right: 0px;
|
|
2985
|
-
pointer-events: all;
|
|
2986
3004
|
width: fit-content;
|
|
2987
3005
|
}
|
|
2988
3006
|
|
|
2989
|
-
.tlui-
|
|
2990
|
-
|
|
2991
|
-
|
|
2992
|
-
|
|
2993
|
-
|
|
2994
|
-
|
|
3007
|
+
.tlui-main-toolbar--vertical .tlui-main-toolbar__extras__controls {
|
|
3008
|
+
border-top-right-radius: var(--tl-radius-4);
|
|
3009
|
+
border-bottom-right-radius: var(--tl-radius-4);
|
|
3010
|
+
margin-top: 8px;
|
|
3011
|
+
margin-left: -2px;
|
|
3012
|
+
margin-bottom: 0px;
|
|
3013
|
+
width: fit-content;
|
|
3014
|
+
}
|
|
3015
|
+
|
|
3016
|
+
.tlui-main-toolbar__tools {
|
|
3017
|
+
border-radius: var(--tl-radius-4);
|
|
3018
|
+
z-index: var(--tl-layer-panels);
|
|
2995
3019
|
pointer-events: all;
|
|
2996
3020
|
position: relative;
|
|
2997
|
-
background: var(--color-panel);
|
|
2998
|
-
box-shadow: var(--shadow-2);
|
|
3021
|
+
background: var(--tl-color-panel);
|
|
3022
|
+
box-shadow: var(--tl-shadow-2);
|
|
2999
3023
|
}
|
|
3000
|
-
|
|
3001
|
-
|
|
3002
|
-
|
|
3003
|
-
|
|
3024
|
+
|
|
3025
|
+
.tlui-main-toolbar--horizontal .tlui-main-toolbar__mobile-style-panel {
|
|
3026
|
+
align-self: flex-end;
|
|
3027
|
+
}
|
|
3028
|
+
.tlui-main-toolbar--vertical .tlui-main-toolbar__mobile-style-panel {
|
|
3029
|
+
align-self: flex-start;
|
|
3004
3030
|
}
|
|
3005
3031
|
|
|
3006
|
-
.tlui-toolbar__overflow {
|
|
3032
|
+
.tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {
|
|
3007
3033
|
width: 40px;
|
|
3034
|
+
margin-left: 2px;
|
|
3035
|
+
}
|
|
3036
|
+
.tlui-main-toolbar--vertical .tlui-main-toolbar__overflow {
|
|
3037
|
+
height: 40px;
|
|
3038
|
+
margin-top: 2px;
|
|
3008
3039
|
}
|
|
3009
3040
|
|
|
3010
|
-
.tlui-layout__mobile .tlui-toolbar__overflow {
|
|
3041
|
+
.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {
|
|
3011
3042
|
width: 32px;
|
|
3012
3043
|
padding: 0px;
|
|
3013
3044
|
}
|
|
3014
3045
|
|
|
3015
|
-
.tlui-toolbar *[data-state='open']::after {
|
|
3016
|
-
background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
3046
|
+
.tlui-main-toolbar--horizontal *[data-state='open']::after {
|
|
3047
|
+
background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
3048
|
+
opacity: 1;
|
|
3049
|
+
}
|
|
3050
|
+
.tlui-main-toolbar--vertical *[data-state='open']::after {
|
|
3051
|
+
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
3017
3052
|
opacity: 1;
|
|
3018
3053
|
}
|
|
3019
3054
|
|
|
3055
|
+
.tlui-main-toolbar__overflow-content {
|
|
3056
|
+
touch-action: none;
|
|
3057
|
+
}
|
|
3058
|
+
|
|
3059
|
+
.tlui-main-toolbar__tools [data-toolbar-visible='false'],
|
|
3060
|
+
.tlui-main-toolbar__overflow-content [data-toolbar-visible='false'] {
|
|
3061
|
+
display: none;
|
|
3062
|
+
}
|
|
3063
|
+
|
|
3064
|
+
.tlui-main-toolbar__group:empty {
|
|
3065
|
+
display: none;
|
|
3066
|
+
}
|
|
3067
|
+
.tlui-row.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {
|
|
3068
|
+
border-right: 1px solid var(--color-divider);
|
|
3069
|
+
margin-right: 2px;
|
|
3070
|
+
}
|
|
3071
|
+
.tlui-column.tlui-main-toolbar__group:not(
|
|
3072
|
+
:nth-last-child(-n + 1 of [data-toolbar-visible='true'])
|
|
3073
|
+
) {
|
|
3074
|
+
border-bottom: 1px solid var(--color-divider);
|
|
3075
|
+
margin-bottom: 2px;
|
|
3076
|
+
}
|
|
3077
|
+
.tlui-grid.tlui-main-toolbar__group {
|
|
3078
|
+
grid-column: 1 / span 4;
|
|
3079
|
+
}
|
|
3080
|
+
.tlui-grid.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {
|
|
3081
|
+
border-bottom: 1px solid var(--color-divider);
|
|
3082
|
+
margin-bottom: 2px;
|
|
3083
|
+
}
|
|
3084
|
+
|
|
3020
3085
|
@media (hover: hover) {
|
|
3021
|
-
.tlui-toolbar *[data-state='open']:not(:hover)::after {
|
|
3022
|
-
background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
3086
|
+
.tlui-main-toolbar--horizontal *[data-state='open']:not(:hover)::after {
|
|
3087
|
+
background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
3088
|
+
opacity: 1;
|
|
3089
|
+
}
|
|
3090
|
+
.tlui-main-toolbar--vertical *[data-state='open']:not(:hover)::after {
|
|
3091
|
+
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
3023
3092
|
opacity: 1;
|
|
3024
3093
|
}
|
|
3025
|
-
}
|
|
3026
|
-
|
|
3027
|
-
.tlui-layout__mobile .tlui-toolbar {
|
|
3028
|
-
transition: transform 0.15s ease-out 0.05s;
|
|
3029
3094
|
}
|
|
3030
3095
|
|
|
3031
3096
|
/* ------------------- Tooltip -------------------- */
|
|
@@ -3034,44 +3099,40 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3034
3099
|
font-size: 12px;
|
|
3035
3100
|
padding: 2px 8px;
|
|
3036
3101
|
border-radius: 4px;
|
|
3037
|
-
background-color: var(--color-tooltip);
|
|
3102
|
+
background-color: var(--tl-color-tooltip);
|
|
3038
3103
|
box-shadow: none;
|
|
3039
|
-
color: var(--color-text-shadow);
|
|
3104
|
+
color: var(--tl-color-text-shadow);
|
|
3040
3105
|
max-width: 400px;
|
|
3041
3106
|
width: fit-content;
|
|
3042
3107
|
text-align: center;
|
|
3043
|
-
pointer-events: none;
|
|
3044
3108
|
will-change: transform, opacity;
|
|
3045
3109
|
z-index: 2;
|
|
3046
3110
|
}
|
|
3047
3111
|
|
|
3048
3112
|
.tlui-tooltip__arrow {
|
|
3049
|
-
fill: var(--color-tooltip);
|
|
3113
|
+
fill: var(--tl-color-tooltip);
|
|
3050
3114
|
will-change: opacity;
|
|
3051
3115
|
}
|
|
3052
3116
|
|
|
3053
3117
|
[data-radix-popper-content-wrapper]:has(.tlui-tooltip) {
|
|
3054
|
-
z-index: var(--layer-toasts) !important;
|
|
3055
|
-
|
|
3056
|
-
|
|
3057
|
-
[data-radix-popper-content-wrapper]:has(.tlui-tooltip[data-should-animate='true']) {
|
|
3058
|
-
transition: all 0.1s ease-out;
|
|
3118
|
+
z-index: var(--tl-layer-toasts) !important;
|
|
3119
|
+
pointer-events: none;
|
|
3059
3120
|
}
|
|
3060
3121
|
|
|
3061
3122
|
/* ------------------- Debug panel ------------------ */
|
|
3062
3123
|
|
|
3063
3124
|
.tlui-debug-panel {
|
|
3064
|
-
background-color: var(--color-low);
|
|
3125
|
+
background-color: var(--tl-color-low);
|
|
3065
3126
|
width: 100%;
|
|
3066
3127
|
display: grid;
|
|
3067
3128
|
align-items: center;
|
|
3068
3129
|
grid-template-columns: 1fr auto auto auto;
|
|
3069
3130
|
justify-content: space-between;
|
|
3070
|
-
padding-left: var(--space-4);
|
|
3071
|
-
border-top: 1px solid var(--color-background);
|
|
3131
|
+
padding-left: var(--tl-space-4);
|
|
3132
|
+
border-top: 1px solid var(--tl-color-background);
|
|
3072
3133
|
font-size: 12px;
|
|
3073
|
-
color: var(--color-text-1);
|
|
3074
|
-
z-index: var(--layer-panels);
|
|
3134
|
+
color: var(--tl-color-text-1);
|
|
3135
|
+
z-index: var(--tl-layer-panels);
|
|
3075
3136
|
pointer-events: all;
|
|
3076
3137
|
}
|
|
3077
3138
|
|
|
@@ -3087,7 +3148,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3087
3148
|
|
|
3088
3149
|
.tlui-debug-panel__fps__slow {
|
|
3089
3150
|
font-weight: bold;
|
|
3090
|
-
color: var(--color-danger);
|
|
3151
|
+
color: var(--tl-color-danger);
|
|
3091
3152
|
}
|
|
3092
3153
|
|
|
3093
3154
|
.tlui-a11y-audit {
|
|
@@ -3097,7 +3158,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3097
3158
|
.tlui-a11y-audit th,
|
|
3098
3159
|
.tlui-a11y-audit td {
|
|
3099
3160
|
padding: 8px;
|
|
3100
|
-
border: 1px solid var(--color-low-border);
|
|
3161
|
+
border: 1px solid var(--tl-color-low-border);
|
|
3101
3162
|
}
|
|
3102
3163
|
|
|
3103
3164
|
/* --------------------- Toasts --------------------- */
|
|
@@ -3110,10 +3171,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3110
3171
|
align-items: flex-end;
|
|
3111
3172
|
justify-content: flex-end;
|
|
3112
3173
|
flex-direction: column;
|
|
3113
|
-
gap: var(--space-3);
|
|
3174
|
+
gap: var(--tl-space-3);
|
|
3114
3175
|
pointer-events: none;
|
|
3115
|
-
padding: 0px var(--space-3) 64px 0px;
|
|
3116
|
-
z-index: var(--layer-toasts);
|
|
3176
|
+
padding: 0px var(--tl-space-3) 64px 0px;
|
|
3177
|
+
z-index: var(--tl-layer-toasts);
|
|
3117
3178
|
}
|
|
3118
3179
|
|
|
3119
3180
|
.tlui-toast__viewport > * {
|
|
@@ -3122,34 +3183,34 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3122
3183
|
|
|
3123
3184
|
.tlui-toast__icon {
|
|
3124
3185
|
padding-top: 11px;
|
|
3125
|
-
padding-left: var(--space-4);
|
|
3126
|
-
color: var(--color-text-1);
|
|
3186
|
+
padding-left: var(--tl-space-4);
|
|
3187
|
+
color: var(--tl-color-text-1);
|
|
3127
3188
|
}
|
|
3128
3189
|
|
|
3129
3190
|
.tlui-toast__container {
|
|
3130
3191
|
min-width: 200px;
|
|
3131
3192
|
display: flex;
|
|
3132
3193
|
flex-direction: row;
|
|
3133
|
-
background-color: var(--color-panel);
|
|
3134
|
-
box-shadow: var(--shadow-2);
|
|
3135
|
-
border-radius: var(--radius-3);
|
|
3194
|
+
background-color: var(--tl-color-panel);
|
|
3195
|
+
box-shadow: var(--tl-shadow-2);
|
|
3196
|
+
border-radius: var(--tl-radius-3);
|
|
3136
3197
|
font-size: 12px;
|
|
3137
3198
|
}
|
|
3138
3199
|
|
|
3139
3200
|
.tlui-toast__container[data-severity='success'] .tlui-icon {
|
|
3140
|
-
color: var(--color-success);
|
|
3201
|
+
color: var(--tl-color-success);
|
|
3141
3202
|
}
|
|
3142
3203
|
|
|
3143
3204
|
.tlui-toast__container[data-severity='info'] .tlui-icon {
|
|
3144
|
-
color: var(--color-info);
|
|
3205
|
+
color: var(--tl-color-info);
|
|
3145
3206
|
}
|
|
3146
3207
|
|
|
3147
3208
|
.tlui-toast__container[data-severity='warning'] .tlui-icon {
|
|
3148
|
-
color: var(--color-warning);
|
|
3209
|
+
color: var(--tl-color-warning);
|
|
3149
3210
|
}
|
|
3150
3211
|
|
|
3151
3212
|
.tlui-toast__container[data-severity='error'] .tlui-icon {
|
|
3152
|
-
color: var(--color-danger);
|
|
3213
|
+
color: var(--tl-color-danger);
|
|
3153
3214
|
}
|
|
3154
3215
|
|
|
3155
3216
|
.tlui-toast__main {
|
|
@@ -3158,27 +3219,27 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3158
3219
|
}
|
|
3159
3220
|
|
|
3160
3221
|
.tlui-toast__content {
|
|
3161
|
-
padding: var(--space-4);
|
|
3222
|
+
padding: var(--tl-space-4);
|
|
3162
3223
|
display: flex;
|
|
3163
3224
|
line-height: 1.4;
|
|
3164
3225
|
flex-direction: column;
|
|
3165
|
-
gap: var(--space-3);
|
|
3226
|
+
gap: var(--tl-space-3);
|
|
3166
3227
|
}
|
|
3167
3228
|
|
|
3168
3229
|
.tlui-toast__main[data-actions='true'] .tlui-toast__content {
|
|
3169
|
-
padding-bottom: var(--space-2);
|
|
3230
|
+
padding-bottom: var(--tl-space-2);
|
|
3170
3231
|
}
|
|
3171
3232
|
|
|
3172
3233
|
.tlui-toast__title {
|
|
3173
3234
|
font-weight: bold;
|
|
3174
|
-
color: var(--color-text-1);
|
|
3235
|
+
color: var(--tl-color-text-1);
|
|
3175
3236
|
/* this makes the default toast look better */
|
|
3176
3237
|
line-height: 16px;
|
|
3177
3238
|
}
|
|
3178
3239
|
|
|
3179
3240
|
.tlui-toast__description {
|
|
3180
|
-
color: var(--color-text-1);
|
|
3181
|
-
padding: var(--space-3);
|
|
3241
|
+
color: var(--tl-color-text-1);
|
|
3242
|
+
padding: var(--tl-space-3);
|
|
3182
3243
|
margin: 0px;
|
|
3183
3244
|
padding: 0px;
|
|
3184
3245
|
}
|
|
@@ -3230,14 +3291,14 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3230
3291
|
left: 0px;
|
|
3231
3292
|
width: 100%;
|
|
3232
3293
|
height: 100%;
|
|
3233
|
-
z-index: var(--layer-canvas-overlays);
|
|
3234
|
-
background-color: var(--color-overlay);
|
|
3294
|
+
z-index: var(--tl-layer-canvas-overlays);
|
|
3295
|
+
background-color: var(--tl-color-overlay);
|
|
3235
3296
|
pointer-events: all;
|
|
3236
3297
|
animation: tl-fade-in 0.12s ease-out;
|
|
3237
3298
|
display: grid;
|
|
3238
3299
|
place-items: center;
|
|
3239
3300
|
overflow-y: auto;
|
|
3240
|
-
padding: 0px var(--space-3);
|
|
3301
|
+
padding: 0px var(--tl-space-3);
|
|
3241
3302
|
}
|
|
3242
3303
|
|
|
3243
3304
|
.tlui-dialog__content {
|
|
@@ -3245,9 +3306,9 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3245
3306
|
flex-direction: column;
|
|
3246
3307
|
position: relative;
|
|
3247
3308
|
cursor: default;
|
|
3248
|
-
background-color: var(--color-panel);
|
|
3249
|
-
box-shadow: var(--shadow-3);
|
|
3250
|
-
border-radius: var(--radius-3);
|
|
3309
|
+
background-color: var(--tl-color-panel);
|
|
3310
|
+
box-shadow: var(--tl-shadow-3);
|
|
3311
|
+
border-radius: var(--tl-radius-3);
|
|
3251
3312
|
font-size: 12px;
|
|
3252
3313
|
overflow: hidden;
|
|
3253
3314
|
min-width: 300px;
|
|
@@ -3260,9 +3321,9 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3260
3321
|
display: flex;
|
|
3261
3322
|
align-items: center;
|
|
3262
3323
|
flex: 0;
|
|
3263
|
-
z-index: var(--layer-header-footer);
|
|
3264
|
-
padding-left: var(--space-4);
|
|
3265
|
-
color: var(--color-text);
|
|
3324
|
+
z-index: var(--tl-layer-header-footer);
|
|
3325
|
+
padding-left: var(--tl-space-4);
|
|
3326
|
+
color: var(--tl-color-text);
|
|
3266
3327
|
height: 40px;
|
|
3267
3328
|
}
|
|
3268
3329
|
|
|
@@ -3271,7 +3332,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3271
3332
|
font-weight: inherit;
|
|
3272
3333
|
font-size: 12px;
|
|
3273
3334
|
margin: 0px;
|
|
3274
|
-
color: var(--color-text-1);
|
|
3335
|
+
color: var(--tl-color-text-1);
|
|
3275
3336
|
}
|
|
3276
3337
|
|
|
3277
3338
|
.tlui-dialog__header__close {
|
|
@@ -3279,16 +3340,16 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3279
3340
|
}
|
|
3280
3341
|
|
|
3281
3342
|
.tlui-dialog__body {
|
|
3282
|
-
padding: var(--space-4) var(--space-4);
|
|
3343
|
+
padding: var(--tl-space-4) var(--tl-space-4);
|
|
3283
3344
|
flex: 0 1;
|
|
3284
3345
|
overflow-y: auto;
|
|
3285
3346
|
overflow-x: hidden;
|
|
3286
|
-
color: var(--color-text-1);
|
|
3347
|
+
color: var(--tl-color-text-1);
|
|
3287
3348
|
user-select: all;
|
|
3288
3349
|
-webkit-user-select: text;
|
|
3289
3350
|
}
|
|
3290
3351
|
.tlui-dialog__body a {
|
|
3291
|
-
color: var(--color-selected);
|
|
3352
|
+
color: var(--tl-color-selected);
|
|
3292
3353
|
}
|
|
3293
3354
|
|
|
3294
3355
|
.tlui-dialog__body ul,
|
|
@@ -3296,13 +3357,13 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3296
3357
|
padding-left: 16px;
|
|
3297
3358
|
display: flex;
|
|
3298
3359
|
flex-direction: column;
|
|
3299
|
-
gap: var(--space-2);
|
|
3360
|
+
gap: var(--tl-space-2);
|
|
3300
3361
|
}
|
|
3301
3362
|
|
|
3302
3363
|
.tlui-dialog__footer {
|
|
3303
3364
|
position: relative;
|
|
3304
3365
|
min-height: 12px;
|
|
3305
|
-
z-index: var(--layer-header-footer);
|
|
3366
|
+
z-index: var(--tl-layer-header-footer);
|
|
3306
3367
|
}
|
|
3307
3368
|
|
|
3308
3369
|
.tlui-dialog__footer__actions {
|
|
@@ -3322,15 +3383,15 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3322
3383
|
.tlui-edit-link-dialog {
|
|
3323
3384
|
display: flex;
|
|
3324
3385
|
flex-direction: column;
|
|
3325
|
-
gap: var(--space-4);
|
|
3326
|
-
color: var(--color-text);
|
|
3386
|
+
gap: var(--tl-space-4);
|
|
3387
|
+
color: var(--tl-color-text);
|
|
3327
3388
|
}
|
|
3328
3389
|
|
|
3329
3390
|
.tlui-edit-link-dialog__input {
|
|
3330
|
-
background-color: var(--color-muted-2);
|
|
3391
|
+
background-color: var(--tl-color-muted-2);
|
|
3331
3392
|
flex-grow: 2;
|
|
3332
|
-
border-radius: var(--radius-2);
|
|
3333
|
-
padding: 0px var(--space-4);
|
|
3393
|
+
border-radius: var(--tl-radius-2);
|
|
3394
|
+
padding: 0px var(--tl-space-4);
|
|
3334
3395
|
}
|
|
3335
3396
|
|
|
3336
3397
|
/* Embed Dialog */
|
|
@@ -3338,15 +3399,15 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3338
3399
|
.tlui-embed__spacer {
|
|
3339
3400
|
flex-grow: 2;
|
|
3340
3401
|
min-height: 0px;
|
|
3341
|
-
margin-left: calc(-1 * var(--space-4));
|
|
3342
|
-
margin-top: calc(-1 * var(--space-4));
|
|
3402
|
+
margin-left: calc(-1 * var(--tl-space-4));
|
|
3403
|
+
margin-top: calc(-1 * var(--tl-space-4));
|
|
3343
3404
|
pointer-events: none;
|
|
3344
3405
|
}
|
|
3345
3406
|
|
|
3346
3407
|
.tlui-embed-dialog__list {
|
|
3347
3408
|
display: flex;
|
|
3348
3409
|
flex-direction: column;
|
|
3349
|
-
padding: 0px var(--space-3) var(--space-4) var(--space-3);
|
|
3410
|
+
padding: 0px var(--tl-space-3) var(--tl-space-4) var(--tl-space-3);
|
|
3350
3411
|
}
|
|
3351
3412
|
|
|
3352
3413
|
.tlui-embed-dialog__item__image {
|
|
@@ -3358,49 +3419,49 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3358
3419
|
background-size: contain;
|
|
3359
3420
|
background-repeat: no-repeat;
|
|
3360
3421
|
background-position: center center;
|
|
3361
|
-
background-color: var(--color-selected-contrast);
|
|
3362
|
-
border-radius: var(--radius-1);
|
|
3422
|
+
background-color: var(--tl-color-selected-contrast);
|
|
3423
|
+
border-radius: var(--tl-radius-1);
|
|
3363
3424
|
}
|
|
3364
3425
|
|
|
3365
3426
|
.tlui-embed-dialog__enter {
|
|
3366
3427
|
display: flex;
|
|
3367
3428
|
flex-direction: column;
|
|
3368
|
-
gap: var(--space-4);
|
|
3369
|
-
color: var(--color-text-1);
|
|
3429
|
+
gap: var(--tl-space-4);
|
|
3430
|
+
color: var(--tl-color-text-1);
|
|
3370
3431
|
}
|
|
3371
3432
|
|
|
3372
3433
|
.tlui-embed-dialog__input {
|
|
3373
|
-
background-color: var(--color-muted-2);
|
|
3434
|
+
background-color: var(--tl-color-muted-2);
|
|
3374
3435
|
flex-grow: 2;
|
|
3375
|
-
border-radius: var(--radius-2);
|
|
3376
|
-
padding: 0px var(--space-4);
|
|
3436
|
+
border-radius: var(--tl-radius-2);
|
|
3437
|
+
padding: 0px var(--tl-space-4);
|
|
3377
3438
|
}
|
|
3378
3439
|
|
|
3379
3440
|
.tlui-embed-dialog__warning {
|
|
3380
|
-
color: var(--color-danger);
|
|
3441
|
+
color: var(--tl-color-danger);
|
|
3381
3442
|
text-shadow: none;
|
|
3382
3443
|
}
|
|
3383
3444
|
|
|
3384
3445
|
.tlui-embed-dialog__instruction__link {
|
|
3385
3446
|
display: flex;
|
|
3386
|
-
gap: var(--space-1);
|
|
3387
|
-
margin-top: var(--space-4);
|
|
3447
|
+
gap: var(--tl-space-1);
|
|
3448
|
+
margin-top: var(--tl-space-4);
|
|
3388
3449
|
}
|
|
3389
3450
|
|
|
3390
3451
|
.tlui-embed-dialog__enter a {
|
|
3391
|
-
color: var(--color-text-1);
|
|
3452
|
+
color: var(--tl-color-text-1);
|
|
3392
3453
|
}
|
|
3393
3454
|
|
|
3394
3455
|
/* --------------- Keyboard shortcuts --------------- */
|
|
3395
3456
|
|
|
3396
3457
|
.tlui-shortcuts-dialog__header {
|
|
3397
|
-
border-bottom: 1px solid var(--color-divider);
|
|
3458
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
3398
3459
|
}
|
|
3399
3460
|
|
|
3400
3461
|
.tlui-shortcuts-dialog__body {
|
|
3401
3462
|
position: relative;
|
|
3402
3463
|
columns: 3;
|
|
3403
|
-
column-gap: var(--space-9);
|
|
3464
|
+
column-gap: var(--tl-space-9);
|
|
3404
3465
|
pointer-events: all;
|
|
3405
3466
|
touch-action: auto;
|
|
3406
3467
|
|
|
@@ -3418,14 +3479,14 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3418
3479
|
|
|
3419
3480
|
.tlui-shortcuts-dialog__group {
|
|
3420
3481
|
break-inside: avoid-column;
|
|
3421
|
-
padding-bottom: var(--space-6);
|
|
3482
|
+
padding-bottom: var(--tl-space-6);
|
|
3422
3483
|
}
|
|
3423
3484
|
|
|
3424
3485
|
.tlui-shortcuts-dialog__group__title {
|
|
3425
3486
|
font-size: inherit;
|
|
3426
3487
|
font-weight: inherit;
|
|
3427
3488
|
margin: 0px;
|
|
3428
|
-
color: var(--color-text-3);
|
|
3489
|
+
color: var(--tl-color-text-3);
|
|
3429
3490
|
height: 32px;
|
|
3430
3491
|
display: flex;
|
|
3431
3492
|
align-items: center;
|
|
@@ -3434,12 +3495,12 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3434
3495
|
.tlui-shortcuts-dialog__group__content {
|
|
3435
3496
|
display: flex;
|
|
3436
3497
|
flex-direction: column;
|
|
3437
|
-
color: var(--color-text-1);
|
|
3498
|
+
color: var(--tl-color-text-1);
|
|
3438
3499
|
}
|
|
3439
3500
|
|
|
3440
3501
|
.tlui-shortcuts-dialog__key-pair {
|
|
3441
3502
|
display: flex;
|
|
3442
|
-
gap: var(--space-4);
|
|
3503
|
+
gap: var(--tl-space-4);
|
|
3443
3504
|
align-items: center;
|
|
3444
3505
|
justify-content: space-between;
|
|
3445
3506
|
height: 32px;
|
|
@@ -3466,12 +3527,12 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3466
3527
|
height: 24px;
|
|
3467
3528
|
background: linear-gradient(
|
|
3468
3529
|
to bottom,
|
|
3469
|
-
var(--color-panel-transparent) 0%,
|
|
3470
|
-
var(--color-panel) 90%,
|
|
3471
|
-
var(--color-panel) 100%
|
|
3530
|
+
var(--tl-color-panel-transparent) 0%,
|
|
3531
|
+
var(--tl-color-panel) 90%,
|
|
3532
|
+
var(--tl-color-panel) 100%
|
|
3472
3533
|
);
|
|
3473
|
-
border-bottom-left-radius: var(--radius-3);
|
|
3474
|
-
border-bottom-right-radius: var(--radius-3);
|
|
3534
|
+
border-bottom-left-radius: var(--tl-radius-3);
|
|
3535
|
+
border-bottom-right-radius: var(--tl-radius-3);
|
|
3475
3536
|
pointer-events: none;
|
|
3476
3537
|
}
|
|
3477
3538
|
|
|
@@ -3486,10 +3547,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3486
3547
|
.tlui-help-menu {
|
|
3487
3548
|
pointer-events: all;
|
|
3488
3549
|
position: absolute;
|
|
3489
|
-
bottom: var(--space-2);
|
|
3490
|
-
right: var(--space-2);
|
|
3491
|
-
z-index: var(--layer-panels);
|
|
3492
|
-
border: 2px solid var(--color-background);
|
|
3550
|
+
bottom: var(--tl-space-2);
|
|
3551
|
+
right: var(--tl-space-2);
|
|
3552
|
+
z-index: var(--tl-layer-panels);
|
|
3553
|
+
border: 2px solid var(--tl-color-background);
|
|
3493
3554
|
border-radius: 100%;
|
|
3494
3555
|
}
|
|
3495
3556
|
|
|
@@ -3500,7 +3561,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3500
3561
|
display: flex;
|
|
3501
3562
|
flex-direction: row;
|
|
3502
3563
|
justify-content: flex-end;
|
|
3503
|
-
z-index: var(--layer-panels);
|
|
3564
|
+
z-index: var(--tl-layer-panels);
|
|
3504
3565
|
align-items: center;
|
|
3505
3566
|
padding-top: 2px;
|
|
3506
3567
|
padding-right: 4px;
|
|
@@ -3516,7 +3577,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3516
3577
|
border: none;
|
|
3517
3578
|
cursor: pointer;
|
|
3518
3579
|
pointer-events: all;
|
|
3519
|
-
border-radius: var(--radius-1);
|
|
3580
|
+
border-radius: var(--tl-radius-1);
|
|
3520
3581
|
padding-right: 1px;
|
|
3521
3582
|
height: 100%;
|
|
3522
3583
|
}
|
|
@@ -3529,8 +3590,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3529
3590
|
.tlui-people-menu__avatar {
|
|
3530
3591
|
height: 24px;
|
|
3531
3592
|
width: 24px;
|
|
3532
|
-
border: 2px solid var(--color-background);
|
|
3533
|
-
background-color: var(--color-low);
|
|
3593
|
+
border: 2px solid var(--tl-color-background);
|
|
3594
|
+
background-color: var(--tl-color-low);
|
|
3534
3595
|
border-radius: 100%;
|
|
3535
3596
|
display: flex;
|
|
3536
3597
|
align-items: center;
|
|
@@ -3539,7 +3600,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3539
3600
|
font-size: 10px;
|
|
3540
3601
|
font-weight: bold;
|
|
3541
3602
|
text-align: center;
|
|
3542
|
-
color: var(--color-selected-contrast);
|
|
3603
|
+
color: var(--tl-color-selected-contrast);
|
|
3543
3604
|
z-index: 2;
|
|
3544
3605
|
}
|
|
3545
3606
|
|
|
@@ -3553,7 +3614,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3553
3614
|
|
|
3554
3615
|
@media (hover: hover) {
|
|
3555
3616
|
.tlui-people-menu__avatars-button:hover .tlui-people-menu__avatar {
|
|
3556
|
-
border-color: var(--color-low);
|
|
3617
|
+
border-color: var(--tl-color-low);
|
|
3557
3618
|
}
|
|
3558
3619
|
}
|
|
3559
3620
|
|
|
@@ -3561,12 +3622,12 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3561
3622
|
min-width: 0px;
|
|
3562
3623
|
font-size: 11px;
|
|
3563
3624
|
font-weight: 600;
|
|
3564
|
-
color: var(--color-text-1);
|
|
3625
|
+
color: var(--tl-color-text-1);
|
|
3565
3626
|
font-family: inherit;
|
|
3566
3627
|
padding: 0px 4px;
|
|
3567
3628
|
}
|
|
3568
3629
|
.tlui-people-menu__more::after {
|
|
3569
|
-
border-radius: var(--radius-2);
|
|
3630
|
+
border-radius: var(--tl-radius-2);
|
|
3570
3631
|
inset: 0px;
|
|
3571
3632
|
}
|
|
3572
3633
|
|
|
@@ -3595,7 +3656,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3595
3656
|
}
|
|
3596
3657
|
|
|
3597
3658
|
.tlui-people-menu__section:not(:last-child) {
|
|
3598
|
-
border-bottom: 1px solid var(--color-divider);
|
|
3659
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
3599
3660
|
}
|
|
3600
3661
|
|
|
3601
3662
|
.tlui-people-menu__user {
|
|
@@ -3614,7 +3675,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3614
3675
|
text-overflow: ellipsis;
|
|
3615
3676
|
white-space: nowrap;
|
|
3616
3677
|
font-size: 12px;
|
|
3617
|
-
color: var(--color-text-1);
|
|
3678
|
+
color: var(--tl-color-text-1);
|
|
3618
3679
|
max-width: 100%;
|
|
3619
3680
|
flex-grow: 1;
|
|
3620
3681
|
flex-shrink: 100;
|
|
@@ -3626,7 +3687,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3626
3687
|
text-overflow: ellipsis;
|
|
3627
3688
|
white-space: nowrap;
|
|
3628
3689
|
font-size: 12px;
|
|
3629
|
-
color: var(--color-text-3);
|
|
3690
|
+
color: var(--tl-color-text-3);
|
|
3630
3691
|
flex-grow: 100;
|
|
3631
3692
|
flex-shrink: 0;
|
|
3632
3693
|
margin-left: 4px;
|
|
@@ -3717,7 +3778,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3717
3778
|
inset: 0px;
|
|
3718
3779
|
border-width: 2px;
|
|
3719
3780
|
border-style: solid;
|
|
3720
|
-
z-index: var(--layer-following-indicator);
|
|
3781
|
+
z-index: var(--tl-layer-following-indicator);
|
|
3721
3782
|
pointer-events: none;
|
|
3722
3783
|
}
|
|
3723
3784
|
|
|
@@ -3736,7 +3797,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3736
3797
|
}
|
|
3737
3798
|
|
|
3738
3799
|
.tlui-contextual-toolbar [data-isactive='true']::after {
|
|
3739
|
-
background-color: var(--color-muted-2);
|
|
3800
|
+
background-color: var(--tl-color-muted-2);
|
|
3740
3801
|
opacity: 1;
|
|
3741
3802
|
}
|
|
3742
3803
|
|
|
@@ -3752,7 +3813,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3752
3813
|
|
|
3753
3814
|
.tlui-contextual-toolbar[data-visible='true'] {
|
|
3754
3815
|
opacity: 1;
|
|
3755
|
-
z-index: var(--layer-menus);
|
|
3816
|
+
z-index: var(--tl-layer-menus);
|
|
3756
3817
|
}
|
|
3757
3818
|
|
|
3758
3819
|
.tlui-contextual-toolbar[data-interactive='true'],
|
|
@@ -3811,7 +3872,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3811
3872
|
|
|
3812
3873
|
@keyframes tlui-slide-in {
|
|
3813
3874
|
from {
|
|
3814
|
-
transform: translateX(calc(100% + var(--space-3)));
|
|
3875
|
+
transform: translateX(calc(100% + var(--tl-space-3)));
|
|
3815
3876
|
}
|
|
3816
3877
|
to {
|
|
3817
3878
|
transform: translateX(0px);
|
|
@@ -3823,7 +3884,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3823
3884
|
transform: translateX(var(--radix-toast-swipe-end-x));
|
|
3824
3885
|
}
|
|
3825
3886
|
to {
|
|
3826
|
-
transform: translateX(calc(100% + var(--space-3)));
|
|
3887
|
+
transform: translateX(calc(100% + var(--tl-space-3)));
|
|
3827
3888
|
}
|
|
3828
3889
|
}
|
|
3829
3890
|
|