@dtducas/wh-forge-viewer 1.0.9-beta0 → 2.0.0-beta.1
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/index.esm.js +5 -3
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +5 -3
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -48087,7 +48087,7 @@ function styleInject(css, ref) {
|
|
|
48087
48087
|
var css_248z$3 = "/**\n * MarkupToolbar Styles\n *\n * @file markup-toolbar.css\n * @description Excalidraw-inspired toolbar styles with clean, minimal design\n */\n\n/* ========================================\n Hide Default Forge Viewer Markup Toolbar\n ======================================== */\n\n/* Hide all vertical toolbars when custom markup toolbar is active */\nbody:has(.markup-toolbar) .lmv-markup-gui-toolbar,\nbody:has(.markup-toolbar) .adsk-toolbar-vertical,\nbody:has(.markup-toolbar) .markup-mode-toolbar,\nbody:has(.markup-toolbar) .adsk-control-group[id*='markup'],\nbody:has(.markup-toolbar) .adsk-toolbar[id*='markup'],\n.adsk-viewing-viewer:has(.markup-toolbar) .adsk-toolbar-vertical,\n.lmv-markup-gui-toolbar {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n pointer-events: none !important;\n}\n\n/* ========================================\n Toolbar Container\n ======================================== */\n\n.markup-toolbar {\n position: fixed;\n left: 50%;\n transform: translateX(-50%);\n background: rgba(34, 34, 34, 0.94);\n border: 1px solid rgba(255, 255, 255, 0.12);\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n padding: 8px 12px;\n display: flex;\n gap: 12px;\n align-items: center;\n z-index: 10000;\n transition: all 200ms ease;\n font-family:\n -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',\n 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n user-select: none;\n}\n\n.markup-toolbar-top {\n top: 60px;\n}\n\n.markup-toolbar-bottom {\n bottom: 80px;\n}\n\n/* ========================================\n Toolbar Sections\n ======================================== */\n\n.toolbar-section {\n display: flex;\n gap: 4px;\n align-items: center;\n padding: 0 8px;\n border-right: 1px solid var(--toolbar-border, #e0e0e0);\n}\n\n.toolbar-section:last-child {\n border-right: none;\n}\n\n.toolbar-section:first-child {\n padding-left: 0;\n}\n\n.toolbar-section.close {\n padding-right: 0;\n}\n\n/* ========================================\n Toolbar Divider (Excalidraw style)\n ======================================== */\n\n.toolbar-divider {\n width: 1px;\n height: 24px;\n background: rgba(255, 255, 255, 0.24);\n margin: 0 4px;\n}\n\n/* ========================================\n Tool Buttons\n ======================================== */\n\n.tool-button {\n width: 36px;\n height: 36px;\n border: none;\n background: transparent;\n border-radius: 4px;\n cursor: pointer;\n transition: background 150ms ease;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n color: #ced4da;\n padding: 0;\n outline: none;\n}\n\n.tool-button svg {\n color: #ced4da;\n fill: currentColor;\n stroke: currentColor;\n}\n\n.tool-button:hover {\n background: rgba(255, 255, 255, 0.08);\n}\n\n.tool-button:active {\n background: rgba(255, 255, 255, 0.12);\n}\n\n.tool-button.active {\n background: #5b8def;\n color: white;\n}\n\n.tool-button.active svg {\n color: white;\n fill: white;\n stroke: white;\n}\n\n.tool-button .tool-icon {\n font-size: 20px;\n line-height: 1;\n}\n\n/* Antd Icon sizing */\n.tool-button .anticon {\n font-size: 16px;\n}\n\n/* ========================================\n Style Controls\n ======================================== */\n\n.toolbar-section.styles {\n gap: 6px;\n}\n\n.style-button {\n height: 32px;\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n}\n\n/* Color picker custom styling */\n.ant-color-picker-trigger {\n height: 32px;\n border-radius: 4px;\n border: 1px solid var(--toolbar-border, #e0e0e0);\n cursor: pointer;\n transition: all 150ms ease;\n}\n\n.ant-color-picker-trigger:hover {\n border-color: var(--toolbar-accent, #1890ff);\n}\n\n/* ========================================\n Action Buttons\n ======================================== */\n\n.toolbar-section.actions {\n gap: 4px;\n}\n\n.action-button {\n height: 32px;\n width: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n transition: all 150ms ease;\n}\n\n.action-button:hover {\n background: var(--tool-hover-bg, #f5f5f5);\n}\n\n.action-button.ant-btn-dangerous {\n color: #ff4d4f;\n}\n\n.action-button.ant-btn-dangerous:hover {\n color: #ff7875;\n background: #fff1f0;\n}\n\n/* ========================================\n Close Button\n ======================================== */\n\n.close-button {\n height: 32px;\n width: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n transition: all 150ms ease;\n color: var(--tool-text-color, #333333);\n}\n\n.close-button:hover {\n background: var(--tool-hover-bg, #f5f5f5);\n color: #ff4d4f;\n}\n\n/* ========================================\n Popover Customization\n ======================================== */\n\n.ant-popover {\n z-index: 1001;\n}\n\n.ant-popover-inner {\n border-radius: 6px;\n box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);\n}\n\n.ant-popover-title {\n font-weight: 600;\n font-size: 13px;\n border-bottom: 1px solid var(--toolbar-border, #e0e0e0);\n}\n\n/* ========================================\n Slider Customization\n ======================================== */\n\n.ant-slider {\n margin: 8px 0;\n}\n\n.ant-slider-mark-text {\n font-size: 11px;\n}\n\n/* ========================================\n Dark Theme\n ======================================== */\n\n.theme-dark {\n --toolbar-bg: #2c2c2c;\n --toolbar-border: #404040;\n --toolbar-accent: #4096ff;\n --tool-text-color: #e0e0e0;\n --tool-hover-bg: #3c3c3c;\n --tool-active-bg-temp: #4c4c4c;\n --tool-active-bg: #1890ff;\n}\n\n.theme-dark .tool-button {\n color: var(--tool-text-color);\n}\n\n.theme-dark .tool-button.active {\n color: white;\n}\n\n.theme-dark .close-button {\n color: var(--tool-text-color);\n}\n\n.theme-dark .close-button:hover {\n background: var(--tool-hover-bg);\n color: #ff7875;\n}\n\n.theme-dark .ant-color-picker-trigger {\n border-color: var(--toolbar-border);\n background: var(--toolbar-bg);\n}\n\n.theme-dark .ant-color-picker-trigger:hover {\n border-color: var(--toolbar-accent);\n}\n\n.theme-dark .action-button {\n color: var(--tool-text-color);\n}\n\n.theme-dark .action-button:hover {\n background: var(--tool-hover-bg);\n}\n\n.theme-dark .action-button.ant-btn-dangerous {\n color: #ff7875;\n}\n\n.theme-dark .action-button.ant-btn-dangerous:hover {\n background: #3c2424;\n}\n\n/* ========================================\n Responsive Design\n ======================================== */\n\n@media (max-width: 768px) {\n .markup-toolbar {\n flex-wrap: wrap;\n max-width: 90vw;\n padding: 6px 8px;\n gap: 8px;\n }\n\n .toolbar-section {\n padding: 0 4px;\n }\n\n .tool-button {\n width: 32px;\n height: 32px;\n font-size: 16px;\n }\n\n .style-button,\n .action-button,\n .close-button {\n height: 28px;\n width: 28px;\n }\n}\n\n@media (max-width: 480px) {\n .markup-toolbar {\n bottom: 8px;\n top: auto !important;\n max-width: 95vw;\n }\n\n .toolbar-section {\n gap: 2px;\n padding: 0 2px;\n }\n\n .tool-button {\n width: 28px;\n height: 28px;\n font-size: 14px;\n }\n\n .tool-button .anticon {\n font-size: 14px;\n }\n\n .style-button,\n .action-button,\n .close-button {\n height: 24px;\n width: 24px;\n }\n\n /* Hide text labels on mobile */\n .style-button span:not(.anticon) {\n display: none;\n }\n}\n\n/* ========================================\n Animations\n ======================================== */\n\n@keyframes toolbar-fade-in {\n from {\n opacity: 0;\n transform: translateX(-50%) translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateX(-50%) translateY(0);\n }\n}\n\n.markup-toolbar {\n animation: toolbar-fade-in 200ms ease-out;\n}\n\n/* ========================================\n Print Mode (Hide toolbar when printing)\n ======================================== */\n\n@media print {\n .markup-toolbar {\n display: none !important;\n }\n}\n\n/* ========================================\n Accessibility\n ======================================== */\n\n.tool-button:focus-visible,\n.action-button:focus-visible,\n.close-button:focus-visible {\n outline: 2px solid var(--toolbar-accent, #1890ff);\n outline-offset: 2px;\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n .markup-toolbar {\n border-width: 2px;\n }\n\n .tool-button,\n .action-button,\n .close-button {\n border: 1px solid transparent;\n }\n\n .tool-button:focus-visible,\n .action-button:focus-visible,\n .close-button:focus-visible {\n border-color: currentColor;\n }\n}\n\n/* Reduce motion for accessibility */\n@media (prefers-reduced-motion: reduce) {\n .markup-toolbar,\n .tool-button,\n .action-button,\n .close-button,\n .ant-color-picker-trigger {\n transition: none;\n }\n\n .markup-toolbar {\n animation: none;\n }\n}\n";
|
|
48088
48088
|
styleInject(css_248z$3);
|
|
48089
48089
|
|
|
48090
|
-
var css_248z$2 = "/**\n * Property Panel Styles - Excalidraw 100% Match\n *\n * @file property-panel.css\n * @description Exact match of Excalidraw's property panel (Island + App-menu__left)\n */\n\n/* ========================================\n CSS Variables (Excalidraw Exact)\n ======================================== */\n\n.property-panel {\n /* Sizing */\n --default-button-size: 2rem;\n --default-icon-size: 1rem;\n --border-radius-lg: 0.5rem;\n --border-radius-md: 0.375rem;\n --space-factor: 0.25rem;\n --padding: 2;\n\n /* Colors - Dark Theme */\n --island-bg-color: rgba(34, 34, 34, 0.94);\n --button-bg: rgba(255, 255, 255, 0.1);\n --button-hover-bg: rgba(255, 255, 255, 0.15);\n --button-active-bg: rgba(255, 255, 255, 0.2);\n --button-active-border: #6965db;\n --button-border: rgba(255, 255, 255, 0.1);\n --button-gray-1: rgba(255, 255, 255, 0.08);\n --button-gray-2: rgba(255, 255, 255, 0.12);\n --button-gray-3: rgba(255, 255, 255, 0.16);\n --default-border-color: rgba(255, 255, 255, 0.15);\n --text-primary-color: #e0e0e0;\n --icon-fill-color: #e0e0e0;\n --color-primary: #6965db;\n --color-primary-darkest: #8b87ff;\n --color-surface-primary-container: rgba(101, 97, 219, 0.3);\n --color-on-primary-container: #ffffff;\n\n /* Slider */\n --slider-thumb-size: 16px;\n --color-slider-track: rgba(255, 255, 255, 0.2);\n --color-slider-thumb: #e0e0e0;\n\n /* Shadow */\n --shadow-island:\n 0px 2px 8px rgba(0, 0, 0, 0.3), 0px 4px 16px rgba(0, 0, 0, 0.2);\n\n /* UI Font */\n --ui-font:\n -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',\n 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n}\n\n/* ========================================\n Island Container (Excalidraw Structure)\n ======================================== */\n\n.property-panel.Island {\n box-sizing: border-box;\n background-color: var(--island-bg-color);\n box-shadow: var(--shadow-island);\n border-radius: var(--border-radius-lg);\n padding: calc(var(--padding) * var(--space-factor)); /* 0.5rem */\n position: fixed;\n top: 80px;\n left: 16px;\n z-index: 9998;\n animation: fadeInSlide 200ms ease;\n overflow: visible; /* Allow popups to overflow */\n max-height: calc(100vh - 100px);\n font-family: var(--ui-font);\n}\n\n/* ========================================\n App Menu Left (Excalidraw Structure)\n ======================================== */\n\n.property-panel.App-menu__left {\n overflow-y: auto; /* Scrollable content */\n overflow-x: visible; /* Allow horizontal overflow for popups */\n padding: 0.5rem; /* Compact padding */\n width: 14rem; /* 224px - wider to fit 5 colors + gaps + active color */\n max-height: calc(100vh - 100px);\n box-sizing: border-box;\n\n /* Dark theme button overrides */\n --button-border: rgba(255, 255, 255, 0.1);\n --button-bg: rgba(255, 255, 255, 0.1);\n}\n\n.App-menu__left .buttonList {\n padding: 0.25rem 0;\n}\n\n/* ========================================\n Selected Shape Actions (Excalidraw Structure)\n ======================================== */\n\n.selected-shape-actions {\n display: flex;\n flex-direction: column;\n row-gap: 0.5rem; /* 8px - compact spacing */\n}\n\n@keyframes fadeInSlide {\n from {\n opacity: 0;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.property-panel-right {\n left: auto;\n right: 16px;\n}\n\n/* ========================================\n Scrollbar Styling\n ======================================== */\n\n.property-panel.App-menu__left::-webkit-scrollbar {\n width: 4px;\n}\n\n.property-panel.App-menu__left::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.property-panel.App-menu__left::-webkit-scrollbar-thumb {\n background: var(--default-border-color);\n border-radius: 2px;\n}\n\n/* ========================================\n Typography & Fieldset (Excalidraw Exact)\n ======================================== */\n\n.selected-shape-actions fieldset {\n margin: 0; /* NO margin-bottom! Parent row-gap handles spacing */\n padding: 0;\n border: none;\n}\n\n.selected-shape-actions h3,\n.selected-shape-actions legend,\n.selected-shape-actions .control-label {\n margin: 0;\n margin-bottom: 0.25rem; /* 4px, NOT 8px! */\n font-size: 0.75rem; /* 12px */\n color: var(--text-primary-color);\n font-weight: 400; /* NOT 500! */\n display: block;\n line-height: 1;\n}\n\n.selected-shape-actions legend {\n padding: 0;\n}\n\n/* ========================================\n Button List (Excalidraw outlineButtonIconStyles)\n ======================================== */\n\n.selected-shape-actions .buttonList {\n flex-wrap: wrap;\n display: flex;\n column-gap: 0.5rem; /* 8px */\n row-gap: 0.5rem; /* 8px */\n}\n\n.buttonList label,\n.buttonList button,\n.zIndexButton {\n /* outlineButtonStyles base + icon override */\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0; /* NOT 0.625rem! outlineButtonIconStyles override */\n width: var(--default-button-size); /* 2rem */\n height: var(--default-button-size);\n box-sizing: border-box;\n border-width: 1px;\n border-style: solid;\n border-color: var(--button-border); /* transparent */\n border-radius: var(--border-radius-lg); /* 0.5rem = 8px */\n cursor: pointer;\n background-color: var(--button-bg); /* #f6f6f9 */\n color: var(--icon-fill-color);\n font-family: var(--ui-font);\n transition: all 150ms ease;\n margin: 0;\n position: relative;\n}\n\n.buttonList label:hover,\n.buttonList button:not(.ToolIcon):hover,\n.zIndexButton:hover {\n background-color: var(--button-hover-bg); /* #f1f0ff */\n border-color: var(--default-border-color); /* #f1f0ff */\n}\n\n.buttonList label:active,\n.buttonList button:not(.ToolIcon):active,\n.zIndexButton:active {\n background-color: var(--button-active-bg); /* #f1f0ff */\n border-color: var(--button-active-border); /* #4440bf */\n}\n\n.buttonList label.active,\n.buttonList button:not(.ToolIcon).active {\n background-color: var(--color-surface-primary-container);\n border-color: var(--color-primary);\n box-shadow: 0 0 0 2px var(--color-primary);\n color: var(--color-on-primary-container);\n}\n\n.buttonList label.active svg,\n.buttonList button:not(.ToolIcon).active svg {\n color: var(--color-on-primary-container);\n}\n\n/* ToolIcon buttons in buttonList - hover state targets inner icon */\n.buttonList button.ToolIcon:hover .ToolIcon__icon {\n background-color: var(--button-hover-bg);\n border-color: var(--default-border-color);\n}\n\n/* ToolIcon buttons in buttonList - active/pressed state */\n.buttonList button.ToolIcon:active .ToolIcon__icon {\n background-color: var(--button-active-bg);\n border-color: var(--button-active-border);\n}\n\n/* ToolIcon buttons in buttonList - selected state */\n.buttonList button.ToolIcon.active .ToolIcon__icon {\n background-color: var(--color-surface-primary-container);\n border-color: var(--color-primary);\n box-shadow: 0 0 0 2px var(--color-primary);\n color: var(--color-on-primary-container);\n}\n\n.buttonList button.ToolIcon.active .ToolIcon__icon svg {\n color: var(--color-on-primary-container);\n}\n\n/* Danger variant in buttonList */\n.buttonList button.ToolIcon.danger .ToolIcon__icon {\n color: #ff6b6b;\n}\n\n.buttonList button.ToolIcon.danger:hover .ToolIcon__icon {\n background-color: rgba(255, 107, 107, 0.15);\n border-color: #ff6b6b;\n}\n\n/* Hide radio inputs */\n.buttonList input[type='radio'],\n.buttonList input[type='checkbox'] {\n opacity: 0;\n position: absolute;\n pointer-events: none;\n}\n\n/* Focus state */\n.buttonList label:focus-within {\n outline: transparent;\n box-shadow: 0 0 0 2px var(--color-primary); /* Excalidraw focus */\n}\n\n/* SVG icons inside buttons */\n.buttonList svg {\n position: relative;\n width: var(--default-icon-size); /* 1rem */\n height: var(--default-icon-size);\n stroke: currentColor;\n fill: none;\n}\n\n/* ========================================\n Color Picker (Excalidraw Exact)\n ======================================== */\n\n.color-picker-container {\n display: flex;\n gap: 0.5rem; /* 8px gap between sections */\n padding: 0.25rem 0px;\n align-items: center;\n}\n\n.color-picker__top-picks {\n display: flex;\n gap: 0.5rem; /* 8px gap between color buttons */\n align-items: center;\n flex: 1; /* Take remaining space */\n}\n\n.color-picker__button {\n --radius: 4px;\n --size: 1.375rem; /* 22px for top picks, NOT 2rem! */\n\n padding: 0;\n margin: 0;\n width: var(--size);\n height: var(--size);\n border: 0; /* NO border! */\n border-radius: var(--radius);\n background-color: var(--swatch-color);\n cursor: pointer;\n position: relative;\n transition: transform 150ms ease;\n filter: var(--theme-filter, none);\n}\n\n.color-picker__button:hover:not(.active):not(.active-color) {\n transform: scale(1.075); /* Exact Excalidraw */\n}\n\n.color-picker__button.active .color-picker__button-outline {\n position: absolute;\n --offset: -1px;\n top: var(--offset);\n left: var(--offset);\n right: var(--offset);\n bottom: var(--offset);\n box-shadow: 0 0 0 1px var(--color-primary-darkest); /* #4a47b1, NOT border! */\n z-index: 1;\n border-radius: var(--radius);\n filter: var(--theme-filter, none);\n}\n\n.color-picker__button-outline {\n /* Empty outline by default */\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Hotkey label on color buttons (Excalidraw exact) */\n.color-picker__button__hotkey-label {\n position: absolute;\n right: 5px;\n bottom: 3px;\n filter: none;\n font-size: 11px;\n font-weight: 500;\n pointer-events: none; /* Don't interfere with button clicks */\n user-select: none;\n line-height: 1;\n}\n\n/* Color divider */\n.color-divider {\n width: 1px;\n height: 1rem;\n background-color: var(--default-border-color); /* #f1f0ff */\n margin: 0; /* Grid handles spacing */\n}\n\n/* Active color button (larger) */\n.color-picker__button.active-color {\n width: 1.625rem; /* 26px */\n height: 1.625rem;\n border-radius: calc(var(--radius) + 1px); /* 5px */\n position: relative; /* For popup positioning */\n}\n\n/* Color Picker Popup Container (Excalidraw style) */\n.color-picker-popup-wrapper {\n position: relative;\n}\n\n.color-picker-popup {\n /* Position set via inline style (Portal with dynamic fixed position) */\n z-index: 10000; /* High z-index to appear above everything */\n background: var(--island-bg-color);\n box-shadow: var(--shadow-island);\n border-radius: var(--border-radius-lg);\n padding: 0.5rem;\n pointer-events: all; /* Ensure popup is clickable */\n}\n\n/* Island Wrapper (Color Picker Popup - Light theme for readability) */\n.Island {\n /* Define CSS variables for popup (since it's portaled to body) */\n --padding: 0;\n --space-factor: 0.25rem;\n --border-radius-lg: 0.5rem;\n --island-bg-color: rgba(34, 34, 34, 0.96);\n --shadow-island:\n 0px 2px 8px rgba(0, 0, 0, 0.3), 0px 4px 16px rgba(0, 0, 0, 0.2);\n --text-primary-color: #e0e0e0;\n --default-border-color: rgba(255, 255, 255, 0.15);\n --color-primary: #6965db;\n --color-primary-darkest: #8b87ff;\n --ui-font:\n -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',\n 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n\n box-sizing: border-box;\n background-color: var(--island-bg-color);\n box-shadow: var(--shadow-island);\n border-radius: var(--border-radius-lg);\n padding: calc(var(--padding) * var(--space-factor));\n position: relative;\n transition: box-shadow 0.5s ease-in-out;\n font-family: var(--ui-font);\n}\n\n/* Arrow SVG container - Excalidraw exact positioning */\n.color-picker-popup-arrow {\n position: absolute;\n left: 0px;\n transform-origin: 0px 0px;\n transform: translateY(50%) rotate(90deg) translateX(-50%);\n /* top is set dynamically via inline style */\n pointer-events: none;\n}\n\n.color-picker-popup-arrow svg {\n display: block;\n fill: rgba(34, 34, 34, 0.96);\n filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 3px 2px);\n}\n\n/* Legacy triangle - kept for backwards compatibility */\n.color-picker-popup-triangle {\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 9px 10px 9px 0;\n border-color: transparent var(--island-bg-color) transparent transparent;\n position: absolute;\n left: -10px;\n top: 25px;\n filter: drop-shadow(-1px 0 1px rgba(0, 0, 0, 0.1));\n}\n\n.color-picker__button.active-color .color-picker__button-outline {\n position: absolute;\n --offset: -1px;\n top: var(--offset);\n left: var(--offset);\n right: var(--offset);\n bottom: var(--offset);\n box-shadow: 0 0 0 1px var(--color-primary-darkest);\n border-radius: calc(var(--radius) + 1px);\n filter: var(--theme-filter, none);\n}\n\n/* ========================================\n Color Picker Popup Content (Excalidraw Exact)\n ======================================== */\n\n.color-picker-content {\n display: flex;\n flex-direction: column;\n gap: 0.75rem; /* 12px between sections */\n outline: none;\n}\n\n.color-picker-content.properties-content {\n padding: 0.5rem; /* 8px padding inside popup */\n}\n\n/* Ensure all sections inside popup are visible */\n.color-picker-content > div {\n display: block;\n}\n\n.color-picker__heading {\n padding: 0 0.5rem;\n font-size: 0.75rem; /* 12px */\n text-align: left;\n color: var(--text-primary-color);\n margin-bottom: 0.5rem; /* 8px */\n font-weight: 400;\n}\n\n.color-picker-content--default {\n padding: 0.5rem; /* 8px */\n display: grid;\n grid-template-columns: repeat(5, 1.875rem); /* 5 columns, 30px each */\n grid-gap: 0.25rem; /* 4px gap */\n border-radius: 4px;\n}\n\n.color-picker-content--default:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--color-primary);\n}\n\n/* Shades section styling */\n.color-picker-content--default.shades {\n margin-top: 0;\n}\n\n/* Large buttons in popup (30px vs 22px in top picks) */\n.color-picker__button--large {\n --size: 1.875rem; /* 30px */\n width: var(--size) !important;\n height: var(--size) !important;\n}\n\n.color-picker__button.has-outline {\n box-shadow: inset 0 0 0 1px #d9d9d9;\n}\n\n/* No focus visible button (for shades placeholder) */\n.color-picker__button--no-focus-visible {\n border: 0;\n}\n\n.color-picker__button--no-focus-visible::after {\n display: none;\n}\n\n.color-picker__button--no-focus-visible:focus-visible {\n outline: none !important;\n}\n\n/* Transparent button (checkerboard pattern) */\n.color-picker__button.is-transparent {\n background-color: transparent !important;\n background-image:\n linear-gradient(45deg, #808080 25%, transparent 25%),\n linear-gradient(-45deg, #808080 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, #808080 75%),\n linear-gradient(-45deg, transparent 75%, #808080 75%);\n background-size: 8px 8px;\n background-position:\n 0 0,\n 0 4px,\n 4px -4px,\n -4px 0px;\n}\n\n.color-picker__button.is-transparent.has-outline {\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);\n}\n\n/* Hex input field (Excalidraw exact) */\n.color-picker__input-label {\n display: grid;\n grid-template-columns: auto 1fr auto auto;\n gap: 8px;\n align-items: center;\n border: 1px solid var(--default-border-color);\n border-radius: 8px;\n padding: 0 12px;\n margin: 8px;\n box-sizing: border-box;\n}\n\n.color-picker__input-label:focus-within {\n box-shadow: 0 0 0 1px var(--color-primary-darkest);\n border-radius: var(--border-radius-lg);\n}\n\n.color-picker__input-hash {\n padding: 0 0.25rem;\n color: var(--text-primary-color);\n}\n\n.color-picker-input {\n box-sizing: border-box;\n width: 100%;\n margin: 0;\n font-size: 0.875rem; /* 14px */\n font-family: inherit;\n background-color: transparent;\n color: var(--text-primary-color);\n border: 0;\n outline: none;\n height: var(--default-button-size); /* 2rem = 32px */\n letter-spacing: 0.4px;\n padding: 0.5rem 0.25rem;\n}\n\n.color-picker-input:focus-visible {\n box-shadow: none;\n}\n\n/* Hex input divider */\n.color-picker__input-divider {\n width: 1px;\n height: 1.25rem; /* 20px */\n background-color: var(--default-border-color);\n margin: 0;\n}\n\n/* Eye dropper trigger (Excalidraw exact) */\n.excalidraw-eye-dropper-trigger {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--text-primary-color);\n transition: color 150ms ease;\n width: 1rem; /* 16px - fixed width */\n height: 1rem; /* 16px - fixed height */\n flex-shrink: 0; /* Don't shrink */\n}\n\n.excalidraw-eye-dropper-trigger:hover {\n color: var(--color-primary-darkest);\n}\n\n.excalidraw-eye-dropper-trigger svg {\n width: 1rem; /* 16px - Excalidraw exact */\n height: 1rem;\n}\n\n/* ========================================\n Range Slider (Excalidraw Exact)\n ======================================== */\n\n.range-wrapper {\n position: relative;\n padding-top: 8px;\n padding-bottom: 20px;\n overflow: visible;\n}\n\n.range-input {\n width: 100%;\n height: 6px;\n -webkit-appearance: none;\n background: var(--color-slider-track);\n border-radius: 3px;\n outline: none;\n cursor: pointer;\n}\n\n.range-input::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: var(--slider-thumb-size); /* 16px */\n height: var(--slider-thumb-size);\n background: var(--color-primary);\n border-radius: 50%;\n cursor: pointer;\n border: 2px solid #fff;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n transition: transform 0.1s ease;\n}\n\n.range-input::-webkit-slider-thumb:hover {\n transform: scale(1.1);\n}\n\n.range-input::-webkit-slider-thumb:active {\n transform: scale(1.15);\n}\n\n.range-input::-moz-range-thumb {\n width: var(--slider-thumb-size);\n height: var(--slider-thumb-size);\n background: var(--color-primary);\n border-radius: 50%;\n cursor: pointer;\n border: 2px solid #fff;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n\n.range-input::-moz-range-track {\n background: transparent;\n border: none;\n}\n\n.range-input:focus {\n outline: none;\n}\n\n.range-input:focus::-webkit-slider-thumb {\n box-shadow:\n 0 0 0 3px rgba(105, 101, 219, 0.3),\n 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n\n/* Value bubble - always visible, follows thumb */\n.value-bubble {\n position: absolute;\n bottom: 0;\n transform: translateX(-50%);\n font-size: 12px;\n font-weight: 500;\n color: var(--color-primary);\n pointer-events: none;\n transition: left 0.05s ease-out;\n}\n\n.zero-label {\n position: absolute;\n bottom: 0;\n left: 0;\n font-size: 11px;\n color: var(--text-primary-color);\n opacity: 0.6;\n transition: opacity 0.15s ease;\n}\n\n.max-label {\n position: absolute;\n bottom: 0;\n right: 0;\n font-size: 11px;\n color: var(--text-primary-color);\n opacity: 0.6;\n transition: opacity 0.15s ease;\n}\n\n/* Hide min/max labels when value is close */\n.zero-label.hidden,\n.max-label.hidden {\n opacity: 0;\n}\n\n/* Ant Design Slider override */\n.slider-control .ant-slider {\n margin: 8px 0;\n}\n\n.slider-control .ant-slider-rail {\n background: var(--panel-border, #e5e5e5);\n}\n\n.slider-control .ant-slider-track {\n background: var(--panel-accent, #6965db);\n}\n\n.slider-control .ant-slider-handle::after {\n box-shadow: 0 0 0 2px var(--panel-accent, #6965db);\n}\n\n/* ========================================\n Select Dropdown (Excalidraw Style)\n ======================================== */\n\n.iconSelectList {\n display: flex;\n gap: 0.5rem;\n}\n\n.iconSelectList.buttonList {\n flex-wrap: wrap;\n column-gap: 0.5rem;\n row-gap: 0.5rem;\n}\n\n.iconSelectList button,\n.iconSelectList label {\n width: auto;\n min-width: 2rem;\n height: 2rem;\n padding: 0 0.25rem;\n border: 1px solid var(--panel-border, #e5e5e5);\n border-radius: 4px;\n background-color: var(--panel-bg, #ffffff);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 150ms ease;\n}\n\n.iconSelectList button:hover,\n.iconSelectList label:hover {\n background-color: var(--panel-hover-bg, #f5f5f5);\n border-color: var(--panel-accent, #6965db);\n}\n\n.iconSelectList button svg,\n.iconSelectList label svg {\n stroke: currentColor;\n fill: none;\n}\n\n/* Ant Design Select override */\n.select-control .ant-select-selector {\n border-radius: 4px;\n border: 1px solid var(--panel-border, #e5e5e5);\n background: var(--panel-bg, #ffffff);\n font-size: 0.75rem;\n height: 2rem;\n}\n\n/* ========================================\n Layer Actions (Now handled by buttonList)\n ======================================== */\n/* .zIndexButton styles are now covered by .buttonList button styles above */\n\n/* ========================================\n ToolIcon Component (Excalidraw Exact)\n ======================================== */\n\n.ToolIcon {\n border-radius: var(--border-radius-lg);\n display: inline-flex;\n align-items: center;\n position: relative;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n user-select: none;\n}\n\n.ToolIcon_type_button {\n padding: 0;\n border: none;\n margin: 0;\n font-size: inherit;\n background-color: initial; /* transparent */\n}\n\n.ToolIcon_type_button:focus-visible {\n box-shadow: 0 0 0 2px var(--color-primary);\n}\n\n.ToolIcon_type_button:active {\n background-color: transparent; /* Button itself stays transparent */\n}\n\n.ToolIcon_type_button.ToolIcon--selected {\n background-color: transparent;\n}\n\n.ToolIcon__icon {\n box-sizing: border-box;\n width: var(--default-button-size); /* 2rem */\n height: var(--default-button-size);\n color: var(--icon-fill-color);\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--border-radius-lg); /* 0.5rem */\n border-width: 1px;\n border-style: solid;\n border-color: var(--button-border); /* transparent */\n background-color: var(--button-bg); /* #f6f6f9 */\n transition: all 150ms ease;\n}\n\n.ToolIcon__icon:hover {\n background-color: var(--button-hover-bg); /* #f1f0ff */\n border-color: var(--default-border-color); /* #f1f0ff */\n}\n\n.ToolIcon__icon:active {\n background-color: var(--button-active-bg); /* #f1f0ff */\n border-color: var(--button-active-border); /* #4440bf */\n}\n\n.ToolIcon__icon[aria-disabled='true'] {\n background: initial;\n border: none;\n}\n\n.ToolIcon__icon[aria-disabled='true'] svg {\n color: var(--color-disabled, #c0c0c0);\n}\n\n.ToolIcon__icon svg {\n position: relative;\n width: var(--default-icon-size); /* 1rem */\n height: var(--default-icon-size);\n color: var(--icon-fill-color);\n}\n\n.ToolIcon_size_small .ToolIcon__icon {\n width: 2rem;\n height: 2rem;\n font-size: 0.8em;\n}\n\n.ToolIcon_size_medium .ToolIcon__icon {\n width: 2rem;\n height: 2rem;\n}\n\n/* Selected state for ToolIcon (matching buttonList .active) */\n.ToolIcon.active .ToolIcon__icon,\n.ToolIcon--selected .ToolIcon__icon {\n background-color: var(--color-surface-primary-container);\n border-color: var(--color-primary);\n box-shadow: 0 0 0 2px var(--color-primary);\n color: var(--color-on-primary-container);\n}\n\n.ToolIcon.active .ToolIcon__icon svg,\n.ToolIcon--selected .ToolIcon__icon svg {\n color: var(--color-on-primary-container);\n}\n\n/* Danger variant for delete actions */\n.ToolIcon.danger .ToolIcon__icon {\n color: #ff6b6b;\n}\n\n.ToolIcon.danger .ToolIcon__icon:hover {\n background-color: rgba(255, 107, 107, 0.15);\n border-color: #ff6b6b;\n}\n\n/* Danger variant active state (keep danger styling even when active) */\n.ToolIcon.danger.active .ToolIcon__icon,\n.ToolIcon.danger.ToolIcon--selected .ToolIcon__icon {\n background-color: rgba(255, 107, 107, 0.25);\n border-color: #ff6b6b;\n box-shadow: 0 0 0 2px #ff6b6b;\n color: #ff6b6b;\n}\n\n/* ========================================\n Action Icon Buttons (Legacy - to be removed)\n ======================================== */\n\n.action-icon-button {\n width: 2rem;\n height: 2rem;\n padding: 0;\n border: 1px solid var(--panel-border, #e5e5e5);\n border-radius: 4px;\n background-color: var(--panel-bg, #ffffff);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 150ms ease;\n font-size: 1rem;\n color: var(--panel-text, #1e1e1e);\n}\n\n.action-icon-button:hover {\n background-color: var(--panel-hover-bg, #f5f5f5);\n border-color: var(--panel-accent, #6965db);\n}\n\n.action-icon-button:active {\n transform: scale(0.95);\n}\n\n.action-icon-button.danger {\n color: #ff6b6b;\n}\n\n.action-icon-button.danger:hover {\n background-color: rgba(255, 107, 107, 0.15);\n border-color: #ff6b6b;\n}\n\n/* ========================================\n Divider\n ======================================== */\n\n.property-divider {\n height: 1px;\n background: var(--panel-border, #e5e5e5);\n margin: 12px 0;\n}\n\n/* ========================================\n Property Sections\n ======================================== */\n\n.property-section {\n margin-bottom: 12px;\n}\n\n.property-section:last-child {\n margin-bottom: 0;\n}\n\n.property-control {\n margin-bottom: 12px;\n}\n\n.property-control:last-child {\n margin-bottom: 0;\n}\n\n/* ========================================\n Dark Theme (Excalidraw Exact)\n ======================================== */\n\n.theme-dark .property-panel {\n /* Dark theme colors */\n --island-bg-color: #121212;\n --button-bg: #363541;\n --button-hover-bg: #363541;\n --button-active-bg: #363541;\n --button-gray-1: #363636;\n --button-gray-2: #272727;\n --button-gray-3: #222;\n --default-border-color: #3a3a3a;\n --text-primary-color: #e0e0e0;\n --icon-fill-color: #e0e0e0;\n --color-slider-track: #3a3a3a;\n --color-slider-thumb: #b8b8b8;\n --button-border: transparent;\n}\n\n.theme-dark .property-panel.App-menu__left {\n --button-bg: var(--color-surface-high, #2a2a3a);\n}\n\n.theme-dark .property-panel.Island {\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);\n}\n\n/* ========================================\n Responsive\n ======================================== */\n\n@media (max-width: 768px) {\n .property-panel {\n width: 180px;\n top: 70px;\n left: 8px;\n }\n\n .property-panel-right {\n right: 8px;\n }\n}\n\n/* ========================================\n Utility Classes\n ======================================== */\n\n.property-panel-hidden {\n display: none;\n}\n\n.property-panel-compact {\n width: 160px;\n}\n\n.text-muted {\n color: var(--panel-text-secondary, #6b6b6b);\n font-size: 0.7rem;\n}\n\n.text-small {\n font-size: 0.7rem;\n}\n\n/* ========================================\n Inline Select (for button groups)\n ======================================== */\n\n.buttonList .inline-select {\n width: var(--default-button-size);\n height: var(--default-button-size);\n padding: 0;\n border: 1px solid var(--button-border);\n border-radius: var(--border-radius-lg);\n font-size: 0.65rem;\n text-align: center;\n text-align-last: center;\n background-color: var(--button-bg);\n color: var(--text-primary-color);\n cursor: pointer;\n flex-shrink: 0;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n transition: all 150ms ease;\n}\n\n.buttonList .inline-select:hover {\n background-color: var(--button-hover-bg);\n border-color: var(--default-border-color);\n}\n\n.buttonList .inline-select:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--color-primary);\n}\n\n.buttonList .inline-select.active {\n background-color: var(--color-surface-primary-container);\n border-color: var(--color-primary);\n box-shadow: 0 0 0 2px var(--color-primary);\n color: var(--color-on-primary-container);\n}\n\n.buttonList .inline-select option {\n background-color: var(--island-bg-color);\n color: var(--text-primary-color);\n}\n\n/* ========================================\n Control Label (for Opacity slider)\n ======================================== */\n\n.control-label {\n display: block;\n font-size: 0.75rem;\n font-weight: 500;\n color: var(--text-primary-color, #e0e0e0);\n margin-bottom: 4px;\n}\n";
|
|
48090
|
+
var css_248z$2 = "/**\n * Property Panel Styles - Excalidraw 100% Match\n *\n * @file property-panel.css\n * @description Exact match of Excalidraw's property panel (Island + App-menu__left)\n */\n\n/* ========================================\n CSS Variables (Excalidraw Exact)\n ======================================== */\n\n.property-panel {\n /* Sizing */\n --default-button-size: 2rem;\n --default-icon-size: 1rem;\n --border-radius-lg: 0.5rem;\n --border-radius-md: 0.375rem;\n --space-factor: 0.25rem;\n --padding: 2;\n\n /* Colors - Dark Theme */\n --island-bg-color: rgba(34, 34, 34, 0.94);\n --button-bg: rgba(255, 255, 255, 0.1);\n --button-hover-bg: rgba(255, 255, 255, 0.15);\n --button-active-bg: rgba(255, 255, 255, 0.2);\n --button-active-border: #6965db;\n --button-border: rgba(255, 255, 255, 0.1);\n --button-gray-1: rgba(255, 255, 255, 0.08);\n --button-gray-2: rgba(255, 255, 255, 0.12);\n --button-gray-3: rgba(255, 255, 255, 0.16);\n --default-border-color: rgba(255, 255, 255, 0.15);\n --text-primary-color: #e0e0e0;\n --icon-fill-color: #e0e0e0;\n --color-primary: #6965db;\n --color-primary-darkest: #8b87ff;\n --color-surface-primary-container: rgba(101, 97, 219, 0.3);\n --color-on-primary-container: #ffffff;\n\n /* Slider */\n --slider-thumb-size: 16px;\n --color-slider-track: rgba(255, 255, 255, 0.2);\n --color-slider-thumb: #e0e0e0;\n\n /* Shadow */\n --shadow-island:\n 0px 2px 8px rgba(0, 0, 0, 0.3), 0px 4px 16px rgba(0, 0, 0, 0.2);\n\n /* UI Font */\n --ui-font:\n -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',\n 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n}\n\n/* ========================================\n Island Container (Excalidraw Structure)\n ======================================== */\n\n.property-panel.Island {\n box-sizing: border-box;\n background-color: var(--island-bg-color);\n box-shadow: var(--shadow-island);\n border-radius: var(--border-radius-lg);\n padding: calc(var(--padding) * var(--space-factor)); /* 0.5rem */\n position: fixed;\n top: 180px;\n left: 16px;\n z-index: 9998;\n animation: fadeInSlide 200ms ease;\n overflow: visible; /* Allow popups to overflow */\n max-height: calc(100vh - 200px);\n font-family: var(--ui-font);\n}\n\n/* ========================================\n App Menu Left (Excalidraw Structure)\n ======================================== */\n\n.property-panel.App-menu__left {\n overflow-y: auto; /* Scrollable content */\n overflow-x: visible; /* Allow horizontal overflow for popups */\n padding: 0.5rem; /* Compact padding */\n width: 14rem; /* 224px - wider to fit 5 colors + gaps + active color */\n max-height: calc(100vh - 100px);\n box-sizing: border-box;\n\n /* Dark theme button overrides */\n --button-border: rgba(255, 255, 255, 0.1);\n --button-bg: rgba(255, 255, 255, 0.1);\n}\n\n.App-menu__left .buttonList {\n padding: 0.25rem 0;\n}\n\n/* ========================================\n Selected Shape Actions (Excalidraw Structure)\n ======================================== */\n\n.selected-shape-actions {\n display: flex;\n flex-direction: column;\n row-gap: 0.5rem; /* 8px - compact spacing */\n}\n\n@keyframes fadeInSlide {\n from {\n opacity: 0;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.property-panel-right {\n left: auto;\n right: 16px;\n}\n\n/* ========================================\n Scrollbar Styling\n ======================================== */\n\n.property-panel.App-menu__left::-webkit-scrollbar {\n width: 4px;\n}\n\n.property-panel.App-menu__left::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.property-panel.App-menu__left::-webkit-scrollbar-thumb {\n background: var(--default-border-color);\n border-radius: 2px;\n}\n\n/* ========================================\n Typography & Fieldset (Excalidraw Exact)\n ======================================== */\n\n.selected-shape-actions fieldset {\n margin: 0; /* NO margin-bottom! Parent row-gap handles spacing */\n padding: 0;\n border: none;\n}\n\n.selected-shape-actions h3,\n.selected-shape-actions legend,\n.selected-shape-actions .control-label {\n margin: 0;\n margin-bottom: 0.25rem; /* 4px, NOT 8px! */\n font-size: 0.75rem; /* 12px */\n color: var(--text-primary-color);\n font-weight: 400; /* NOT 500! */\n display: block;\n line-height: 1;\n}\n\n.selected-shape-actions legend {\n padding: 0;\n}\n\n/* ========================================\n Button List (Excalidraw outlineButtonIconStyles)\n ======================================== */\n\n.selected-shape-actions .buttonList {\n flex-wrap: wrap;\n display: flex;\n column-gap: 0.5rem; /* 8px */\n row-gap: 0.5rem; /* 8px */\n}\n\n.buttonList label,\n.buttonList button,\n.zIndexButton {\n /* outlineButtonStyles base + icon override */\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0; /* NOT 0.625rem! outlineButtonIconStyles override */\n width: var(--default-button-size); /* 2rem */\n height: var(--default-button-size);\n box-sizing: border-box;\n border-width: 1px;\n border-style: solid;\n border-color: var(--button-border); /* transparent */\n border-radius: var(--border-radius-lg); /* 0.5rem = 8px */\n cursor: pointer;\n background-color: var(--button-bg); /* #f6f6f9 */\n color: var(--icon-fill-color);\n font-family: var(--ui-font);\n transition: all 150ms ease;\n margin: 0;\n position: relative;\n}\n\n.buttonList label:hover,\n.buttonList button:not(.ToolIcon):hover,\n.zIndexButton:hover {\n background-color: var(--button-hover-bg); /* #f1f0ff */\n border-color: var(--default-border-color); /* #f1f0ff */\n}\n\n.buttonList label:active,\n.buttonList button:not(.ToolIcon):active,\n.zIndexButton:active {\n background-color: var(--button-active-bg); /* #f1f0ff */\n border-color: var(--button-active-border); /* #4440bf */\n}\n\n.buttonList label.active,\n.buttonList button:not(.ToolIcon).active {\n background-color: var(--color-surface-primary-container);\n border-color: var(--color-primary);\n box-shadow: 0 0 0 2px var(--color-primary);\n color: var(--color-on-primary-container);\n}\n\n.buttonList label.active svg,\n.buttonList button:not(.ToolIcon).active svg {\n color: var(--color-on-primary-container);\n}\n\n/* ToolIcon buttons in buttonList - make outer button transparent so inner .ToolIcon__icon handles all visuals */\n.buttonList button.ToolIcon {\n background-color: transparent;\n border-color: transparent;\n box-shadow: none;\n padding: 0;\n}\n\n/* ToolIcon buttons in buttonList - hover state targets inner icon */\n.buttonList button.ToolIcon:hover .ToolIcon__icon {\n background-color: var(--button-hover-bg);\n border-color: var(--default-border-color);\n}\n\n/* ToolIcon buttons in buttonList - active/pressed state */\n.buttonList button.ToolIcon:active .ToolIcon__icon {\n background-color: var(--button-active-bg);\n border-color: var(--button-active-border);\n}\n\n/* ToolIcon buttons in buttonList - selected state */\n.buttonList button.ToolIcon.active .ToolIcon__icon {\n background-color: var(--color-surface-primary-container);\n border-color: var(--color-primary);\n box-shadow: 0 0 0 2px var(--color-primary);\n color: var(--color-on-primary-container);\n}\n\n.buttonList button.ToolIcon.active .ToolIcon__icon svg {\n color: var(--color-on-primary-container);\n}\n\n/* Danger variant in buttonList */\n.buttonList button.ToolIcon.danger .ToolIcon__icon {\n color: #ff6b6b;\n}\n\n.buttonList button.ToolIcon.danger:hover .ToolIcon__icon {\n background-color: rgba(255, 107, 107, 0.15);\n border-color: #ff6b6b;\n}\n\n/* Hide radio inputs */\n.buttonList input[type='radio'],\n.buttonList input[type='checkbox'] {\n opacity: 0;\n position: absolute;\n pointer-events: none;\n}\n\n/* Focus state */\n.buttonList label:focus-within {\n outline: transparent;\n box-shadow: 0 0 0 2px var(--color-primary); /* Excalidraw focus */\n}\n\n/* SVG icons inside buttons */\n.buttonList svg {\n position: relative;\n width: var(--default-icon-size); /* 1rem */\n height: var(--default-icon-size);\n stroke: currentColor;\n fill: none;\n}\n\n/* ========================================\n Color Picker (Excalidraw Exact)\n ======================================== */\n\n.color-picker-container {\n display: flex;\n gap: 0.5rem; /* 8px gap between sections */\n padding: 0.25rem 0px;\n align-items: center;\n}\n\n.color-picker__top-picks {\n display: flex;\n gap: 0.5rem; /* 8px gap between color buttons */\n align-items: center;\n flex: 1; /* Take remaining space */\n}\n\n.color-picker__button {\n --radius: 4px;\n --size: 1.375rem; /* 22px for top picks, NOT 2rem! */\n\n padding: 0;\n margin: 0;\n width: var(--size);\n height: var(--size);\n border: 0; /* NO border! */\n border-radius: var(--radius);\n background-color: var(--swatch-color);\n cursor: pointer;\n position: relative;\n transition: transform 150ms ease;\n filter: var(--theme-filter, none);\n}\n\n.color-picker__button:hover:not(.active):not(.active-color) {\n transform: scale(1.075); /* Exact Excalidraw */\n}\n\n.color-picker__button.active .color-picker__button-outline {\n position: absolute;\n --offset: -1px;\n top: var(--offset);\n left: var(--offset);\n right: var(--offset);\n bottom: var(--offset);\n box-shadow: 0 0 0 1px var(--color-primary-darkest); /* #4a47b1, NOT border! */\n z-index: 1;\n border-radius: var(--radius);\n filter: var(--theme-filter, none);\n}\n\n.color-picker__button-outline {\n /* Empty outline by default */\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Hotkey label on color buttons (Excalidraw exact) */\n.color-picker__button__hotkey-label {\n position: absolute;\n right: 5px;\n bottom: 3px;\n filter: none;\n font-size: 11px;\n font-weight: 500;\n pointer-events: none; /* Don't interfere with button clicks */\n user-select: none;\n line-height: 1;\n}\n\n/* Color divider */\n.color-divider {\n width: 1px;\n height: 1rem;\n background-color: var(--default-border-color); /* #f1f0ff */\n margin: 0; /* Grid handles spacing */\n}\n\n/* Active color button (larger) */\n.color-picker__button.active-color {\n width: 1.625rem; /* 26px */\n height: 1.625rem;\n border-radius: calc(var(--radius) + 1px); /* 5px */\n position: relative; /* For popup positioning */\n}\n\n/* Color Picker Popup Container (Excalidraw style) */\n.color-picker-popup-wrapper {\n position: relative;\n}\n\n.color-picker-popup {\n /* Position set via inline style (Portal with dynamic fixed position) */\n z-index: 10000; /* High z-index to appear above everything */\n background: var(--island-bg-color);\n box-shadow: var(--shadow-island);\n border-radius: var(--border-radius-lg);\n padding: 0.5rem;\n pointer-events: all; /* Ensure popup is clickable */\n}\n\n/* Island Wrapper (Color Picker Popup - Light theme for readability) */\n.Island {\n /* Define CSS variables for popup (since it's portaled to body) */\n --padding: 0;\n --space-factor: 0.25rem;\n --border-radius-lg: 0.5rem;\n --island-bg-color: rgba(34, 34, 34, 0.96);\n --shadow-island:\n 0px 2px 8px rgba(0, 0, 0, 0.3), 0px 4px 16px rgba(0, 0, 0, 0.2);\n --text-primary-color: #e0e0e0;\n --default-border-color: rgba(255, 255, 255, 0.15);\n --color-primary: #6965db;\n --color-primary-darkest: #8b87ff;\n --ui-font:\n -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',\n 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n\n box-sizing: border-box;\n background-color: var(--island-bg-color);\n box-shadow: var(--shadow-island);\n border-radius: var(--border-radius-lg);\n padding: calc(var(--padding) * var(--space-factor));\n position: relative;\n transition: box-shadow 0.5s ease-in-out;\n font-family: var(--ui-font);\n}\n\n/* Arrow SVG container - Excalidraw exact positioning */\n.color-picker-popup-arrow {\n position: absolute;\n left: 0px;\n transform-origin: 0px 0px;\n transform: translateY(50%) rotate(90deg) translateX(-50%);\n /* top is set dynamically via inline style */\n pointer-events: none;\n}\n\n.color-picker-popup-arrow svg {\n display: block;\n fill: rgba(34, 34, 34, 0.96);\n filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 3px 2px);\n}\n\n/* Legacy triangle - kept for backwards compatibility */\n.color-picker-popup-triangle {\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 9px 10px 9px 0;\n border-color: transparent var(--island-bg-color) transparent transparent;\n position: absolute;\n left: -10px;\n top: 25px;\n filter: drop-shadow(-1px 0 1px rgba(0, 0, 0, 0.1));\n}\n\n.color-picker__button.active-color .color-picker__button-outline {\n position: absolute;\n --offset: -1px;\n top: var(--offset);\n left: var(--offset);\n right: var(--offset);\n bottom: var(--offset);\n box-shadow: 0 0 0 1px var(--color-primary-darkest);\n border-radius: calc(var(--radius) + 1px);\n filter: var(--theme-filter, none);\n}\n\n/* ========================================\n Color Picker Popup Content (Excalidraw Exact)\n ======================================== */\n\n.color-picker-content {\n display: flex;\n flex-direction: column;\n gap: 0.75rem; /* 12px between sections */\n outline: none;\n}\n\n.color-picker-content.properties-content {\n padding: 0.5rem; /* 8px padding inside popup */\n}\n\n/* Ensure all sections inside popup are visible */\n.color-picker-content > div {\n display: block;\n}\n\n.color-picker__heading {\n padding: 0 0.5rem;\n font-size: 0.75rem; /* 12px */\n text-align: left;\n color: var(--text-primary-color);\n margin-bottom: 0.5rem; /* 8px */\n font-weight: 400;\n}\n\n.color-picker-content--default {\n padding: 0.5rem; /* 8px */\n display: grid;\n grid-template-columns: repeat(5, 1.875rem); /* 5 columns, 30px each */\n grid-gap: 0.25rem; /* 4px gap */\n border-radius: 4px;\n}\n\n.color-picker-content--default:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--color-primary);\n}\n\n/* Shades section styling */\n.color-picker-content--default.shades {\n margin-top: 0;\n}\n\n/* Large buttons in popup (30px vs 22px in top picks) */\n.color-picker__button--large {\n --size: 1.875rem; /* 30px */\n width: var(--size) !important;\n height: var(--size) !important;\n}\n\n.color-picker__button.has-outline {\n box-shadow: inset 0 0 0 1px #d9d9d9;\n}\n\n/* No focus visible button (for shades placeholder) */\n.color-picker__button--no-focus-visible {\n border: 0;\n}\n\n.color-picker__button--no-focus-visible::after {\n display: none;\n}\n\n.color-picker__button--no-focus-visible:focus-visible {\n outline: none !important;\n}\n\n/* Transparent button (checkerboard pattern) */\n.color-picker__button.is-transparent {\n background-color: transparent !important;\n background-image:\n linear-gradient(45deg, #808080 25%, transparent 25%),\n linear-gradient(-45deg, #808080 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, #808080 75%),\n linear-gradient(-45deg, transparent 75%, #808080 75%);\n background-size: 8px 8px;\n background-position:\n 0 0,\n 0 4px,\n 4px -4px,\n -4px 0px;\n}\n\n.color-picker__button.is-transparent.has-outline {\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);\n}\n\n/* Hex input field (Excalidraw exact) */\n.color-picker__input-label {\n display: grid;\n grid-template-columns: auto 1fr auto auto;\n gap: 8px;\n align-items: center;\n border: 1px solid var(--default-border-color);\n border-radius: 8px;\n padding: 0 12px;\n margin: 8px;\n box-sizing: border-box;\n}\n\n.color-picker__input-label:focus-within {\n box-shadow: 0 0 0 1px var(--color-primary-darkest);\n border-radius: var(--border-radius-lg);\n}\n\n.color-picker__input-hash {\n padding: 0 0.25rem;\n color: var(--text-primary-color);\n}\n\n.color-picker-input {\n box-sizing: border-box;\n width: 100%;\n margin: 0;\n font-size: 0.875rem; /* 14px */\n font-family: inherit;\n background-color: transparent;\n color: var(--text-primary-color);\n border: 0;\n outline: none;\n height: var(--default-button-size); /* 2rem = 32px */\n letter-spacing: 0.4px;\n padding: 0.5rem 0.25rem;\n}\n\n.color-picker-input:focus-visible {\n box-shadow: none;\n}\n\n/* Hex input divider */\n.color-picker__input-divider {\n width: 1px;\n height: 1.25rem; /* 20px */\n background-color: var(--default-border-color);\n margin: 0;\n}\n\n/* Eye dropper trigger (Excalidraw exact) */\n.excalidraw-eye-dropper-trigger {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--text-primary-color);\n transition: color 150ms ease;\n width: 1rem; /* 16px - fixed width */\n height: 1rem; /* 16px - fixed height */\n flex-shrink: 0; /* Don't shrink */\n}\n\n.excalidraw-eye-dropper-trigger:hover {\n color: var(--color-primary-darkest);\n}\n\n.excalidraw-eye-dropper-trigger svg {\n width: 1rem; /* 16px - Excalidraw exact */\n height: 1rem;\n}\n\n/* ========================================\n Range Slider (Excalidraw Exact)\n ======================================== */\n\n.range-wrapper {\n position: relative;\n padding-top: 8px;\n padding-bottom: 20px;\n overflow: visible;\n}\n\n.range-input {\n width: 100%;\n height: 6px;\n -webkit-appearance: none;\n background: var(--color-slider-track);\n border-radius: 3px;\n outline: none;\n cursor: pointer;\n}\n\n.range-input::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: var(--slider-thumb-size); /* 16px */\n height: var(--slider-thumb-size);\n background: var(--color-primary);\n border-radius: 50%;\n cursor: pointer;\n border: 2px solid #fff;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n transition: transform 0.1s ease;\n}\n\n.range-input::-webkit-slider-thumb:hover {\n transform: scale(1.1);\n}\n\n.range-input::-webkit-slider-thumb:active {\n transform: scale(1.15);\n}\n\n.range-input::-moz-range-thumb {\n width: var(--slider-thumb-size);\n height: var(--slider-thumb-size);\n background: var(--color-primary);\n border-radius: 50%;\n cursor: pointer;\n border: 2px solid #fff;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n\n.range-input::-moz-range-track {\n background: transparent;\n border: none;\n}\n\n.range-input:focus {\n outline: none;\n}\n\n.range-input:focus::-webkit-slider-thumb {\n box-shadow:\n 0 0 0 3px rgba(105, 101, 219, 0.3),\n 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n\n/* Value bubble - always visible, follows thumb */\n.value-bubble {\n position: absolute;\n bottom: 0;\n transform: translateX(-50%);\n font-size: 12px;\n font-weight: 500;\n color: var(--color-primary);\n pointer-events: none;\n transition: left 0.05s ease-out;\n}\n\n.zero-label {\n position: absolute;\n bottom: 0;\n left: 0;\n font-size: 11px;\n color: var(--text-primary-color);\n opacity: 0.6;\n transition: opacity 0.15s ease;\n}\n\n.max-label {\n position: absolute;\n bottom: 0;\n right: 0;\n font-size: 11px;\n color: var(--text-primary-color);\n opacity: 0.6;\n transition: opacity 0.15s ease;\n}\n\n/* Hide min/max labels when value is close */\n.zero-label.hidden,\n.max-label.hidden {\n opacity: 0;\n}\n\n/* Ant Design Slider override */\n.slider-control .ant-slider {\n margin: 8px 0;\n}\n\n.slider-control .ant-slider-rail {\n background: var(--panel-border, #e5e5e5);\n}\n\n.slider-control .ant-slider-track {\n background: var(--panel-accent, #6965db);\n}\n\n.slider-control .ant-slider-handle::after {\n box-shadow: 0 0 0 2px var(--panel-accent, #6965db);\n}\n\n/* ========================================\n Select Dropdown (Excalidraw Style)\n ======================================== */\n\n.iconSelectList {\n display: flex;\n gap: 0.5rem;\n}\n\n.iconSelectList.buttonList {\n flex-wrap: wrap;\n column-gap: 0.5rem;\n row-gap: 0.5rem;\n}\n\n.iconSelectList button,\n.iconSelectList label {\n width: auto;\n min-width: 2rem;\n height: 2rem;\n padding: 0 0.25rem;\n border: 1px solid var(--panel-border, #e5e5e5);\n border-radius: 4px;\n background-color: var(--panel-bg, #ffffff);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 150ms ease;\n}\n\n.iconSelectList button:hover,\n.iconSelectList label:hover {\n background-color: var(--panel-hover-bg, #f5f5f5);\n border-color: var(--panel-accent, #6965db);\n}\n\n.iconSelectList button svg,\n.iconSelectList label svg {\n stroke: currentColor;\n fill: none;\n}\n\n/* Ant Design Select override */\n.select-control .ant-select-selector {\n border-radius: 4px;\n border: 1px solid var(--panel-border, #e5e5e5);\n background: var(--panel-bg, #ffffff);\n font-size: 0.75rem;\n height: 2rem;\n}\n\n/* ========================================\n Layer Actions (Now handled by buttonList)\n ======================================== */\n/* .zIndexButton styles are now covered by .buttonList button styles above */\n\n/* ========================================\n ToolIcon Component (Excalidraw Exact)\n ======================================== */\n\n.ToolIcon {\n border-radius: var(--border-radius-lg);\n display: inline-flex;\n align-items: center;\n position: relative;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n user-select: none;\n}\n\n.ToolIcon_type_button {\n padding: 0;\n border: none;\n margin: 0;\n font-size: inherit;\n background-color: initial; /* transparent */\n}\n\n.ToolIcon_type_button:focus-visible {\n box-shadow: 0 0 0 2px var(--color-primary);\n}\n\n.ToolIcon_type_button:active {\n background-color: transparent; /* Button itself stays transparent */\n}\n\n.ToolIcon_type_button.ToolIcon--selected {\n background-color: transparent;\n}\n\n.ToolIcon__icon {\n box-sizing: border-box;\n width: var(--default-button-size); /* 2rem */\n height: var(--default-button-size);\n color: var(--icon-fill-color);\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--border-radius-lg); /* 0.5rem */\n border-width: 1px;\n border-style: solid;\n border-color: var(--button-border); /* transparent */\n background-color: var(--button-bg); /* #f6f6f9 */\n transition: all 150ms ease;\n}\n\n.ToolIcon__icon:hover {\n background-color: var(--button-hover-bg); /* #f1f0ff */\n border-color: var(--default-border-color); /* #f1f0ff */\n}\n\n.ToolIcon__icon:active {\n background-color: var(--button-active-bg); /* #f1f0ff */\n border-color: var(--button-active-border); /* #4440bf */\n}\n\n.ToolIcon__icon[aria-disabled='true'] {\n background: initial;\n border: none;\n}\n\n.ToolIcon__icon[aria-disabled='true'] svg {\n color: var(--color-disabled, #c0c0c0);\n}\n\n.ToolIcon__icon svg {\n position: relative;\n width: var(--default-icon-size); /* 1rem */\n height: var(--default-icon-size);\n color: var(--icon-fill-color);\n}\n\n.ToolIcon_size_small .ToolIcon__icon {\n width: 2rem;\n height: 2rem;\n font-size: 0.8em;\n}\n\n.ToolIcon_size_medium .ToolIcon__icon {\n width: 2rem;\n height: 2rem;\n}\n\n/* Selected state for ToolIcon (matching buttonList .active) */\n.ToolIcon.active .ToolIcon__icon,\n.ToolIcon--selected .ToolIcon__icon {\n background-color: var(--color-surface-primary-container);\n border-color: var(--color-primary);\n box-shadow: 0 0 0 2px var(--color-primary);\n color: var(--color-on-primary-container);\n}\n\n.ToolIcon.active .ToolIcon__icon svg,\n.ToolIcon--selected .ToolIcon__icon svg {\n color: var(--color-on-primary-container);\n}\n\n/* Danger variant for delete actions */\n.ToolIcon.danger .ToolIcon__icon {\n color: #ff6b6b;\n}\n\n.ToolIcon.danger .ToolIcon__icon:hover {\n background-color: rgba(255, 107, 107, 0.15);\n border-color: #ff6b6b;\n}\n\n/* Danger variant active state (keep danger styling even when active) */\n.ToolIcon.danger.active .ToolIcon__icon,\n.ToolIcon.danger.ToolIcon--selected .ToolIcon__icon {\n background-color: rgba(255, 107, 107, 0.25);\n border-color: #ff6b6b;\n box-shadow: 0 0 0 2px #ff6b6b;\n color: #ff6b6b;\n}\n\n/* ========================================\n Action Icon Buttons (Legacy - to be removed)\n ======================================== */\n\n.action-icon-button {\n width: 2rem;\n height: 2rem;\n padding: 0;\n border: 1px solid var(--panel-border, #e5e5e5);\n border-radius: 4px;\n background-color: var(--panel-bg, #ffffff);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 150ms ease;\n font-size: 1rem;\n color: var(--panel-text, #1e1e1e);\n}\n\n.action-icon-button:hover {\n background-color: var(--panel-hover-bg, #f5f5f5);\n border-color: var(--panel-accent, #6965db);\n}\n\n.action-icon-button:active {\n transform: scale(0.95);\n}\n\n.action-icon-button.danger {\n color: #ff6b6b;\n}\n\n.action-icon-button.danger:hover {\n background-color: rgba(255, 107, 107, 0.15);\n border-color: #ff6b6b;\n}\n\n/* ========================================\n Divider\n ======================================== */\n\n.property-divider {\n height: 1px;\n background: var(--panel-border, #e5e5e5);\n margin: 12px 0;\n}\n\n/* ========================================\n Property Sections\n ======================================== */\n\n.property-section {\n margin-bottom: 12px;\n}\n\n.property-section:last-child {\n margin-bottom: 0;\n}\n\n.property-control {\n margin-bottom: 12px;\n}\n\n.property-control:last-child {\n margin-bottom: 0;\n}\n\n/* ========================================\n Dark Theme (Excalidraw Exact)\n ======================================== */\n\n.theme-dark .property-panel {\n /* Dark theme colors */\n --island-bg-color: #121212;\n --button-bg: #363541;\n --button-hover-bg: #363541;\n --button-active-bg: #363541;\n --button-gray-1: #363636;\n --button-gray-2: #272727;\n --button-gray-3: #222;\n --default-border-color: #3a3a3a;\n --text-primary-color: #e0e0e0;\n --icon-fill-color: #e0e0e0;\n --color-slider-track: #3a3a3a;\n --color-slider-thumb: #b8b8b8;\n --button-border: transparent;\n}\n\n.theme-dark .property-panel.App-menu__left {\n --button-bg: var(--color-surface-high, #2a2a3a);\n}\n\n.theme-dark .property-panel.Island {\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);\n}\n\n/* ========================================\n Responsive\n ======================================== */\n\n@media (max-width: 768px) {\n .property-panel {\n width: 180px;\n top: 70px;\n left: 8px;\n }\n\n .property-panel-right {\n right: 8px;\n }\n}\n\n/* ========================================\n Utility Classes\n ======================================== */\n\n.property-panel-hidden {\n display: none;\n}\n\n.property-panel-compact {\n width: 160px;\n}\n\n.text-muted {\n color: var(--panel-text-secondary, #6b6b6b);\n font-size: 0.7rem;\n}\n\n.text-small {\n font-size: 0.7rem;\n}\n\n/* ========================================\n Inline Select (for button groups)\n ======================================== */\n\n.buttonList .inline-select {\n width: var(--default-button-size);\n height: var(--default-button-size);\n padding: 0;\n border: 1px solid var(--button-border);\n border-radius: var(--border-radius-lg);\n font-size: 0.65rem;\n text-align: center;\n text-align-last: center;\n background-color: var(--button-bg);\n color: var(--text-primary-color);\n cursor: pointer;\n flex-shrink: 0;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n transition: all 150ms ease;\n}\n\n.buttonList .inline-select:hover {\n background-color: var(--button-hover-bg);\n border-color: var(--default-border-color);\n}\n\n.buttonList .inline-select:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--color-primary);\n}\n\n.buttonList .inline-select.active {\n background-color: var(--color-surface-primary-container);\n border-color: var(--color-primary);\n box-shadow: 0 0 0 2px var(--color-primary);\n color: var(--color-on-primary-container);\n}\n\n.buttonList .inline-select option {\n background-color: var(--island-bg-color);\n color: var(--text-primary-color);\n}\n\n/* ========================================\n Control Label (for Opacity slider)\n ======================================== */\n\n.control-label {\n display: block;\n font-size: 0.75rem;\n font-weight: 500;\n color: var(--text-primary-color, #e0e0e0);\n margin-bottom: 4px;\n}\n";
|
|
48091
48091
|
styleInject(css_248z$2);
|
|
48092
48092
|
|
|
48093
48093
|
var css_248z$1 = "#navTools,\n#modelTools,\n#settingsTools,\n#measureTools {\n display: none !important;\n visibility: hidden !important;\n}\n#guiviewer3d-toolbar {\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n gap: 20px;\n position: fixed !important;\n bottom: 10px !important;\n left: 50% !important;\n transform: translateX(-50%) !important;\n width: auto !important;\n border-radius: 4px !important;\n padding: 8px 12px !important;\n}\n#custom-tool-group {\n display: flex !important;\n margin: 0 !important;\n padding: 0 !important;\n}\n#custom-pagination-group {\n display: flex;\n position: relative !important;\n margin: 0 !important;\n padding: 0 !important;\n transform: none !important;\n left: auto !important;\n}\n\n/* Export Combo Dropdown Styles */\n.export-combo-dropdown {\n position: absolute;\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n background: #2d2d2d;\n border-radius: 4px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n min-width: 180px;\n padding: 4px 0;\n margin-bottom: 8px;\n z-index: 1000;\n}\n\n.export-combo-dropdown::after {\n content: '';\n position: absolute;\n bottom: -6px;\n left: 50%;\n transform: translateX(-50%);\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-top: 6px solid #2d2d2d;\n}\n\n.export-combo-option {\n display: flex;\n align-items: center;\n padding: 8px 12px;\n cursor: pointer;\n transition: background-color 0.15s ease;\n color: #fff;\n font-size: 13px;\n white-space: nowrap;\n}\n\n.export-combo-option:hover {\n background-color: #3d3d3d;\n}\n\n.export-combo-option:active {\n background-color: #4d4d4d;\n}\n\n.export-combo-icon {\n margin-right: 8px;\n font-size: 16px;\n opacity: 0.8;\n}\n\n.export-combo-label {\n flex: 1;\n}\n\n/* Active state for combo button */\n.custom-export-combo-btn.active {\n background-color: #3d3d3d !important;\n}\n";
|
|
@@ -48794,7 +48794,7 @@ var SliderControl = function SliderControl(_ref2) {
|
|
|
48794
48794
|
}, displayValue), /*#__PURE__*/React.createElement("div", {
|
|
48795
48795
|
className: 'zero-label'
|
|
48796
48796
|
}, "0"), /*#__PURE__*/React.createElement("div", {
|
|
48797
|
-
className: "max-label ".concat(displayValue
|
|
48797
|
+
className: "max-label ".concat(displayValue === max ? 'hidden' : '')
|
|
48798
48798
|
}, "100")));
|
|
48799
48799
|
};
|
|
48800
48800
|
/**
|
|
@@ -49211,7 +49211,9 @@ var ViewerForgePDF = function ViewerForgePDF(_ref) {
|
|
|
49211
49211
|
_ref$enableCustomMark = _ref.enableCustomMarkups,
|
|
49212
49212
|
enableCustomMarkups = _ref$enableCustomMark === void 0 ? false : _ref$enableCustomMark,
|
|
49213
49213
|
_ref$markupConfig = _ref.markupConfig,
|
|
49214
|
-
markupConfig = _ref$markupConfig === void 0 ? {} : _ref$markupConfig
|
|
49214
|
+
markupConfig = _ref$markupConfig === void 0 ? {} : _ref$markupConfig,
|
|
49215
|
+
_ref$toolbarOptions = _ref.toolbarOptions,
|
|
49216
|
+
toolbarOptions = _ref$toolbarOptions === void 0 ? {} : _ref$toolbarOptions;
|
|
49215
49217
|
// State for drawing functionality
|
|
49216
49218
|
var _useState = useState(null),
|
|
49217
49219
|
_useState2 = _slicedToArray(_useState, 2),
|