tldraw 3.16.0-canary.39bd199a7aa6 → 3.16.0-canary.555a872cc1c7
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 +130 -6
- package/dist-cjs/index.js +14 -1
- package/dist-cjs/index.js.map +2 -2
- package/dist-cjs/lib/canvas/TldrawScribble.js +1 -1
- package/dist-cjs/lib/canvas/TldrawScribble.js.map +2 -2
- package/dist-cjs/lib/shapes/arrow/ArrowShapeUtil.js +3 -3
- package/dist-cjs/lib/shapes/arrow/ArrowShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/arrow/elbow/ElbowArrowDebug.js +3 -3
- package/dist-cjs/lib/shapes/arrow/elbow/ElbowArrowDebug.js.map +1 -1
- package/dist-cjs/lib/shapes/draw/DrawShapeUtil.js +3 -3
- package/dist-cjs/lib/shapes/draw/DrawShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/embed/EmbedShapeUtil.js +1 -1
- package/dist-cjs/lib/shapes/embed/EmbedShapeUtil.js.map +1 -1
- package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js +12 -12
- package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/frame/components/FrameHeading.js +1 -1
- package/dist-cjs/lib/shapes/frame/components/FrameHeading.js.map +2 -2
- package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js +2 -2
- package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/geo/components/GeoShapeBody.js +2 -1
- package/dist-cjs/lib/shapes/geo/components/GeoShapeBody.js.map +2 -2
- package/dist-cjs/lib/shapes/highlight/HighlightShapeUtil.js +5 -1
- package/dist-cjs/lib/shapes/highlight/HighlightShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/image/ImageShapeUtil.js +3 -3
- package/dist-cjs/lib/shapes/image/ImageShapeUtil.js.map +1 -1
- package/dist-cjs/lib/shapes/line/LineShapeUtil.js +5 -1
- package/dist-cjs/lib/shapes/line/LineShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/note/NoteShapeUtil.js +4 -4
- package/dist-cjs/lib/shapes/note/NoteShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/ShapeFill.js +5 -5
- package/dist-cjs/lib/shapes/shared/ShapeFill.js.map +2 -2
- package/dist-cjs/lib/shapes/shared/usePrefersReducedMotion.js +10 -1
- package/dist-cjs/lib/shapes/shared/usePrefersReducedMotion.js.map +2 -2
- package/dist-cjs/lib/shapes/text/TextShapeUtil.js +2 -2
- package/dist-cjs/lib/shapes/text/TextShapeUtil.js.map +2 -2
- package/dist-cjs/lib/shapes/video/VideoShapeUtil.js +3 -3
- package/dist-cjs/lib/shapes/video/VideoShapeUtil.js.map +1 -1
- package/dist-cjs/lib/tools/SelectTool/childStates/Translating.js.map +2 -2
- package/dist-cjs/lib/ui/TldrawUi.js +14 -0
- package/dist-cjs/lib/ui/TldrawUi.js.map +3 -3
- package/dist-cjs/lib/ui/components/AccessibilityMenu.js +35 -0
- package/dist-cjs/lib/ui/components/AccessibilityMenu.js.map +7 -0
- 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/MainMenu/DefaultMainMenuContent.js +3 -3
- package/dist-cjs/lib/ui/components/MainMenu/DefaultMainMenuContent.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/DefaultStylePanel.js +2 -0
- package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanel.js.map +2 -2
- package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js +171 -140
- 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 +5 -4
- package/dist-cjs/lib/ui/components/Toolbar/ToggleToolLockedButton.js.map +2 -2
- package/dist-cjs/lib/ui/components/menu-items.js +6 -0
- package/dist-cjs/lib/ui/components/menu-items.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 +30 -7
- package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js.map +2 -2
- package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js +253 -0
- package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map +7 -0
- 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 +152 -20
- package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js.map +2 -2
- package/dist-cjs/lib/ui/context/TldrawUiContextProvider.js +3 -2
- package/dist-cjs/lib/ui/context/TldrawUiContextProvider.js.map +2 -2
- package/dist-cjs/lib/ui/context/actions.js +15 -0
- package/dist-cjs/lib/ui/context/actions.js.map +2 -2
- package/dist-cjs/lib/ui/context/events.js.map +2 -2
- package/dist-cjs/lib/ui/hooks/useTools.js +76 -9
- package/dist-cjs/lib/ui/hooks/useTools.js.map +2 -2
- package/dist-cjs/lib/ui/hooks/useTranslation/TLUiTranslationKey.js.map +1 -1
- package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js +3 -0
- package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.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 +130 -6
- package/dist-esm/index.mjs +25 -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 +6 -5
- package/dist-esm/lib/shapes/shared/ShapeFill.mjs.map +2 -2
- package/dist-esm/lib/shapes/shared/usePrefersReducedMotion.mjs +10 -1
- package/dist-esm/lib/shapes/shared/usePrefersReducedMotion.mjs.map +2 -2
- package/dist-esm/lib/shapes/text/TextShapeUtil.mjs +3 -2
- package/dist-esm/lib/shapes/text/TextShapeUtil.mjs.map +2 -2
- package/dist-esm/lib/shapes/video/VideoShapeUtil.mjs +3 -3
- package/dist-esm/lib/shapes/video/VideoShapeUtil.mjs.map +1 -1
- package/dist-esm/lib/tools/SelectTool/childStates/Translating.mjs.map +2 -2
- package/dist-esm/lib/ui/TldrawUi.mjs +16 -2
- package/dist-esm/lib/ui/TldrawUi.mjs.map +3 -3
- package/dist-esm/lib/ui/components/AccessibilityMenu.mjs +19 -0
- package/dist-esm/lib/ui/components/AccessibilityMenu.mjs.map +7 -0
- 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/MainMenu/DefaultMainMenuContent.mjs +3 -5
- package/dist-esm/lib/ui/components/MainMenu/DefaultMainMenuContent.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/DefaultStylePanel.mjs +3 -1
- package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanel.mjs.map +2 -2
- package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs +171 -140
- 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 +5 -4
- package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs.map +2 -2
- package/dist-esm/lib/ui/components/menu-items.mjs +6 -0
- package/dist-esm/lib/ui/components/menu-items.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 +30 -7
- package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs.map +2 -2
- package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs +230 -0
- package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map +7 -0
- 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 +160 -22
- package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs.map +2 -2
- package/dist-esm/lib/ui/context/TldrawUiContextProvider.mjs +3 -2
- package/dist-esm/lib/ui/context/TldrawUiContextProvider.mjs.map +2 -2
- package/dist-esm/lib/ui/context/actions.mjs +15 -0
- package/dist-esm/lib/ui/context/actions.mjs.map +2 -2
- package/dist-esm/lib/ui/context/events.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/useTools.mjs +83 -10
- package/dist-esm/lib/ui/hooks/useTools.mjs.map +2 -2
- package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs +3 -0
- package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs.map +2 -2
- package/dist-esm/lib/ui/version.mjs +3 -3
- package/dist-esm/lib/ui/version.mjs.map +1 -1
- package/package.json +3 -3
- package/src/index.ts +20 -0
- package/src/lib/canvas/TldrawScribble.tsx +1 -1
- package/src/lib/shapes/arrow/ArrowShapeUtil.tsx +4 -3
- package/src/lib/shapes/arrow/elbow/ElbowArrowDebug.tsx +3 -3
- package/src/lib/shapes/draw/DrawShapeUtil.tsx +4 -3
- package/src/lib/shapes/embed/EmbedShapeUtil.tsx +1 -1
- package/src/lib/shapes/frame/FrameShapeUtil.tsx +21 -14
- package/src/lib/shapes/frame/components/FrameHeading.tsx +1 -1
- package/src/lib/shapes/geo/GeoShapeUtil.tsx +3 -2
- package/src/lib/shapes/geo/components/GeoShapeBody.tsx +2 -2
- package/src/lib/shapes/highlight/HighlightShapeUtil.tsx +7 -1
- package/src/lib/shapes/image/ImageShapeUtil.tsx +3 -3
- package/src/lib/shapes/line/LineShapeUtil.tsx +6 -1
- package/src/lib/shapes/note/NoteShapeUtil.tsx +9 -4
- package/src/lib/shapes/shared/ShapeFill.tsx +6 -5
- package/src/lib/shapes/shared/usePrefersReducedMotion.tsx +11 -1
- package/src/lib/shapes/text/TextShapeUtil.tsx +3 -2
- package/src/lib/shapes/video/VideoShapeUtil.tsx +3 -3
- package/src/lib/tools/SelectTool/childStates/Translating.ts +0 -1
- package/src/lib/ui/TldrawUi.tsx +17 -2
- package/src/lib/ui/components/AccessibilityMenu.tsx +20 -0
- package/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx +15 -3
- package/src/lib/ui/components/DefaultMenuPanel.tsx +4 -3
- package/src/lib/ui/components/MainMenu/DefaultMainMenuContent.tsx +4 -4
- 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/DefaultStylePanel.tsx +3 -1
- package/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx +146 -107
- 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 +14 -11
- package/src/lib/ui/components/menu-items.tsx +8 -0
- 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 +51 -12
- package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx +301 -0
- 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 +218 -19
- package/src/lib/ui/context/TldrawUiContextProvider.tsx +23 -20
- package/src/lib/ui/context/actions.tsx +15 -0
- package/src/lib/ui/context/events.tsx +2 -0
- package/src/lib/ui/hooks/useTools.tsx +118 -10
- package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts +3 -0
- package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts +3 -0
- package/src/lib/ui/version.ts +3 -3
- package/src/lib/ui.css +402 -292
- package/tldraw.css +695 -580
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,116 +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%);
|
|
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);
|
|
170
174
|
/* Text */
|
|
171
|
-
--color-text: hsl(0, 0%, 0%);
|
|
172
|
-
--color-text-0: hsl(0, 0%, 11%);
|
|
173
|
-
--color-text-1: hsl(0, 0%, 18%);
|
|
174
|
-
--color-text-3: hsl(204, 4%, 45%);
|
|
175
|
-
--color-text-shadow: hsl(0, 0%, 100%);
|
|
176
|
-
--color-text-highlight: hsl(52, 100%, 50%);
|
|
177
|
-
--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);
|
|
178
182
|
/* Named */
|
|
179
|
-
--color-primary: hsl(214, 84%, 56%);
|
|
180
|
-
--color-success: hsl(123, 46%, 34%);
|
|
181
|
-
--color-info: hsl(201, 98%, 41%);
|
|
182
|
-
--color-warning: hsl(27, 98%, 47%);
|
|
183
|
-
--color-danger: hsl(0, 90%, 43%);
|
|
184
|
-
--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%);
|
|
185
189
|
/* Shadows */
|
|
186
|
-
--shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%);
|
|
187
|
-
--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:
|
|
188
192
|
0px 0px 2px hsl(0, 0%, 0%, 16%), 0px 2px 3px hsl(0, 0%, 0%, 24%),
|
|
189
|
-
0px 2px 6px hsl(0, 0%, 0%, 0.1), inset 0px 0px 0px 1px var(--color-panel-contrast);
|
|
190
|
-
--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:
|
|
191
195
|
0px 1px 2px hsl(0, 0%, 0%, 28%), 0px 2px 6px hsl(0, 0%, 0%, 14%),
|
|
192
|
-
inset 0px 0px 0px 1px var(--color-panel-contrast);
|
|
193
|
-
--shadow-4:
|
|
196
|
+
inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
|
|
197
|
+
--tl-shadow-4:
|
|
194
198
|
0px 0px 3px hsl(0, 0%, 0%, 19%), 0px 5px 4px hsl(0, 0%, 0%, 16%),
|
|
195
|
-
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);
|
|
196
200
|
}
|
|
197
201
|
|
|
198
202
|
.tl-theme__dark {
|
|
199
203
|
/* Canvas */
|
|
200
|
-
--color-snap: hsl(0, 76%, 60%);
|
|
201
|
-
--color-selection-fill: hsl(209, 100%, 57%, 20%);
|
|
202
|
-
--color-selection-stroke: hsl(214, 84%, 56%);
|
|
203
|
-
--color-background: hsl(240, 5%, 6.5%);
|
|
204
|
-
--color-brush-fill: hsl(0, 0%, 71%, 5.1%);
|
|
205
|
-
--color-brush-stroke: hsl(0, 0%, 71%, 25.1%);
|
|
206
|
-
--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%);
|
|
207
211
|
/* UI */
|
|
208
|
-
--color-low: hsl(260, 4.5%, 10.5%);
|
|
209
|
-
--color-low-border: hsl(207, 10%, 10%);
|
|
210
|
-
--color-culled: hsl(210, 11%, 19%);
|
|
211
|
-
--color-muted-none: hsl(0, 0%, 100%, 0%);
|
|
212
|
-
--color-muted-0: hsl(0, 0%, 100%, 2%);
|
|
213
|
-
--color-muted-1: hsl(0, 0%, 100%, 10%);
|
|
214
|
-
--color-muted-2: hsl(0, 0%, 100%, 5%);
|
|
215
|
-
--color-hint: hsl(0, 0%, 100%, 7%);
|
|
216
|
-
--color-overlay: hsl(0, 0%, 0%, 50%);
|
|
217
|
-
--color-divider: hsl(240, 9%, 22%);
|
|
218
|
-
--color-panel: hsl(235, 6.8%, 13.5%);
|
|
219
|
-
--color-panel-contrast: hsl(245, 12%, 23%);
|
|
220
|
-
--color-panel-overlay: hsl(210, 10%, 24%, 82%);
|
|
221
|
-
--color-panel-transparent: hsla(235, 6.8%, 13.5%, 0%);
|
|
222
|
-
--color-selected: hsl(217, 89%, 61%);
|
|
223
|
-
--color-selected-contrast: hsl(0, 0%, 100%);
|
|
224
|
-
--color-focus: hsl(217, 76%, 80%);
|
|
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);
|
|
225
230
|
/* Text */
|
|
226
|
-
--color-text: hsl(210, 17%, 98%);
|
|
227
|
-
--color-text-0: hsl(0, 9%, 94%);
|
|
228
|
-
--color-text-1: hsl(0, 0%, 85%);
|
|
229
|
-
--color-text-3: hsl(204, 4%, 75%);
|
|
230
|
-
--color-text-shadow: hsl(210, 13%, 18%);
|
|
231
|
-
--color-text-highlight: hsl(52, 100%, 41%);
|
|
232
|
-
--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);
|
|
233
238
|
/* Named */
|
|
234
|
-
--color-primary: hsl(214, 84%, 56%);
|
|
235
|
-
--color-success: hsl(123, 38%, 57%);
|
|
236
|
-
--color-info: hsl(199, 92%, 56%);
|
|
237
|
-
--color-warning: hsl(36, 100%, 57%);
|
|
238
|
-
--color-danger: hsl(0, 82%, 66%);
|
|
239
|
-
--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%);
|
|
240
245
|
/* Shadows */
|
|
241
|
-
--shadow-1:
|
|
246
|
+
--tl-shadow-1:
|
|
242
247
|
0px 1px 2px hsl(0, 0%, 0%, 16.1%), 0px 1px 3px hsl(0, 0%, 0%, 22%),
|
|
243
|
-
inset 0px 0px 0px 1px var(--color-panel-contrast);
|
|
244
|
-
--shadow-2:
|
|
248
|
+
inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
|
|
249
|
+
--tl-shadow-2:
|
|
245
250
|
0px 1px 3px hsl(0, 0%, 0%, 66.6%), 0px 2px 6px hsl(0, 0%, 0%, 33%),
|
|
246
|
-
inset 0px 0px 0px 1px var(--color-panel-contrast);
|
|
247
|
-
--shadow-3:
|
|
251
|
+
inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
|
|
252
|
+
--tl-shadow-3:
|
|
248
253
|
0px 1px 3px hsl(0, 0%, 0%, 50%), 0px 2px 12px hsl(0, 0%, 0%, 50%),
|
|
249
|
-
inset 0px 0px 0px 1px var(--color-panel-contrast);
|
|
254
|
+
inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
|
|
250
255
|
}
|
|
251
256
|
|
|
252
257
|
.tl-counter-scaled {
|
|
@@ -272,7 +277,7 @@
|
|
|
272
277
|
}
|
|
273
278
|
|
|
274
279
|
.tl-container__focused {
|
|
275
|
-
outline: 1px solid var(--color-low);
|
|
280
|
+
outline: 1px solid var(--tl-color-low);
|
|
276
281
|
}
|
|
277
282
|
|
|
278
283
|
input,
|
|
@@ -288,7 +293,7 @@ input,
|
|
|
288
293
|
inset: 0px;
|
|
289
294
|
height: 100%;
|
|
290
295
|
width: 100%;
|
|
291
|
-
color: var(--color-text);
|
|
296
|
+
color: var(--tl-color-text);
|
|
292
297
|
cursor: var(--tl-cursor);
|
|
293
298
|
overflow: clip;
|
|
294
299
|
content-visibility: auto;
|
|
@@ -298,7 +303,7 @@ input,
|
|
|
298
303
|
|
|
299
304
|
.tl-shapes {
|
|
300
305
|
position: relative;
|
|
301
|
-
z-index: var(--layer-canvas-shapes);
|
|
306
|
+
z-index: var(--tl-layer-canvas-shapes);
|
|
302
307
|
}
|
|
303
308
|
|
|
304
309
|
.tl-overlays {
|
|
@@ -309,7 +314,7 @@ input,
|
|
|
309
314
|
width: 100%;
|
|
310
315
|
contain: strict;
|
|
311
316
|
pointer-events: none;
|
|
312
|
-
z-index: var(--layer-canvas-overlays);
|
|
317
|
+
z-index: var(--tl-layer-canvas-overlays);
|
|
313
318
|
}
|
|
314
319
|
|
|
315
320
|
.tl-overlays__item {
|
|
@@ -333,7 +338,7 @@ input,
|
|
|
333
338
|
/* ------------------- Background ------------------- */
|
|
334
339
|
|
|
335
340
|
.tl-background__wrapper {
|
|
336
|
-
z-index: var(--layer-canvas-background);
|
|
341
|
+
z-index: var(--tl-layer-canvas-background);
|
|
337
342
|
position: absolute;
|
|
338
343
|
inset: 0px;
|
|
339
344
|
height: 100%;
|
|
@@ -341,7 +346,7 @@ input,
|
|
|
341
346
|
}
|
|
342
347
|
|
|
343
348
|
.tl-background {
|
|
344
|
-
background-color: var(--color-background);
|
|
349
|
+
background-color: var(--tl-color-background);
|
|
345
350
|
width: 100%;
|
|
346
351
|
height: 100%;
|
|
347
352
|
}
|
|
@@ -355,12 +360,12 @@ input,
|
|
|
355
360
|
height: 100%;
|
|
356
361
|
touch-action: none;
|
|
357
362
|
pointer-events: none;
|
|
358
|
-
z-index: var(--layer-canvas-grid);
|
|
363
|
+
z-index: var(--tl-layer-canvas-grid);
|
|
359
364
|
contain: strict;
|
|
360
365
|
}
|
|
361
366
|
|
|
362
367
|
.tl-grid-dot {
|
|
363
|
-
fill: var(--color-grid);
|
|
368
|
+
fill: var(--tl-color-grid);
|
|
364
369
|
}
|
|
365
370
|
|
|
366
371
|
/* --------------------- Layers --------------------- */
|
|
@@ -378,54 +383,54 @@ input,
|
|
|
378
383
|
|
|
379
384
|
/* back of the stack, behind user's stuff */
|
|
380
385
|
.tl-collaborator__scribble {
|
|
381
|
-
z-index: var(--layer-overlays-collaborator-scribble);
|
|
386
|
+
z-index: var(--tl-layer-overlays-collaborator-scribble);
|
|
382
387
|
}
|
|
383
388
|
|
|
384
389
|
.tl-collaborator__brush {
|
|
385
|
-
z-index: var(--layer-overlays-collaborator-brush);
|
|
390
|
+
z-index: var(--tl-layer-overlays-collaborator-brush);
|
|
386
391
|
}
|
|
387
392
|
|
|
388
393
|
.tl-collaborator__shape-indicator {
|
|
389
|
-
z-index: var(--layer-overlays-collaborator-shape-indicator);
|
|
394
|
+
z-index: var(--tl-layer-overlays-collaborator-shape-indicator);
|
|
390
395
|
}
|
|
391
396
|
|
|
392
397
|
.tl-user-scribble {
|
|
393
|
-
z-index: var(--layer-overlays-user-scribble);
|
|
398
|
+
z-index: var(--tl-layer-overlays-user-scribble);
|
|
394
399
|
}
|
|
395
400
|
|
|
396
401
|
.tl-user-brush {
|
|
397
|
-
z-index: var(--layer-overlays-user-brush);
|
|
402
|
+
z-index: var(--tl-layer-overlays-user-brush);
|
|
398
403
|
}
|
|
399
404
|
|
|
400
405
|
.tl-user-handles {
|
|
401
|
-
z-index: var(--layer-overlays-user-handles);
|
|
406
|
+
z-index: var(--tl-layer-overlays-user-handles);
|
|
402
407
|
}
|
|
403
408
|
|
|
404
409
|
.tl-user-snapline {
|
|
405
|
-
z-index: var(--layer-overlays-user-snapline);
|
|
410
|
+
z-index: var(--tl-layer-overlays-user-snapline);
|
|
406
411
|
}
|
|
407
412
|
|
|
408
413
|
.tl-selection__fg {
|
|
409
414
|
pointer-events: none;
|
|
410
|
-
z-index: var(--layer-overlays-selection-fg);
|
|
415
|
+
z-index: var(--tl-layer-overlays-selection-fg);
|
|
411
416
|
}
|
|
412
417
|
|
|
413
418
|
.tl-user-indicator__hint {
|
|
414
|
-
z-index: var(--layer-overlays-user-indicator-hint);
|
|
419
|
+
z-index: var(--tl-layer-overlays-user-indicator-hint);
|
|
415
420
|
stroke-width: calc(2.5px * var(--tl-scale));
|
|
416
421
|
}
|
|
417
422
|
|
|
418
423
|
.tl-custom-overlays {
|
|
419
|
-
z-index: var(--layer-overlays-custom);
|
|
424
|
+
z-index: var(--tl-layer-overlays-custom);
|
|
420
425
|
}
|
|
421
426
|
|
|
422
427
|
/* behind collaborator cursor */
|
|
423
428
|
.tl-collaborator__cursor-hint {
|
|
424
|
-
z-index: var(--layer-overlays-collaborator-cursor-hint);
|
|
429
|
+
z-index: var(--tl-layer-overlays-collaborator-cursor-hint);
|
|
425
430
|
}
|
|
426
431
|
|
|
427
432
|
.tl-collaborator__cursor {
|
|
428
|
-
z-index: var(--layer-overlays-collaborator-cursor);
|
|
433
|
+
z-index: var(--tl-layer-overlays-collaborator-cursor);
|
|
429
434
|
}
|
|
430
435
|
|
|
431
436
|
.tl-cursor {
|
|
@@ -446,32 +451,32 @@ input,
|
|
|
446
451
|
.tl-selection__fg__outline {
|
|
447
452
|
fill: none;
|
|
448
453
|
pointer-events: none;
|
|
449
|
-
stroke: var(--color-selection-stroke);
|
|
454
|
+
stroke: var(--tl-color-selection-stroke);
|
|
450
455
|
stroke-width: calc(1.5px * var(--tl-scale));
|
|
451
456
|
}
|
|
452
457
|
|
|
453
458
|
.tl-corner-handle {
|
|
454
459
|
pointer-events: none;
|
|
455
|
-
stroke: var(--color-selection-stroke);
|
|
456
|
-
fill: var(--color-background);
|
|
460
|
+
stroke: var(--tl-color-selection-stroke);
|
|
461
|
+
fill: var(--tl-color-background);
|
|
457
462
|
stroke-width: calc(1.5px * var(--tl-scale));
|
|
458
463
|
}
|
|
459
464
|
|
|
460
465
|
.tl-text-handle {
|
|
461
466
|
pointer-events: none;
|
|
462
|
-
fill: var(--color-selection-stroke);
|
|
467
|
+
fill: var(--tl-color-selection-stroke);
|
|
463
468
|
}
|
|
464
469
|
|
|
465
470
|
.tl-corner-crop-handle {
|
|
466
471
|
pointer-events: none;
|
|
467
472
|
fill: none;
|
|
468
|
-
stroke: var(--color-selection-stroke);
|
|
473
|
+
stroke: var(--tl-color-selection-stroke);
|
|
469
474
|
}
|
|
470
475
|
|
|
471
476
|
.tl-corner-crop-edge-handle {
|
|
472
477
|
pointer-events: none;
|
|
473
478
|
fill: none;
|
|
474
|
-
stroke: var(--color-selection-stroke);
|
|
479
|
+
stroke: var(--tl-color-selection-stroke);
|
|
475
480
|
}
|
|
476
481
|
|
|
477
482
|
.tl-mobile-rotate__bg {
|
|
@@ -481,8 +486,8 @@ input,
|
|
|
481
486
|
|
|
482
487
|
.tl-mobile-rotate__fg {
|
|
483
488
|
pointer-events: none;
|
|
484
|
-
stroke: var(--color-selection-stroke);
|
|
485
|
-
fill: var(--color-background);
|
|
489
|
+
stroke: var(--tl-color-selection-stroke);
|
|
490
|
+
fill: var(--tl-color-background);
|
|
486
491
|
stroke-width: calc(1.5px * var(--tl-scale));
|
|
487
492
|
}
|
|
488
493
|
|
|
@@ -512,8 +517,8 @@ input,
|
|
|
512
517
|
text-overflow: ellipsis;
|
|
513
518
|
font-size: 12px;
|
|
514
519
|
font-family: var(--font-body);
|
|
515
|
-
border-radius: var(--radius-2);
|
|
516
|
-
color: var(--color-selected-contrast);
|
|
520
|
+
border-radius: var(--tl-radius-2);
|
|
521
|
+
color: var(--tl-color-selected-contrast);
|
|
517
522
|
}
|
|
518
523
|
|
|
519
524
|
.tl-nametag-title {
|
|
@@ -531,7 +536,7 @@ input,
|
|
|
531
536
|
font-size: 12px;
|
|
532
537
|
font-family: var(--font-body);
|
|
533
538
|
text-shadow: var(--tl-text-outline);
|
|
534
|
-
color: var(--color-selected-contrast);
|
|
539
|
+
color: var(--tl-color-selected-contrast);
|
|
535
540
|
}
|
|
536
541
|
|
|
537
542
|
.tl-nametag-chat {
|
|
@@ -540,31 +545,31 @@ input,
|
|
|
540
545
|
left: 13px;
|
|
541
546
|
width: fit-content;
|
|
542
547
|
height: fit-content;
|
|
543
|
-
color: var(--color-selected-contrast);
|
|
548
|
+
color: var(--tl-color-selected-contrast);
|
|
544
549
|
white-space: nowrap;
|
|
545
550
|
position: absolute;
|
|
546
551
|
padding: 3px 6px;
|
|
547
552
|
font-size: 12px;
|
|
548
553
|
font-family: var(--font-body);
|
|
549
554
|
opacity: 1;
|
|
550
|
-
border-radius: var(--radius-2);
|
|
555
|
+
border-radius: var(--tl-radius-2);
|
|
551
556
|
}
|
|
552
557
|
|
|
553
558
|
.tl-cursor-chat {
|
|
554
559
|
position: absolute;
|
|
555
|
-
color: var(--color-selected-contrast);
|
|
560
|
+
color: var(--tl-color-selected-contrast);
|
|
556
561
|
white-space: nowrap;
|
|
557
562
|
padding: 3px 6px;
|
|
558
563
|
font-size: 12px;
|
|
559
564
|
font-family: var(--font-body);
|
|
560
565
|
pointer-events: none;
|
|
561
|
-
z-index: var(--layer-cursor);
|
|
566
|
+
z-index: var(--tl-layer-cursor);
|
|
562
567
|
margin-top: 16px;
|
|
563
568
|
margin-left: 13px;
|
|
564
569
|
opacity: 1;
|
|
565
570
|
border: none;
|
|
566
571
|
user-select: text;
|
|
567
|
-
border-radius: var(--radius-2);
|
|
572
|
+
border-radius: var(--tl-radius-2);
|
|
568
573
|
}
|
|
569
574
|
|
|
570
575
|
.tl-cursor-chat .tl-cursor-chat__bubble {
|
|
@@ -572,13 +577,13 @@ input,
|
|
|
572
577
|
}
|
|
573
578
|
|
|
574
579
|
.tl-cursor-chat::selection {
|
|
575
|
-
background: var(--color-selected);
|
|
576
|
-
color: var(--color-selected-contrast);
|
|
580
|
+
background: var(--tl-color-selected);
|
|
581
|
+
color: var(--tl-color-selected-contrast);
|
|
577
582
|
text-shadow: none;
|
|
578
583
|
}
|
|
579
584
|
|
|
580
585
|
.tl-cursor-chat::placeholder {
|
|
581
|
-
color: var(--color-selected-contrast);
|
|
586
|
+
color: var(--tl-color-selected-contrast);
|
|
582
587
|
opacity: 0.7;
|
|
583
588
|
}
|
|
584
589
|
|
|
@@ -649,7 +654,7 @@ input,
|
|
|
649
654
|
background: none;
|
|
650
655
|
border-image: none;
|
|
651
656
|
border: 0px;
|
|
652
|
-
caret-color: var(--color-text);
|
|
657
|
+
caret-color: var(--tl-color-text);
|
|
653
658
|
color: inherit;
|
|
654
659
|
column-count: initial !important;
|
|
655
660
|
display: inline-block;
|
|
@@ -681,7 +686,7 @@ input,
|
|
|
681
686
|
|
|
682
687
|
.tl-text-measure {
|
|
683
688
|
position: absolute;
|
|
684
|
-
z-index: var(--layer-canvas-hidden);
|
|
689
|
+
z-index: var(--tl-layer-canvas-hidden);
|
|
685
690
|
top: 0px;
|
|
686
691
|
left: 0px;
|
|
687
692
|
opacity: 0;
|
|
@@ -744,8 +749,8 @@ input,
|
|
|
744
749
|
}
|
|
745
750
|
|
|
746
751
|
.tl-text-input::selection {
|
|
747
|
-
background: var(--color-selected);
|
|
748
|
-
color: var(--color-selected-contrast);
|
|
752
|
+
background: var(--tl-color-selected);
|
|
753
|
+
color: var(--tl-color-selected-contrast);
|
|
749
754
|
text-shadow: none;
|
|
750
755
|
}
|
|
751
756
|
|
|
@@ -755,7 +760,7 @@ input,
|
|
|
755
760
|
display: flex;
|
|
756
761
|
justify-content: center;
|
|
757
762
|
align-items: center;
|
|
758
|
-
color: var(--color-text);
|
|
763
|
+
color: var(--tl-color-text);
|
|
759
764
|
text-shadow: var(--tl-text-outline);
|
|
760
765
|
line-height: inherit;
|
|
761
766
|
position: absolute;
|
|
@@ -799,7 +804,7 @@ input,
|
|
|
799
804
|
|
|
800
805
|
.tl-text-wrapper .tl-text-content {
|
|
801
806
|
pointer-events: all;
|
|
802
|
-
z-index: var(--layer-text-content);
|
|
807
|
+
z-index: var(--tl-layer-text-content);
|
|
803
808
|
}
|
|
804
809
|
|
|
805
810
|
.tl-text-label__inner > .tl-text-content {
|
|
@@ -809,7 +814,7 @@ input,
|
|
|
809
814
|
padding: inherit;
|
|
810
815
|
height: fit-content;
|
|
811
816
|
width: fit-content;
|
|
812
|
-
border-radius: var(--radius-1);
|
|
817
|
+
border-radius: var(--tl-radius-1);
|
|
813
818
|
max-width: 100%;
|
|
814
819
|
}
|
|
815
820
|
|
|
@@ -822,7 +827,7 @@ input,
|
|
|
822
827
|
}
|
|
823
828
|
|
|
824
829
|
.tl-text-wrapper[data-isselected='true'] .tl-text-input {
|
|
825
|
-
z-index: var(--layer-text-editor);
|
|
830
|
+
z-index: var(--tl-layer-text-editor);
|
|
826
831
|
pointer-events: all;
|
|
827
832
|
}
|
|
828
833
|
|
|
@@ -917,7 +922,7 @@ input,
|
|
|
917
922
|
}
|
|
918
923
|
|
|
919
924
|
.tl-rich-text a {
|
|
920
|
-
color: var(--color-primary);
|
|
925
|
+
color: var(--tl-color-primary);
|
|
921
926
|
text-decoration: underline;
|
|
922
927
|
}
|
|
923
928
|
|
|
@@ -940,14 +945,14 @@ input,
|
|
|
940
945
|
}
|
|
941
946
|
|
|
942
947
|
.tl-theme__dark .tl-rich-text mark {
|
|
943
|
-
background-color: var(--color-text-highlight);
|
|
948
|
+
background-color: var(--tl-color-text-highlight);
|
|
944
949
|
color: currentColor;
|
|
945
950
|
}
|
|
946
951
|
|
|
947
952
|
@supports (color: color(display-p3 1 1 1)) {
|
|
948
953
|
@media (color-gamut: p3) {
|
|
949
954
|
.tl-container:not(.tl-theme__force-sRGB) .tl-rich-text mark {
|
|
950
|
-
background-color: var(--color-text-highlight-p3);
|
|
955
|
+
background-color: var(--tl-color-text-highlight-p3);
|
|
951
956
|
}
|
|
952
957
|
}
|
|
953
958
|
}
|
|
@@ -959,15 +964,15 @@ input,
|
|
|
959
964
|
/* --------------------- Loading -------------------- */
|
|
960
965
|
|
|
961
966
|
.tl-loading {
|
|
962
|
-
background-color: var(--color-background);
|
|
963
|
-
color: var(--color-text-1);
|
|
967
|
+
background-color: var(--tl-color-background);
|
|
968
|
+
color: var(--tl-color-text-1);
|
|
964
969
|
height: 100%;
|
|
965
970
|
width: 100%;
|
|
966
971
|
display: flex;
|
|
967
972
|
flex-direction: column;
|
|
968
973
|
justify-content: center;
|
|
969
974
|
align-items: center;
|
|
970
|
-
gap: var(--space-2);
|
|
975
|
+
gap: var(--tl-space-2);
|
|
971
976
|
font-size: 14px;
|
|
972
977
|
font-weight: 500;
|
|
973
978
|
opacity: 0;
|
|
@@ -975,7 +980,7 @@ input,
|
|
|
975
980
|
animation-delay: 0.2s;
|
|
976
981
|
position: absolute;
|
|
977
982
|
inset: 0px;
|
|
978
|
-
z-index: var(--layer-canvas-blocker);
|
|
983
|
+
z-index: var(--tl-layer-canvas-blocker);
|
|
979
984
|
}
|
|
980
985
|
|
|
981
986
|
@keyframes tl-fade-in {
|
|
@@ -1008,8 +1013,8 @@ input,
|
|
|
1008
1013
|
}
|
|
1009
1014
|
|
|
1010
1015
|
.tl-brush__default {
|
|
1011
|
-
stroke: var(--color-brush-stroke);
|
|
1012
|
-
fill: var(--color-brush-fill);
|
|
1016
|
+
stroke: var(--tl-color-brush-stroke);
|
|
1017
|
+
fill: var(--tl-color-brush-fill);
|
|
1013
1018
|
}
|
|
1014
1019
|
|
|
1015
1020
|
/* -------------------- Scribble -------------------- */
|
|
@@ -1024,13 +1029,13 @@ input,
|
|
|
1024
1029
|
/* ---------------------- Snaps --------------------- */
|
|
1025
1030
|
|
|
1026
1031
|
.tl-snap-indicator {
|
|
1027
|
-
stroke: var(--color-snap);
|
|
1032
|
+
stroke: var(--tl-color-snap);
|
|
1028
1033
|
stroke-width: calc(1px * var(--tl-scale));
|
|
1029
1034
|
fill: none;
|
|
1030
1035
|
}
|
|
1031
1036
|
|
|
1032
1037
|
.tl-snap-point {
|
|
1033
|
-
stroke: var(--color-snap);
|
|
1038
|
+
stroke: var(--tl-color-snap);
|
|
1034
1039
|
stroke-width: calc(1px * var(--tl-scale));
|
|
1035
1040
|
fill: none;
|
|
1036
1041
|
}
|
|
@@ -1050,7 +1055,7 @@ input,
|
|
|
1050
1055
|
justify-content: center;
|
|
1051
1056
|
font-size: 12px;
|
|
1052
1057
|
font-weight: 400;
|
|
1053
|
-
color: var(--color-text-1);
|
|
1058
|
+
color: var(--tl-color-text-1);
|
|
1054
1059
|
padding: 13px;
|
|
1055
1060
|
cursor: var(--tl-cursor-pointer);
|
|
1056
1061
|
border: none;
|
|
@@ -1068,13 +1073,13 @@ input,
|
|
|
1068
1073
|
display: block;
|
|
1069
1074
|
width: calc(100% - 12px);
|
|
1070
1075
|
height: calc(100% - 12px);
|
|
1071
|
-
border-radius: var(--radius-1);
|
|
1072
|
-
background-color: var(--color-background);
|
|
1076
|
+
border-radius: var(--tl-radius-1);
|
|
1077
|
+
background-color: var(--tl-color-background);
|
|
1073
1078
|
pointer-events: none;
|
|
1074
1079
|
}
|
|
1075
1080
|
|
|
1076
1081
|
.tl-hyperlink-button:focus-visible {
|
|
1077
|
-
color: var(--color-selected);
|
|
1082
|
+
color: var(--tl-color-selected);
|
|
1078
1083
|
}
|
|
1079
1084
|
|
|
1080
1085
|
.tl-hyperlink__icon {
|
|
@@ -1101,8 +1106,8 @@ input,
|
|
|
1101
1106
|
}
|
|
1102
1107
|
|
|
1103
1108
|
.tl-handle__fg {
|
|
1104
|
-
fill: var(--color-selected-contrast);
|
|
1105
|
-
stroke: var(--color-selection-stroke);
|
|
1109
|
+
fill: var(--tl-color-selected-contrast);
|
|
1110
|
+
stroke: var(--tl-color-selection-stroke);
|
|
1106
1111
|
stroke-width: calc(1.5px * var(--tl-scale));
|
|
1107
1112
|
pointer-events: none;
|
|
1108
1113
|
}
|
|
@@ -1112,7 +1117,7 @@ input,
|
|
|
1112
1117
|
}
|
|
1113
1118
|
|
|
1114
1119
|
.tl-handle__clone > .tl-handle__fg {
|
|
1115
|
-
fill: var(--color-selection-stroke);
|
|
1120
|
+
fill: var(--tl-color-selection-stroke);
|
|
1116
1121
|
stroke: none;
|
|
1117
1122
|
}
|
|
1118
1123
|
|
|
@@ -1122,7 +1127,7 @@ input,
|
|
|
1122
1127
|
|
|
1123
1128
|
@media (pointer: coarse) {
|
|
1124
1129
|
.tl-handle__bg:active {
|
|
1125
|
-
fill: var(--color-selection-fill);
|
|
1130
|
+
fill: var(--tl-color-selection-fill);
|
|
1126
1131
|
}
|
|
1127
1132
|
|
|
1128
1133
|
.tl-handle__create {
|
|
@@ -1178,13 +1183,13 @@ input,
|
|
|
1178
1183
|
stroke-linejoin: round;
|
|
1179
1184
|
/* content-visibility: auto; */
|
|
1180
1185
|
transform-origin: top left;
|
|
1181
|
-
color: var(--color-text-1);
|
|
1186
|
+
color: var(--tl-color-text-1);
|
|
1182
1187
|
}
|
|
1183
1188
|
|
|
1184
1189
|
/* -------------------- Group shape ------------------ */
|
|
1185
1190
|
|
|
1186
1191
|
.tl-group {
|
|
1187
|
-
stroke: var(--color-text);
|
|
1192
|
+
stroke: var(--tl-color-text);
|
|
1188
1193
|
stroke-width: calc(1px * var(--tl-scale));
|
|
1189
1194
|
opacity: 0.5;
|
|
1190
1195
|
}
|
|
@@ -1202,12 +1207,12 @@ input,
|
|
|
1202
1207
|
justify-content: center;
|
|
1203
1208
|
align-items: center;
|
|
1204
1209
|
text-align: center;
|
|
1205
|
-
color: var(--color-text);
|
|
1210
|
+
color: var(--tl-color-text);
|
|
1206
1211
|
text-shadow: var(--tl-text-outline);
|
|
1207
1212
|
}
|
|
1208
1213
|
|
|
1209
1214
|
.tl-shape[data-shape-type='arrow'] .tl-text-label__inner {
|
|
1210
|
-
border-radius: var(--radius-1);
|
|
1215
|
+
border-radius: var(--tl-radius-1);
|
|
1211
1216
|
box-sizing: content-box;
|
|
1212
1217
|
height: max-content;
|
|
1213
1218
|
width: max-content;
|
|
@@ -1218,22 +1223,22 @@ input,
|
|
|
1218
1223
|
}
|
|
1219
1224
|
|
|
1220
1225
|
.tl-arrow-hint {
|
|
1221
|
-
stroke: var(--color-text-1);
|
|
1226
|
+
stroke: var(--tl-color-text-1);
|
|
1222
1227
|
fill: none;
|
|
1223
1228
|
stroke-linecap: round;
|
|
1224
1229
|
overflow: visible;
|
|
1225
1230
|
}
|
|
1226
1231
|
|
|
1227
1232
|
.tl-arrow-hint-handle {
|
|
1228
|
-
fill: var(--color-selected-contrast);
|
|
1229
|
-
stroke: var(--color-selection-stroke);
|
|
1233
|
+
fill: var(--tl-color-selected-contrast);
|
|
1234
|
+
stroke: var(--tl-color-selection-stroke);
|
|
1230
1235
|
stroke-width: calc(1.5px * var(--tl-scale));
|
|
1231
1236
|
r: calc(4px * var(--tl-scale));
|
|
1232
1237
|
}
|
|
1233
1238
|
|
|
1234
1239
|
.tl-arrow-hint-snap {
|
|
1235
1240
|
stroke: transparent;
|
|
1236
|
-
fill: var(--color-selection-fill);
|
|
1241
|
+
fill: var(--tl-color-selection-fill);
|
|
1237
1242
|
r: calc(12px * var(--tl-scale));
|
|
1238
1243
|
}
|
|
1239
1244
|
|
|
@@ -1253,40 +1258,40 @@ input,
|
|
|
1253
1258
|
width: 100%;
|
|
1254
1259
|
height: 100%;
|
|
1255
1260
|
position: relative;
|
|
1256
|
-
border: 1px solid var(--color-panel-contrast);
|
|
1257
|
-
background-color: var(--color-panel);
|
|
1258
|
-
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);
|
|
1259
1264
|
display: flex;
|
|
1260
1265
|
flex-direction: column;
|
|
1261
1266
|
overflow: hidden;
|
|
1262
1267
|
}
|
|
1263
1268
|
|
|
1264
1269
|
.tl-bookmark__container--safariExport {
|
|
1265
|
-
border: 1px solid var(--color-divider);
|
|
1270
|
+
border: 1px solid var(--tl-color-divider);
|
|
1266
1271
|
}
|
|
1267
1272
|
|
|
1268
1273
|
.tl-bookmark__image_container {
|
|
1269
1274
|
flex: 1 1 100%;
|
|
1270
1275
|
overflow: hidden;
|
|
1271
|
-
border-top-left-radius: var(--radius-1);
|
|
1272
|
-
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);
|
|
1273
1278
|
width: 100%;
|
|
1274
1279
|
height: 100%;
|
|
1275
1280
|
display: flex;
|
|
1276
1281
|
justify-content: flex-end;
|
|
1277
1282
|
align-items: flex-start;
|
|
1278
|
-
box-shadow: inset 0px 0px 0px 1px var(--color-divider);
|
|
1283
|
+
box-shadow: inset 0px 0px 0px 1px var(--tl-color-divider);
|
|
1279
1284
|
}
|
|
1280
1285
|
|
|
1281
1286
|
.tl-bookmark__image_container > .tl-hyperlink-button::after {
|
|
1282
|
-
background-color: var(--color-panel);
|
|
1287
|
+
background-color: var(--tl-color-panel);
|
|
1283
1288
|
}
|
|
1284
1289
|
|
|
1285
1290
|
.tl-bookmark__placeholder {
|
|
1286
1291
|
width: 100%;
|
|
1287
1292
|
height: 100%;
|
|
1288
|
-
background-color: var(--color-muted-2);
|
|
1289
|
-
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);
|
|
1290
1295
|
}
|
|
1291
1296
|
|
|
1292
1297
|
.tl-bookmark__image {
|
|
@@ -1294,12 +1299,12 @@ input,
|
|
|
1294
1299
|
height: 100%;
|
|
1295
1300
|
object-fit: cover;
|
|
1296
1301
|
object-position: center;
|
|
1297
|
-
border-bottom: 1px solid var(--color-muted-2);
|
|
1302
|
+
border-bottom: 1px solid var(--tl-color-muted-2);
|
|
1298
1303
|
}
|
|
1299
1304
|
|
|
1300
1305
|
.tl-bookmark__copy_container {
|
|
1301
|
-
background-color: var(--color-muted-0);
|
|
1302
|
-
padding: var(--space-4);
|
|
1306
|
+
background-color: var(--tl-color-muted-0);
|
|
1307
|
+
padding: var(--tl-space-4);
|
|
1303
1308
|
pointer-events: all;
|
|
1304
1309
|
display: flex;
|
|
1305
1310
|
flex-direction: column;
|
|
@@ -1319,7 +1324,7 @@ input,
|
|
|
1319
1324
|
font-size: 16px;
|
|
1320
1325
|
line-height: 1.6;
|
|
1321
1326
|
font-weight: bold;
|
|
1322
|
-
padding-bottom: var(--space-2);
|
|
1327
|
+
padding-bottom: var(--tl-space-2);
|
|
1323
1328
|
overflow: hidden;
|
|
1324
1329
|
max-height: calc((16px * 1.6) * 2);
|
|
1325
1330
|
-webkit-box-orient: vertical;
|
|
@@ -1339,19 +1344,19 @@ input,
|
|
|
1339
1344
|
line-clamp: 3;
|
|
1340
1345
|
text-overflow: ellipsis;
|
|
1341
1346
|
display: -webkit-box;
|
|
1342
|
-
color: var(--color-text-2);
|
|
1343
|
-
margin: var(--space-2) 0px;
|
|
1347
|
+
color: var(--tl-color-text-2);
|
|
1348
|
+
margin: var(--tl-space-2) 0px;
|
|
1344
1349
|
}
|
|
1345
1350
|
|
|
1346
1351
|
.tl-bookmark__heading + .tl-bookmark__link,
|
|
1347
1352
|
.tl-bookmark__description + .tl-bookmark__link {
|
|
1348
|
-
margin-top: var(--space-3);
|
|
1353
|
+
margin-top: var(--tl-space-3);
|
|
1349
1354
|
}
|
|
1350
1355
|
.tl-bookmark__link {
|
|
1351
1356
|
font-size: 12px;
|
|
1352
1357
|
pointer-events: all;
|
|
1353
1358
|
display: flex;
|
|
1354
|
-
color: var(--color-text-2);
|
|
1359
|
+
color: var(--tl-color-text-2);
|
|
1355
1360
|
align-items: center;
|
|
1356
1361
|
cursor: var(--tl-cursor-pointer);
|
|
1357
1362
|
width: fit-content;
|
|
@@ -1393,7 +1398,7 @@ input,
|
|
|
1393
1398
|
width: 100%;
|
|
1394
1399
|
height: 100%;
|
|
1395
1400
|
pointer-events: all;
|
|
1396
|
-
/* background-color: var(--color-background); */
|
|
1401
|
+
/* background-color: var(--tl-color-background); */
|
|
1397
1402
|
|
|
1398
1403
|
display: flex;
|
|
1399
1404
|
justify-content: center;
|
|
@@ -1422,7 +1427,7 @@ input,
|
|
|
1422
1427
|
height: 100%;
|
|
1423
1428
|
pointer-events: all;
|
|
1424
1429
|
opacity: 1;
|
|
1425
|
-
z-index: var(--layer-text-container);
|
|
1430
|
+
z-index: var(--tl-layer-text-container);
|
|
1426
1431
|
border-radius: 1px;
|
|
1427
1432
|
}
|
|
1428
1433
|
|
|
@@ -1438,22 +1443,22 @@ input,
|
|
|
1438
1443
|
}
|
|
1439
1444
|
|
|
1440
1445
|
.tl-frame__creating {
|
|
1441
|
-
stroke: var(--color-selected);
|
|
1446
|
+
stroke: var(--tl-color-selected);
|
|
1442
1447
|
fill: none;
|
|
1443
1448
|
}
|
|
1444
1449
|
|
|
1445
1450
|
.tl-frame-heading {
|
|
1446
|
-
--frame-padding-x: 6px;
|
|
1447
|
-
--frame-height: 24px;
|
|
1448
|
-
--frame-minimum-width: 32px;
|
|
1449
|
-
--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;
|
|
1450
1455
|
display: flex;
|
|
1451
1456
|
align-items: center;
|
|
1452
1457
|
position: absolute;
|
|
1453
1458
|
transform-origin: 0% 100%;
|
|
1454
1459
|
overflow: hidden;
|
|
1455
1460
|
max-width: 100%;
|
|
1456
|
-
min-width: var(--frame-minimum-width);
|
|
1461
|
+
min-width: var(--tl-frame-minimum-width);
|
|
1457
1462
|
height: auto;
|
|
1458
1463
|
font-size: 12px;
|
|
1459
1464
|
padding-bottom: 4px;
|
|
@@ -1465,18 +1470,18 @@ input,
|
|
|
1465
1470
|
/* scale from bottom left corner so we can pin it to the top left corner of the frame */
|
|
1466
1471
|
transform-origin: 0% 100%;
|
|
1467
1472
|
display: flex;
|
|
1468
|
-
height: var(--frame-height);
|
|
1473
|
+
height: var(--tl-frame-height);
|
|
1469
1474
|
width: 100%;
|
|
1470
1475
|
align-items: center;
|
|
1471
|
-
border-radius: var(--radius-1);
|
|
1476
|
+
border-radius: var(--tl-radius-1);
|
|
1472
1477
|
}
|
|
1473
1478
|
|
|
1474
1479
|
.tl-frame-label {
|
|
1475
1480
|
pointer-events: all;
|
|
1476
1481
|
overflow: hidden;
|
|
1477
1482
|
text-overflow: ellipsis;
|
|
1478
|
-
padding: 0px var(--frame-padding-x);
|
|
1479
|
-
border-radius: var(--radius-1);
|
|
1483
|
+
padding: 0px var(--tl-frame-padding-x);
|
|
1484
|
+
border-radius: var(--tl-radius-1);
|
|
1480
1485
|
position: relative;
|
|
1481
1486
|
font-size: inherit;
|
|
1482
1487
|
white-space: pre;
|
|
@@ -1486,12 +1491,12 @@ input,
|
|
|
1486
1491
|
color: transparent;
|
|
1487
1492
|
white-space: pre;
|
|
1488
1493
|
width: auto;
|
|
1489
|
-
min-width: var(--frame-minimum-width);
|
|
1494
|
+
min-width: var(--tl-frame-minimum-width);
|
|
1490
1495
|
height: 100%;
|
|
1491
1496
|
overflow: visible;
|
|
1492
|
-
background-color: var(--color-panel);
|
|
1493
|
-
border-color: var(--color-selected);
|
|
1494
|
-
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);
|
|
1495
1500
|
}
|
|
1496
1501
|
|
|
1497
1502
|
.tl-frame-name-input {
|
|
@@ -1499,7 +1504,7 @@ input,
|
|
|
1499
1504
|
border: none;
|
|
1500
1505
|
background: none;
|
|
1501
1506
|
outline: none;
|
|
1502
|
-
padding: 0px var(--frame-padding-x);
|
|
1507
|
+
padding: 0px var(--tl-frame-padding-x);
|
|
1503
1508
|
inset: 0px;
|
|
1504
1509
|
height: 100%;
|
|
1505
1510
|
width: 100%;
|
|
@@ -1507,8 +1512,8 @@ input,
|
|
|
1507
1512
|
font-family: inherit;
|
|
1508
1513
|
font-weight: inherit;
|
|
1509
1514
|
width: 100%;
|
|
1510
|
-
color: var(--color-text-1);
|
|
1511
|
-
border-radius: var(--radius-1);
|
|
1515
|
+
color: var(--tl-color-text-1);
|
|
1516
|
+
border-radius: var(--tl-radius-1);
|
|
1512
1517
|
user-select: all;
|
|
1513
1518
|
-webkit-user-select: text;
|
|
1514
1519
|
white-space: pre;
|
|
@@ -1528,7 +1533,7 @@ input,
|
|
|
1528
1533
|
|
|
1529
1534
|
.tl-embed {
|
|
1530
1535
|
border: none;
|
|
1531
|
-
border-radius: var(--radius-2);
|
|
1536
|
+
border-radius: var(--tl-radius-2);
|
|
1532
1537
|
}
|
|
1533
1538
|
|
|
1534
1539
|
/* -------------- Shape error boundary -------------- */
|
|
@@ -1536,11 +1541,11 @@ input,
|
|
|
1536
1541
|
.tl-shape-error-boundary {
|
|
1537
1542
|
width: 100%;
|
|
1538
1543
|
height: 100%;
|
|
1539
|
-
background-color: var(--color-muted-1);
|
|
1544
|
+
background-color: var(--tl-color-muted-1);
|
|
1540
1545
|
border-width: calc(1px * var(--tl-scale));
|
|
1541
|
-
border-color: var(--color-muted-1);
|
|
1546
|
+
border-color: var(--tl-color-muted-1);
|
|
1542
1547
|
border-style: solid;
|
|
1543
|
-
border-radius: calc(var(--radius-1) * var(--tl-scale));
|
|
1548
|
+
border-radius: calc(var(--tl-radius-1) * var(--tl-scale));
|
|
1544
1549
|
display: flex;
|
|
1545
1550
|
flex-direction: column;
|
|
1546
1551
|
align-items: center;
|
|
@@ -1549,7 +1554,7 @@ input,
|
|
|
1549
1554
|
position: relative;
|
|
1550
1555
|
pointer-events: all;
|
|
1551
1556
|
overflow: hidden;
|
|
1552
|
-
padding: var(--space-2);
|
|
1557
|
+
padding: var(--tl-space-2);
|
|
1553
1558
|
}
|
|
1554
1559
|
|
|
1555
1560
|
.tl-shape-error-boundary::before {
|
|
@@ -1557,7 +1562,7 @@ input,
|
|
|
1557
1562
|
content: 'Error';
|
|
1558
1563
|
font-size: 12px;
|
|
1559
1564
|
font-family: inherit;
|
|
1560
|
-
color: var(--color-text-0);
|
|
1565
|
+
color: var(--tl-color-text-0);
|
|
1561
1566
|
}
|
|
1562
1567
|
|
|
1563
1568
|
/* ----------------- Error boundary ----------------- */
|
|
@@ -1568,9 +1573,9 @@ input,
|
|
|
1568
1573
|
display: flex;
|
|
1569
1574
|
align-items: center;
|
|
1570
1575
|
justify-content: center;
|
|
1571
|
-
padding: var(--space-4);
|
|
1572
|
-
background-color: var(--color-background);
|
|
1573
|
-
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);
|
|
1574
1579
|
position: absolute;
|
|
1575
1580
|
}
|
|
1576
1581
|
|
|
@@ -1579,8 +1584,8 @@ input,
|
|
|
1579
1584
|
inset: 0px;
|
|
1580
1585
|
height: 100%;
|
|
1581
1586
|
width: 100%;
|
|
1582
|
-
z-index: var(--layer-error-overlay);
|
|
1583
|
-
background-color: var(--color-overlay);
|
|
1587
|
+
z-index: var(--tl-layer-error-overlay);
|
|
1588
|
+
background-color: var(--tl-color-overlay);
|
|
1584
1589
|
}
|
|
1585
1590
|
|
|
1586
1591
|
.tl-error-boundary__content * {
|
|
@@ -1595,7 +1600,7 @@ input,
|
|
|
1595
1600
|
inset: 0px;
|
|
1596
1601
|
height: 100%;
|
|
1597
1602
|
width: 100%;
|
|
1598
|
-
z-index: var(--layer-error-canvas);
|
|
1603
|
+
z-index: var(--tl-layer-error-canvas);
|
|
1599
1604
|
}
|
|
1600
1605
|
|
|
1601
1606
|
/* some browsers seem to have some weird interactions between stacking contexts
|
|
@@ -1608,7 +1613,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1608
1613
|
inset: 0px;
|
|
1609
1614
|
height: 100%;
|
|
1610
1615
|
width: 100%;
|
|
1611
|
-
z-index: var(--layer-error-canvas-after);
|
|
1616
|
+
z-index: var(--tl-layer-error-canvas-after);
|
|
1612
1617
|
pointer-events: all;
|
|
1613
1618
|
}
|
|
1614
1619
|
|
|
@@ -1618,16 +1623,16 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1618
1623
|
max-width: 100%;
|
|
1619
1624
|
width: 400px;
|
|
1620
1625
|
max-height: 100%;
|
|
1621
|
-
background-color: var(--color-panel);
|
|
1626
|
+
background-color: var(--tl-color-panel);
|
|
1622
1627
|
padding: 16px;
|
|
1623
1628
|
border-radius: 16px;
|
|
1624
|
-
box-shadow: var(--shadow-2);
|
|
1629
|
+
box-shadow: var(--tl-shadow-2);
|
|
1625
1630
|
font-size: 14px;
|
|
1626
1631
|
font-weight: 400;
|
|
1627
1632
|
display: flex;
|
|
1628
1633
|
flex-direction: column;
|
|
1629
1634
|
overflow: auto;
|
|
1630
|
-
z-index: var(--layer-error-content);
|
|
1635
|
+
z-index: var(--tl-layer-error-content);
|
|
1631
1636
|
gap: 12px;
|
|
1632
1637
|
}
|
|
1633
1638
|
|
|
@@ -1642,10 +1647,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1642
1647
|
}
|
|
1643
1648
|
|
|
1644
1649
|
.tl-error-boundary__content h4 {
|
|
1645
|
-
border: 1px solid var(--color-low-border);
|
|
1650
|
+
border: 1px solid var(--tl-color-low-border);
|
|
1646
1651
|
margin: -6px 0 0 0;
|
|
1647
|
-
padding: var(--space-5);
|
|
1648
|
-
border-radius: var(--radius-2);
|
|
1652
|
+
padding: var(--tl-space-5);
|
|
1653
|
+
border-radius: var(--tl-radius-2);
|
|
1649
1654
|
font-weight: normal;
|
|
1650
1655
|
}
|
|
1651
1656
|
|
|
@@ -1655,10 +1660,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1655
1660
|
}
|
|
1656
1661
|
|
|
1657
1662
|
.tl-error-boundary__content pre {
|
|
1658
|
-
background-color: var(--color-muted-2);
|
|
1663
|
+
background-color: var(--tl-color-muted-2);
|
|
1659
1664
|
margin-top: 0;
|
|
1660
|
-
padding: var(--space-5);
|
|
1661
|
-
border-radius: var(--radius-2);
|
|
1665
|
+
padding: var(--tl-space-5);
|
|
1666
|
+
border-radius: var(--tl-radius-2);
|
|
1662
1667
|
overflow: auto;
|
|
1663
1668
|
font-size: 12px;
|
|
1664
1669
|
max-height: 320px;
|
|
@@ -1670,15 +1675,15 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1670
1675
|
font-family: inherit;
|
|
1671
1676
|
font-size: 14px;
|
|
1672
1677
|
font-weight: 500;
|
|
1673
|
-
padding: var(--space-4);
|
|
1674
|
-
border-radius: var(--radius-3);
|
|
1678
|
+
padding: var(--tl-space-4);
|
|
1679
|
+
border-radius: var(--tl-radius-3);
|
|
1675
1680
|
cursor: var(--tl-cursor-pointer);
|
|
1676
1681
|
color: inherit;
|
|
1677
1682
|
background-color: transparent;
|
|
1678
1683
|
}
|
|
1679
1684
|
|
|
1680
1685
|
.tl-error-boundary__content a {
|
|
1681
|
-
color: var(--color-selected);
|
|
1686
|
+
color: var(--tl-color-selected);
|
|
1682
1687
|
font-weight: 500;
|
|
1683
1688
|
text-decoration: none;
|
|
1684
1689
|
}
|
|
@@ -1690,31 +1695,31 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1690
1695
|
|
|
1691
1696
|
.tl-error-boundary__content__error button {
|
|
1692
1697
|
position: absolute;
|
|
1693
|
-
top: var(--space-2);
|
|
1694
|
-
right: var(--space-2);
|
|
1698
|
+
top: var(--tl-space-2);
|
|
1699
|
+
right: var(--tl-space-2);
|
|
1695
1700
|
font-size: 12px;
|
|
1696
|
-
padding: var(--space-2) var(--space-3);
|
|
1697
|
-
background-color: var(--color-panel);
|
|
1698
|
-
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);
|
|
1699
1704
|
}
|
|
1700
1705
|
|
|
1701
1706
|
.tl-error-boundary__content__actions {
|
|
1702
1707
|
display: flex;
|
|
1703
1708
|
justify-content: space-between;
|
|
1704
|
-
gap: var(--space-4);
|
|
1709
|
+
gap: var(--tl-space-4);
|
|
1705
1710
|
margin: 0px;
|
|
1706
1711
|
margin-left: -4px;
|
|
1707
1712
|
}
|
|
1708
1713
|
.tl-error-boundary__content__actions__group {
|
|
1709
1714
|
display: flex;
|
|
1710
|
-
gap: var(--space-4);
|
|
1715
|
+
gap: var(--tl-space-4);
|
|
1711
1716
|
}
|
|
1712
1717
|
.tl-error-boundary__content .tl-error-boundary__reset {
|
|
1713
|
-
color: var(--color-danger);
|
|
1718
|
+
color: var(--tl-color-danger);
|
|
1714
1719
|
}
|
|
1715
1720
|
.tl-error-boundary__content .tl-error-boundary__refresh {
|
|
1716
|
-
background-color: var(--color-primary);
|
|
1717
|
-
color: var(--color-selected-contrast);
|
|
1721
|
+
background-color: var(--tl-color-primary);
|
|
1722
|
+
color: var(--tl-color-selected-contrast);
|
|
1718
1723
|
}
|
|
1719
1724
|
.tl-container__focused:not(.tl-container__no-focus-ring)
|
|
1720
1725
|
.tlui-button.tl-error-boundary__refresh:focus-visible {
|
|
@@ -1726,7 +1731,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1726
1731
|
|
|
1727
1732
|
.tl-hit-test-blocker {
|
|
1728
1733
|
position: absolute;
|
|
1729
|
-
z-index: var(--layer-canvas-blocker);
|
|
1734
|
+
z-index: var(--tl-layer-canvas-blocker);
|
|
1730
1735
|
inset: 0px;
|
|
1731
1736
|
width: 100%;
|
|
1732
1737
|
height: 100%;
|
|
@@ -1746,32 +1751,32 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1746
1751
|
|
|
1747
1752
|
.tl-handle__bg:hover {
|
|
1748
1753
|
cursor: var(--tl-cursor-grab);
|
|
1749
|
-
fill: var(--color-selection-fill);
|
|
1754
|
+
fill: var(--tl-color-selection-fill);
|
|
1750
1755
|
}
|
|
1751
1756
|
|
|
1752
1757
|
.tl-bookmark__link:hover {
|
|
1753
|
-
color: var(--color-selected);
|
|
1758
|
+
color: var(--tl-color-selected);
|
|
1754
1759
|
}
|
|
1755
1760
|
|
|
1756
1761
|
.tl-hyperlink-button:hover {
|
|
1757
|
-
color: var(--color-selected);
|
|
1762
|
+
color: var(--tl-color-selected);
|
|
1758
1763
|
}
|
|
1759
1764
|
|
|
1760
1765
|
.tl-error-boundary__content button:hover {
|
|
1761
|
-
background-color: var(--color-low);
|
|
1766
|
+
background-color: var(--tl-color-low);
|
|
1762
1767
|
}
|
|
1763
1768
|
.tl-error-boundary__content a:hover {
|
|
1764
|
-
color: var(--color-text-1);
|
|
1769
|
+
color: var(--tl-color-text-1);
|
|
1765
1770
|
}
|
|
1766
1771
|
.tl-error-boundary__content .tl-error-boundary__refresh:hover {
|
|
1767
|
-
background-color: var(--color-primary);
|
|
1772
|
+
background-color: var(--tl-color-primary);
|
|
1768
1773
|
opacity: 0.9;
|
|
1769
1774
|
}
|
|
1770
1775
|
|
|
1771
1776
|
/* These three rules help preserve clicking into specific points in text areas *while*
|
|
1772
1777
|
* already in edit mode when jumping from shape to shape. */
|
|
1773
1778
|
.tl-canvas[data-iseditinganything='true'] .tl-text-wrapper:hover .tl-text-input {
|
|
1774
|
-
z-index: var(--layer-text-editor);
|
|
1779
|
+
z-index: var(--tl-layer-text-editor);
|
|
1775
1780
|
pointer-events: all;
|
|
1776
1781
|
}
|
|
1777
1782
|
}
|
|
@@ -1779,15 +1784,15 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1779
1784
|
/* @tldraw/ui */
|
|
1780
1785
|
|
|
1781
1786
|
.tl-container {
|
|
1782
|
-
--layer-above: 1;
|
|
1783
|
-
--layer-focused-input: 10;
|
|
1784
|
-
--layer-menu-click-capture: 250;
|
|
1785
|
-
--layer-panels: 300;
|
|
1786
|
-
--layer-menus: 400;
|
|
1787
|
-
--layer-toasts: 650;
|
|
1788
|
-
--layer-cursor: 700;
|
|
1789
|
-
--layer-header-footer: 999;
|
|
1790
|
-
--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;
|
|
1791
1796
|
}
|
|
1792
1797
|
|
|
1793
1798
|
/* Button */
|
|
@@ -1811,23 +1816,23 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1811
1816
|
text-rendering: optimizeLegibility;
|
|
1812
1817
|
font-size: 12px;
|
|
1813
1818
|
gap: 0px;
|
|
1814
|
-
color: var(--color-text-1);
|
|
1819
|
+
color: var(--tl-color-text-1);
|
|
1815
1820
|
z-index: 0;
|
|
1816
1821
|
}
|
|
1817
1822
|
|
|
1818
1823
|
.tlui-button:disabled {
|
|
1819
|
-
color: var(--color-text-3);
|
|
1824
|
+
color: var(--tl-color-text-3);
|
|
1820
1825
|
text-shadow: none;
|
|
1821
1826
|
cursor: default;
|
|
1822
1827
|
}
|
|
1823
1828
|
|
|
1824
1829
|
.tlui-button:disabled .tlui-kbd {
|
|
1825
|
-
color: var(--color-text-3);
|
|
1830
|
+
color: var(--tl-color-text-3);
|
|
1826
1831
|
}
|
|
1827
1832
|
|
|
1828
1833
|
.tlui-button > * {
|
|
1829
1834
|
position: relative;
|
|
1830
|
-
z-index: var(--layer-above);
|
|
1835
|
+
z-index: var(--tl-layer-above);
|
|
1831
1836
|
}
|
|
1832
1837
|
|
|
1833
1838
|
.tlui-button__label {
|
|
@@ -1843,7 +1848,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1843
1848
|
*/
|
|
1844
1849
|
.tl-container__focused:not(.tl-container__no-focus-ring) .tlui-button:focus-visible {
|
|
1845
1850
|
border-radius: 10px;
|
|
1846
|
-
outline: 2px solid var(--color-focus);
|
|
1851
|
+
outline: 2px solid var(--tl-color-focus);
|
|
1847
1852
|
outline-offset: -5px;
|
|
1848
1853
|
}
|
|
1849
1854
|
.tl-container__focused:not(.tl-container__no-focus-ring) .tlui-button__tool:focus-visible {
|
|
@@ -1851,7 +1856,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1851
1856
|
}
|
|
1852
1857
|
.tlui-slider__container:has(.tlui-slider__thumb:focus-visible) {
|
|
1853
1858
|
border-radius: 10px;
|
|
1854
|
-
outline: 2px solid var(--color-focus);
|
|
1859
|
+
outline: 2px solid var(--tl-color-focus);
|
|
1855
1860
|
outline-offset: -5px;
|
|
1856
1861
|
}
|
|
1857
1862
|
|
|
@@ -1860,8 +1865,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1860
1865
|
content: '';
|
|
1861
1866
|
position: absolute;
|
|
1862
1867
|
inset: 4px;
|
|
1863
|
-
border-radius: var(--radius-2);
|
|
1864
|
-
background: var(--color-muted-2);
|
|
1868
|
+
border-radius: var(--tl-radius-2);
|
|
1869
|
+
background: var(--tl-color-muted-2);
|
|
1865
1870
|
opacity: 0;
|
|
1866
1871
|
}
|
|
1867
1872
|
|
|
@@ -1871,18 +1876,18 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1871
1876
|
|
|
1872
1877
|
.tlui-button[data-isactive='true']::after,
|
|
1873
1878
|
.tlui-button[data-isactive='true']:not(:disabled, :focus-visible):active:after {
|
|
1874
|
-
background: var(--color-hint);
|
|
1879
|
+
background: var(--tl-color-hint);
|
|
1875
1880
|
opacity: 1;
|
|
1876
1881
|
}
|
|
1877
1882
|
|
|
1878
|
-
.tlui-button[aria-expanded='true'][data-direction='left']
|
|
1879
|
-
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
1883
|
+
.tlui-button[aria-expanded='true'][data-direction='left'] {
|
|
1884
|
+
background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
1880
1885
|
opacity: 1;
|
|
1881
1886
|
}
|
|
1882
1887
|
|
|
1883
1888
|
@media (hover: hover) {
|
|
1884
1889
|
.tlui-button[aria-expanded='true'][data-direction='left']:not(:hover)::after {
|
|
1885
|
-
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%);
|
|
1886
1891
|
opacity: 1;
|
|
1887
1892
|
}
|
|
1888
1893
|
|
|
@@ -1896,18 +1901,18 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1896
1901
|
}
|
|
1897
1902
|
|
|
1898
1903
|
.tlui-button__icon + .tlui-button__label {
|
|
1899
|
-
margin-left: var(--space-2);
|
|
1904
|
+
margin-left: var(--tl-space-2);
|
|
1900
1905
|
}
|
|
1901
1906
|
|
|
1902
1907
|
/* Low button */
|
|
1903
1908
|
|
|
1904
1909
|
.tlui-button__low {
|
|
1905
|
-
border-radius: var(--radius-3);
|
|
1906
|
-
background-color: var(--color-low);
|
|
1910
|
+
border-radius: var(--tl-radius-3);
|
|
1911
|
+
background-color: var(--tl-color-low);
|
|
1907
1912
|
}
|
|
1908
1913
|
|
|
1909
1914
|
.tlui-button__low::after {
|
|
1910
|
-
background-color: var(--color-muted-2);
|
|
1915
|
+
background-color: var(--tl-color-muted-2);
|
|
1911
1916
|
opacity: 0;
|
|
1912
1917
|
}
|
|
1913
1918
|
|
|
@@ -1920,31 +1925,25 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1920
1925
|
/* Primary / danger buttons */
|
|
1921
1926
|
|
|
1922
1927
|
.tlui-button__primary {
|
|
1923
|
-
color: var(--color-primary);
|
|
1928
|
+
color: var(--tl-color-primary);
|
|
1924
1929
|
}
|
|
1925
1930
|
|
|
1926
1931
|
.tlui-button__danger {
|
|
1927
|
-
color: var(--color-danger);
|
|
1932
|
+
color: var(--tl-color-danger);
|
|
1928
1933
|
text-shadow: none;
|
|
1929
1934
|
}
|
|
1930
1935
|
|
|
1931
1936
|
@media (hover: hover) {
|
|
1932
1937
|
.tlui-button__primary:not(:disabled, :focus-visible):hover {
|
|
1933
|
-
color: var(--color-primary);
|
|
1938
|
+
color: var(--tl-color-primary);
|
|
1934
1939
|
}
|
|
1935
1940
|
|
|
1936
1941
|
.tlui-button__danger:not(:disabled, :focus-visible):hover {
|
|
1937
|
-
color: var(--color-danger);
|
|
1942
|
+
color: var(--tl-color-danger);
|
|
1938
1943
|
text-shadow: none;
|
|
1939
1944
|
}
|
|
1940
1945
|
}
|
|
1941
1946
|
|
|
1942
|
-
/* Panel button */
|
|
1943
|
-
|
|
1944
|
-
.tlui-button__panel {
|
|
1945
|
-
position: relative;
|
|
1946
|
-
}
|
|
1947
|
-
|
|
1948
1947
|
/* Menu button */
|
|
1949
1948
|
|
|
1950
1949
|
.tlui-button__menu {
|
|
@@ -1957,7 +1956,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1957
1956
|
|
|
1958
1957
|
.tlui-button__menu::after {
|
|
1959
1958
|
inset: 4px;
|
|
1960
|
-
border-radius: var(--radius-2);
|
|
1959
|
+
border-radius: var(--tl-radius-2);
|
|
1961
1960
|
}
|
|
1962
1961
|
|
|
1963
1962
|
.tlui-button__menu > .tlui-icon + .tlui-button__label {
|
|
@@ -1985,18 +1984,26 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
1985
1984
|
|
|
1986
1985
|
/* Tool lock button */
|
|
1987
1986
|
|
|
1988
|
-
.tlui-toolbar__lock-button {
|
|
1987
|
+
.tlui-main-toolbar__lock-button {
|
|
1989
1988
|
position: absolute;
|
|
1990
|
-
top: 4px;
|
|
1991
|
-
right: 0px;
|
|
1992
1989
|
pointer-events: all;
|
|
1993
1990
|
height: 40px;
|
|
1994
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;
|
|
1995
1998
|
min-width: 0px;
|
|
1996
|
-
border-radius: var(--radius-2);
|
|
1997
1999
|
}
|
|
1998
2000
|
|
|
1999
|
-
.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 {
|
|
2000
2007
|
top: 4px;
|
|
2001
2008
|
left: 8px;
|
|
2002
2009
|
inset: 4px;
|
|
@@ -2008,16 +2015,6 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2008
2015
|
position: relative;
|
|
2009
2016
|
height: 48px;
|
|
2010
2017
|
width: 48px;
|
|
2011
|
-
margin-left: -2px;
|
|
2012
|
-
margin-right: -2px;
|
|
2013
|
-
}
|
|
2014
|
-
|
|
2015
|
-
.tlui-button__tool:nth-of-type(1) {
|
|
2016
|
-
margin-left: 0px;
|
|
2017
|
-
}
|
|
2018
|
-
|
|
2019
|
-
.tlui-button__tool:nth-last-of-type(1) {
|
|
2020
|
-
margin-right: 0px;
|
|
2021
2018
|
}
|
|
2022
2019
|
|
|
2023
2020
|
.tlui-button__tool::after {
|
|
@@ -2026,69 +2023,64 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2026
2023
|
}
|
|
2027
2024
|
|
|
2028
2025
|
.tlui-button__tool[aria-pressed='true'] {
|
|
2029
|
-
color: var(--color-selected-contrast);
|
|
2026
|
+
color: var(--tl-color-selected-contrast);
|
|
2030
2027
|
}
|
|
2031
2028
|
|
|
2032
2029
|
.tlui-button__tool[aria-pressed='true']:not(:disabled, :focus-visible):active {
|
|
2033
|
-
color: var(--color-selected-contrast);
|
|
2030
|
+
color: var(--tl-color-selected-contrast);
|
|
2034
2031
|
}
|
|
2035
2032
|
|
|
2036
2033
|
.tlui-button__tool[aria-pressed='true']:not(:disabled)::after {
|
|
2037
|
-
background: var(--color-selected);
|
|
2034
|
+
background: var(--tl-color-selected);
|
|
2038
2035
|
opacity: 1;
|
|
2039
2036
|
}
|
|
2040
2037
|
|
|
2041
|
-
.tlui-layout__mobile .tlui-button__tool {
|
|
2038
|
+
.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-button__tool {
|
|
2042
2039
|
height: 48px;
|
|
2043
2040
|
width: 43px;
|
|
2044
2041
|
}
|
|
2045
2042
|
|
|
2046
|
-
.tlui-layout__mobile .tlui-button__tool > .tlui-icon {
|
|
2043
|
+
.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-button__tool > .tlui-icon {
|
|
2047
2044
|
height: 16px;
|
|
2048
2045
|
width: 16px;
|
|
2049
2046
|
}
|
|
2050
2047
|
|
|
2051
|
-
/*
|
|
2048
|
+
/* Row layout */
|
|
2052
2049
|
|
|
2053
|
-
.tlui-
|
|
2050
|
+
.tlui-row {
|
|
2054
2051
|
display: flex;
|
|
2055
2052
|
flex-direction: row;
|
|
2053
|
+
padding: 0 2px;
|
|
2056
2054
|
}
|
|
2057
|
-
.tlui-
|
|
2055
|
+
.tlui-row > * {
|
|
2058
2056
|
margin-left: -2px;
|
|
2059
2057
|
margin-right: -2px;
|
|
2060
2058
|
}
|
|
2061
|
-
|
|
2062
|
-
|
|
2059
|
+
|
|
2060
|
+
/* Column layout */
|
|
2061
|
+
|
|
2062
|
+
.tlui-column {
|
|
2063
|
+
display: flex;
|
|
2064
|
+
flex-direction: column;
|
|
2065
|
+
padding: 2px 0;
|
|
2063
2066
|
}
|
|
2064
|
-
.tlui-
|
|
2065
|
-
margin-
|
|
2067
|
+
.tlui-column > * {
|
|
2068
|
+
margin-top: -2px;
|
|
2069
|
+
margin-bottom: -2px;
|
|
2066
2070
|
}
|
|
2067
2071
|
|
|
2068
|
-
/*
|
|
2072
|
+
/* Grid layout */
|
|
2069
2073
|
|
|
2070
|
-
.tlui-
|
|
2074
|
+
.tlui-grid {
|
|
2071
2075
|
display: grid;
|
|
2072
|
-
grid-template-columns: repeat(4,
|
|
2076
|
+
grid-template-columns: repeat(4, 1fr);
|
|
2073
2077
|
grid-auto-flow: row;
|
|
2074
2078
|
overflow: hidden;
|
|
2079
|
+
padding: 2px;
|
|
2075
2080
|
}
|
|
2076
|
-
.tlui-
|
|
2081
|
+
.tlui-grid > * {
|
|
2077
2082
|
margin: -2px;
|
|
2078
2083
|
}
|
|
2079
|
-
.tlui-buttons__grid > .tlui-button:nth-of-type(4n),
|
|
2080
|
-
.tlui-buttons__vertical-align > .tlui-button:nth-of-type(3n) {
|
|
2081
|
-
margin-right: 0px;
|
|
2082
|
-
}
|
|
2083
|
-
.tlui-buttons__grid > .tlui-button:nth-of-type(4n - 3) {
|
|
2084
|
-
margin-left: 0px;
|
|
2085
|
-
}
|
|
2086
|
-
.tlui-buttons__grid > .tlui-button:nth-of-type(-n + 4) {
|
|
2087
|
-
margin-top: 0px;
|
|
2088
|
-
}
|
|
2089
|
-
.tlui-buttons__grid > .tlui-button:nth-last-of-type(-n + 4) {
|
|
2090
|
-
margin-bottom: 0px;
|
|
2091
|
-
}
|
|
2092
2084
|
|
|
2093
2085
|
/* Zoom button */
|
|
2094
2086
|
|
|
@@ -2112,9 +2104,9 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2112
2104
|
pointer-events: none;
|
|
2113
2105
|
user-select: none;
|
|
2114
2106
|
contain: strict;
|
|
2115
|
-
z-index: var(--layer-panels);
|
|
2107
|
+
z-index: var(--tl-layer-panels);
|
|
2116
2108
|
transform: translate3d(0, 0, 0);
|
|
2117
|
-
--sab: env(safe-area-inset-bottom);
|
|
2109
|
+
--tl-sab: env(safe-area-inset-bottom);
|
|
2118
2110
|
font-weight: 500;
|
|
2119
2111
|
line-height: 1.6;
|
|
2120
2112
|
-webkit-font-smoothing: antialiased;
|
|
@@ -2167,11 +2159,11 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2167
2159
|
justify-content: flex-start;
|
|
2168
2160
|
align-items: flex-start;
|
|
2169
2161
|
width: min-content;
|
|
2170
|
-
gap: var(--space-3);
|
|
2171
|
-
margin: var(--space-2) var(--space-3);
|
|
2162
|
+
gap: var(--tl-space-3);
|
|
2163
|
+
margin: var(--tl-space-2) var(--tl-space-3);
|
|
2172
2164
|
white-space: nowrap;
|
|
2173
2165
|
pointer-events: none;
|
|
2174
|
-
z-index: var(--layer-panels);
|
|
2166
|
+
z-index: var(--tl-layer-panels);
|
|
2175
2167
|
}
|
|
2176
2168
|
|
|
2177
2169
|
/* ---------------------- Icon ---------------------- */
|
|
@@ -2199,7 +2191,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2199
2191
|
|
|
2200
2192
|
.tlui-slider__container {
|
|
2201
2193
|
width: 100%;
|
|
2202
|
-
padding: 0px var(--space-4);
|
|
2194
|
+
padding: 0px var(--tl-space-4);
|
|
2203
2195
|
}
|
|
2204
2196
|
|
|
2205
2197
|
.tlui-slider {
|
|
@@ -2225,7 +2217,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2225
2217
|
content: '';
|
|
2226
2218
|
height: 3px;
|
|
2227
2219
|
width: 100%;
|
|
2228
|
-
background-color: var(--color-muted-1);
|
|
2220
|
+
background-color: var(--tl-color-muted-1);
|
|
2229
2221
|
border-radius: 14px;
|
|
2230
2222
|
}
|
|
2231
2223
|
|
|
@@ -2234,7 +2226,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2234
2226
|
top: calc(50% - 2px);
|
|
2235
2227
|
left: 0px;
|
|
2236
2228
|
height: 3px;
|
|
2237
|
-
background-color: var(--color-selected);
|
|
2229
|
+
background-color: var(--tl-color-selected);
|
|
2238
2230
|
border-radius: 14px;
|
|
2239
2231
|
}
|
|
2240
2232
|
|
|
@@ -2246,16 +2238,16 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2246
2238
|
height: 18px;
|
|
2247
2239
|
position: relative;
|
|
2248
2240
|
top: -1px;
|
|
2249
|
-
background-color: var(--color-panel);
|
|
2241
|
+
background-color: var(--tl-color-panel);
|
|
2250
2242
|
border-radius: 999px;
|
|
2251
|
-
box-shadow: inset 0px 0px 0px 2px var(--color-text-1);
|
|
2243
|
+
box-shadow: inset 0px 0px 0px 2px var(--tl-color-text-1);
|
|
2252
2244
|
}
|
|
2253
2245
|
|
|
2254
2246
|
.tlui-slider__thumb:active {
|
|
2255
2247
|
cursor: grabbing;
|
|
2256
2248
|
box-shadow:
|
|
2257
|
-
inset 0px 0px 0px 2px var(--color-text-1),
|
|
2258
|
-
var(--shadow-1);
|
|
2249
|
+
inset 0px 0px 0px 2px var(--tl-color-text-1),
|
|
2250
|
+
var(--tl-shadow-1);
|
|
2259
2251
|
}
|
|
2260
2252
|
|
|
2261
2253
|
/* ---------------------- Input --------------------- */
|
|
@@ -2264,7 +2256,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2264
2256
|
background: none;
|
|
2265
2257
|
margin: 0px;
|
|
2266
2258
|
position: relative;
|
|
2267
|
-
z-index: var(--layer-above);
|
|
2259
|
+
z-index: var(--tl-layer-above);
|
|
2268
2260
|
height: 40px;
|
|
2269
2261
|
max-height: 40px;
|
|
2270
2262
|
display: flex;
|
|
@@ -2273,8 +2265,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2273
2265
|
font-family: inherit;
|
|
2274
2266
|
font-size: 12px;
|
|
2275
2267
|
font-weight: inherit;
|
|
2276
|
-
color: var(--color-text-1);
|
|
2277
|
-
padding: var(--space-4);
|
|
2268
|
+
color: var(--tl-color-text-1);
|
|
2269
|
+
padding: var(--tl-space-4);
|
|
2278
2270
|
padding-left: 0px;
|
|
2279
2271
|
border: none;
|
|
2280
2272
|
outline: none;
|
|
@@ -2290,8 +2282,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2290
2282
|
height: 44px;
|
|
2291
2283
|
display: flex;
|
|
2292
2284
|
align-items: center;
|
|
2293
|
-
gap: var(--space-4);
|
|
2294
|
-
color: var(--color-text);
|
|
2285
|
+
gap: var(--tl-space-4);
|
|
2286
|
+
color: var(--tl-color-text);
|
|
2295
2287
|
}
|
|
2296
2288
|
|
|
2297
2289
|
.tlui-input__wrapper > .tlui-icon {
|
|
@@ -2323,7 +2315,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2323
2315
|
grid-auto-columns: minmax(1em, auto);
|
|
2324
2316
|
align-self: bottom;
|
|
2325
2317
|
color: currentColor;
|
|
2326
|
-
margin-left: var(--space-4);
|
|
2318
|
+
margin-left: var(--tl-space-4);
|
|
2327
2319
|
}
|
|
2328
2320
|
|
|
2329
2321
|
.tlui-kbd > span {
|
|
@@ -2340,13 +2332,13 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2340
2332
|
}
|
|
2341
2333
|
|
|
2342
2334
|
.tlui-kbd:not(:last-child) {
|
|
2343
|
-
margin-right: var(--space-2);
|
|
2335
|
+
margin-right: var(--tl-space-2);
|
|
2344
2336
|
}
|
|
2345
2337
|
|
|
2346
2338
|
/* Focus Mode Button */
|
|
2347
2339
|
|
|
2348
2340
|
.tlui-focus-button {
|
|
2349
|
-
z-index: var(--layer-panels);
|
|
2341
|
+
z-index: var(--tl-layer-panels);
|
|
2350
2342
|
pointer-events: all;
|
|
2351
2343
|
}
|
|
2352
2344
|
|
|
@@ -2357,16 +2349,16 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2357
2349
|
}
|
|
2358
2350
|
|
|
2359
2351
|
.tlui-menu {
|
|
2360
|
-
z-index: var(--layer-menus);
|
|
2352
|
+
z-index: var(--tl-layer-menus);
|
|
2361
2353
|
height: fit-content;
|
|
2362
2354
|
width: fit-content;
|
|
2363
|
-
border-radius: var(--radius-3);
|
|
2355
|
+
border-radius: var(--tl-radius-3);
|
|
2364
2356
|
pointer-events: all;
|
|
2365
2357
|
touch-action: auto;
|
|
2366
2358
|
overflow-y: auto;
|
|
2367
2359
|
overscroll-behavior: none;
|
|
2368
|
-
background-color: var(--color-panel);
|
|
2369
|
-
box-shadow: var(--shadow-3);
|
|
2360
|
+
background-color: var(--tl-color-panel);
|
|
2361
|
+
box-shadow: var(--tl-shadow-3);
|
|
2370
2362
|
}
|
|
2371
2363
|
|
|
2372
2364
|
.tlui-menu::-webkit-scrollbar {
|
|
@@ -2384,7 +2376,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2384
2376
|
}
|
|
2385
2377
|
|
|
2386
2378
|
.tlui-menu__group {
|
|
2387
|
-
border-bottom: 1px solid var(--color-divider);
|
|
2379
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
2388
2380
|
}
|
|
2389
2381
|
.tlui-menu__group:nth-last-of-type(1) {
|
|
2390
2382
|
border-bottom: none;
|
|
@@ -2394,23 +2386,23 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2394
2386
|
|
|
2395
2387
|
.tlui-menu__submenu__trigger[data-state='open']::after {
|
|
2396
2388
|
opacity: 1;
|
|
2397
|
-
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%);
|
|
2398
2390
|
}
|
|
2399
2391
|
|
|
2400
2392
|
.tlui-menu__submenu__trigger[data-direction='left'][data-state='open']::after {
|
|
2401
2393
|
opacity: 1;
|
|
2402
|
-
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%);
|
|
2403
2395
|
}
|
|
2404
2396
|
|
|
2405
2397
|
@media (hover: hover) {
|
|
2406
2398
|
.tlui-menu__submenu__trigger[data-state='open']:not(:hover)::after {
|
|
2407
2399
|
opacity: 1;
|
|
2408
|
-
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%);
|
|
2409
2401
|
}
|
|
2410
2402
|
|
|
2411
2403
|
.tlui-menu__submenu__trigger[data-direction='left'][data-state='open']:not(:hover)::after {
|
|
2412
2404
|
opacity: 1;
|
|
2413
|
-
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%);
|
|
2414
2406
|
}
|
|
2415
2407
|
}
|
|
2416
2408
|
|
|
@@ -2435,7 +2427,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2435
2427
|
.tlui-menu-click-capture {
|
|
2436
2428
|
position: fixed;
|
|
2437
2429
|
inset: 0;
|
|
2438
|
-
z-index: var(--layer-menu-click-capture);
|
|
2430
|
+
z-index: var(--tl-layer-menu-click-capture);
|
|
2439
2431
|
}
|
|
2440
2432
|
|
|
2441
2433
|
/* --------------------- Popover -------------------- */
|
|
@@ -2451,10 +2443,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2451
2443
|
max-height: calc(var(--radix-popover-content-available-height) - 8px);
|
|
2452
2444
|
margin: 0px;
|
|
2453
2445
|
border: none;
|
|
2454
|
-
border-radius: var(--radius-3);
|
|
2455
|
-
background-color: var(--color-panel);
|
|
2456
|
-
box-shadow: var(--shadow-3);
|
|
2457
|
-
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);
|
|
2458
2450
|
overflow: hidden;
|
|
2459
2451
|
overflow-y: auto;
|
|
2460
2452
|
touch-action: auto;
|
|
@@ -2467,22 +2459,22 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2467
2459
|
|
|
2468
2460
|
.tlui-menu-zone {
|
|
2469
2461
|
position: relative;
|
|
2470
|
-
z-index: var(--layer-panels);
|
|
2462
|
+
z-index: var(--tl-layer-panels);
|
|
2471
2463
|
width: fit-content;
|
|
2472
|
-
border-right: 2px solid var(--color-background);
|
|
2473
|
-
border-bottom: 2px solid var(--color-background);
|
|
2474
|
-
border-bottom-right-radius: var(--radius-4);
|
|
2475
|
-
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);
|
|
2476
2468
|
}
|
|
2477
2469
|
|
|
2478
2470
|
.tlui-menu-zone *[data-state='open']::after {
|
|
2479
|
-
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%);
|
|
2480
2472
|
opacity: 1;
|
|
2481
2473
|
}
|
|
2482
2474
|
|
|
2483
2475
|
@media (hover: hover) {
|
|
2484
2476
|
.tlui-menu-zone *[data-state='open']:not(:hover)::after {
|
|
2485
|
-
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%);
|
|
2486
2478
|
opacity: 1;
|
|
2487
2479
|
}
|
|
2488
2480
|
}
|
|
@@ -2508,8 +2500,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2508
2500
|
align-items: center;
|
|
2509
2501
|
width: 100%;
|
|
2510
2502
|
height: 40px;
|
|
2511
|
-
padding-left: var(--space-4);
|
|
2512
|
-
border-bottom: 1px solid var(--color-divider);
|
|
2503
|
+
padding-left: var(--tl-space-4);
|
|
2504
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
2513
2505
|
}
|
|
2514
2506
|
|
|
2515
2507
|
.tlui-page-menu__header > .tlui-button:nth-of-type(1) {
|
|
@@ -2517,7 +2509,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2517
2509
|
}
|
|
2518
2510
|
|
|
2519
2511
|
.tlui-page-menu__header__title {
|
|
2520
|
-
color: var(--color-text);
|
|
2512
|
+
color: var(--tl-color-text);
|
|
2521
2513
|
font-size: 12px;
|
|
2522
2514
|
flex-grow: 2;
|
|
2523
2515
|
}
|
|
@@ -2602,7 +2594,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2602
2594
|
display: inline-flex;
|
|
2603
2595
|
align-items: center;
|
|
2604
2596
|
justify-content: center;
|
|
2605
|
-
color: var(--color-text);
|
|
2597
|
+
color: var(--tl-color-text);
|
|
2606
2598
|
}
|
|
2607
2599
|
|
|
2608
2600
|
.tlui-page_menu__item__sortable {
|
|
@@ -2615,7 +2607,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2615
2607
|
flex-direction: row;
|
|
2616
2608
|
align-items: center;
|
|
2617
2609
|
overflow: hidden;
|
|
2618
|
-
z-index: var(--layer-above);
|
|
2610
|
+
z-index: var(--tl-layer-above);
|
|
2619
2611
|
}
|
|
2620
2612
|
|
|
2621
2613
|
.tlui-page_menu__item__sortable__title {
|
|
@@ -2627,7 +2619,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2627
2619
|
}
|
|
2628
2620
|
|
|
2629
2621
|
.tlui-page_menu__item__sortable:focus-visible {
|
|
2630
|
-
z-index: var(--layer-focused-input);
|
|
2622
|
+
z-index: var(--tl-layer-focused-input);
|
|
2631
2623
|
}
|
|
2632
2624
|
|
|
2633
2625
|
.tlui-page_menu__item__sortable__handle {
|
|
@@ -2636,7 +2628,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2636
2628
|
min-width: 0px;
|
|
2637
2629
|
height: 40px;
|
|
2638
2630
|
cursor: grab;
|
|
2639
|
-
color: var(--color-text-3);
|
|
2631
|
+
color: var(--tl-color-text-3);
|
|
2640
2632
|
flex-shrink: 0;
|
|
2641
2633
|
margin-right: -9px;
|
|
2642
2634
|
}
|
|
@@ -2678,13 +2670,13 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2678
2670
|
}
|
|
2679
2671
|
|
|
2680
2672
|
.tlui-page_menu__item__submenu > .tlui-button[data-state='open']::after {
|
|
2681
|
-
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%);
|
|
2682
2674
|
opacity: 1;
|
|
2683
2675
|
}
|
|
2684
2676
|
|
|
2685
2677
|
@media (hover: hover) {
|
|
2686
2678
|
.tlui-page_menu__item__submenu > .tlui-button[data-state='open']:not(:hover)::after {
|
|
2687
|
-
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%);
|
|
2688
2680
|
opacity: 1;
|
|
2689
2681
|
}
|
|
2690
2682
|
}
|
|
@@ -2720,7 +2712,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2720
2712
|
top: 48px;
|
|
2721
2713
|
left: -9999px;
|
|
2722
2714
|
padding: 8px 16px;
|
|
2723
|
-
z-index: var(--layer-toasts);
|
|
2715
|
+
z-index: var(--tl-layer-toasts);
|
|
2724
2716
|
}
|
|
2725
2717
|
|
|
2726
2718
|
.tl-skip-to-main-content:focus {
|
|
@@ -2732,11 +2724,11 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2732
2724
|
.tlui-offline-indicator {
|
|
2733
2725
|
display: flex;
|
|
2734
2726
|
flex-direction: row;
|
|
2735
|
-
gap: var(--space-3);
|
|
2736
|
-
color: var(--color-text);
|
|
2737
|
-
background-color: var(--color-low);
|
|
2738
|
-
border: 3px solid var(--color-background);
|
|
2739
|
-
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);
|
|
2740
2732
|
height: 42px;
|
|
2741
2733
|
align-items: center;
|
|
2742
2734
|
justify-content: center;
|
|
@@ -2751,10 +2743,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2751
2743
|
/* ------------------- Style panel ------------------ */
|
|
2752
2744
|
|
|
2753
2745
|
.tlui-style-panel__wrapper {
|
|
2754
|
-
box-shadow: var(--shadow-2);
|
|
2755
|
-
border-radius: var(--radius-3);
|
|
2746
|
+
box-shadow: var(--tl-shadow-2);
|
|
2747
|
+
border-radius: var(--tl-radius-3);
|
|
2756
2748
|
pointer-events: all;
|
|
2757
|
-
background-color: var(--color-panel);
|
|
2749
|
+
background-color: var(--tl-color-panel);
|
|
2758
2750
|
height: fit-content;
|
|
2759
2751
|
max-height: 100%;
|
|
2760
2752
|
margin: 8px;
|
|
@@ -2763,7 +2755,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2763
2755
|
overscroll-behavior: none;
|
|
2764
2756
|
overflow-y: auto;
|
|
2765
2757
|
overflow-x: hidden;
|
|
2766
|
-
color: var(--color-text);
|
|
2758
|
+
color: var(--tl-color-text);
|
|
2767
2759
|
}
|
|
2768
2760
|
/* if the style panel is the only child (ie no share menu), increase the margin */
|
|
2769
2761
|
.tlui-style-panel__wrapper:only-child {
|
|
@@ -2772,12 +2764,18 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2772
2764
|
|
|
2773
2765
|
.tlui-style-panel {
|
|
2774
2766
|
position: relative;
|
|
2775
|
-
z-index: var(--layer-panels);
|
|
2767
|
+
z-index: var(--tl-layer-panels);
|
|
2776
2768
|
pointer-events: all;
|
|
2777
2769
|
width: 148px;
|
|
2778
2770
|
max-width: 148px;
|
|
2779
2771
|
}
|
|
2780
2772
|
|
|
2773
|
+
.tlui-style-panel[data-show-ui-labels='true'] .tlui-button[data-isactive='true'] {
|
|
2774
|
+
border-radius: 10px;
|
|
2775
|
+
outline: 2px solid var(--tl-color-text);
|
|
2776
|
+
outline-offset: -5px;
|
|
2777
|
+
}
|
|
2778
|
+
|
|
2781
2779
|
.tlui-style-panel::-webkit-scrollbar {
|
|
2782
2780
|
display: none;
|
|
2783
2781
|
}
|
|
@@ -2793,7 +2791,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2793
2791
|
}
|
|
2794
2792
|
|
|
2795
2793
|
.tlui-style-panel__section:nth-of-type(n + 2):not(:last-child) {
|
|
2796
|
-
border-bottom: 1px solid var(--color-divider);
|
|
2794
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
2797
2795
|
}
|
|
2798
2796
|
|
|
2799
2797
|
.tlui-style-panel__section:empty {
|
|
@@ -2802,23 +2800,19 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2802
2800
|
|
|
2803
2801
|
.tlui-style-panel__section__common:not(:only-child) {
|
|
2804
2802
|
margin-bottom: 7px;
|
|
2805
|
-
border-bottom: 1px solid var(--color-divider);
|
|
2803
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
2806
2804
|
}
|
|
2807
2805
|
|
|
2808
|
-
.tlui-style-
|
|
2809
|
-
|
|
2810
|
-
}
|
|
2811
|
-
/* Only really used for the alignment picker */
|
|
2812
|
-
.tlui-style-panel__row__extra-button {
|
|
2813
|
-
margin-left: -2px;
|
|
2806
|
+
.tlui-style-panel__dropdown-picker:only-child {
|
|
2807
|
+
width: 100%;
|
|
2814
2808
|
}
|
|
2815
2809
|
|
|
2816
2810
|
.tlui-style-panel__double-select-picker {
|
|
2817
2811
|
display: flex;
|
|
2818
2812
|
grid-template-columns: 1fr auto;
|
|
2819
2813
|
align-items: center;
|
|
2820
|
-
padding-left: var(--space-4);
|
|
2821
|
-
color: var(--color-text-1);
|
|
2814
|
+
padding-left: var(--tl-space-4);
|
|
2815
|
+
color: var(--tl-color-text-1);
|
|
2822
2816
|
font-size: 12px;
|
|
2823
2817
|
}
|
|
2824
2818
|
|
|
@@ -2832,25 +2826,45 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2832
2826
|
|
|
2833
2827
|
.tlui-style-panel .tlui-button[data-state='open']::after {
|
|
2834
2828
|
opacity: 1;
|
|
2835
|
-
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%);
|
|
2836
2830
|
}
|
|
2837
2831
|
|
|
2838
2832
|
@media (hover: hover) {
|
|
2839
2833
|
.tlui-style-panel .tlui-button[data-state='open']:not(:hover)::after {
|
|
2840
2834
|
opacity: 1;
|
|
2841
|
-
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%);
|
|
2842
2836
|
}
|
|
2843
2837
|
}
|
|
2844
2838
|
|
|
2839
|
+
/* Accessibility subheadings */
|
|
2840
|
+
|
|
2841
|
+
.tlui-style-panel__section .tlui-style-panel__subheading,
|
|
2842
|
+
.tlui-style-panel__section__common .tlui-style-panel__subheading,
|
|
2843
|
+
.tlui-style-panel__subheading + .tlui-slider__container {
|
|
2844
|
+
margin: 0;
|
|
2845
|
+
padding: var(--tl-space-2) var(--tl-space-3) 0px var(--tl-space-4);
|
|
2846
|
+
font-size: 12px;
|
|
2847
|
+
font-weight: inherit;
|
|
2848
|
+
line-height: inherit;
|
|
2849
|
+
}
|
|
2850
|
+
|
|
2851
|
+
.tlui-style-panel .tlui-style-panel__subheading:nth-of-type(1) {
|
|
2852
|
+
padding-top: var(--tl-space-3);
|
|
2853
|
+
}
|
|
2854
|
+
|
|
2855
|
+
.tlui-style-panel__subheading + .tlui-slider__container {
|
|
2856
|
+
padding-top: 0px;
|
|
2857
|
+
}
|
|
2858
|
+
|
|
2845
2859
|
/* --------------------- Bottom --------------------- */
|
|
2846
2860
|
|
|
2847
2861
|
.tlui-layout__bottom {
|
|
2848
2862
|
grid-row: 2;
|
|
2863
|
+
width: 100%;
|
|
2849
2864
|
}
|
|
2850
2865
|
|
|
2851
2866
|
.tlui-layout__bottom__main {
|
|
2852
2867
|
width: 100%;
|
|
2853
|
-
position: relative;
|
|
2854
2868
|
display: flex;
|
|
2855
2869
|
align-items: flex-end;
|
|
2856
2870
|
justify-content: center;
|
|
@@ -2862,11 +2876,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2862
2876
|
display: flex;
|
|
2863
2877
|
width: min-content;
|
|
2864
2878
|
flex-direction: column;
|
|
2865
|
-
z-index: var(--layer-panels);
|
|
2879
|
+
z-index: var(--tl-layer-panels);
|
|
2866
2880
|
pointer-events: all;
|
|
2867
2881
|
position: absolute;
|
|
2868
2882
|
left: 0px;
|
|
2869
|
-
bottom: 0px;
|
|
2870
2883
|
}
|
|
2871
2884
|
|
|
2872
2885
|
.tlui-navigation-panel::before {
|
|
@@ -2876,10 +2889,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2876
2889
|
z-index: -1;
|
|
2877
2890
|
inset: -2px -2px 0px 0px;
|
|
2878
2891
|
border-radius: 0;
|
|
2879
|
-
border-top: 2px solid var(--color-background);
|
|
2880
|
-
border-right: 2px solid var(--color-background);
|
|
2881
|
-
border-top-right-radius: var(--radius-4);
|
|
2882
|
-
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);
|
|
2883
2896
|
}
|
|
2884
2897
|
|
|
2885
2898
|
.tlui-navigation-panel[data-a11y='true']::before {
|
|
@@ -2893,7 +2906,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2893
2906
|
height: 96px;
|
|
2894
2907
|
min-height: 96px;
|
|
2895
2908
|
overflow: hidden;
|
|
2896
|
-
padding: var(--space-3);
|
|
2909
|
+
padding: var(--tl-space-3);
|
|
2897
2910
|
padding-top: 0px;
|
|
2898
2911
|
}
|
|
2899
2912
|
|
|
@@ -2906,114 +2919,216 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
2906
2919
|
/* --------------------- Toolbar -------------------- */
|
|
2907
2920
|
|
|
2908
2921
|
/* Wide container */
|
|
2909
|
-
.tlui-toolbar {
|
|
2922
|
+
.tlui-main-toolbar {
|
|
2910
2923
|
grid-column: 1 / span 3;
|
|
2911
2924
|
grid-row: 1;
|
|
2912
2925
|
display: flex;
|
|
2913
2926
|
align-items: center;
|
|
2914
2927
|
justify-content: center;
|
|
2915
2928
|
flex-grow: 2;
|
|
2916
|
-
|
|
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 */
|
|
2917
2946
|
}
|
|
2918
2947
|
|
|
2919
2948
|
/* Centered Content */
|
|
2920
|
-
.tlui-toolbar__inner {
|
|
2949
|
+
.tlui-main-toolbar__inner {
|
|
2921
2950
|
position: relative;
|
|
2922
2951
|
width: fit-content;
|
|
2923
2952
|
display: flex;
|
|
2924
|
-
gap: var(--space-3);
|
|
2925
|
-
align-items: flex-
|
|
2953
|
+
gap: var(--tl-space-3);
|
|
2954
|
+
align-items: flex-start;
|
|
2926
2955
|
}
|
|
2927
2956
|
|
|
2928
|
-
.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 {
|
|
2929
2962
|
width: fit-content;
|
|
2930
2963
|
}
|
|
2964
|
+
.tlui-main-toolbar--vertical .tlui-main-toolbar__left {
|
|
2965
|
+
display: flex;
|
|
2966
|
+
height: fit-content;
|
|
2967
|
+
}
|
|
2931
2968
|
|
|
2932
2969
|
/* Row of controls + lock button */
|
|
2933
|
-
.tlui-toolbar__extras {
|
|
2970
|
+
.tlui-main-toolbar__extras {
|
|
2934
2971
|
position: relative;
|
|
2935
|
-
z-index: var(--layer-above);
|
|
2936
|
-
width: 100%;
|
|
2972
|
+
z-index: var(--tl-layer-above);
|
|
2937
2973
|
pointer-events: none;
|
|
2938
|
-
|
|
2939
|
-
height: 48px;
|
|
2974
|
+
align-self: stretch;
|
|
2940
2975
|
}
|
|
2941
2976
|
|
|
2942
|
-
.tlui-toolbar__extras:empty {
|
|
2977
|
+
.tlui-main-toolbar__extras:empty {
|
|
2943
2978
|
display: none;
|
|
2944
2979
|
}
|
|
2945
2980
|
|
|
2946
|
-
.tlui-
|
|
2947
|
-
|
|
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 {
|
|
2948
2992
|
position: relative;
|
|
2949
|
-
|
|
2950
|
-
|
|
2951
|
-
|
|
2952
|
-
|
|
2953
|
-
|
|
2954
|
-
|
|
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);
|
|
2955
3002
|
margin-left: 8px;
|
|
2956
3003
|
margin-right: 0px;
|
|
2957
|
-
pointer-events: all;
|
|
2958
3004
|
width: fit-content;
|
|
2959
3005
|
}
|
|
2960
3006
|
|
|
2961
|
-
.tlui-
|
|
2962
|
-
|
|
2963
|
-
|
|
2964
|
-
|
|
2965
|
-
|
|
2966
|
-
|
|
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);
|
|
2967
3019
|
pointer-events: all;
|
|
2968
3020
|
position: relative;
|
|
2969
|
-
background: var(--color-panel);
|
|
2970
|
-
box-shadow: var(--shadow-2);
|
|
3021
|
+
background: var(--tl-color-panel);
|
|
3022
|
+
box-shadow: var(--tl-shadow-2);
|
|
2971
3023
|
}
|
|
2972
|
-
|
|
2973
|
-
|
|
2974
|
-
|
|
2975
|
-
|
|
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;
|
|
2976
3030
|
}
|
|
2977
3031
|
|
|
2978
|
-
.tlui-toolbar__overflow {
|
|
3032
|
+
.tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {
|
|
2979
3033
|
width: 40px;
|
|
3034
|
+
margin-left: 2px;
|
|
3035
|
+
}
|
|
3036
|
+
.tlui-main-toolbar--vertical .tlui-main-toolbar__overflow {
|
|
3037
|
+
height: 40px;
|
|
3038
|
+
margin-top: 2px;
|
|
2980
3039
|
}
|
|
2981
3040
|
|
|
2982
|
-
.tlui-layout__mobile .tlui-toolbar__overflow {
|
|
3041
|
+
.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {
|
|
2983
3042
|
width: 32px;
|
|
2984
3043
|
padding: 0px;
|
|
2985
3044
|
}
|
|
2986
3045
|
|
|
2987
|
-
.tlui-toolbar *[data-state='open']::after {
|
|
2988
|
-
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%);
|
|
2989
3052
|
opacity: 1;
|
|
2990
3053
|
}
|
|
2991
3054
|
|
|
3055
|
+
.tlui-main-toolbar__tools [data-toolbar-visible='false'],
|
|
3056
|
+
.tlui-main-toolbar__overflow-content [data-toolbar-visible='false'] {
|
|
3057
|
+
display: none;
|
|
3058
|
+
}
|
|
3059
|
+
|
|
3060
|
+
.tlui-main-toolbar__group:empty {
|
|
3061
|
+
display: none;
|
|
3062
|
+
}
|
|
3063
|
+
.tlui-row.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {
|
|
3064
|
+
border-right: 1px solid var(--color-divider);
|
|
3065
|
+
margin-right: 2px;
|
|
3066
|
+
}
|
|
3067
|
+
.tlui-column.tlui-main-toolbar__group:not(
|
|
3068
|
+
:nth-last-child(-n + 1 of [data-toolbar-visible='true'])
|
|
3069
|
+
) {
|
|
3070
|
+
border-bottom: 1px solid var(--color-divider);
|
|
3071
|
+
margin-bottom: 2px;
|
|
3072
|
+
}
|
|
3073
|
+
.tlui-grid.tlui-main-toolbar__group {
|
|
3074
|
+
grid-column: 1 / span 4;
|
|
3075
|
+
}
|
|
3076
|
+
.tlui-grid.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {
|
|
3077
|
+
border-bottom: 1px solid var(--color-divider);
|
|
3078
|
+
margin-bottom: 2px;
|
|
3079
|
+
}
|
|
3080
|
+
|
|
2992
3081
|
@media (hover: hover) {
|
|
2993
|
-
.tlui-toolbar *[data-state='open']:not(:hover)::after {
|
|
2994
|
-
background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
|
|
3082
|
+
.tlui-main-toolbar--horizontal *[data-state='open']:not(:hover)::after {
|
|
3083
|
+
background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
3084
|
+
opacity: 1;
|
|
3085
|
+
}
|
|
3086
|
+
.tlui-main-toolbar--vertical *[data-state='open']:not(:hover)::after {
|
|
3087
|
+
background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
|
|
2995
3088
|
opacity: 1;
|
|
2996
3089
|
}
|
|
2997
3090
|
}
|
|
2998
3091
|
|
|
2999
|
-
|
|
3000
|
-
|
|
3092
|
+
/* ------------------- Tooltip -------------------- */
|
|
3093
|
+
|
|
3094
|
+
.tlui-tooltip {
|
|
3095
|
+
font-size: 12px;
|
|
3096
|
+
padding: 2px 8px;
|
|
3097
|
+
border-radius: 4px;
|
|
3098
|
+
background-color: var(--tl-color-tooltip);
|
|
3099
|
+
box-shadow: none;
|
|
3100
|
+
color: var(--tl-color-text-shadow);
|
|
3101
|
+
max-width: 400px;
|
|
3102
|
+
width: fit-content;
|
|
3103
|
+
text-align: center;
|
|
3104
|
+
will-change: transform, opacity;
|
|
3105
|
+
z-index: 2;
|
|
3106
|
+
}
|
|
3107
|
+
|
|
3108
|
+
.tlui-tooltip__arrow {
|
|
3109
|
+
fill: var(--tl-color-tooltip);
|
|
3110
|
+
will-change: opacity;
|
|
3111
|
+
}
|
|
3112
|
+
|
|
3113
|
+
[data-radix-popper-content-wrapper]:has(.tlui-tooltip) {
|
|
3114
|
+
z-index: var(--tl-layer-toasts) !important;
|
|
3115
|
+
pointer-events: none;
|
|
3001
3116
|
}
|
|
3002
3117
|
|
|
3003
3118
|
/* ------------------- Debug panel ------------------ */
|
|
3004
3119
|
|
|
3005
3120
|
.tlui-debug-panel {
|
|
3006
|
-
background-color: var(--color-low);
|
|
3121
|
+
background-color: var(--tl-color-low);
|
|
3007
3122
|
width: 100%;
|
|
3008
3123
|
display: grid;
|
|
3009
3124
|
align-items: center;
|
|
3010
3125
|
grid-template-columns: 1fr auto auto auto;
|
|
3011
3126
|
justify-content: space-between;
|
|
3012
|
-
padding-left: var(--space-4);
|
|
3013
|
-
border-top: 1px solid var(--color-background);
|
|
3127
|
+
padding-left: var(--tl-space-4);
|
|
3128
|
+
border-top: 1px solid var(--tl-color-background);
|
|
3014
3129
|
font-size: 12px;
|
|
3015
|
-
color: var(--color-text-1);
|
|
3016
|
-
z-index: var(--layer-panels);
|
|
3130
|
+
color: var(--tl-color-text-1);
|
|
3131
|
+
z-index: var(--tl-layer-panels);
|
|
3017
3132
|
pointer-events: all;
|
|
3018
3133
|
}
|
|
3019
3134
|
|
|
@@ -3029,7 +3144,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3029
3144
|
|
|
3030
3145
|
.tlui-debug-panel__fps__slow {
|
|
3031
3146
|
font-weight: bold;
|
|
3032
|
-
color: var(--color-danger);
|
|
3147
|
+
color: var(--tl-color-danger);
|
|
3033
3148
|
}
|
|
3034
3149
|
|
|
3035
3150
|
.tlui-a11y-audit {
|
|
@@ -3039,7 +3154,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3039
3154
|
.tlui-a11y-audit th,
|
|
3040
3155
|
.tlui-a11y-audit td {
|
|
3041
3156
|
padding: 8px;
|
|
3042
|
-
border: 1px solid var(--color-low-border);
|
|
3157
|
+
border: 1px solid var(--tl-color-low-border);
|
|
3043
3158
|
}
|
|
3044
3159
|
|
|
3045
3160
|
/* --------------------- Toasts --------------------- */
|
|
@@ -3052,10 +3167,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3052
3167
|
align-items: flex-end;
|
|
3053
3168
|
justify-content: flex-end;
|
|
3054
3169
|
flex-direction: column;
|
|
3055
|
-
gap: var(--space-3);
|
|
3170
|
+
gap: var(--tl-space-3);
|
|
3056
3171
|
pointer-events: none;
|
|
3057
|
-
padding: 0px var(--space-3) 64px 0px;
|
|
3058
|
-
z-index: var(--layer-toasts);
|
|
3172
|
+
padding: 0px var(--tl-space-3) 64px 0px;
|
|
3173
|
+
z-index: var(--tl-layer-toasts);
|
|
3059
3174
|
}
|
|
3060
3175
|
|
|
3061
3176
|
.tlui-toast__viewport > * {
|
|
@@ -3064,34 +3179,34 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3064
3179
|
|
|
3065
3180
|
.tlui-toast__icon {
|
|
3066
3181
|
padding-top: 11px;
|
|
3067
|
-
padding-left: var(--space-4);
|
|
3068
|
-
color: var(--color-text-1);
|
|
3182
|
+
padding-left: var(--tl-space-4);
|
|
3183
|
+
color: var(--tl-color-text-1);
|
|
3069
3184
|
}
|
|
3070
3185
|
|
|
3071
3186
|
.tlui-toast__container {
|
|
3072
3187
|
min-width: 200px;
|
|
3073
3188
|
display: flex;
|
|
3074
3189
|
flex-direction: row;
|
|
3075
|
-
background-color: var(--color-panel);
|
|
3076
|
-
box-shadow: var(--shadow-2);
|
|
3077
|
-
border-radius: var(--radius-3);
|
|
3190
|
+
background-color: var(--tl-color-panel);
|
|
3191
|
+
box-shadow: var(--tl-shadow-2);
|
|
3192
|
+
border-radius: var(--tl-radius-3);
|
|
3078
3193
|
font-size: 12px;
|
|
3079
3194
|
}
|
|
3080
3195
|
|
|
3081
3196
|
.tlui-toast__container[data-severity='success'] .tlui-icon {
|
|
3082
|
-
color: var(--color-success);
|
|
3197
|
+
color: var(--tl-color-success);
|
|
3083
3198
|
}
|
|
3084
3199
|
|
|
3085
3200
|
.tlui-toast__container[data-severity='info'] .tlui-icon {
|
|
3086
|
-
color: var(--color-info);
|
|
3201
|
+
color: var(--tl-color-info);
|
|
3087
3202
|
}
|
|
3088
3203
|
|
|
3089
3204
|
.tlui-toast__container[data-severity='warning'] .tlui-icon {
|
|
3090
|
-
color: var(--color-warning);
|
|
3205
|
+
color: var(--tl-color-warning);
|
|
3091
3206
|
}
|
|
3092
3207
|
|
|
3093
3208
|
.tlui-toast__container[data-severity='error'] .tlui-icon {
|
|
3094
|
-
color: var(--color-danger);
|
|
3209
|
+
color: var(--tl-color-danger);
|
|
3095
3210
|
}
|
|
3096
3211
|
|
|
3097
3212
|
.tlui-toast__main {
|
|
@@ -3100,27 +3215,27 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3100
3215
|
}
|
|
3101
3216
|
|
|
3102
3217
|
.tlui-toast__content {
|
|
3103
|
-
padding: var(--space-4);
|
|
3218
|
+
padding: var(--tl-space-4);
|
|
3104
3219
|
display: flex;
|
|
3105
3220
|
line-height: 1.4;
|
|
3106
3221
|
flex-direction: column;
|
|
3107
|
-
gap: var(--space-3);
|
|
3222
|
+
gap: var(--tl-space-3);
|
|
3108
3223
|
}
|
|
3109
3224
|
|
|
3110
3225
|
.tlui-toast__main[data-actions='true'] .tlui-toast__content {
|
|
3111
|
-
padding-bottom: var(--space-2);
|
|
3226
|
+
padding-bottom: var(--tl-space-2);
|
|
3112
3227
|
}
|
|
3113
3228
|
|
|
3114
3229
|
.tlui-toast__title {
|
|
3115
3230
|
font-weight: bold;
|
|
3116
|
-
color: var(--color-text-1);
|
|
3231
|
+
color: var(--tl-color-text-1);
|
|
3117
3232
|
/* this makes the default toast look better */
|
|
3118
3233
|
line-height: 16px;
|
|
3119
3234
|
}
|
|
3120
3235
|
|
|
3121
3236
|
.tlui-toast__description {
|
|
3122
|
-
color: var(--color-text-1);
|
|
3123
|
-
padding: var(--space-3);
|
|
3237
|
+
color: var(--tl-color-text-1);
|
|
3238
|
+
padding: var(--tl-space-3);
|
|
3124
3239
|
margin: 0px;
|
|
3125
3240
|
padding: 0px;
|
|
3126
3241
|
}
|
|
@@ -3172,14 +3287,14 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3172
3287
|
left: 0px;
|
|
3173
3288
|
width: 100%;
|
|
3174
3289
|
height: 100%;
|
|
3175
|
-
z-index: var(--layer-canvas-overlays);
|
|
3176
|
-
background-color: var(--color-overlay);
|
|
3290
|
+
z-index: var(--tl-layer-canvas-overlays);
|
|
3291
|
+
background-color: var(--tl-color-overlay);
|
|
3177
3292
|
pointer-events: all;
|
|
3178
3293
|
animation: tl-fade-in 0.12s ease-out;
|
|
3179
3294
|
display: grid;
|
|
3180
3295
|
place-items: center;
|
|
3181
3296
|
overflow-y: auto;
|
|
3182
|
-
padding: 0px var(--space-3);
|
|
3297
|
+
padding: 0px var(--tl-space-3);
|
|
3183
3298
|
}
|
|
3184
3299
|
|
|
3185
3300
|
.tlui-dialog__content {
|
|
@@ -3187,9 +3302,9 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3187
3302
|
flex-direction: column;
|
|
3188
3303
|
position: relative;
|
|
3189
3304
|
cursor: default;
|
|
3190
|
-
background-color: var(--color-panel);
|
|
3191
|
-
box-shadow: var(--shadow-3);
|
|
3192
|
-
border-radius: var(--radius-3);
|
|
3305
|
+
background-color: var(--tl-color-panel);
|
|
3306
|
+
box-shadow: var(--tl-shadow-3);
|
|
3307
|
+
border-radius: var(--tl-radius-3);
|
|
3193
3308
|
font-size: 12px;
|
|
3194
3309
|
overflow: hidden;
|
|
3195
3310
|
min-width: 300px;
|
|
@@ -3202,9 +3317,9 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3202
3317
|
display: flex;
|
|
3203
3318
|
align-items: center;
|
|
3204
3319
|
flex: 0;
|
|
3205
|
-
z-index: var(--layer-header-footer);
|
|
3206
|
-
padding-left: var(--space-4);
|
|
3207
|
-
color: var(--color-text);
|
|
3320
|
+
z-index: var(--tl-layer-header-footer);
|
|
3321
|
+
padding-left: var(--tl-space-4);
|
|
3322
|
+
color: var(--tl-color-text);
|
|
3208
3323
|
height: 40px;
|
|
3209
3324
|
}
|
|
3210
3325
|
|
|
@@ -3213,7 +3328,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3213
3328
|
font-weight: inherit;
|
|
3214
3329
|
font-size: 12px;
|
|
3215
3330
|
margin: 0px;
|
|
3216
|
-
color: var(--color-text-1);
|
|
3331
|
+
color: var(--tl-color-text-1);
|
|
3217
3332
|
}
|
|
3218
3333
|
|
|
3219
3334
|
.tlui-dialog__header__close {
|
|
@@ -3221,16 +3336,16 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3221
3336
|
}
|
|
3222
3337
|
|
|
3223
3338
|
.tlui-dialog__body {
|
|
3224
|
-
padding: var(--space-4) var(--space-4);
|
|
3339
|
+
padding: var(--tl-space-4) var(--tl-space-4);
|
|
3225
3340
|
flex: 0 1;
|
|
3226
3341
|
overflow-y: auto;
|
|
3227
3342
|
overflow-x: hidden;
|
|
3228
|
-
color: var(--color-text-1);
|
|
3343
|
+
color: var(--tl-color-text-1);
|
|
3229
3344
|
user-select: all;
|
|
3230
3345
|
-webkit-user-select: text;
|
|
3231
3346
|
}
|
|
3232
3347
|
.tlui-dialog__body a {
|
|
3233
|
-
color: var(--color-selected);
|
|
3348
|
+
color: var(--tl-color-selected);
|
|
3234
3349
|
}
|
|
3235
3350
|
|
|
3236
3351
|
.tlui-dialog__body ul,
|
|
@@ -3238,13 +3353,13 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3238
3353
|
padding-left: 16px;
|
|
3239
3354
|
display: flex;
|
|
3240
3355
|
flex-direction: column;
|
|
3241
|
-
gap: var(--space-2);
|
|
3356
|
+
gap: var(--tl-space-2);
|
|
3242
3357
|
}
|
|
3243
3358
|
|
|
3244
3359
|
.tlui-dialog__footer {
|
|
3245
3360
|
position: relative;
|
|
3246
3361
|
min-height: 12px;
|
|
3247
|
-
z-index: var(--layer-header-footer);
|
|
3362
|
+
z-index: var(--tl-layer-header-footer);
|
|
3248
3363
|
}
|
|
3249
3364
|
|
|
3250
3365
|
.tlui-dialog__footer__actions {
|
|
@@ -3264,15 +3379,15 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3264
3379
|
.tlui-edit-link-dialog {
|
|
3265
3380
|
display: flex;
|
|
3266
3381
|
flex-direction: column;
|
|
3267
|
-
gap: var(--space-4);
|
|
3268
|
-
color: var(--color-text);
|
|
3382
|
+
gap: var(--tl-space-4);
|
|
3383
|
+
color: var(--tl-color-text);
|
|
3269
3384
|
}
|
|
3270
3385
|
|
|
3271
3386
|
.tlui-edit-link-dialog__input {
|
|
3272
|
-
background-color: var(--color-muted-2);
|
|
3387
|
+
background-color: var(--tl-color-muted-2);
|
|
3273
3388
|
flex-grow: 2;
|
|
3274
|
-
border-radius: var(--radius-2);
|
|
3275
|
-
padding: 0px var(--space-4);
|
|
3389
|
+
border-radius: var(--tl-radius-2);
|
|
3390
|
+
padding: 0px var(--tl-space-4);
|
|
3276
3391
|
}
|
|
3277
3392
|
|
|
3278
3393
|
/* Embed Dialog */
|
|
@@ -3280,15 +3395,15 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3280
3395
|
.tlui-embed__spacer {
|
|
3281
3396
|
flex-grow: 2;
|
|
3282
3397
|
min-height: 0px;
|
|
3283
|
-
margin-left: calc(-1 * var(--space-4));
|
|
3284
|
-
margin-top: calc(-1 * var(--space-4));
|
|
3398
|
+
margin-left: calc(-1 * var(--tl-space-4));
|
|
3399
|
+
margin-top: calc(-1 * var(--tl-space-4));
|
|
3285
3400
|
pointer-events: none;
|
|
3286
3401
|
}
|
|
3287
3402
|
|
|
3288
3403
|
.tlui-embed-dialog__list {
|
|
3289
3404
|
display: flex;
|
|
3290
3405
|
flex-direction: column;
|
|
3291
|
-
padding: 0px var(--space-3) var(--space-4) var(--space-3);
|
|
3406
|
+
padding: 0px var(--tl-space-3) var(--tl-space-4) var(--tl-space-3);
|
|
3292
3407
|
}
|
|
3293
3408
|
|
|
3294
3409
|
.tlui-embed-dialog__item__image {
|
|
@@ -3300,49 +3415,49 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3300
3415
|
background-size: contain;
|
|
3301
3416
|
background-repeat: no-repeat;
|
|
3302
3417
|
background-position: center center;
|
|
3303
|
-
background-color: var(--color-selected-contrast);
|
|
3304
|
-
border-radius: var(--radius-1);
|
|
3418
|
+
background-color: var(--tl-color-selected-contrast);
|
|
3419
|
+
border-radius: var(--tl-radius-1);
|
|
3305
3420
|
}
|
|
3306
3421
|
|
|
3307
3422
|
.tlui-embed-dialog__enter {
|
|
3308
3423
|
display: flex;
|
|
3309
3424
|
flex-direction: column;
|
|
3310
|
-
gap: var(--space-4);
|
|
3311
|
-
color: var(--color-text-1);
|
|
3425
|
+
gap: var(--tl-space-4);
|
|
3426
|
+
color: var(--tl-color-text-1);
|
|
3312
3427
|
}
|
|
3313
3428
|
|
|
3314
3429
|
.tlui-embed-dialog__input {
|
|
3315
|
-
background-color: var(--color-muted-2);
|
|
3430
|
+
background-color: var(--tl-color-muted-2);
|
|
3316
3431
|
flex-grow: 2;
|
|
3317
|
-
border-radius: var(--radius-2);
|
|
3318
|
-
padding: 0px var(--space-4);
|
|
3432
|
+
border-radius: var(--tl-radius-2);
|
|
3433
|
+
padding: 0px var(--tl-space-4);
|
|
3319
3434
|
}
|
|
3320
3435
|
|
|
3321
3436
|
.tlui-embed-dialog__warning {
|
|
3322
|
-
color: var(--color-danger);
|
|
3437
|
+
color: var(--tl-color-danger);
|
|
3323
3438
|
text-shadow: none;
|
|
3324
3439
|
}
|
|
3325
3440
|
|
|
3326
3441
|
.tlui-embed-dialog__instruction__link {
|
|
3327
3442
|
display: flex;
|
|
3328
|
-
gap: var(--space-1);
|
|
3329
|
-
margin-top: var(--space-4);
|
|
3443
|
+
gap: var(--tl-space-1);
|
|
3444
|
+
margin-top: var(--tl-space-4);
|
|
3330
3445
|
}
|
|
3331
3446
|
|
|
3332
3447
|
.tlui-embed-dialog__enter a {
|
|
3333
|
-
color: var(--color-text-1);
|
|
3448
|
+
color: var(--tl-color-text-1);
|
|
3334
3449
|
}
|
|
3335
3450
|
|
|
3336
3451
|
/* --------------- Keyboard shortcuts --------------- */
|
|
3337
3452
|
|
|
3338
3453
|
.tlui-shortcuts-dialog__header {
|
|
3339
|
-
border-bottom: 1px solid var(--color-divider);
|
|
3454
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
3340
3455
|
}
|
|
3341
3456
|
|
|
3342
3457
|
.tlui-shortcuts-dialog__body {
|
|
3343
3458
|
position: relative;
|
|
3344
3459
|
columns: 3;
|
|
3345
|
-
column-gap: var(--space-9);
|
|
3460
|
+
column-gap: var(--tl-space-9);
|
|
3346
3461
|
pointer-events: all;
|
|
3347
3462
|
touch-action: auto;
|
|
3348
3463
|
|
|
@@ -3360,14 +3475,14 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3360
3475
|
|
|
3361
3476
|
.tlui-shortcuts-dialog__group {
|
|
3362
3477
|
break-inside: avoid-column;
|
|
3363
|
-
padding-bottom: var(--space-6);
|
|
3478
|
+
padding-bottom: var(--tl-space-6);
|
|
3364
3479
|
}
|
|
3365
3480
|
|
|
3366
3481
|
.tlui-shortcuts-dialog__group__title {
|
|
3367
3482
|
font-size: inherit;
|
|
3368
3483
|
font-weight: inherit;
|
|
3369
3484
|
margin: 0px;
|
|
3370
|
-
color: var(--color-text-3);
|
|
3485
|
+
color: var(--tl-color-text-3);
|
|
3371
3486
|
height: 32px;
|
|
3372
3487
|
display: flex;
|
|
3373
3488
|
align-items: center;
|
|
@@ -3376,12 +3491,12 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3376
3491
|
.tlui-shortcuts-dialog__group__content {
|
|
3377
3492
|
display: flex;
|
|
3378
3493
|
flex-direction: column;
|
|
3379
|
-
color: var(--color-text-1);
|
|
3494
|
+
color: var(--tl-color-text-1);
|
|
3380
3495
|
}
|
|
3381
3496
|
|
|
3382
3497
|
.tlui-shortcuts-dialog__key-pair {
|
|
3383
3498
|
display: flex;
|
|
3384
|
-
gap: var(--space-4);
|
|
3499
|
+
gap: var(--tl-space-4);
|
|
3385
3500
|
align-items: center;
|
|
3386
3501
|
justify-content: space-between;
|
|
3387
3502
|
height: 32px;
|
|
@@ -3408,12 +3523,12 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3408
3523
|
height: 24px;
|
|
3409
3524
|
background: linear-gradient(
|
|
3410
3525
|
to bottom,
|
|
3411
|
-
var(--color-panel-transparent) 0%,
|
|
3412
|
-
var(--color-panel) 90%,
|
|
3413
|
-
var(--color-panel) 100%
|
|
3526
|
+
var(--tl-color-panel-transparent) 0%,
|
|
3527
|
+
var(--tl-color-panel) 90%,
|
|
3528
|
+
var(--tl-color-panel) 100%
|
|
3414
3529
|
);
|
|
3415
|
-
border-bottom-left-radius: var(--radius-3);
|
|
3416
|
-
border-bottom-right-radius: var(--radius-3);
|
|
3530
|
+
border-bottom-left-radius: var(--tl-radius-3);
|
|
3531
|
+
border-bottom-right-radius: var(--tl-radius-3);
|
|
3417
3532
|
pointer-events: none;
|
|
3418
3533
|
}
|
|
3419
3534
|
|
|
@@ -3428,10 +3543,10 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3428
3543
|
.tlui-help-menu {
|
|
3429
3544
|
pointer-events: all;
|
|
3430
3545
|
position: absolute;
|
|
3431
|
-
bottom: var(--space-2);
|
|
3432
|
-
right: var(--space-2);
|
|
3433
|
-
z-index: var(--layer-panels);
|
|
3434
|
-
border: 2px solid var(--color-background);
|
|
3546
|
+
bottom: var(--tl-space-2);
|
|
3547
|
+
right: var(--tl-space-2);
|
|
3548
|
+
z-index: var(--tl-layer-panels);
|
|
3549
|
+
border: 2px solid var(--tl-color-background);
|
|
3435
3550
|
border-radius: 100%;
|
|
3436
3551
|
}
|
|
3437
3552
|
|
|
@@ -3442,7 +3557,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3442
3557
|
display: flex;
|
|
3443
3558
|
flex-direction: row;
|
|
3444
3559
|
justify-content: flex-end;
|
|
3445
|
-
z-index: var(--layer-panels);
|
|
3560
|
+
z-index: var(--tl-layer-panels);
|
|
3446
3561
|
align-items: center;
|
|
3447
3562
|
padding-top: 2px;
|
|
3448
3563
|
padding-right: 4px;
|
|
@@ -3458,7 +3573,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3458
3573
|
border: none;
|
|
3459
3574
|
cursor: pointer;
|
|
3460
3575
|
pointer-events: all;
|
|
3461
|
-
border-radius: var(--radius-1);
|
|
3576
|
+
border-radius: var(--tl-radius-1);
|
|
3462
3577
|
padding-right: 1px;
|
|
3463
3578
|
height: 100%;
|
|
3464
3579
|
}
|
|
@@ -3471,8 +3586,8 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3471
3586
|
.tlui-people-menu__avatar {
|
|
3472
3587
|
height: 24px;
|
|
3473
3588
|
width: 24px;
|
|
3474
|
-
border: 2px solid var(--color-background);
|
|
3475
|
-
background-color: var(--color-low);
|
|
3589
|
+
border: 2px solid var(--tl-color-background);
|
|
3590
|
+
background-color: var(--tl-color-low);
|
|
3476
3591
|
border-radius: 100%;
|
|
3477
3592
|
display: flex;
|
|
3478
3593
|
align-items: center;
|
|
@@ -3481,7 +3596,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3481
3596
|
font-size: 10px;
|
|
3482
3597
|
font-weight: bold;
|
|
3483
3598
|
text-align: center;
|
|
3484
|
-
color: var(--color-selected-contrast);
|
|
3599
|
+
color: var(--tl-color-selected-contrast);
|
|
3485
3600
|
z-index: 2;
|
|
3486
3601
|
}
|
|
3487
3602
|
|
|
@@ -3495,7 +3610,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3495
3610
|
|
|
3496
3611
|
@media (hover: hover) {
|
|
3497
3612
|
.tlui-people-menu__avatars-button:hover .tlui-people-menu__avatar {
|
|
3498
|
-
border-color: var(--color-low);
|
|
3613
|
+
border-color: var(--tl-color-low);
|
|
3499
3614
|
}
|
|
3500
3615
|
}
|
|
3501
3616
|
|
|
@@ -3503,12 +3618,12 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3503
3618
|
min-width: 0px;
|
|
3504
3619
|
font-size: 11px;
|
|
3505
3620
|
font-weight: 600;
|
|
3506
|
-
color: var(--color-text-1);
|
|
3621
|
+
color: var(--tl-color-text-1);
|
|
3507
3622
|
font-family: inherit;
|
|
3508
3623
|
padding: 0px 4px;
|
|
3509
3624
|
}
|
|
3510
3625
|
.tlui-people-menu__more::after {
|
|
3511
|
-
border-radius: var(--radius-2);
|
|
3626
|
+
border-radius: var(--tl-radius-2);
|
|
3512
3627
|
inset: 0px;
|
|
3513
3628
|
}
|
|
3514
3629
|
|
|
@@ -3537,7 +3652,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3537
3652
|
}
|
|
3538
3653
|
|
|
3539
3654
|
.tlui-people-menu__section:not(:last-child) {
|
|
3540
|
-
border-bottom: 1px solid var(--color-divider);
|
|
3655
|
+
border-bottom: 1px solid var(--tl-color-divider);
|
|
3541
3656
|
}
|
|
3542
3657
|
|
|
3543
3658
|
.tlui-people-menu__user {
|
|
@@ -3556,7 +3671,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3556
3671
|
text-overflow: ellipsis;
|
|
3557
3672
|
white-space: nowrap;
|
|
3558
3673
|
font-size: 12px;
|
|
3559
|
-
color: var(--color-text-1);
|
|
3674
|
+
color: var(--tl-color-text-1);
|
|
3560
3675
|
max-width: 100%;
|
|
3561
3676
|
flex-grow: 1;
|
|
3562
3677
|
flex-shrink: 100;
|
|
@@ -3568,7 +3683,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3568
3683
|
text-overflow: ellipsis;
|
|
3569
3684
|
white-space: nowrap;
|
|
3570
3685
|
font-size: 12px;
|
|
3571
|
-
color: var(--color-text-3);
|
|
3686
|
+
color: var(--tl-color-text-3);
|
|
3572
3687
|
flex-grow: 100;
|
|
3573
3688
|
flex-shrink: 0;
|
|
3574
3689
|
margin-left: 4px;
|
|
@@ -3659,7 +3774,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3659
3774
|
inset: 0px;
|
|
3660
3775
|
border-width: 2px;
|
|
3661
3776
|
border-style: solid;
|
|
3662
|
-
z-index: var(--layer-following-indicator);
|
|
3777
|
+
z-index: var(--tl-layer-following-indicator);
|
|
3663
3778
|
pointer-events: none;
|
|
3664
3779
|
}
|
|
3665
3780
|
|
|
@@ -3678,7 +3793,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3678
3793
|
}
|
|
3679
3794
|
|
|
3680
3795
|
.tlui-contextual-toolbar [data-isactive='true']::after {
|
|
3681
|
-
background-color: var(--color-muted-2);
|
|
3796
|
+
background-color: var(--tl-color-muted-2);
|
|
3682
3797
|
opacity: 1;
|
|
3683
3798
|
}
|
|
3684
3799
|
|
|
@@ -3694,7 +3809,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3694
3809
|
|
|
3695
3810
|
.tlui-contextual-toolbar[data-visible='true'] {
|
|
3696
3811
|
opacity: 1;
|
|
3697
|
-
z-index: var(--layer-menus);
|
|
3812
|
+
z-index: var(--tl-layer-menus);
|
|
3698
3813
|
}
|
|
3699
3814
|
|
|
3700
3815
|
.tlui-contextual-toolbar[data-interactive='true'],
|
|
@@ -3753,7 +3868,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3753
3868
|
|
|
3754
3869
|
@keyframes tlui-slide-in {
|
|
3755
3870
|
from {
|
|
3756
|
-
transform: translateX(calc(100% + var(--space-3)));
|
|
3871
|
+
transform: translateX(calc(100% + var(--tl-space-3)));
|
|
3757
3872
|
}
|
|
3758
3873
|
to {
|
|
3759
3874
|
transform: translateX(0px);
|
|
@@ -3765,7 +3880,7 @@ it from receiving any pointer events or affecting the cursor. */
|
|
|
3765
3880
|
transform: translateX(var(--radix-toast-swipe-end-x));
|
|
3766
3881
|
}
|
|
3767
3882
|
to {
|
|
3768
|
-
transform: translateX(calc(100% + var(--space-3)));
|
|
3883
|
+
transform: translateX(calc(100% + var(--tl-space-3)));
|
|
3769
3884
|
}
|
|
3770
3885
|
}
|
|
3771
3886
|
|