@genesislcap/rapid-design-system 15.25.0 → 15.25.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/custom-elements.json +2 -2
- package/dist/dts/flexlayout-react-theme/flexlayout-react-theme.generated.d.ts +2 -2
- package/dist/dts/flexlayout-react-theme/flexlayout-react-theme.generated.d.ts.map +1 -1
- package/dist/esm/flexlayout-react-theme/flexlayout-react-theme.generated.js +490 -100
- package/dist/esm/flexlayout-react-theme/flexlayout-react.overrides.css +82 -14
- package/package.json +15 -13
- package/scripts/generate-flexlayout-theme.mjs +65 -10
|
@@ -16924,13 +16924,13 @@
|
|
|
16924
16924
|
"type": {
|
|
16925
16925
|
"text": "string"
|
|
16926
16926
|
},
|
|
16927
|
-
"default": "'0.8
|
|
16927
|
+
"default": "'0.10.8'",
|
|
16928
16928
|
"description": "The flexlayout-react version this theme was generated against."
|
|
16929
16929
|
},
|
|
16930
16930
|
{
|
|
16931
16931
|
"kind": "variable",
|
|
16932
16932
|
"name": "FLEXLAYOUT_REACT_THEME_CSS",
|
|
16933
|
-
"default": "`/* ============================================================================\n * flexlayout-react base theme — VENDORED from flexlayout-react@0.8.19 (style/dark.css).\n * ========================================================================== */\n.flexlayout__layout {\n --color-text: #eeeeee;\n --color-background: black;\n --color-base: black;\n --color-1: rgb(17.85, 17.85, 17.85);\n --color-2: rgb(25.5, 25.5, 25.5);\n --color-3: rgb(38.25, 38.25, 38.25);\n --color-4: #333333;\n --color-5: rgb(63.75, 63.75, 63.75);\n --color-6: rgb(76.5, 76.5, 76.5);\n --color-drag1: rgb(207, 232, 255);\n --color-drag2: rgb(183, 209, 181);\n --color-drag1-background: rgba(128, 128, 128, 0.15);\n --color-drag2-background: rgba(128, 128, 128, 0.15);\n --font-size: medium;\n --font-family: Roboto, Arial, sans-serif;\n --color-overflow: gray;\n --color-icon: gray;\n --color-tabset-background: var(--color-1);\n --color-tabset-background-selected: var(--color-1);\n --color-tabset-background-maximized: var(--color-6);\n --color-tabset-divider-line: var(--color-4);\n --color-tabset-header-background: var(--color-1);\n --color-tabset-header: var(--color-text);\n --color-border-tab-content: var(--color-background);\n --color-border-background: var(--color-1);\n --color-border-divider-line: var(--color-4);\n --color-tab-content: var(--color-background);\n --color-tab-selected: var(--color-text);\n --color-tab-selected-background: var(--color-4);\n --color-tab-unselected: gray;\n --color-tab-unselected-background: transparent;\n --color-tab-textbox: var(--color-text);\n --color-tab-textbox-background: var(--color-3);\n --color-border-tab-selected: var(--color-text);\n --color-border-tab-selected-background: var(--color-4);\n --color-border-tab-unselected: gray;\n --color-border-tab-unselected-background: var(--color-2);\n --color-splitter: var(--color-2);\n --color-splitter-hover: var(--color-4);\n --color-splitter-drag: var(--color-5);\n --color-drag-rect-border: var(--color-4);\n --color-drag-rect-background: var(--color-1);\n --color-drag-rect: var(--color-text);\n --color-popup-border: var(--color-6);\n --color-popup-unselected: var(--color-text);\n --color-popup-unselected-background: var(--color-background);\n --color-popup-selected: var(--color-text);\n --color-popup-selected-background: var(--color-4);\n --color-edge-marker: gray;\n --color-edge-icon: #eee;\n --color-mini-scroll-indicator: rgba(128, 128, 128, 0.5);\n --color-mini-scroll-indicator-hovered: rgba(128, 128, 128, 0.8);\n --size-mini-scroll-indicator: 3px;\n --color-toolbar-button-hover: var(--color-4);\n}\n\n/*\n base classes\n*/\n.flexlayout__layout {\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n display: flex;\n overflow: hidden;\n background-color: var(--color-background);\n}\n.flexlayout__layout_overlay {\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n z-index: 1000;\n}\n.flexlayout__layout_tab_stamps {\n position: absolute;\n top: -10000px;\n z-index: 100;\n display: flex;\n flex-direction: column;\n align-items: start;\n}\n.flexlayout__layout_moveables {\n visibility: hidden;\n position: absolute;\n width: 100px;\n height: 100px;\n top: -20000px;\n}\n.flexlayout__layout_main {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-grow: 1;\n position: relative;\n}\n.flexlayout__layout_border_container {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-grow: 1;\n}\n.flexlayout__layout_border_container_inner {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-grow: 1;\n}\n.flexlayout__splitter {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--color-splitter);\n touch-action: none;\n z-index: 10;\n}\n@media (hover: hover) {\n .flexlayout__splitter:hover {\n background-color: var(--color-splitter-hover);\n transition: background-color ease-in 0.1s;\n transition-delay: 0.05s;\n border-radius: 5px;\n }\n}\n.flexlayout__splitter_drag {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n border-radius: 5px;\n background-color: var(--color-splitter-drag);\n}\n.flexlayout__splitter_handle {\n background-color: #ccc;\n border-radius: 3px;\n}\n.flexlayout__splitter_handle_horz {\n width: 3px;\n height: 30px;\n}\n.flexlayout__splitter_handle_vert {\n width: 30px;\n height: 3px;\n}\n.flexlayout__splitter_extra {\n touch-action: none;\n background-color: transparent;\n}\n.flexlayout__outline_rect {\n position: absolute;\n pointer-events: none;\n box-sizing: border-box;\n border: 2px solid var(--color-drag1);\n background: var(--color-drag1-background);\n border-radius: 5px;\n z-index: 1000;\n}\n.flexlayout__outline_rect_edge {\n pointer-events: none;\n border: 2px solid var(--color-drag2);\n background: var(--color-drag2-background);\n border-radius: 5px;\n z-index: 1000;\n box-sizing: border-box;\n}\n.flexlayout__edge_rect {\n position: absolute;\n z-index: 1000;\n background-color: var(--color-edge-marker);\n pointer-events: none;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.flexlayout__drag_rect {\n color: var(--color-drag-rect);\n background-color: var(--color-drag-rect-background);\n border: 2px solid var(--color-drag-rect-border);\n border-radius: 5px;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n flex-direction: column;\n overflow: hidden;\n padding: 0.3em 0.8em;\n word-wrap: break-word;\n font-size: var(--font-size);\n font-family: var(--font-family);\n}\n.flexlayout__row {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n position: relative;\n box-sizing: border-box;\n overflow: hidden;\n}\n.flexlayout__tabset {\n display: flex;\n flex-direction: column;\n position: relative;\n background-color: var(--color-tabset-background);\n box-sizing: border-box;\n font-family: var(--font-family);\n overflow: hidden;\n flex-grow: 1;\n}\n.flexlayout__tabset_container {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-direction: column;\n overflow: hidden;\n flex-grow: 1;\n}\n.flexlayout__tabset_tab_divider {\n width: 4px;\n}\n.flexlayout__tabset_content {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-grow: 1;\n box-sizing: border-box;\n position: relative;\n}\n.flexlayout__tabset_leading {\n display: flex;\n}\n.flexlayout__tabset_header {\n display: flex;\n align-items: center;\n padding: 3px 3px 3px 5px;\n box-sizing: border-box;\n border-bottom: 1px solid var(--color-tabset-divider-line);\n color: var(--color-tabset-header);\n background-color: var(--color-tabset-header-background);\n font-size: var(--font-size);\n}\n.flexlayout__tabset_header_content {\n flex-grow: 1;\n}\n.flexlayout__tabset_tabbar_outer {\n box-sizing: border-box;\n background-color: var(--color-tabset-background);\n overflow: hidden;\n display: flex;\n font-size: var(--font-size);\n}\n.flexlayout__tabset_tabbar_outer_top {\n padding: 0px 2px 0px 2px;\n border-bottom: 1px solid var(--color-tabset-divider-line);\n}\n.flexlayout__tabset_tabbar_outer_bottom {\n padding: 0px 2px 0px 2px;\n border-top: 1px solid var(--color-tabset-divider-line);\n}\n.flexlayout__tabset_tabbar_inner {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-grow: 1;\n scrollbar-width: none;\n}\n.flexlayout__tabset_tabbar_inner::-webkit-scrollbar {\n display: none;\n}\n.flexlayout__tabset_tabbar_inner_tab_container {\n position: relative;\n display: flex;\n padding-left: 4px;\n padding-right: 4px;\n box-sizing: border-box;\n white-space: nowrap;\n}\n.flexlayout__tabset_tabbar_inner_tab_container_top {\n border-top: 2px solid transparent;\n}\n.flexlayout__tabset_tabbar_inner_tab_container_bottom {\n border-bottom: 2px solid transparent;\n}\n.flexlayout__tabset-selected {\n background-color: var(--color-tabset-background-selected);\n}\n.flexlayout__tabset-maximized {\n background-color: var(--color-tabset-background-maximized);\n}\n.flexlayout__tab_button_stamp {\n display: inline-flex;\n align-items: center;\n gap: 0.3em;\n white-space: nowrap;\n box-sizing: border-box;\n}\n.flexlayout__tab {\n overflow: hidden;\n box-sizing: border-box;\n background-color: var(--color-tab-content);\n color: var(--color-text);\n position: relative;\n}\n.flexlayout__tab_moveable {\n position: relative;\n height: 100%;\n min-width: 1px;\n min-height: 1px;\n overflow: auto;\n box-sizing: border-box;\n}\n.flexlayout__tab_overlay {\n z-index: 20;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.2392156863);\n}\n.flexlayout__tab_button {\n display: flex;\n gap: 0.3em;\n align-items: center;\n box-sizing: border-box;\n padding: 3px 0.5em;\n cursor: pointer;\n}\n.flexlayout__tab_button_stretch {\n background-color: transparent;\n color: var(--color-tab-selected);\n width: 100%;\n padding: 3px 0em;\n text-wrap: nowrap;\n display: flex;\n gap: 0.3em;\n align-items: center;\n box-sizing: border-box;\n cursor: pointer;\n}\n@media (hover: hover) {\n .flexlayout__tab_button_stretch:hover {\n color: var(--color-tab-selected);\n }\n}\n.flexlayout__tab_button--selected {\n background-color: var(--color-tab-selected-background);\n color: var(--color-tab-selected);\n}\n@media (hover: hover) {\n .flexlayout__tab_button:hover {\n color: var(--color-tab-selected);\n }\n}\n.flexlayout__tab_button--unselected {\n background-color: var(--color-tab-unselected-background);\n color: var(--color-tab-unselected);\n}\n.flexlayout__tab_button_leading {\n display: flex;\n}\n.flexlayout__tab_button_content {\n display: flex;\n text-wrap: nowrap;\n}\n.flexlayout__tab_button_textbox {\n border: none;\n font-family: var(--font-family);\n font-size: var(--font-size);\n color: var(--color-tab-textbox);\n background-color: var(--color-tab-textbox-background);\n border: 1px inset var(--color-1);\n border-radius: 3px;\n width: 10em;\n}\n.flexlayout__tab_button_textbox:focus {\n outline: none;\n}\n.flexlayout__tab_button_trailing {\n display: flex;\n visibility: hidden;\n border-radius: 4px;\n}\n.flexlayout__tab_button_trailing:hover {\n background-color: var(--color-toolbar-button-hover);\n}\n@media (hover: hover) {\n .flexlayout__tab_button:hover .flexlayout__tab_button_trailing {\n visibility: visible;\n }\n}\n.flexlayout__tab_button--selected .flexlayout__tab_button_trailing {\n visibility: visible;\n}\n.flexlayout__tab_button_overflow {\n display: flex;\n align-items: center;\n border: none;\n color: var(--color-overflow);\n font-size: inherit;\n background-color: transparent;\n width: 2em;\n overflow: hidden;\n}\n.flexlayout__tab_toolbar {\n display: flex;\n align-items: center;\n gap: 0.3em;\n padding-left: 0.5em;\n padding-right: 0.3em;\n}\n.flexlayout__tab_toolbar_icon {\n border: none;\n outline: none;\n font-size: inherit;\n margin: 0px;\n background-color: transparent;\n padding: 1px;\n}\n.flexlayout__tab_toolbar_button {\n border: none;\n outline: none;\n font-size: inherit;\n margin: 0px;\n background-color: transparent;\n border-radius: 4px;\n padding: 1px;\n}\n@media (hover: hover) {\n .flexlayout__tab_toolbar_button:hover {\n background-color: var(--color-toolbar-button-hover);\n }\n}\n.flexlayout__tab_toolbar_sticky_buttons_container {\n display: flex;\n gap: 0.3em;\n padding-left: 5px;\n align-items: center;\n}\n.flexlayout__border {\n box-sizing: border-box;\n overflow: hidden;\n display: flex;\n font-size: var(--font-size);\n font-family: var(--font-family);\n color: var(--color-border);\n background-color: var(--color-border-background);\n}\n.flexlayout__border_tab_contents {\n box-sizing: border-box;\n overflow: hidden;\n background-color: var(--color-border-tab-content);\n}\n.flexlayout__border_leading {\n display: flex;\n}\n.flexlayout__border_top {\n border-bottom: 1px solid var(--color-border-divider-line);\n align-items: center;\n}\n.flexlayout__border_bottom {\n border-top: 1px solid var(--color-border-divider-line);\n align-items: center;\n}\n.flexlayout__border_left {\n border-right: 1px solid var(--color-border-divider-line);\n align-content: center;\n flex-direction: column;\n}\n.flexlayout__border_right {\n border-left: 1px solid var(--color-border-divider-line);\n align-content: center;\n flex-direction: column;\n}\n.flexlayout__border_inner {\n position: relative;\n box-sizing: border-box;\n align-items: center;\n display: flex;\n flex-grow: 1;\n scrollbar-width: none;\n}\n.flexlayout__border_inner::-webkit-scrollbar {\n display: none;\n}\n.flexlayout__border_inner_tab_container {\n white-space: nowrap;\n display: flex;\n padding-left: 2px;\n padding-right: 2px;\n box-sizing: border-box;\n position: absolute;\n}\n.flexlayout__border_inner_tab_container_right {\n transform-origin: top left;\n transform: rotate(90deg);\n}\n.flexlayout__border_inner_tab_container_left {\n flex-direction: row-reverse;\n transform-origin: top right;\n transform: rotate(-90deg);\n}\n.flexlayout__border_tab_divider {\n width: 4px;\n}\n.flexlayout__border_button {\n display: flex;\n gap: 0.3em;\n align-items: center;\n cursor: pointer;\n padding: 3px 0.5em;\n margin: 2px 0px;\n box-sizing: border-box;\n white-space: nowrap;\n}\n.flexlayout__border_button--selected {\n background-color: var(--color-border-tab-selected-background);\n color: var(--color-border-tab-selected);\n}\n@media (hover: hover) {\n .flexlayout__border_button:hover {\n color: var(--color-border-tab-selected);\n }\n}\n.flexlayout__border_button--unselected {\n background-color: var(--color-border-tab-unselected-background);\n color: var(--color-border-tab-unselected);\n}\n.flexlayout__border_button_leading {\n display: flex;\n}\n.flexlayout__border_button_content {\n display: flex;\n}\n.flexlayout__border_button_trailing {\n display: flex;\n border-radius: 4px;\n visibility: hidden;\n}\n@media (hover: hover) {\n .flexlayout__border_button:hover .flexlayout__border_button_trailing {\n visibility: visible;\n }\n}\n.flexlayout__border_button--selected .flexlayout__border_button_trailing {\n visibility: visible;\n}\n.flexlayout__border_toolbar {\n display: flex;\n gap: 0.3em;\n align-items: center;\n}\n.flexlayout__border_toolbar_left, .flexlayout__border_toolbar_right {\n flex-direction: column;\n padding-top: 0.5em;\n padding-bottom: 0.3em;\n}\n.flexlayout__border_toolbar_top, .flexlayout__border_toolbar_bottom {\n padding-left: 0.5em;\n padding-right: 0.3em;\n}\n.flexlayout__border_toolbar_button {\n border: none;\n outline: none;\n font-size: inherit;\n background-color: transparent;\n border-radius: 4px;\n padding: 1px;\n}\n@media (hover: hover) {\n .flexlayout__border_toolbar_button:hover {\n background-color: var(--color-toolbar-button-hover);\n }\n}\n.flexlayout__border_toolbar_button_overflow {\n display: flex;\n align-items: center;\n border: none;\n color: var(--color-overflow);\n font-size: inherit;\n background-color: transparent;\n width: 1.5em;\n}\n.flexlayout__popup_menu {\n font-size: var(--font-size);\n font-family: var(--font-family);\n}\n.flexlayout__popup_menu_item {\n padding: 2px 0.5em;\n white-space: nowrap;\n cursor: pointer;\n border-radius: 2px;\n}\n.flexlayout__popup_menu_item--selected {\n font-weight: 500;\n background-color: var(--color-tab-selected-background);\n color: var(--color-tab-selected);\n}\n@media (hover: hover) {\n .flexlayout__popup_menu_item:hover {\n background-color: var(--color-6);\n }\n}\n.flexlayout__popup_menu_container {\n box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);\n border: 1px solid var(--color-popup-border);\n color: var(--color-popup-unselected);\n background: var(--color-popup-unselected-background);\n border-radius: 3px;\n position: absolute;\n z-index: 1000;\n max-height: 50%;\n min-width: 100px;\n overflow: auto;\n padding: 2px;\n}\n.flexlayout__floating_window _body {\n height: 100%;\n}\n.flexlayout__floating_window_content {\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n}\n.flexlayout__error_boundary_container {\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n display: flex;\n justify-content: center;\n}\n.flexlayout__error_boundary_content {\n display: flex;\n align-items: center;\n}\n.flexlayout__border_sizer {\n position: absolute;\n top: -30000px;\n padding-top: 6px;\n padding-bottom: 5px;\n font-size: var(--font-size);\n font-family: var(--font-family);\n}\n.flexlayout__mini_scrollbar {\n position: absolute;\n background-color: var(--color-mini-scroll-indicator);\n border-radius: 5px;\n width: var(--size-mini-scroll-indicator);\n height: var(--size-mini-scroll-indicator);\n visibility: hidden;\n opacity: 0;\n transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n}\n.flexlayout__mini_scrollbar:hover {\n background-color: var(--color-mini-scroll-indicator-hovered);\n transition: background-color 0.3s ease-in-out;\n}\n.flexlayout__mini_scrollbar_container {\n position: relative;\n display: flex;\n flex-grow: 1;\n overflow: hidden;\n}\n@media (hover: hover) {\n .flexlayout__mini_scrollbar_container:hover .flexlayout__mini_scrollbar {\n opacity: 1;\n visibility: visible;\n }\n}\n\n/* ======================== End of Base Classes =========================== */\n/* \n dark theme overrides \n*/\n.flexlayout__tabset_header {\n box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54);\n}\n.flexlayout__tabset-selected {\n background-image: linear-gradient(var(--color-background), var(--color-4));\n}\n.flexlayout__tabset-maximized {\n background-image: linear-gradient(var(--color-6), var(--color-2));\n}\n.flexlayout__tab_top {\n box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n}\n.flexlayout__tab_bottom {\n box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n}\n.flexlayout__border_button {\n box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);\n border-radius: 3px;\n}\n\n/* ============================================================================\n * Rapid Design System overrides (flexlayout-react.overrides.css) — applied last.\n * ========================================================================== */\n/*\n * flexlayout-react.overrides.css — Rapid Design System theme overrides for flexlayout-react.\n *\n * THIS IS THE SINGLE SOURCE OF TRUTH for how flexlayout-react looks across every app that\n * consumes Foundation. Do NOT copy these rules into apps — import the compiled theme from\n * \\`@genesislcap/rapid-design-system\\` instead (see flexlayout-react-theme.ts).\n *\n * Build pipeline: \\`scripts/generate-flexlayout-theme.mjs\\` concatenates the vendored\n * flexlayout-react base theme (structural CSS + dark palette) FIRST, then this file LAST,\n * into \\`flexlayout-react-theme.generated.ts\\`. Equal specificity means the later sheet wins,\n * so every rule here overrides the vendored default. Run \\`pnpm flexlayout:generate\\` after\n * editing (the package build does this automatically).\n *\n * The flexlayout theme is almost entirely driven by CSS custom properties declared on\n * \\`.flexlayout__layout\\` (see the full list at the top of the vendored base theme). The\n * easiest way to re-skin is to remap those variables to rapid design-system tokens, as\n * below. For anything the variables don't cover, target the \\`.flexlayout__*\\` classes\n * directly (examples at the bottom).\n *\n * Tokens resolve from the nearest design-system provider ancestor (CSS custom properties\n * inherit across shadow boundaries), so flexlayout-react must render under a\n * \\`<rapid-design-system-provider>\\` for these to take effect.\n */\n\n/* --- Variable remap: flexlayout palette -> rapid design tokens ----------------- */\n.flexlayout__layout {\n --font-family: var(--body-font, Roboto, Arial, sans-serif);\n --font-size: var(--type-ramp-base-font-size);\n\n --color-text: var(--neutral-foreground-rest);\n --color-background: var(--fill-color);\n\n /* Greyscale ramp used across tabsets, borders and toolbars. */\n --color-1: var(--neutral-layer-1);\n --color-2: var(--neutral-layer-2);\n --color-3: var(--neutral-layer-3);\n --color-4: var(--neutral-layer-4);\n\n /* Selected tab + active splitter pick up the accent colour. */\n --color-tab-selected: var(--accent-foreground-rest);\n --color-tab-unselected: var(--neutral-foreground-hint);\n --color-tab-selected-background: var(--accent-fill-rest);\n --color-splitter-drag: var(--accent-fill-rest);\n --color-splitter-hover: var(--accent-fill-hover);\n}\n\n.flexlayout__tabset-selected,\n.flexlayout__tabset-maximized {\n background-image: none !important;\n}\n\n.flexlayout__tab_button_content {\n font-weight: 400;\n font-size: var(--type-ramp-minus-1-font-size);\n}\n\n.flexlayout__tab_button--unselected:hover {\n color: var(--neutral-foreground-rest, #e0e0e0) !important;\n background-color: var(--neutral-fill-stealth-active, rgba(255, 255, 255, 0.06)) !important;\n}\n\n.flexlayout__tab_top,\n.flexlayout__tab_bottom {\n border-radius: 0 !important;\n box-shadow: none !important;\n}\n\n.flexlayout__tab_toolbar_button-max,\n.flexlayout__tab_toolbar_button-min {\n order: 100;\n}\n\n.flexlayout__tab_button_textbox {\n box-sizing: border-box;\n width: auto;\n min-width: 8em;\n max-width: 100%;\n margin: 0;\n padding: 0 calc(var(--design-unit, 4) * 1px);\n font-family: var(--body-font);\n font-size: var(--type-ramp-base-font-size, var(--font-size));\n font-weight: 500;\n line-height: var(--type-ramp-base-line-height, normal);\n color: var(--neutral-foreground-rest);\n background-color: var(--neutral-fill-input-rest);\n border: 1px solid var(--neutral-stroke-rest);\n border-radius: calc(var(--control-corner-radius, 2) * 1px);\n\n &:focus {\n outline: none;\n color: var(--neutral-foreground-rest);\n background-color: var(--neutral-fill-input-focus, var(--neutral-fill-input-rest));\n border-color: var(--accent-fill-rest);\n }\n}\n\n.flexlayout__tabset {\n border: var(--card-border, 1px solid var(--neutral-stroke-rest));\n border-radius: var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));\n background-color: var(--rapid-layout-item-background, var(--neutral-layer-3));\n}\n\n.flexlayout__tabset_content {\n margin-top: -1px;\n}\n\n.flexlayout__tabset_tabbar_outer_top {\n border: 0;\n height: var(\n --foundation-tab-height,\n calc((((var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px)\n );\n background: none;\n z-index: 1;\n}\n\n.flexlayout__tabset_container {\n border-radius: var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));\n}\n\n.flexlayout__tabset_tabbar_inner_tab_container_top {\n border-top: 0;\n}\n\n.flexlayout__tab_button {\n border-right-style: solid;\n border-right-width: var(--tab-rest-border-width, 1px);\n border-right-color: var(--tab-rest-border-color, var(--neutral-stroke-rest));\n padding: 0 calc((12 + var(--design-unit) * 2 * var(--density)) * 1px);\n gap: 8px;\n\n &:first-child {\n border-left-style: solid;\n border-left-width: var(--tab-rest-border-width, 1px);\n border-left-color: var(--tab-rest-border-color, var(--neutral-stroke-rest));\n }\n}\n\n.flexlayout__tab_button--selected {\n position: relative;\n color: var(--accent-foreground-rest) !important;\n background: var(--tab-active-background-color, var(--neutral-layer-card-container));\n border-style: solid;\n border-width: var(--tab-active-border-width, 0 1px 0 0);\n border-color: var(--tab-active-border-color, var(--neutral-stroke-rest));\n .flexlayout__tab_button_content {\n font-weight: 700;\n }\n}\n\n.flexlayout__tab {\n border-radius: 0 0 var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px))\n var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));\n border-top: var(--card-border, 1px solid var(--neutral-stroke-rest));\n background: var(--neutral-layer-card-container);\n\n rapid-card {\n display: flex;\n flex-direction: column;\n border: 0;\n border-radius: 0 0 var(--card-corner-radius) var(--card-corner-radius);\n grid-register {\n display: block;\n height: 100%;\n }\n }\n}\n\n.flexlayout__tabset_tab_divider {\n width: 0;\n}\n\n.flexlayout__tab_button_trailing {\n rapid-icon {\n color: var(--accent-foreground-rest);\n\n &:hover {\n color: var(--accent-foreground-hover);\n }\n }\n}\n\n.flexlayout__popup_menu_container {\n box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);\n padding: 0;\n border: 1px solid var(--neutral-stroke-rest);\n}\n\n.flexlayout__popup_menu_item {\n padding: calc((8 + var(--design-unit) * 2 * var(--density)) * 1px);\n border-bottom: 1px solid var(--neutral-stroke-divider-rest);\n\n &:hover {\n background-color: var(--neutral-fill-rest);\n color: contrast-color(var(--neutral-fill-rest));\n }\n\n &:last-child {\n border-bottom: 0;\n }\n}\n\n.flexlayout__popup_menu_item--selected {\n background-color: var(--neutral-fill-rest);\n color: contrast-color(var(--neutral-fill-rest));\n}\n\n.flexlayout__tab_toolbar_button {\n padding: 0;\n height: unset;\n width: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n > svg {\n height: 16px !important;\n width: 16px !important;\n padding: 4px;\n fill: var(--neutral-foreground-hint);\n }\n}\n\n.flexlayout__splitter_vert {\n background-color: var(--neutral-foreground-rest);\n mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDI0IEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNDE2IDI1NmEzMiAzMiAwIDEgMSAtNjQgMCAzMiAzMiAwIDEgMSA2NCAwem0tMTYwIDBhMzIgMzIgMCAxIDEgLTY0IDAgMzIgMzIgMCAxIDEgNjQgMHpNNjQgMjg4YTMyIDMyIDAgMSAxIDAtNjQgMzIgMzIgMCAxIDEgMCA2NHoiLz48L3N2Zz4=);\n mask-repeat: no-repeat;\n mask-position: center;\n mask-size: 12px;\n &:hover {\n mask-image: none;\n }\n}\n\n.flexlayout__splitter_horz {\n background-color: var(--neutral-foreground-rest);\n mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDI0IEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNjQgMzg0YTMyIDMyIDAgMSAwIDAgNjQgMzIgMzIgMCAxIDAgMC02NHptMC0xNjBhMzIgMzIgMCAxIDAgMCA2NCAzMiAzMiAwIDEgMCAwLTY0ek05NiA5NkEzMiAzMiAwIDEgMCAzMiA5NmEzMiAzMiAwIDEgMCA2NCAweiIvPjwvc3ZnPg==);\n mask-repeat: no-repeat;\n mask-position: center;\n mask-size: 4px;\n &:hover {\n mask-image: none;\n }\n}\n\n.flexlayout__layout {\n top: 8px;\n bottom: 8px;\n left: 8px;\n right: 8px;\n}`",
|
|
16933
|
+
"default": "`/* ============================================================================\n * flexlayout-react base theme — VENDORED from flexlayout-react@0.10.8 (style/dark.css).\n * ========================================================================== */\n@charset \"UTF-8\";\n.flexlayout__layout {\n --color-text: var(--flexlayout-color-text, #eeeeee);\n --color-background: var(--flexlayout-color-background, black);\n --color-base: var(--flexlayout-color-base, black);\n --color-1: var(--flexlayout-color-1, rgb(7%, 7%, 7%));\n --color-2: var(--flexlayout-color-2, rgb(10%, 10%, 10%));\n --color-3: var(--flexlayout-color-3, rgb(15%, 15%, 15%));\n --color-4: var(--flexlayout-color-4, #333333);\n --color-5: var(--flexlayout-color-5, rgb(25%, 25%, 25%));\n --color-6: var(--flexlayout-color-6, rgb(30%, 30%, 30%));\n --color-drag1: var(--flexlayout-color-drag1, rgb(207, 232, 255));\n --color-drag2: var(--flexlayout-color-drag2, rgb(183, 209, 181));\n --color-drag1-background: var(--flexlayout-color-drag1-background, rgba(128, 128, 128, 0.15));\n --color-drag2-background: var(--flexlayout-color-drag2-background, rgba(128, 128, 128, 0.15));\n --font-size: var(--flexlayout-font-size, medium);\n --font-family: var(--flexlayout-font-family, Roboto, Arial, sans-serif);\n --font-weight: var(--flexlayout-font-weight, normal);\n --splitter-size: var(--flexlayout-splitter-size, 8px);\n --splitter-active-size: var(--flexlayout-splitter-active-size, 8px);\n --splitter-handle-visibility: var(--flexlayout-splitter-handle-visibility, hidden);\n --color-overflow: var(--flexlayout-color-overflow, gray);\n --color-icon: var(--flexlayout-color-icon, gray);\n --color-focus: var(--flexlayout-color-focus, #93c5fd);\n --color-tabset-background: var(--flexlayout-color-tabset-background, var(--color-1));\n --color-tabset-background-selected: var(--flexlayout-color-tabset-background-selected, var(--color-1));\n --color-tabset-background-maximized: var(--flexlayout-color-tabset-background-maximized, var(--color-6));\n --color-tabset-divider-line: var(--flexlayout-color-tabset-divider-line, var(--color-4));\n --color-border-tab-content: var(--flexlayout-color-border-tab-content, var(--color-background));\n --color-border-background: var(--flexlayout-color-border-background, var(--color-1));\n --color-border-divider-line: var(--flexlayout-color-border-divider-line, var(--color-4));\n --color-tab-content: var(--flexlayout-color-tab-content, var(--color-background));\n --color-tab-selected: var(--flexlayout-color-tab-selected, var(--color-text));\n --color-tab-selected-background: var(--flexlayout-color-tab-selected-background, var(--color-4));\n --color-tab-unselected: var(--flexlayout-color-tab-unselected, gray);\n --color-tab-unselected-background: var(--flexlayout-color-tab-unselected-background, transparent);\n --color-tab-textbox: var(--flexlayout-color-tab-textbox, var(--color-text));\n --color-tab-textbox-background: var(--flexlayout-color-tab-textbox-background, var(--color-3));\n --color-border-tab-selected: var(--flexlayout-color-border-tab-selected, var(--color-text));\n --color-border-tab-selected-background: var(--flexlayout-color-border-tab-selected-background, var(--color-4));\n --color-border-tab-unselected: var(--flexlayout-color-border-tab-unselected, gray);\n --color-border-tab-unselected-background: var(--flexlayout-color-border-tab-unselected-background, var(--color-2));\n --color-splitter: var(--flexlayout-color-splitter, var(--color-2));\n --color-splitter-hover: var(--flexlayout-color-splitter-hover, var(--color-4));\n --color-splitter-drag: var(--flexlayout-color-splitter-drag, var(--color-5));\n --color-splitter-handle: var(--flexlayout-color-splitter-handle, var(--color-3));\n --color-drag-rect-border: var(--flexlayout-color-drag-rect-border, var(--color-4));\n --color-drag-rect-background: var(--flexlayout-color-drag-rect-background, var(--color-1));\n --color-drag-rect: var(--flexlayout-color-drag-rect, var(--color-text));\n --color-popup-border: var(--flexlayout-color-popup-border, var(--color-6));\n --color-popup-unselected: var(--flexlayout-color-popup-unselected, var(--color-text));\n --color-popup-unselected-background: var(--flexlayout-color-popup-unselected-background, var(--color-background));\n --color-popup-selected: var(--flexlayout-color-popup-selected, var(--color-text));\n --color-popup-selected-background: var(--flexlayout-color-popup-selected-background, var(--color-4));\n --color-edge-marker: var(--flexlayout-color-edge-marker, gray);\n --color-edge-icon: var(--flexlayout-color-edge-icon, #eee);\n --color-mini-scroll-indicator: var(--flexlayout-color-mini-scroll-indicator, rgba(128, 128, 128, 0.5));\n --color-mini-scroll-indicator-hovered: var(--flexlayout-color-mini-scroll-indicator-hovered, rgba(128, 128, 128, 0.8));\n --size-mini-scroll-indicator: var(--flexlayout-size-mini-scroll-indicator, 3px);\n --color-toolbar-button-hover: var(--flexlayout-color-toolbar-button-hover, var(--color-4));\n --color-float-window-header-background: var(--flexlayout-color-float-window-header-background, var(--color-tabset-background));\n --color-tabgroup-pill-text: var(--flexlayout-color-tabgroup-pill-text, black);\n --color-tabgroup-default: var(--flexlayout-color-tabgroup-default, #9e9e9e);\n --color-tabgroup-menu-palette: var(--flexlayout-color-tabgroup-menu-palette, #d97a7a, #dd8a4a, #cbc688, #94b870, #7ab0b2, #7db6c6, #7895c4, #a394cf, #d187b2, #bf9e81);\n --tabgroup-pill-radius: var(--flexlayout-tabgroup-pill-radius, 10px);\n}\n\n/*\n base classes\n*/\n.flexlayout__layout {\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n display: flex;\n background-color: var(--color-background);\n}\n.flexlayout__layout_metrics {\n position: absolute;\n top: -30000px;\n}\n.flexlayout__layout_overlay {\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n z-index: 1000;\n}\n.flexlayout__layout_tab_stamps {\n position: absolute;\n top: -10000px;\n z-index: 100;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n.flexlayout__layout_moveables_home {\n visibility: hidden;\n position: absolute;\n width: 100px;\n height: 100px;\n top: -20000px;\n}\n.flexlayout__layout_main {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-grow: 1;\n position: relative;\n}\n.flexlayout__layout_border_container {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-grow: 1;\n}\n.flexlayout__layout_border_container_inner {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-grow: 1;\n position: relative;\n}\n.flexlayout__splitter {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--color-splitter);\n touch-action: none;\n z-index: 10;\n position: relative;\n}\n.flexlayout__splitter:focus-visible {\n outline: 2px solid var(--color-focus);\n outline-offset: -2px;\n}\n.flexlayout__splitter_horz {\n width: var(--splitter-size);\n min-width: var(--splitter-size);\n}\n.flexlayout__splitter_horz::before {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n /* Center the hit area over the thin line */\n left: 50%;\n width: var(--splitter-active-size);\n transform: translateX(-50%);\n z-index: 1;\n}\n.flexlayout__splitter_vert {\n height: var(--splitter-size);\n min-height: var(--splitter-size);\n}\n.flexlayout__splitter_vert::before {\n content: \"\";\n position: absolute;\n left: 0;\n right: 0;\n /* Center the hit area over the thin line */\n top: 50%;\n height: var(--splitter-active-size);\n transform: translateY(-50%);\n z-index: 1;\n}\n@media (hover: hover) {\n .flexlayout__splitter:hover {\n background-color: var(--color-splitter-hover);\n transition: background-color ease-in 0.1s;\n transition-delay: 0.05s;\n border-radius: 5px;\n }\n}\n.flexlayout__splitter_drag {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n border-radius: 5px;\n background-color: var(--color-splitter-drag);\n}\n.flexlayout__splitter_handle {\n background-color: var(--color-splitter-handle);\n border-radius: 3px;\n visibility: var(--splitter-handle-visibility);\n}\n.flexlayout__splitter_handle_horz {\n width: 3px;\n height: 30px;\n}\n.flexlayout__splitter_handle_vert {\n width: 30px;\n height: 3px;\n}\n.flexlayout__outline_rect {\n position: absolute;\n pointer-events: none;\n box-sizing: border-box;\n border: 2px solid var(--color-drag1);\n background: var(--color-drag1-background);\n border-radius: 5px;\n z-index: 1000;\n}\n.flexlayout__outline_rect_edge {\n pointer-events: none;\n border: 2px solid var(--color-drag2);\n background: var(--color-drag2-background);\n border-radius: 5px;\n z-index: 1000;\n box-sizing: border-box;\n}\n.flexlayout__edge_rect {\n position: absolute;\n z-index: 1000;\n background-color: var(--color-edge-marker);\n pointer-events: none;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.flexlayout__drag_rect {\n color: var(--color-drag-rect);\n background-color: var(--color-drag-rect-background);\n border: 2px solid var(--color-drag-rect-border);\n border-radius: 5px;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n flex-direction: column;\n overflow: hidden;\n padding: 0.3em 0.8em;\n word-wrap: break-word;\n font-size: var(--font-size);\n font-family: var(--font-family);\n}\n.flexlayout__row {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n position: relative;\n box-sizing: border-box;\n overflow: hidden;\n}\n.flexlayout__tabset {\n display: flex;\n flex-direction: column;\n position: relative;\n background-color: var(--color-tabset-background);\n box-sizing: border-box;\n font-family: var(--font-family);\n overflow: hidden;\n flex-grow: 1;\n}\n.flexlayout__tabset_container {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-direction: column;\n overflow: hidden;\n flex-grow: 1;\n}\n.flexlayout__tabset_tab_divider {\n width: 4px;\n}\n.flexlayout__tabset_content {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-grow: 1;\n box-sizing: border-box;\n position: relative;\n}\n.flexlayout__tabset_leading {\n display: flex;\n}\n.flexlayout__tabset_tabbar_outer {\n box-sizing: border-box;\n background-color: var(--color-tabset-background);\n overflow: hidden;\n display: flex;\n align-items: center;\n min-height: 1.5em;\n font-size: var(--font-size);\n font-weight: var(--font-weight);\n}\n.flexlayout__tabset_tabbar_outer_top {\n padding: 0px 2px 0px 2px;\n border-bottom: 1px solid var(--color-tabset-divider-line);\n}\n.flexlayout__tabset_tabbar_outer_bottom {\n padding: 0px 2px 0px 2px;\n border-top: 1px solid var(--color-tabset-divider-line);\n}\n.flexlayout__tabset_tabbar_inner {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-grow: 1;\n scrollbar-width: none;\n}\n.flexlayout__tabset_tabbar_inner::-webkit-scrollbar {\n display: none;\n}\n.flexlayout__tabset_tabbar_inner_tab_container {\n position: relative;\n display: flex;\n padding-left: 4px;\n padding-right: 4px;\n box-sizing: border-box;\n white-space: nowrap;\n align-items: center;\n}\n.flexlayout__tabset_tabbar_inner_tab_container_top {\n border-top: 2px solid transparent;\n}\n.flexlayout__tabset_tabbar_inner_tab_container_bottom {\n border-bottom: 2px solid transparent;\n}\n.flexlayout__tabset-selected {\n background-color: var(--color-tabset-background-selected);\n}\n.flexlayout__tabset-maximized {\n background-color: var(--color-tabset-background-maximized);\n}\n.flexlayout__tab_button_stamp {\n display: inline-flex;\n align-items: center;\n gap: 0.3em;\n white-space: nowrap;\n box-sizing: border-box;\n}\n.flexlayout__group_pill {\n display: inline-flex;\n align-items: center;\n gap: 0.35em;\n padding: 2px 8px 2px 8px;\n margin: 2px 2px;\n border-radius: var(--tabgroup-pill-radius) 0 0 var(--tabgroup-pill-radius);\n border: 1px solid var(--color-tabset-divider-line);\n border-right: none;\n background-color: var(--color-base);\n color: var(--color-tabgroup-pill-text);\n cursor: pointer;\n user-select: none;\n white-space: nowrap;\n box-sizing: border-box;\n}\n.flexlayout__group_pill:focus-visible {\n outline: 2px solid var(--color-focus);\n}\n.flexlayout__group_pill_collapsed {\n border-radius: var(--tabgroup-pill-radius);\n border-right: 1px solid var(--color-tabset-divider-line);\n}\n.flexlayout__group_pill_underline {\n border-radius: var(--tabgroup-pill-radius);\n border-right: 1px solid var(--color-tabset-divider-line);\n}\n.flexlayout__group_pill_name {\n max-width: 10em;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.flexlayout__group_pill_name::before {\n content: \"\";\n}\n.flexlayout__group_pill_count {\n opacity: 0.7;\n font-size: 0.85em;\n}\n.flexlayout__group_end_marker {\n display: inline-block;\n border-radius: 0 var(--tabgroup-pill-radius) var(--tabgroup-pill-radius) 0;\n border: 1px solid var(--color-tabset-divider-line);\n border-left: none;\n background-color: var(--color-base);\n padding: 2px 7px 2px 7px;\n margin: 2px 2px;\n cursor: pointer;\n box-sizing: border-box;\n}\n.flexlayout__group_end_marker::before {\n content: \"\";\n}\n.flexlayout__tab_button_grouped_underline {\n position: relative;\n}\n.flexlayout__tab_button_grouped_underline::after {\n content: \"\";\n position: absolute;\n left: 10px;\n right: 10px;\n bottom: 0;\n height: var(--underline_height, 2px);\n border-radius: calc(var(--underline_height, 2px) / 2);\n background-color: var(--flexlayout-group-color, transparent);\n pointer-events: none;\n}\n.flexlayout__group_rename {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n.flexlayout__group_rename_input {\n padding: 3px;\n border-radius: 5px;\n border: 1px solid var(--color-popup-border);\n background-color: var(--color-tab-textbox-background, var(--color-3));\n color: var(--color-tab-textbox, var(--color-text));\n}\n.flexlayout__group_picker {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n padding: 2px 0;\n max-width: 18em;\n}\n.flexlayout__group_picker_item {\n border: 1px solid var(--color-popup-border);\n border-radius: 10px;\n padding: 0 8px;\n line-height: 1.6em;\n font-size: 0.9em;\n cursor: pointer;\n background-color: var(--color-base);\n color: var(--color-popup-unselected);\n}\n.flexlayout__group_picker_item:hover {\n filter: brightness(0.95);\n}\n.flexlayout__group_color_picker {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 4px;\n padding: 2px 0;\n max-width: 14em;\n}\n.flexlayout__group_color_picker_swatch {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n border: 1px solid var(--color-popup-border);\n cursor: pointer;\n padding: 0;\n}\n.flexlayout__group_color_picker_swatch:hover {\n transform: scale(1.1);\n}\n.flexlayout__group_color_picker_custom {\n display: inline-flex;\n align-items: center;\n}\n.flexlayout__group_color_picker_custom input[type=color] {\n cursor: pointer;\n}\n.flexlayout__tab {\n overflow: hidden;\n box-sizing: border-box;\n background-color: var(--color-tab-content);\n color: var(--color-text);\n position: absolute;\n}\n.flexlayout__tab_moveable {\n position: relative;\n height: 100%;\n min-width: 1px;\n min-height: 1px;\n overflow: auto;\n box-sizing: border-box;\n}\n.flexlayout__tab_overlay {\n z-index: 20;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.2392156863);\n}\n.flexlayout__tab_border_overlay {\n z-index: 1000;\n}\n.flexlayout__tab_overlay_raised {\n z-index: 1001;\n}\n.flexlayout__tab_layout_container {\n position: relative;\n height: 100%;\n box-sizing: border-box;\n}\n.flexlayout__tab_layout_container_user {\n position: relative;\n flex-grow: 1;\n box-sizing: border-box;\n}\n.flexlayout__tab_button {\n display: flex;\n gap: 0.3em;\n align-items: center;\n box-sizing: border-box;\n padding: 3px 0.5em;\n font-weight: var(--font-weight);\n}\n.flexlayout__tab_button:focus-visible {\n outline: 2px solid var(--color-focus);\n outline-offset: -2px;\n}\n.flexlayout__tab_button {\n cursor: pointer;\n}\n.flexlayout__tab_button_stretch {\n background-color: transparent;\n color: var(--color-tab-selected);\n width: 100%;\n padding: 3px 0em;\n text-wrap: nowrap;\n display: flex;\n gap: 0.3em;\n align-items: center;\n box-sizing: border-box;\n cursor: pointer;\n}\n@media (hover: hover) {\n .flexlayout__tab_button_stretch:hover {\n color: var(--color-tab-selected);\n }\n}\n.flexlayout__tab_button--selected {\n background-color: var(--color-tab-selected-background);\n color: var(--color-tab-selected);\n}\n@media (hover: hover) {\n .flexlayout__tab_button:hover {\n color: var(--color-tab-selected);\n }\n}\n.flexlayout__tab_button--unselected {\n background-color: var(--color-tab-unselected-background);\n color: var(--color-tab-unselected);\n}\n.flexlayout__tab_button_leading {\n display: flex;\n}\n.flexlayout__tab_button_pin {\n display: flex;\n}\n.flexlayout__tab_button_content {\n display: flex;\n text-wrap: nowrap;\n}\n.flexlayout__tab_button_textbox {\n border: none;\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-weight: var(--font-weight);\n color: var(--color-tab-textbox);\n background-color: var(--color-tab-textbox-background);\n border: 1px inset var(--color-1);\n border-radius: 3px;\n width: 10em;\n}\n.flexlayout__tab_button_textbox:focus {\n outline: 2px solid var(--color-focus);\n outline-offset: -1px;\n}\n.flexlayout__tab_button_trailing {\n display: flex;\n visibility: hidden;\n border-radius: 4px;\n}\n.flexlayout__tab_button_trailing:hover {\n background-color: var(--color-toolbar-button-hover);\n}\n@media (hover: hover) {\n .flexlayout__tab_button:hover .flexlayout__tab_button_trailing {\n visibility: visible;\n }\n}\n.flexlayout__tab_button--selected .flexlayout__tab_button_trailing {\n visibility: visible;\n}\n.flexlayout__tab_button_overflow {\n display: flex;\n align-items: center;\n border: none;\n color: var(--color-overflow);\n font-size: inherit;\n background-color: transparent;\n width: 2em;\n overflow: hidden;\n}\n.flexlayout__tab_toolbar {\n display: flex;\n align-items: center;\n gap: 0.3em;\n padding-left: 0.5em;\n padding-right: 0.3em;\n}\n.flexlayout__tab_toolbar_icon {\n border: none;\n outline: none;\n font-size: inherit;\n margin: 0px;\n background-color: transparent;\n padding: 1px;\n}\n.flexlayout__tab_toolbar_icon:focus-visible {\n outline: 2px solid var(--color-focus);\n outline-offset: -2px;\n}\n.flexlayout__tab_toolbar_button {\n border: none;\n outline: none;\n font-size: inherit;\n margin: 0px;\n background-color: transparent;\n border-radius: 4px;\n padding: 1px;\n}\n.flexlayout__tab_toolbar_button:focus-visible {\n outline: 2px solid var(--color-focus);\n outline-offset: -2px;\n}\n@media (hover: hover) {\n .flexlayout__tab_toolbar_button:hover {\n background-color: var(--color-toolbar-button-hover);\n }\n}\n.flexlayout__tab_toolbar_sticky_buttons_container {\n display: flex;\n gap: 0.3em;\n padding-left: 5px;\n align-items: center;\n}\n.flexlayout__border {\n box-sizing: border-box;\n overflow: hidden;\n display: flex;\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-weight: var(--font-weight);\n color: var(--color-border);\n background-color: var(--color-border-background);\n}\n.flexlayout__border_tab_contents {\n box-sizing: border-box;\n overflow: hidden;\n background-color: var(--color-border-tab-content);\n}\n.flexlayout__border_tab_overlay {\n position: absolute;\n z-index: 100;\n}\n.flexlayout__border_tab_overlay_top {\n top: 0;\n left: 0;\n right: 0;\n flex-direction: column;\n}\n.flexlayout__border_tab_overlay_bottom {\n bottom: 0;\n left: 0;\n right: 0;\n flex-direction: column;\n}\n.flexlayout__border_tab_overlay_left {\n left: 0;\n top: 0;\n bottom: 0;\n flex-direction: row;\n}\n.flexlayout__border_tab_overlay_right {\n right: 0;\n top: 0;\n bottom: 0;\n flex-direction: row;\n}\n.flexlayout__border_leading {\n display: flex;\n}\n.flexlayout__border_top {\n border-bottom: 1px solid var(--color-border-divider-line);\n align-items: center;\n}\n.flexlayout__border_bottom {\n border-top: 1px solid var(--color-border-divider-line);\n align-items: center;\n}\n.flexlayout__border_left {\n border-right: 1px solid var(--color-border-divider-line);\n align-content: center;\n flex-direction: column;\n}\n.flexlayout__border_right {\n border-left: 1px solid var(--color-border-divider-line);\n align-content: center;\n flex-direction: column;\n}\n.flexlayout__border_inner {\n position: relative;\n box-sizing: border-box;\n align-items: center;\n display: flex;\n flex-grow: 1;\n scrollbar-width: none;\n}\n.flexlayout__border_inner::-webkit-scrollbar {\n display: none;\n}\n.flexlayout__border_inner_tab_container {\n white-space: nowrap;\n display: flex;\n align-items: center;\n padding-left: 2px;\n padding-right: 2px;\n box-sizing: border-box;\n position: absolute;\n}\n.flexlayout__border_inner_tab_container_right {\n transform-origin: top left;\n transform: rotate(90deg);\n}\n.flexlayout__border_inner_tab_container_left {\n flex-direction: row-reverse;\n transform-origin: top right;\n transform: rotate(-90deg);\n}\n.flexlayout__border_inner_tab_container_left_down {\n flex-direction: row;\n transform-origin: top left;\n transform: rotate(90deg);\n}\n.flexlayout__border_tab_divider {\n width: 4px;\n}\n.flexlayout__border_button {\n display: flex;\n gap: 0.3em;\n align-items: center;\n cursor: pointer;\n padding: 3px 0.5em;\n margin: 2px 0px;\n box-sizing: border-box;\n white-space: nowrap;\n font-weight: var(--font-weight);\n}\n.flexlayout__border_button:focus-visible {\n outline: 2px solid var(--color-focus);\n outline-offset: -2px;\n}\n.flexlayout__border_button--selected {\n background-color: var(--color-border-tab-selected-background);\n color: var(--color-border-tab-selected);\n}\n@media (hover: hover) {\n .flexlayout__border_button:hover {\n color: var(--color-border-tab-selected);\n }\n}\n.flexlayout__border_button--unselected {\n background-color: var(--color-border-tab-unselected-background);\n color: var(--color-border-tab-unselected);\n}\n.flexlayout__border_button_leading {\n display: flex;\n}\n.flexlayout__border_button_content {\n display: flex;\n}\n.flexlayout__border_button_trailing {\n display: flex;\n border-radius: 4px;\n visibility: hidden;\n}\n@media (hover: hover) {\n .flexlayout__border_button:hover .flexlayout__border_button_trailing {\n visibility: visible;\n }\n}\n.flexlayout__border_button--selected .flexlayout__border_button_trailing {\n visibility: visible;\n}\n.flexlayout__border_toolbar {\n display: flex;\n gap: 0.3em;\n align-items: center;\n}\n.flexlayout__border_toolbar_left, .flexlayout__border_toolbar_right {\n flex-direction: column;\n padding-top: 0.5em;\n padding-bottom: 0.3em;\n}\n.flexlayout__border_toolbar_top, .flexlayout__border_toolbar_bottom {\n padding-left: 0.5em;\n padding-right: 0.3em;\n}\n.flexlayout__border_toolbar_button {\n border: none;\n outline: none;\n font-size: inherit;\n background-color: transparent;\n border-radius: 4px;\n padding: 1px;\n}\n.flexlayout__border_toolbar_button:focus-visible {\n outline: 2px solid var(--color-focus);\n outline-offset: -2px;\n}\n@media (hover: hover) {\n .flexlayout__border_toolbar_button:hover {\n background-color: var(--color-toolbar-button-hover);\n }\n}\n.flexlayout__border_toolbar_button_overflow {\n display: flex;\n align-items: center;\n border: none;\n color: var(--color-overflow);\n font-size: inherit;\n background-color: transparent;\n width: 1.5em;\n}\n.flexlayout__popup_menu {\n font-size: var(--font-size);\n font-family: var(--font-family);\n font-weight: var(--font-weight);\n}\n.flexlayout__popup_menu_item {\n padding: 2px 0.5em;\n white-space: nowrap;\n cursor: pointer;\n border-radius: 2px;\n}\n.flexlayout__popup_menu_item.flexlayout__popup_menu_item_grouped {\n border-left: 5px solid var(--flexlayout-group-color, var(--color-tabgroup-default));\n padding-left: calc(0.5em - 5px);\n border-radius: 0 !important;\n}\n.flexlayout__popup_menu_item:focus-visible {\n outline: 2px solid var(--color-focus);\n outline-offset: -2px;\n}\n.flexlayout__popup_menu_item--selected {\n font-weight: 500;\n background-color: var(--color-tab-selected-background);\n color: var(--color-tab-selected);\n}\n.flexlayout__popup_menu_item--disabled {\n opacity: 0.4;\n cursor: default;\n pointer-events: none;\n}\n@media (hover: hover) {\n .flexlayout__popup_menu_item:hover {\n background-color: var(--color-6);\n }\n}\n.flexlayout__popup_menu_divider {\n height: 1px;\n margin: 4px 2px;\n background-color: var(--color-popup-border);\n}\n.flexlayout__popup_menu_container {\n box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);\n border: 1px solid var(--color-popup-border);\n color: var(--color-popup-unselected);\n background: var(--color-popup-unselected-background);\n border-radius: 3px;\n position: absolute;\n z-index: 3000;\n max-height: 50%;\n min-width: 100px;\n overflow: auto;\n padding: 2px;\n}\n.flexlayout__float_window {\n box-sizing: border-box;\n background-color: var(--color-tabset-background);\n border-radius: 5px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n z-index: 2000;\n}\n.flexlayout__float_window_header {\n display: flex;\n align-items: center;\n padding: 5px 5px;\n background-color: var(--color-float-window-header-background);\n border-bottom: 1px solid var(--color-tabset-divider-line);\n cursor: move;\n user-select: none;\n font-family: var(--font-family);\n font-size: 0.8em;\n min-height: 15px;\n}\n.flexlayout__float_window_header_title {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.flexlayout__float_window_drag_handle {\n display: flex;\n align-items: center;\n padding: 0 4px;\n opacity: 0.7;\n cursor: grab;\n}\n.flexlayout__float_window_drag_handle:hover {\n opacity: 1;\n}\n.flexlayout__float_window_drag_handle:active {\n cursor: grabbing;\n}\n.flexlayout__float_window_button {\n display: flex;\n align-items: center;\n padding: 0 4px;\n margin: 0;\n border: none;\n background: none;\n opacity: 0.7;\n cursor: pointer;\n}\n.flexlayout__float_window_button:hover {\n opacity: 1;\n}\n.flexlayout__float_window_content {\n position: relative;\n overflow: auto;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n min-width: 0;\n margin: 5px;\n}\n.flexlayout__floating_window _body {\n height: 100%;\n}\n.flexlayout__floating_window_content {\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n}\n.flexlayout__error_boundary_container {\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n display: flex;\n justify-content: center;\n}\n.flexlayout__error_boundary_content {\n display: flex;\n align-items: center;\n}\n.flexlayout__border_sizer {\n position: absolute;\n padding-top: 6px;\n padding-bottom: 5px;\n font-size: var(--font-size);\n font-family: var(--font-family);\n font-weight: var(--font-weight);\n}\n.flexlayout__mini_scrollbar {\n position: absolute;\n background-color: var(--color-mini-scroll-indicator);\n border-radius: 5px;\n width: var(--size-mini-scroll-indicator);\n height: var(--size-mini-scroll-indicator);\n visibility: hidden;\n opacity: 0;\n transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n}\n.flexlayout__mini_scrollbar:hover {\n background-color: var(--color-mini-scroll-indicator-hovered);\n transition: background-color 0.3s ease-in-out;\n}\n.flexlayout__mini_scrollbar_container {\n position: relative;\n display: flex;\n flex-grow: 1;\n overflow: hidden;\n}\n@media (hover: hover) {\n .flexlayout__mini_scrollbar_container:hover .flexlayout__mini_scrollbar {\n opacity: 1;\n visibility: visible;\n }\n}\n\n/* ======================== End of Base Classes =========================== */\n/* \n dark theme overrides \n*/\n.flexlayout__tabset-selected {\n background-image: linear-gradient(var(--color-background), var(--color-4));\n}\n.flexlayout__tabset-maximized {\n background-image: linear-gradient(var(--color-6), var(--color-2));\n}\n.flexlayout__tab_top {\n box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n}\n.flexlayout__tab_bottom {\n box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n}\n.flexlayout__border_button {\n box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);\n border-radius: 3px;\n}\n\n/* ============================================================================\n * Rapid Design System overrides (flexlayout-react.overrides.css) — applied last.\n * ========================================================================== */\n/*\n * flexlayout-react.overrides.css — Rapid Design System theme overrides for flexlayout-react.\n *\n * THIS IS THE SINGLE SOURCE OF TRUTH for how flexlayout-react looks across every app that\n * consumes Foundation. Do NOT copy these rules into apps — import the compiled theme from\n * \\`@genesislcap/rapid-design-system\\` instead (see flexlayout-react-theme.ts).\n *\n * Build pipeline: \\`scripts/generate-flexlayout-theme.mjs\\` concatenates the vendored\n * flexlayout-react base theme (structural CSS + dark palette) FIRST, then this file LAST,\n * into \\`flexlayout-react-theme.generated.ts\\`. Equal specificity means the later sheet wins,\n * so every rule here overrides the vendored default. Run \\`pnpm flexlayout:generate\\` after\n * editing (the package build does this automatically).\n *\n * The flexlayout theme is almost entirely driven by CSS custom properties declared on\n * \\`.flexlayout__layout\\` (see the full list at the top of the vendored base theme). The\n * easiest way to re-skin is to remap those variables to rapid design-system tokens, as\n * below. For anything the variables don't cover, target the \\`.flexlayout__*\\` classes\n * directly (examples at the bottom).\n *\n * Tokens resolve from the nearest design-system provider ancestor (CSS custom properties\n * inherit across shadow boundaries), so flexlayout-react must render under a\n * \\`<rapid-design-system-provider>\\` for these to take effect.\n */\n\n/* --- Variable remap: flexlayout palette -> rapid design tokens ----------------- */\n.flexlayout__layout {\n --font-family: var(--body-font, Roboto, Arial, sans-serif);\n --font-size: var(--type-ramp-base-font-size);\n\n --color-text: var(--neutral-foreground-rest);\n --color-background: var(--fill-color);\n\n /* Greyscale ramp used across tabsets, borders and toolbars. */\n --color-1: var(--neutral-layer-1);\n --color-2: var(--neutral-layer-2);\n --color-3: var(--neutral-layer-3);\n --color-4: var(--neutral-layer-4);\n\n /* Selected tab + active splitter pick up the accent colour. */\n --color-tab-selected: var(--accent-foreground-rest);\n --color-tab-unselected: var(--neutral-foreground-hint);\n --color-tab-selected-background: var(--accent-fill-rest);\n --color-splitter-drag: var(--accent-fill-rest);\n --color-splitter-hover: var(--accent-fill-hover);\n\n --tabgroup-pill-radius: 9999px;\n}\n\n.flexlayout__tabset-selected,\n.flexlayout__tabset-maximized {\n background-image: none !important;\n}\n\n.flexlayout__tab_button_content {\n font-weight: 400;\n font-size: var(--type-ramp-minus-1-font-size);\n}\n\n.flexlayout__tab_button--unselected:hover {\n color: var(--neutral-foreground-rest, #e0e0e0) !important;\n background-color: var(--neutral-fill-stealth-active, rgba(255, 255, 255, 0.06)) !important;\n}\n\n.flexlayout__tab_top,\n.flexlayout__tab_bottom {\n border-radius: 0 !important;\n box-shadow: none !important;\n}\n\n.flexlayout__tab_toolbar_button-max,\n.flexlayout__tab_toolbar_button-min {\n order: 100;\n}\n\n.flexlayout__tab_button_textbox {\n box-sizing: border-box;\n width: auto;\n min-width: 8em;\n max-width: 100%;\n margin: 0;\n padding: 0 calc(var(--design-unit, 4) * 1px);\n font-family: var(--body-font);\n font-size: var(--type-ramp-base-font-size, var(--font-size));\n font-weight: 500;\n line-height: var(--type-ramp-base-line-height, normal);\n color: var(--neutral-foreground-rest);\n background-color: var(--neutral-fill-input-rest);\n border: 1px solid var(--neutral-stroke-rest);\n border-radius: calc(var(--control-corner-radius, 2) * 1px);\n\n &:focus {\n outline: none;\n color: var(--neutral-foreground-rest);\n background-color: var(--neutral-fill-input-focus, var(--neutral-fill-input-rest));\n border-color: var(--accent-fill-rest);\n }\n}\n\n.flexlayout__tabset {\n border: var(--card-border, 1px solid var(--neutral-stroke-rest));\n border-radius: var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));\n background-color: var(--rapid-layout-item-background, var(--neutral-layer-3));\n}\n\n.flexlayout__tabset_content {\n margin-top: -1px;\n}\n\n.flexlayout__tabset_tabbar_outer_top {\n border: 0;\n height: var(\n --foundation-tab-height,\n calc((((var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px)\n );\n background: none;\n z-index: 1;\n}\n\n.flexlayout__tabset_container {\n border-radius: var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));\n}\n\n.flexlayout__tabset_tabbar_inner_tab_container_top {\n border-top: 0;\n}\n\n.flexlayout__tab_button {\n padding: 0 calc((12 + var(--design-unit) * 2 * var(--density)) * 1px);\n gap: 8px;\n height: 100%;\n}\n\n.flexlayout__tab_button--selected {\n position: relative;\n color: var(--accent-foreground-rest) !important;\n background: var(--tab-active-background-color, var(--neutral-layer-card-container));\n\n /*\n * Keep this border-* trio: themes that mark selection with an underline rather than a\n * background (corporate sets \\`--tab-active-border-width: 0 0 2px 0\\`) have nothing to\n * hang the underline on without it. Defaults to 0 because the spacers now draw the\n * separators — the old \\`0 1px 0 0\\` default would double up against them.\n */\n border-style: solid;\n border-width: var(--tab-active-border-width, 0);\n border-color: var(--tab-active-border-color, var(--neutral-stroke-rest));\n}\n\n.flexlayout__tab {\n border-radius: 0 0 var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px))\n var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));\n border-top: var(--card-border, 1px solid var(--neutral-stroke-rest));\n background: var(--neutral-layer-card-container);\n\n rapid-card {\n display: flex;\n flex-direction: column;\n border: 0;\n border-radius: 0 0 var(--card-corner-radius) var(--card-corner-radius);\n grid-register {\n display: block;\n height: 100%;\n }\n }\n}\n\n/*\n * Tab separators live on flexlayout's own spacer elements, not as borders on the tab\n * buttons. flexlayout emits a spacer before every tab, group pill and end marker, plus a\n * trailing one, and every spacer carries \\`_tab_spacer\\` — \\`_tab_divider\\` is an extra class\n * on just the subset sitting between two tabs. Styling \\`_tab_spacer\\` therefore covers the\n * dividers too, and separates every element in the strip including the leading and\n * trailing edges. It also needs no positional selectors: the previous rule bordered the\n * buttons and reached the leading edge via \\`:nth-of-type(2)\\`, which assumed exactly one\n * leading spacer, and a leading group pill or \\`tabGroupType: 'splitpill'\\` pushes more.\n *\n * Driven by the same \\`--tab-rest-border-*\\` tokens the buttons used before, so the\n * separators stay consistent with rapid-tabs (tabs.styles.ts) and foundation-layout\n * (layout.styles.ts), which read the same pair. Set \\`--tab-rest-border-color: transparent\\`\n * (or \\`--tab-rest-border-width: 0\\`) to hide them.\n *\n * \\`align-self: stretch\\` is required because the tab container centres its items, so the\n * spacer would otherwise collapse to its content height and the line would not show.\n */\n.flexlayout__tabset_tab_spacer {\n align-self: stretch;\n width: 0;\n border-left: var(--tab-rest-border-width, 1px) solid\n var(--tab-rest-border-color, var(--neutral-stroke-rest));\n}\n\n.flexlayout__tab_button_trailing {\n rapid-icon {\n color: var(--accent-foreground-rest);\n\n &:hover {\n color: var(--accent-foreground-hover);\n }\n }\n}\n\n.flexlayout__popup_menu_container {\n box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);\n padding: 0;\n border: 1px solid var(--neutral-stroke-rest);\n}\n\n.flexlayout__popup_menu_item {\n padding: calc((8 + var(--design-unit) * 2 * var(--density)) * 1px);\n border-bottom: 1px solid var(--neutral-stroke-divider-rest);\n\n &:hover {\n background-color: var(--neutral-fill-rest);\n color: contrast-color(var(--neutral-fill-rest));\n }\n\n &:last-child {\n border-bottom: 0;\n }\n}\n\n.flexlayout__popup_menu_item--selected {\n background-color: var(--neutral-fill-rest);\n color: contrast-color(var(--neutral-fill-rest));\n}\n\n.flexlayout__tab_toolbar_button {\n padding: 0;\n height: unset;\n width: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n > svg {\n height: 16px !important;\n width: 16px !important;\n padding: 4px;\n fill: var(--neutral-foreground-hint);\n }\n}\n\n.flexlayout__splitter_vert {\n background-color: var(--neutral-foreground-rest);\n mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDI0IEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNDE2IDI1NmEzMiAzMiAwIDEgMSAtNjQgMCAzMiAzMiAwIDEgMSA2NCAwem0tMTYwIDBhMzIgMzIgMCAxIDEgLTY0IDAgMzIgMzIgMCAxIDEgNjQgMHpNNjQgMjg4YTMyIDMyIDAgMSAxIDAtNjQgMzIgMzIgMCAxIDEgMCA2NHoiLz48L3N2Zz4=);\n mask-repeat: no-repeat;\n mask-position: center;\n mask-size: 12px;\n &:hover {\n mask-image: none;\n }\n}\n\n.flexlayout__splitter_horz {\n background-color: var(--neutral-foreground-rest);\n mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDI0IEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNjQgMzg0YTMyIDMyIDAgMSAwIDAgNjQgMzIgMzIgMCAxIDAgMC02NHptMC0xNjBhMzIgMzIgMCAxIDAgMCA2NCAzMiAzMiAwIDEgMCAwLTY0ek05NiA5NkEzMiAzMiAwIDEgMCAzMiA5NmEzMiAzMiAwIDEgMCA2NCAweiIvPjwvc3ZnPg==);\n mask-repeat: no-repeat;\n mask-position: center;\n mask-size: 4px;\n &:hover {\n mask-image: none;\n }\n}\n\n.flexlayout__layout {\n top: 8px;\n bottom: 8px;\n left: 8px;\n right: 8px;\n}\n\n.flexlayout__mini_scrollbar_container {\n height: 100%;\n}\n\n.flexlayout__group_pill {\n margin: 2px 0 2px 8px;\n height: calc(100% - 12px);\n font-size: 11px;\n + .flexlayout__tabset_tab_spacer {\n display: none;\n }\n}\n\n.flexlayout__group_pill_collapsed {\n margin: 2px 8px;\n + .flexlayout__tabset_tab_spacer {\n display: block;\n }\n}\n\n.flexlayout__group_end_marker {\n margin: 2px 8px 2px 0;\n height: calc(100% - 12px);\n}\n\n.flexlayout__tab_button_grouped {\n &.flexlayout__tab_button {\n border-right: 0;\n height: auto;\n padding: 0 8px;\n height: calc(100% - 12px);\n border-top: 1px solid var(--neutral-stroke-rest);\n border-bottom: 1px solid var(--neutral-stroke-rest);\n border-right: 1px solid var(--neutral-stroke-rest);\n .flexlayout__tab_button_content {\n font-size: 11px;\n }\n + .flexlayout__tabset_tab_divider {\n display: none;\n }\n + .flexlayout__tabset_tab_spacer {\n display: none;\n }\n }\n &.flexlayout__tab_button--selected {\n border: 0;\n }\n}`",
|
|
16934
16934
|
"description": "Merged flexlayout-react base theme + Rapid Design System overrides."
|
|
16935
16935
|
}
|
|
16936
16936
|
],
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/** The flexlayout-react version this theme was generated against. */
|
|
2
|
-
export declare const RAPID_FLEXLAYOUT_REACT_VERSION = "0.8
|
|
2
|
+
export declare const RAPID_FLEXLAYOUT_REACT_VERSION = "0.10.8";
|
|
3
3
|
/** Merged flexlayout-react base theme + Rapid Design System overrides. */
|
|
4
|
-
export declare const FLEXLAYOUT_REACT_THEME_CSS = "/* ============================================================================\n * flexlayout-react base theme \u2014 VENDORED from flexlayout-react@0.8.19 (style/dark.css).\n * ========================================================================== */\n.flexlayout__layout {\n --color-text: #eeeeee;\n --color-background: black;\n --color-base: black;\n --color-1: rgb(17.85, 17.85, 17.85);\n --color-2: rgb(25.5, 25.5, 25.5);\n --color-3: rgb(38.25, 38.25, 38.25);\n --color-4: #333333;\n --color-5: rgb(63.75, 63.75, 63.75);\n --color-6: rgb(76.5, 76.5, 76.5);\n --color-drag1: rgb(207, 232, 255);\n --color-drag2: rgb(183, 209, 181);\n --color-drag1-background: rgba(128, 128, 128, 0.15);\n --color-drag2-background: rgba(128, 128, 128, 0.15);\n --font-size: medium;\n --font-family: Roboto, Arial, sans-serif;\n --color-overflow: gray;\n --color-icon: gray;\n --color-tabset-background: var(--color-1);\n --color-tabset-background-selected: var(--color-1);\n --color-tabset-background-maximized: var(--color-6);\n --color-tabset-divider-line: var(--color-4);\n --color-tabset-header-background: var(--color-1);\n --color-tabset-header: var(--color-text);\n --color-border-tab-content: var(--color-background);\n --color-border-background: var(--color-1);\n --color-border-divider-line: var(--color-4);\n --color-tab-content: var(--color-background);\n --color-tab-selected: var(--color-text);\n --color-tab-selected-background: var(--color-4);\n --color-tab-unselected: gray;\n --color-tab-unselected-background: transparent;\n --color-tab-textbox: var(--color-text);\n --color-tab-textbox-background: var(--color-3);\n --color-border-tab-selected: var(--color-text);\n --color-border-tab-selected-background: var(--color-4);\n --color-border-tab-unselected: gray;\n --color-border-tab-unselected-background: var(--color-2);\n --color-splitter: var(--color-2);\n --color-splitter-hover: var(--color-4);\n --color-splitter-drag: var(--color-5);\n --color-drag-rect-border: var(--color-4);\n --color-drag-rect-background: var(--color-1);\n --color-drag-rect: var(--color-text);\n --color-popup-border: var(--color-6);\n --color-popup-unselected: var(--color-text);\n --color-popup-unselected-background: var(--color-background);\n --color-popup-selected: var(--color-text);\n --color-popup-selected-background: var(--color-4);\n --color-edge-marker: gray;\n --color-edge-icon: #eee;\n --color-mini-scroll-indicator: rgba(128, 128, 128, 0.5);\n --color-mini-scroll-indicator-hovered: rgba(128, 128, 128, 0.8);\n --size-mini-scroll-indicator: 3px;\n --color-toolbar-button-hover: var(--color-4);\n}\n\n/*\n base classes\n*/\n.flexlayout__layout {\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n display: flex;\n overflow: hidden;\n background-color: var(--color-background);\n}\n.flexlayout__layout_overlay {\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n z-index: 1000;\n}\n.flexlayout__layout_tab_stamps {\n position: absolute;\n top: -10000px;\n z-index: 100;\n display: flex;\n flex-direction: column;\n align-items: start;\n}\n.flexlayout__layout_moveables {\n visibility: hidden;\n position: absolute;\n width: 100px;\n height: 100px;\n top: -20000px;\n}\n.flexlayout__layout_main {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-grow: 1;\n position: relative;\n}\n.flexlayout__layout_border_container {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-grow: 1;\n}\n.flexlayout__layout_border_container_inner {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-grow: 1;\n}\n.flexlayout__splitter {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--color-splitter);\n touch-action: none;\n z-index: 10;\n}\n@media (hover: hover) {\n .flexlayout__splitter:hover {\n background-color: var(--color-splitter-hover);\n transition: background-color ease-in 0.1s;\n transition-delay: 0.05s;\n border-radius: 5px;\n }\n}\n.flexlayout__splitter_drag {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n border-radius: 5px;\n background-color: var(--color-splitter-drag);\n}\n.flexlayout__splitter_handle {\n background-color: #ccc;\n border-radius: 3px;\n}\n.flexlayout__splitter_handle_horz {\n width: 3px;\n height: 30px;\n}\n.flexlayout__splitter_handle_vert {\n width: 30px;\n height: 3px;\n}\n.flexlayout__splitter_extra {\n touch-action: none;\n background-color: transparent;\n}\n.flexlayout__outline_rect {\n position: absolute;\n pointer-events: none;\n box-sizing: border-box;\n border: 2px solid var(--color-drag1);\n background: var(--color-drag1-background);\n border-radius: 5px;\n z-index: 1000;\n}\n.flexlayout__outline_rect_edge {\n pointer-events: none;\n border: 2px solid var(--color-drag2);\n background: var(--color-drag2-background);\n border-radius: 5px;\n z-index: 1000;\n box-sizing: border-box;\n}\n.flexlayout__edge_rect {\n position: absolute;\n z-index: 1000;\n background-color: var(--color-edge-marker);\n pointer-events: none;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.flexlayout__drag_rect {\n color: var(--color-drag-rect);\n background-color: var(--color-drag-rect-background);\n border: 2px solid var(--color-drag-rect-border);\n border-radius: 5px;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n flex-direction: column;\n overflow: hidden;\n padding: 0.3em 0.8em;\n word-wrap: break-word;\n font-size: var(--font-size);\n font-family: var(--font-family);\n}\n.flexlayout__row {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n position: relative;\n box-sizing: border-box;\n overflow: hidden;\n}\n.flexlayout__tabset {\n display: flex;\n flex-direction: column;\n position: relative;\n background-color: var(--color-tabset-background);\n box-sizing: border-box;\n font-family: var(--font-family);\n overflow: hidden;\n flex-grow: 1;\n}\n.flexlayout__tabset_container {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-direction: column;\n overflow: hidden;\n flex-grow: 1;\n}\n.flexlayout__tabset_tab_divider {\n width: 4px;\n}\n.flexlayout__tabset_content {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-grow: 1;\n box-sizing: border-box;\n position: relative;\n}\n.flexlayout__tabset_leading {\n display: flex;\n}\n.flexlayout__tabset_header {\n display: flex;\n align-items: center;\n padding: 3px 3px 3px 5px;\n box-sizing: border-box;\n border-bottom: 1px solid var(--color-tabset-divider-line);\n color: var(--color-tabset-header);\n background-color: var(--color-tabset-header-background);\n font-size: var(--font-size);\n}\n.flexlayout__tabset_header_content {\n flex-grow: 1;\n}\n.flexlayout__tabset_tabbar_outer {\n box-sizing: border-box;\n background-color: var(--color-tabset-background);\n overflow: hidden;\n display: flex;\n font-size: var(--font-size);\n}\n.flexlayout__tabset_tabbar_outer_top {\n padding: 0px 2px 0px 2px;\n border-bottom: 1px solid var(--color-tabset-divider-line);\n}\n.flexlayout__tabset_tabbar_outer_bottom {\n padding: 0px 2px 0px 2px;\n border-top: 1px solid var(--color-tabset-divider-line);\n}\n.flexlayout__tabset_tabbar_inner {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-grow: 1;\n scrollbar-width: none;\n}\n.flexlayout__tabset_tabbar_inner::-webkit-scrollbar {\n display: none;\n}\n.flexlayout__tabset_tabbar_inner_tab_container {\n position: relative;\n display: flex;\n padding-left: 4px;\n padding-right: 4px;\n box-sizing: border-box;\n white-space: nowrap;\n}\n.flexlayout__tabset_tabbar_inner_tab_container_top {\n border-top: 2px solid transparent;\n}\n.flexlayout__tabset_tabbar_inner_tab_container_bottom {\n border-bottom: 2px solid transparent;\n}\n.flexlayout__tabset-selected {\n background-color: var(--color-tabset-background-selected);\n}\n.flexlayout__tabset-maximized {\n background-color: var(--color-tabset-background-maximized);\n}\n.flexlayout__tab_button_stamp {\n display: inline-flex;\n align-items: center;\n gap: 0.3em;\n white-space: nowrap;\n box-sizing: border-box;\n}\n.flexlayout__tab {\n overflow: hidden;\n box-sizing: border-box;\n background-color: var(--color-tab-content);\n color: var(--color-text);\n position: relative;\n}\n.flexlayout__tab_moveable {\n position: relative;\n height: 100%;\n min-width: 1px;\n min-height: 1px;\n overflow: auto;\n box-sizing: border-box;\n}\n.flexlayout__tab_overlay {\n z-index: 20;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.2392156863);\n}\n.flexlayout__tab_button {\n display: flex;\n gap: 0.3em;\n align-items: center;\n box-sizing: border-box;\n padding: 3px 0.5em;\n cursor: pointer;\n}\n.flexlayout__tab_button_stretch {\n background-color: transparent;\n color: var(--color-tab-selected);\n width: 100%;\n padding: 3px 0em;\n text-wrap: nowrap;\n display: flex;\n gap: 0.3em;\n align-items: center;\n box-sizing: border-box;\n cursor: pointer;\n}\n@media (hover: hover) {\n .flexlayout__tab_button_stretch:hover {\n color: var(--color-tab-selected);\n }\n}\n.flexlayout__tab_button--selected {\n background-color: var(--color-tab-selected-background);\n color: var(--color-tab-selected);\n}\n@media (hover: hover) {\n .flexlayout__tab_button:hover {\n color: var(--color-tab-selected);\n }\n}\n.flexlayout__tab_button--unselected {\n background-color: var(--color-tab-unselected-background);\n color: var(--color-tab-unselected);\n}\n.flexlayout__tab_button_leading {\n display: flex;\n}\n.flexlayout__tab_button_content {\n display: flex;\n text-wrap: nowrap;\n}\n.flexlayout__tab_button_textbox {\n border: none;\n font-family: var(--font-family);\n font-size: var(--font-size);\n color: var(--color-tab-textbox);\n background-color: var(--color-tab-textbox-background);\n border: 1px inset var(--color-1);\n border-radius: 3px;\n width: 10em;\n}\n.flexlayout__tab_button_textbox:focus {\n outline: none;\n}\n.flexlayout__tab_button_trailing {\n display: flex;\n visibility: hidden;\n border-radius: 4px;\n}\n.flexlayout__tab_button_trailing:hover {\n background-color: var(--color-toolbar-button-hover);\n}\n@media (hover: hover) {\n .flexlayout__tab_button:hover .flexlayout__tab_button_trailing {\n visibility: visible;\n }\n}\n.flexlayout__tab_button--selected .flexlayout__tab_button_trailing {\n visibility: visible;\n}\n.flexlayout__tab_button_overflow {\n display: flex;\n align-items: center;\n border: none;\n color: var(--color-overflow);\n font-size: inherit;\n background-color: transparent;\n width: 2em;\n overflow: hidden;\n}\n.flexlayout__tab_toolbar {\n display: flex;\n align-items: center;\n gap: 0.3em;\n padding-left: 0.5em;\n padding-right: 0.3em;\n}\n.flexlayout__tab_toolbar_icon {\n border: none;\n outline: none;\n font-size: inherit;\n margin: 0px;\n background-color: transparent;\n padding: 1px;\n}\n.flexlayout__tab_toolbar_button {\n border: none;\n outline: none;\n font-size: inherit;\n margin: 0px;\n background-color: transparent;\n border-radius: 4px;\n padding: 1px;\n}\n@media (hover: hover) {\n .flexlayout__tab_toolbar_button:hover {\n background-color: var(--color-toolbar-button-hover);\n }\n}\n.flexlayout__tab_toolbar_sticky_buttons_container {\n display: flex;\n gap: 0.3em;\n padding-left: 5px;\n align-items: center;\n}\n.flexlayout__border {\n box-sizing: border-box;\n overflow: hidden;\n display: flex;\n font-size: var(--font-size);\n font-family: var(--font-family);\n color: var(--color-border);\n background-color: var(--color-border-background);\n}\n.flexlayout__border_tab_contents {\n box-sizing: border-box;\n overflow: hidden;\n background-color: var(--color-border-tab-content);\n}\n.flexlayout__border_leading {\n display: flex;\n}\n.flexlayout__border_top {\n border-bottom: 1px solid var(--color-border-divider-line);\n align-items: center;\n}\n.flexlayout__border_bottom {\n border-top: 1px solid var(--color-border-divider-line);\n align-items: center;\n}\n.flexlayout__border_left {\n border-right: 1px solid var(--color-border-divider-line);\n align-content: center;\n flex-direction: column;\n}\n.flexlayout__border_right {\n border-left: 1px solid var(--color-border-divider-line);\n align-content: center;\n flex-direction: column;\n}\n.flexlayout__border_inner {\n position: relative;\n box-sizing: border-box;\n align-items: center;\n display: flex;\n flex-grow: 1;\n scrollbar-width: none;\n}\n.flexlayout__border_inner::-webkit-scrollbar {\n display: none;\n}\n.flexlayout__border_inner_tab_container {\n white-space: nowrap;\n display: flex;\n padding-left: 2px;\n padding-right: 2px;\n box-sizing: border-box;\n position: absolute;\n}\n.flexlayout__border_inner_tab_container_right {\n transform-origin: top left;\n transform: rotate(90deg);\n}\n.flexlayout__border_inner_tab_container_left {\n flex-direction: row-reverse;\n transform-origin: top right;\n transform: rotate(-90deg);\n}\n.flexlayout__border_tab_divider {\n width: 4px;\n}\n.flexlayout__border_button {\n display: flex;\n gap: 0.3em;\n align-items: center;\n cursor: pointer;\n padding: 3px 0.5em;\n margin: 2px 0px;\n box-sizing: border-box;\n white-space: nowrap;\n}\n.flexlayout__border_button--selected {\n background-color: var(--color-border-tab-selected-background);\n color: var(--color-border-tab-selected);\n}\n@media (hover: hover) {\n .flexlayout__border_button:hover {\n color: var(--color-border-tab-selected);\n }\n}\n.flexlayout__border_button--unselected {\n background-color: var(--color-border-tab-unselected-background);\n color: var(--color-border-tab-unselected);\n}\n.flexlayout__border_button_leading {\n display: flex;\n}\n.flexlayout__border_button_content {\n display: flex;\n}\n.flexlayout__border_button_trailing {\n display: flex;\n border-radius: 4px;\n visibility: hidden;\n}\n@media (hover: hover) {\n .flexlayout__border_button:hover .flexlayout__border_button_trailing {\n visibility: visible;\n }\n}\n.flexlayout__border_button--selected .flexlayout__border_button_trailing {\n visibility: visible;\n}\n.flexlayout__border_toolbar {\n display: flex;\n gap: 0.3em;\n align-items: center;\n}\n.flexlayout__border_toolbar_left, .flexlayout__border_toolbar_right {\n flex-direction: column;\n padding-top: 0.5em;\n padding-bottom: 0.3em;\n}\n.flexlayout__border_toolbar_top, .flexlayout__border_toolbar_bottom {\n padding-left: 0.5em;\n padding-right: 0.3em;\n}\n.flexlayout__border_toolbar_button {\n border: none;\n outline: none;\n font-size: inherit;\n background-color: transparent;\n border-radius: 4px;\n padding: 1px;\n}\n@media (hover: hover) {\n .flexlayout__border_toolbar_button:hover {\n background-color: var(--color-toolbar-button-hover);\n }\n}\n.flexlayout__border_toolbar_button_overflow {\n display: flex;\n align-items: center;\n border: none;\n color: var(--color-overflow);\n font-size: inherit;\n background-color: transparent;\n width: 1.5em;\n}\n.flexlayout__popup_menu {\n font-size: var(--font-size);\n font-family: var(--font-family);\n}\n.flexlayout__popup_menu_item {\n padding: 2px 0.5em;\n white-space: nowrap;\n cursor: pointer;\n border-radius: 2px;\n}\n.flexlayout__popup_menu_item--selected {\n font-weight: 500;\n background-color: var(--color-tab-selected-background);\n color: var(--color-tab-selected);\n}\n@media (hover: hover) {\n .flexlayout__popup_menu_item:hover {\n background-color: var(--color-6);\n }\n}\n.flexlayout__popup_menu_container {\n box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);\n border: 1px solid var(--color-popup-border);\n color: var(--color-popup-unselected);\n background: var(--color-popup-unselected-background);\n border-radius: 3px;\n position: absolute;\n z-index: 1000;\n max-height: 50%;\n min-width: 100px;\n overflow: auto;\n padding: 2px;\n}\n.flexlayout__floating_window _body {\n height: 100%;\n}\n.flexlayout__floating_window_content {\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n}\n.flexlayout__error_boundary_container {\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n display: flex;\n justify-content: center;\n}\n.flexlayout__error_boundary_content {\n display: flex;\n align-items: center;\n}\n.flexlayout__border_sizer {\n position: absolute;\n top: -30000px;\n padding-top: 6px;\n padding-bottom: 5px;\n font-size: var(--font-size);\n font-family: var(--font-family);\n}\n.flexlayout__mini_scrollbar {\n position: absolute;\n background-color: var(--color-mini-scroll-indicator);\n border-radius: 5px;\n width: var(--size-mini-scroll-indicator);\n height: var(--size-mini-scroll-indicator);\n visibility: hidden;\n opacity: 0;\n transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n}\n.flexlayout__mini_scrollbar:hover {\n background-color: var(--color-mini-scroll-indicator-hovered);\n transition: background-color 0.3s ease-in-out;\n}\n.flexlayout__mini_scrollbar_container {\n position: relative;\n display: flex;\n flex-grow: 1;\n overflow: hidden;\n}\n@media (hover: hover) {\n .flexlayout__mini_scrollbar_container:hover .flexlayout__mini_scrollbar {\n opacity: 1;\n visibility: visible;\n }\n}\n\n/* ======================== End of Base Classes =========================== */\n/* \n dark theme overrides \n*/\n.flexlayout__tabset_header {\n box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54);\n}\n.flexlayout__tabset-selected {\n background-image: linear-gradient(var(--color-background), var(--color-4));\n}\n.flexlayout__tabset-maximized {\n background-image: linear-gradient(var(--color-6), var(--color-2));\n}\n.flexlayout__tab_top {\n box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n}\n.flexlayout__tab_bottom {\n box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n}\n.flexlayout__border_button {\n box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);\n border-radius: 3px;\n}\n\n/* ============================================================================\n * Rapid Design System overrides (flexlayout-react.overrides.css) \u2014 applied last.\n * ========================================================================== */\n/*\n * flexlayout-react.overrides.css \u2014 Rapid Design System theme overrides for flexlayout-react.\n *\n * THIS IS THE SINGLE SOURCE OF TRUTH for how flexlayout-react looks across every app that\n * consumes Foundation. Do NOT copy these rules into apps \u2014 import the compiled theme from\n * `@genesislcap/rapid-design-system` instead (see flexlayout-react-theme.ts).\n *\n * Build pipeline: `scripts/generate-flexlayout-theme.mjs` concatenates the vendored\n * flexlayout-react base theme (structural CSS + dark palette) FIRST, then this file LAST,\n * into `flexlayout-react-theme.generated.ts`. Equal specificity means the later sheet wins,\n * so every rule here overrides the vendored default. Run `pnpm flexlayout:generate` after\n * editing (the package build does this automatically).\n *\n * The flexlayout theme is almost entirely driven by CSS custom properties declared on\n * `.flexlayout__layout` (see the full list at the top of the vendored base theme). The\n * easiest way to re-skin is to remap those variables to rapid design-system tokens, as\n * below. For anything the variables don't cover, target the `.flexlayout__*` classes\n * directly (examples at the bottom).\n *\n * Tokens resolve from the nearest design-system provider ancestor (CSS custom properties\n * inherit across shadow boundaries), so flexlayout-react must render under a\n * `<rapid-design-system-provider>` for these to take effect.\n */\n\n/* --- Variable remap: flexlayout palette -> rapid design tokens ----------------- */\n.flexlayout__layout {\n --font-family: var(--body-font, Roboto, Arial, sans-serif);\n --font-size: var(--type-ramp-base-font-size);\n\n --color-text: var(--neutral-foreground-rest);\n --color-background: var(--fill-color);\n\n /* Greyscale ramp used across tabsets, borders and toolbars. */\n --color-1: var(--neutral-layer-1);\n --color-2: var(--neutral-layer-2);\n --color-3: var(--neutral-layer-3);\n --color-4: var(--neutral-layer-4);\n\n /* Selected tab + active splitter pick up the accent colour. */\n --color-tab-selected: var(--accent-foreground-rest);\n --color-tab-unselected: var(--neutral-foreground-hint);\n --color-tab-selected-background: var(--accent-fill-rest);\n --color-splitter-drag: var(--accent-fill-rest);\n --color-splitter-hover: var(--accent-fill-hover);\n}\n\n.flexlayout__tabset-selected,\n.flexlayout__tabset-maximized {\n background-image: none !important;\n}\n\n.flexlayout__tab_button_content {\n font-weight: 400;\n font-size: var(--type-ramp-minus-1-font-size);\n}\n\n.flexlayout__tab_button--unselected:hover {\n color: var(--neutral-foreground-rest, #e0e0e0) !important;\n background-color: var(--neutral-fill-stealth-active, rgba(255, 255, 255, 0.06)) !important;\n}\n\n.flexlayout__tab_top,\n.flexlayout__tab_bottom {\n border-radius: 0 !important;\n box-shadow: none !important;\n}\n\n.flexlayout__tab_toolbar_button-max,\n.flexlayout__tab_toolbar_button-min {\n order: 100;\n}\n\n.flexlayout__tab_button_textbox {\n box-sizing: border-box;\n width: auto;\n min-width: 8em;\n max-width: 100%;\n margin: 0;\n padding: 0 calc(var(--design-unit, 4) * 1px);\n font-family: var(--body-font);\n font-size: var(--type-ramp-base-font-size, var(--font-size));\n font-weight: 500;\n line-height: var(--type-ramp-base-line-height, normal);\n color: var(--neutral-foreground-rest);\n background-color: var(--neutral-fill-input-rest);\n border: 1px solid var(--neutral-stroke-rest);\n border-radius: calc(var(--control-corner-radius, 2) * 1px);\n\n &:focus {\n outline: none;\n color: var(--neutral-foreground-rest);\n background-color: var(--neutral-fill-input-focus, var(--neutral-fill-input-rest));\n border-color: var(--accent-fill-rest);\n }\n}\n\n.flexlayout__tabset {\n border: var(--card-border, 1px solid var(--neutral-stroke-rest));\n border-radius: var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));\n background-color: var(--rapid-layout-item-background, var(--neutral-layer-3));\n}\n\n.flexlayout__tabset_content {\n margin-top: -1px;\n}\n\n.flexlayout__tabset_tabbar_outer_top {\n border: 0;\n height: var(\n --foundation-tab-height,\n calc((((var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px)\n );\n background: none;\n z-index: 1;\n}\n\n.flexlayout__tabset_container {\n border-radius: var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));\n}\n\n.flexlayout__tabset_tabbar_inner_tab_container_top {\n border-top: 0;\n}\n\n.flexlayout__tab_button {\n border-right-style: solid;\n border-right-width: var(--tab-rest-border-width, 1px);\n border-right-color: var(--tab-rest-border-color, var(--neutral-stroke-rest));\n padding: 0 calc((12 + var(--design-unit) * 2 * var(--density)) * 1px);\n gap: 8px;\n\n &:first-child {\n border-left-style: solid;\n border-left-width: var(--tab-rest-border-width, 1px);\n border-left-color: var(--tab-rest-border-color, var(--neutral-stroke-rest));\n }\n}\n\n.flexlayout__tab_button--selected {\n position: relative;\n color: var(--accent-foreground-rest) !important;\n background: var(--tab-active-background-color, var(--neutral-layer-card-container));\n border-style: solid;\n border-width: var(--tab-active-border-width, 0 1px 0 0);\n border-color: var(--tab-active-border-color, var(--neutral-stroke-rest));\n .flexlayout__tab_button_content {\n font-weight: 700;\n }\n}\n\n.flexlayout__tab {\n border-radius: 0 0 var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px))\n var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));\n border-top: var(--card-border, 1px solid var(--neutral-stroke-rest));\n background: var(--neutral-layer-card-container);\n\n rapid-card {\n display: flex;\n flex-direction: column;\n border: 0;\n border-radius: 0 0 var(--card-corner-radius) var(--card-corner-radius);\n grid-register {\n display: block;\n height: 100%;\n }\n }\n}\n\n.flexlayout__tabset_tab_divider {\n width: 0;\n}\n\n.flexlayout__tab_button_trailing {\n rapid-icon {\n color: var(--accent-foreground-rest);\n\n &:hover {\n color: var(--accent-foreground-hover);\n }\n }\n}\n\n.flexlayout__popup_menu_container {\n box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);\n padding: 0;\n border: 1px solid var(--neutral-stroke-rest);\n}\n\n.flexlayout__popup_menu_item {\n padding: calc((8 + var(--design-unit) * 2 * var(--density)) * 1px);\n border-bottom: 1px solid var(--neutral-stroke-divider-rest);\n\n &:hover {\n background-color: var(--neutral-fill-rest);\n color: contrast-color(var(--neutral-fill-rest));\n }\n\n &:last-child {\n border-bottom: 0;\n }\n}\n\n.flexlayout__popup_menu_item--selected {\n background-color: var(--neutral-fill-rest);\n color: contrast-color(var(--neutral-fill-rest));\n}\n\n.flexlayout__tab_toolbar_button {\n padding: 0;\n height: unset;\n width: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n > svg {\n height: 16px !important;\n width: 16px !important;\n padding: 4px;\n fill: var(--neutral-foreground-hint);\n }\n}\n\n.flexlayout__splitter_vert {\n background-color: var(--neutral-foreground-rest);\n mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDI0IEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNDE2IDI1NmEzMiAzMiAwIDEgMSAtNjQgMCAzMiAzMiAwIDEgMSA2NCAwem0tMTYwIDBhMzIgMzIgMCAxIDEgLTY0IDAgMzIgMzIgMCAxIDEgNjQgMHpNNjQgMjg4YTMyIDMyIDAgMSAxIDAtNjQgMzIgMzIgMCAxIDEgMCA2NHoiLz48L3N2Zz4=);\n mask-repeat: no-repeat;\n mask-position: center;\n mask-size: 12px;\n &:hover {\n mask-image: none;\n }\n}\n\n.flexlayout__splitter_horz {\n background-color: var(--neutral-foreground-rest);\n mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDI0IEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNjQgMzg0YTMyIDMyIDAgMSAwIDAgNjQgMzIgMzIgMCAxIDAgMC02NHptMC0xNjBhMzIgMzIgMCAxIDAgMCA2NCAzMiAzMiAwIDEgMCAwLTY0ek05NiA5NkEzMiAzMiAwIDEgMCAzMiA5NmEzMiAzMiAwIDEgMCA2NCAweiIvPjwvc3ZnPg==);\n mask-repeat: no-repeat;\n mask-position: center;\n mask-size: 4px;\n &:hover {\n mask-image: none;\n }\n}\n\n.flexlayout__layout {\n top: 8px;\n bottom: 8px;\n left: 8px;\n right: 8px;\n}";
|
|
4
|
+
export declare const FLEXLAYOUT_REACT_THEME_CSS = "/* ============================================================================\n * flexlayout-react base theme \u2014 VENDORED from flexlayout-react@0.10.8 (style/dark.css).\n * ========================================================================== */\n@charset \"UTF-8\";\n.flexlayout__layout {\n --color-text: var(--flexlayout-color-text, #eeeeee);\n --color-background: var(--flexlayout-color-background, black);\n --color-base: var(--flexlayout-color-base, black);\n --color-1: var(--flexlayout-color-1, rgb(7%, 7%, 7%));\n --color-2: var(--flexlayout-color-2, rgb(10%, 10%, 10%));\n --color-3: var(--flexlayout-color-3, rgb(15%, 15%, 15%));\n --color-4: var(--flexlayout-color-4, #333333);\n --color-5: var(--flexlayout-color-5, rgb(25%, 25%, 25%));\n --color-6: var(--flexlayout-color-6, rgb(30%, 30%, 30%));\n --color-drag1: var(--flexlayout-color-drag1, rgb(207, 232, 255));\n --color-drag2: var(--flexlayout-color-drag2, rgb(183, 209, 181));\n --color-drag1-background: var(--flexlayout-color-drag1-background, rgba(128, 128, 128, 0.15));\n --color-drag2-background: var(--flexlayout-color-drag2-background, rgba(128, 128, 128, 0.15));\n --font-size: var(--flexlayout-font-size, medium);\n --font-family: var(--flexlayout-font-family, Roboto, Arial, sans-serif);\n --font-weight: var(--flexlayout-font-weight, normal);\n --splitter-size: var(--flexlayout-splitter-size, 8px);\n --splitter-active-size: var(--flexlayout-splitter-active-size, 8px);\n --splitter-handle-visibility: var(--flexlayout-splitter-handle-visibility, hidden);\n --color-overflow: var(--flexlayout-color-overflow, gray);\n --color-icon: var(--flexlayout-color-icon, gray);\n --color-focus: var(--flexlayout-color-focus, #93c5fd);\n --color-tabset-background: var(--flexlayout-color-tabset-background, var(--color-1));\n --color-tabset-background-selected: var(--flexlayout-color-tabset-background-selected, var(--color-1));\n --color-tabset-background-maximized: var(--flexlayout-color-tabset-background-maximized, var(--color-6));\n --color-tabset-divider-line: var(--flexlayout-color-tabset-divider-line, var(--color-4));\n --color-border-tab-content: var(--flexlayout-color-border-tab-content, var(--color-background));\n --color-border-background: var(--flexlayout-color-border-background, var(--color-1));\n --color-border-divider-line: var(--flexlayout-color-border-divider-line, var(--color-4));\n --color-tab-content: var(--flexlayout-color-tab-content, var(--color-background));\n --color-tab-selected: var(--flexlayout-color-tab-selected, var(--color-text));\n --color-tab-selected-background: var(--flexlayout-color-tab-selected-background, var(--color-4));\n --color-tab-unselected: var(--flexlayout-color-tab-unselected, gray);\n --color-tab-unselected-background: var(--flexlayout-color-tab-unselected-background, transparent);\n --color-tab-textbox: var(--flexlayout-color-tab-textbox, var(--color-text));\n --color-tab-textbox-background: var(--flexlayout-color-tab-textbox-background, var(--color-3));\n --color-border-tab-selected: var(--flexlayout-color-border-tab-selected, var(--color-text));\n --color-border-tab-selected-background: var(--flexlayout-color-border-tab-selected-background, var(--color-4));\n --color-border-tab-unselected: var(--flexlayout-color-border-tab-unselected, gray);\n --color-border-tab-unselected-background: var(--flexlayout-color-border-tab-unselected-background, var(--color-2));\n --color-splitter: var(--flexlayout-color-splitter, var(--color-2));\n --color-splitter-hover: var(--flexlayout-color-splitter-hover, var(--color-4));\n --color-splitter-drag: var(--flexlayout-color-splitter-drag, var(--color-5));\n --color-splitter-handle: var(--flexlayout-color-splitter-handle, var(--color-3));\n --color-drag-rect-border: var(--flexlayout-color-drag-rect-border, var(--color-4));\n --color-drag-rect-background: var(--flexlayout-color-drag-rect-background, var(--color-1));\n --color-drag-rect: var(--flexlayout-color-drag-rect, var(--color-text));\n --color-popup-border: var(--flexlayout-color-popup-border, var(--color-6));\n --color-popup-unselected: var(--flexlayout-color-popup-unselected, var(--color-text));\n --color-popup-unselected-background: var(--flexlayout-color-popup-unselected-background, var(--color-background));\n --color-popup-selected: var(--flexlayout-color-popup-selected, var(--color-text));\n --color-popup-selected-background: var(--flexlayout-color-popup-selected-background, var(--color-4));\n --color-edge-marker: var(--flexlayout-color-edge-marker, gray);\n --color-edge-icon: var(--flexlayout-color-edge-icon, #eee);\n --color-mini-scroll-indicator: var(--flexlayout-color-mini-scroll-indicator, rgba(128, 128, 128, 0.5));\n --color-mini-scroll-indicator-hovered: var(--flexlayout-color-mini-scroll-indicator-hovered, rgba(128, 128, 128, 0.8));\n --size-mini-scroll-indicator: var(--flexlayout-size-mini-scroll-indicator, 3px);\n --color-toolbar-button-hover: var(--flexlayout-color-toolbar-button-hover, var(--color-4));\n --color-float-window-header-background: var(--flexlayout-color-float-window-header-background, var(--color-tabset-background));\n --color-tabgroup-pill-text: var(--flexlayout-color-tabgroup-pill-text, black);\n --color-tabgroup-default: var(--flexlayout-color-tabgroup-default, #9e9e9e);\n --color-tabgroup-menu-palette: var(--flexlayout-color-tabgroup-menu-palette, #d97a7a, #dd8a4a, #cbc688, #94b870, #7ab0b2, #7db6c6, #7895c4, #a394cf, #d187b2, #bf9e81);\n --tabgroup-pill-radius: var(--flexlayout-tabgroup-pill-radius, 10px);\n}\n\n/*\n base classes\n*/\n.flexlayout__layout {\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n display: flex;\n background-color: var(--color-background);\n}\n.flexlayout__layout_metrics {\n position: absolute;\n top: -30000px;\n}\n.flexlayout__layout_overlay {\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n z-index: 1000;\n}\n.flexlayout__layout_tab_stamps {\n position: absolute;\n top: -10000px;\n z-index: 100;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n.flexlayout__layout_moveables_home {\n visibility: hidden;\n position: absolute;\n width: 100px;\n height: 100px;\n top: -20000px;\n}\n.flexlayout__layout_main {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-grow: 1;\n position: relative;\n}\n.flexlayout__layout_border_container {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-grow: 1;\n}\n.flexlayout__layout_border_container_inner {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-grow: 1;\n position: relative;\n}\n.flexlayout__splitter {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--color-splitter);\n touch-action: none;\n z-index: 10;\n position: relative;\n}\n.flexlayout__splitter:focus-visible {\n outline: 2px solid var(--color-focus);\n outline-offset: -2px;\n}\n.flexlayout__splitter_horz {\n width: var(--splitter-size);\n min-width: var(--splitter-size);\n}\n.flexlayout__splitter_horz::before {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n /* Center the hit area over the thin line */\n left: 50%;\n width: var(--splitter-active-size);\n transform: translateX(-50%);\n z-index: 1;\n}\n.flexlayout__splitter_vert {\n height: var(--splitter-size);\n min-height: var(--splitter-size);\n}\n.flexlayout__splitter_vert::before {\n content: \"\";\n position: absolute;\n left: 0;\n right: 0;\n /* Center the hit area over the thin line */\n top: 50%;\n height: var(--splitter-active-size);\n transform: translateY(-50%);\n z-index: 1;\n}\n@media (hover: hover) {\n .flexlayout__splitter:hover {\n background-color: var(--color-splitter-hover);\n transition: background-color ease-in 0.1s;\n transition-delay: 0.05s;\n border-radius: 5px;\n }\n}\n.flexlayout__splitter_drag {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n border-radius: 5px;\n background-color: var(--color-splitter-drag);\n}\n.flexlayout__splitter_handle {\n background-color: var(--color-splitter-handle);\n border-radius: 3px;\n visibility: var(--splitter-handle-visibility);\n}\n.flexlayout__splitter_handle_horz {\n width: 3px;\n height: 30px;\n}\n.flexlayout__splitter_handle_vert {\n width: 30px;\n height: 3px;\n}\n.flexlayout__outline_rect {\n position: absolute;\n pointer-events: none;\n box-sizing: border-box;\n border: 2px solid var(--color-drag1);\n background: var(--color-drag1-background);\n border-radius: 5px;\n z-index: 1000;\n}\n.flexlayout__outline_rect_edge {\n pointer-events: none;\n border: 2px solid var(--color-drag2);\n background: var(--color-drag2-background);\n border-radius: 5px;\n z-index: 1000;\n box-sizing: border-box;\n}\n.flexlayout__edge_rect {\n position: absolute;\n z-index: 1000;\n background-color: var(--color-edge-marker);\n pointer-events: none;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.flexlayout__drag_rect {\n color: var(--color-drag-rect);\n background-color: var(--color-drag-rect-background);\n border: 2px solid var(--color-drag-rect-border);\n border-radius: 5px;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n flex-direction: column;\n overflow: hidden;\n padding: 0.3em 0.8em;\n word-wrap: break-word;\n font-size: var(--font-size);\n font-family: var(--font-family);\n}\n.flexlayout__row {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n position: relative;\n box-sizing: border-box;\n overflow: hidden;\n}\n.flexlayout__tabset {\n display: flex;\n flex-direction: column;\n position: relative;\n background-color: var(--color-tabset-background);\n box-sizing: border-box;\n font-family: var(--font-family);\n overflow: hidden;\n flex-grow: 1;\n}\n.flexlayout__tabset_container {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-direction: column;\n overflow: hidden;\n flex-grow: 1;\n}\n.flexlayout__tabset_tab_divider {\n width: 4px;\n}\n.flexlayout__tabset_content {\n display: flex;\n flex-basis: 0px;\n min-width: 0;\n min-height: 0;\n flex-grow: 1;\n box-sizing: border-box;\n position: relative;\n}\n.flexlayout__tabset_leading {\n display: flex;\n}\n.flexlayout__tabset_tabbar_outer {\n box-sizing: border-box;\n background-color: var(--color-tabset-background);\n overflow: hidden;\n display: flex;\n align-items: center;\n min-height: 1.5em;\n font-size: var(--font-size);\n font-weight: var(--font-weight);\n}\n.flexlayout__tabset_tabbar_outer_top {\n padding: 0px 2px 0px 2px;\n border-bottom: 1px solid var(--color-tabset-divider-line);\n}\n.flexlayout__tabset_tabbar_outer_bottom {\n padding: 0px 2px 0px 2px;\n border-top: 1px solid var(--color-tabset-divider-line);\n}\n.flexlayout__tabset_tabbar_inner {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-grow: 1;\n scrollbar-width: none;\n}\n.flexlayout__tabset_tabbar_inner::-webkit-scrollbar {\n display: none;\n}\n.flexlayout__tabset_tabbar_inner_tab_container {\n position: relative;\n display: flex;\n padding-left: 4px;\n padding-right: 4px;\n box-sizing: border-box;\n white-space: nowrap;\n align-items: center;\n}\n.flexlayout__tabset_tabbar_inner_tab_container_top {\n border-top: 2px solid transparent;\n}\n.flexlayout__tabset_tabbar_inner_tab_container_bottom {\n border-bottom: 2px solid transparent;\n}\n.flexlayout__tabset-selected {\n background-color: var(--color-tabset-background-selected);\n}\n.flexlayout__tabset-maximized {\n background-color: var(--color-tabset-background-maximized);\n}\n.flexlayout__tab_button_stamp {\n display: inline-flex;\n align-items: center;\n gap: 0.3em;\n white-space: nowrap;\n box-sizing: border-box;\n}\n.flexlayout__group_pill {\n display: inline-flex;\n align-items: center;\n gap: 0.35em;\n padding: 2px 8px 2px 8px;\n margin: 2px 2px;\n border-radius: var(--tabgroup-pill-radius) 0 0 var(--tabgroup-pill-radius);\n border: 1px solid var(--color-tabset-divider-line);\n border-right: none;\n background-color: var(--color-base);\n color: var(--color-tabgroup-pill-text);\n cursor: pointer;\n user-select: none;\n white-space: nowrap;\n box-sizing: border-box;\n}\n.flexlayout__group_pill:focus-visible {\n outline: 2px solid var(--color-focus);\n}\n.flexlayout__group_pill_collapsed {\n border-radius: var(--tabgroup-pill-radius);\n border-right: 1px solid var(--color-tabset-divider-line);\n}\n.flexlayout__group_pill_underline {\n border-radius: var(--tabgroup-pill-radius);\n border-right: 1px solid var(--color-tabset-divider-line);\n}\n.flexlayout__group_pill_name {\n max-width: 10em;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.flexlayout__group_pill_name::before {\n content: \"\u200B\";\n}\n.flexlayout__group_pill_count {\n opacity: 0.7;\n font-size: 0.85em;\n}\n.flexlayout__group_end_marker {\n display: inline-block;\n border-radius: 0 var(--tabgroup-pill-radius) var(--tabgroup-pill-radius) 0;\n border: 1px solid var(--color-tabset-divider-line);\n border-left: none;\n background-color: var(--color-base);\n padding: 2px 7px 2px 7px;\n margin: 2px 2px;\n cursor: pointer;\n box-sizing: border-box;\n}\n.flexlayout__group_end_marker::before {\n content: \"\u200B\";\n}\n.flexlayout__tab_button_grouped_underline {\n position: relative;\n}\n.flexlayout__tab_button_grouped_underline::after {\n content: \"\";\n position: absolute;\n left: 10px;\n right: 10px;\n bottom: 0;\n height: var(--underline_height, 2px);\n border-radius: calc(var(--underline_height, 2px) / 2);\n background-color: var(--flexlayout-group-color, transparent);\n pointer-events: none;\n}\n.flexlayout__group_rename {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n.flexlayout__group_rename_input {\n padding: 3px;\n border-radius: 5px;\n border: 1px solid var(--color-popup-border);\n background-color: var(--color-tab-textbox-background, var(--color-3));\n color: var(--color-tab-textbox, var(--color-text));\n}\n.flexlayout__group_picker {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n padding: 2px 0;\n max-width: 18em;\n}\n.flexlayout__group_picker_item {\n border: 1px solid var(--color-popup-border);\n border-radius: 10px;\n padding: 0 8px;\n line-height: 1.6em;\n font-size: 0.9em;\n cursor: pointer;\n background-color: var(--color-base);\n color: var(--color-popup-unselected);\n}\n.flexlayout__group_picker_item:hover {\n filter: brightness(0.95);\n}\n.flexlayout__group_color_picker {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 4px;\n padding: 2px 0;\n max-width: 14em;\n}\n.flexlayout__group_color_picker_swatch {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n border: 1px solid var(--color-popup-border);\n cursor: pointer;\n padding: 0;\n}\n.flexlayout__group_color_picker_swatch:hover {\n transform: scale(1.1);\n}\n.flexlayout__group_color_picker_custom {\n display: inline-flex;\n align-items: center;\n}\n.flexlayout__group_color_picker_custom input[type=color] {\n cursor: pointer;\n}\n.flexlayout__tab {\n overflow: hidden;\n box-sizing: border-box;\n background-color: var(--color-tab-content);\n color: var(--color-text);\n position: absolute;\n}\n.flexlayout__tab_moveable {\n position: relative;\n height: 100%;\n min-width: 1px;\n min-height: 1px;\n overflow: auto;\n box-sizing: border-box;\n}\n.flexlayout__tab_overlay {\n z-index: 20;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.2392156863);\n}\n.flexlayout__tab_border_overlay {\n z-index: 1000;\n}\n.flexlayout__tab_overlay_raised {\n z-index: 1001;\n}\n.flexlayout__tab_layout_container {\n position: relative;\n height: 100%;\n box-sizing: border-box;\n}\n.flexlayout__tab_layout_container_user {\n position: relative;\n flex-grow: 1;\n box-sizing: border-box;\n}\n.flexlayout__tab_button {\n display: flex;\n gap: 0.3em;\n align-items: center;\n box-sizing: border-box;\n padding: 3px 0.5em;\n font-weight: var(--font-weight);\n}\n.flexlayout__tab_button:focus-visible {\n outline: 2px solid var(--color-focus);\n outline-offset: -2px;\n}\n.flexlayout__tab_button {\n cursor: pointer;\n}\n.flexlayout__tab_button_stretch {\n background-color: transparent;\n color: var(--color-tab-selected);\n width: 100%;\n padding: 3px 0em;\n text-wrap: nowrap;\n display: flex;\n gap: 0.3em;\n align-items: center;\n box-sizing: border-box;\n cursor: pointer;\n}\n@media (hover: hover) {\n .flexlayout__tab_button_stretch:hover {\n color: var(--color-tab-selected);\n }\n}\n.flexlayout__tab_button--selected {\n background-color: var(--color-tab-selected-background);\n color: var(--color-tab-selected);\n}\n@media (hover: hover) {\n .flexlayout__tab_button:hover {\n color: var(--color-tab-selected);\n }\n}\n.flexlayout__tab_button--unselected {\n background-color: var(--color-tab-unselected-background);\n color: var(--color-tab-unselected);\n}\n.flexlayout__tab_button_leading {\n display: flex;\n}\n.flexlayout__tab_button_pin {\n display: flex;\n}\n.flexlayout__tab_button_content {\n display: flex;\n text-wrap: nowrap;\n}\n.flexlayout__tab_button_textbox {\n border: none;\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-weight: var(--font-weight);\n color: var(--color-tab-textbox);\n background-color: var(--color-tab-textbox-background);\n border: 1px inset var(--color-1);\n border-radius: 3px;\n width: 10em;\n}\n.flexlayout__tab_button_textbox:focus {\n outline: 2px solid var(--color-focus);\n outline-offset: -1px;\n}\n.flexlayout__tab_button_trailing {\n display: flex;\n visibility: hidden;\n border-radius: 4px;\n}\n.flexlayout__tab_button_trailing:hover {\n background-color: var(--color-toolbar-button-hover);\n}\n@media (hover: hover) {\n .flexlayout__tab_button:hover .flexlayout__tab_button_trailing {\n visibility: visible;\n }\n}\n.flexlayout__tab_button--selected .flexlayout__tab_button_trailing {\n visibility: visible;\n}\n.flexlayout__tab_button_overflow {\n display: flex;\n align-items: center;\n border: none;\n color: var(--color-overflow);\n font-size: inherit;\n background-color: transparent;\n width: 2em;\n overflow: hidden;\n}\n.flexlayout__tab_toolbar {\n display: flex;\n align-items: center;\n gap: 0.3em;\n padding-left: 0.5em;\n padding-right: 0.3em;\n}\n.flexlayout__tab_toolbar_icon {\n border: none;\n outline: none;\n font-size: inherit;\n margin: 0px;\n background-color: transparent;\n padding: 1px;\n}\n.flexlayout__tab_toolbar_icon:focus-visible {\n outline: 2px solid var(--color-focus);\n outline-offset: -2px;\n}\n.flexlayout__tab_toolbar_button {\n border: none;\n outline: none;\n font-size: inherit;\n margin: 0px;\n background-color: transparent;\n border-radius: 4px;\n padding: 1px;\n}\n.flexlayout__tab_toolbar_button:focus-visible {\n outline: 2px solid var(--color-focus);\n outline-offset: -2px;\n}\n@media (hover: hover) {\n .flexlayout__tab_toolbar_button:hover {\n background-color: var(--color-toolbar-button-hover);\n }\n}\n.flexlayout__tab_toolbar_sticky_buttons_container {\n display: flex;\n gap: 0.3em;\n padding-left: 5px;\n align-items: center;\n}\n.flexlayout__border {\n box-sizing: border-box;\n overflow: hidden;\n display: flex;\n font-family: var(--font-family);\n font-size: var(--font-size);\n font-weight: var(--font-weight);\n color: var(--color-border);\n background-color: var(--color-border-background);\n}\n.flexlayout__border_tab_contents {\n box-sizing: border-box;\n overflow: hidden;\n background-color: var(--color-border-tab-content);\n}\n.flexlayout__border_tab_overlay {\n position: absolute;\n z-index: 100;\n}\n.flexlayout__border_tab_overlay_top {\n top: 0;\n left: 0;\n right: 0;\n flex-direction: column;\n}\n.flexlayout__border_tab_overlay_bottom {\n bottom: 0;\n left: 0;\n right: 0;\n flex-direction: column;\n}\n.flexlayout__border_tab_overlay_left {\n left: 0;\n top: 0;\n bottom: 0;\n flex-direction: row;\n}\n.flexlayout__border_tab_overlay_right {\n right: 0;\n top: 0;\n bottom: 0;\n flex-direction: row;\n}\n.flexlayout__border_leading {\n display: flex;\n}\n.flexlayout__border_top {\n border-bottom: 1px solid var(--color-border-divider-line);\n align-items: center;\n}\n.flexlayout__border_bottom {\n border-top: 1px solid var(--color-border-divider-line);\n align-items: center;\n}\n.flexlayout__border_left {\n border-right: 1px solid var(--color-border-divider-line);\n align-content: center;\n flex-direction: column;\n}\n.flexlayout__border_right {\n border-left: 1px solid var(--color-border-divider-line);\n align-content: center;\n flex-direction: column;\n}\n.flexlayout__border_inner {\n position: relative;\n box-sizing: border-box;\n align-items: center;\n display: flex;\n flex-grow: 1;\n scrollbar-width: none;\n}\n.flexlayout__border_inner::-webkit-scrollbar {\n display: none;\n}\n.flexlayout__border_inner_tab_container {\n white-space: nowrap;\n display: flex;\n align-items: center;\n padding-left: 2px;\n padding-right: 2px;\n box-sizing: border-box;\n position: absolute;\n}\n.flexlayout__border_inner_tab_container_right {\n transform-origin: top left;\n transform: rotate(90deg);\n}\n.flexlayout__border_inner_tab_container_left {\n flex-direction: row-reverse;\n transform-origin: top right;\n transform: rotate(-90deg);\n}\n.flexlayout__border_inner_tab_container_left_down {\n flex-direction: row;\n transform-origin: top left;\n transform: rotate(90deg);\n}\n.flexlayout__border_tab_divider {\n width: 4px;\n}\n.flexlayout__border_button {\n display: flex;\n gap: 0.3em;\n align-items: center;\n cursor: pointer;\n padding: 3px 0.5em;\n margin: 2px 0px;\n box-sizing: border-box;\n white-space: nowrap;\n font-weight: var(--font-weight);\n}\n.flexlayout__border_button:focus-visible {\n outline: 2px solid var(--color-focus);\n outline-offset: -2px;\n}\n.flexlayout__border_button--selected {\n background-color: var(--color-border-tab-selected-background);\n color: var(--color-border-tab-selected);\n}\n@media (hover: hover) {\n .flexlayout__border_button:hover {\n color: var(--color-border-tab-selected);\n }\n}\n.flexlayout__border_button--unselected {\n background-color: var(--color-border-tab-unselected-background);\n color: var(--color-border-tab-unselected);\n}\n.flexlayout__border_button_leading {\n display: flex;\n}\n.flexlayout__border_button_content {\n display: flex;\n}\n.flexlayout__border_button_trailing {\n display: flex;\n border-radius: 4px;\n visibility: hidden;\n}\n@media (hover: hover) {\n .flexlayout__border_button:hover .flexlayout__border_button_trailing {\n visibility: visible;\n }\n}\n.flexlayout__border_button--selected .flexlayout__border_button_trailing {\n visibility: visible;\n}\n.flexlayout__border_toolbar {\n display: flex;\n gap: 0.3em;\n align-items: center;\n}\n.flexlayout__border_toolbar_left, .flexlayout__border_toolbar_right {\n flex-direction: column;\n padding-top: 0.5em;\n padding-bottom: 0.3em;\n}\n.flexlayout__border_toolbar_top, .flexlayout__border_toolbar_bottom {\n padding-left: 0.5em;\n padding-right: 0.3em;\n}\n.flexlayout__border_toolbar_button {\n border: none;\n outline: none;\n font-size: inherit;\n background-color: transparent;\n border-radius: 4px;\n padding: 1px;\n}\n.flexlayout__border_toolbar_button:focus-visible {\n outline: 2px solid var(--color-focus);\n outline-offset: -2px;\n}\n@media (hover: hover) {\n .flexlayout__border_toolbar_button:hover {\n background-color: var(--color-toolbar-button-hover);\n }\n}\n.flexlayout__border_toolbar_button_overflow {\n display: flex;\n align-items: center;\n border: none;\n color: var(--color-overflow);\n font-size: inherit;\n background-color: transparent;\n width: 1.5em;\n}\n.flexlayout__popup_menu {\n font-size: var(--font-size);\n font-family: var(--font-family);\n font-weight: var(--font-weight);\n}\n.flexlayout__popup_menu_item {\n padding: 2px 0.5em;\n white-space: nowrap;\n cursor: pointer;\n border-radius: 2px;\n}\n.flexlayout__popup_menu_item.flexlayout__popup_menu_item_grouped {\n border-left: 5px solid var(--flexlayout-group-color, var(--color-tabgroup-default));\n padding-left: calc(0.5em - 5px);\n border-radius: 0 !important;\n}\n.flexlayout__popup_menu_item:focus-visible {\n outline: 2px solid var(--color-focus);\n outline-offset: -2px;\n}\n.flexlayout__popup_menu_item--selected {\n font-weight: 500;\n background-color: var(--color-tab-selected-background);\n color: var(--color-tab-selected);\n}\n.flexlayout__popup_menu_item--disabled {\n opacity: 0.4;\n cursor: default;\n pointer-events: none;\n}\n@media (hover: hover) {\n .flexlayout__popup_menu_item:hover {\n background-color: var(--color-6);\n }\n}\n.flexlayout__popup_menu_divider {\n height: 1px;\n margin: 4px 2px;\n background-color: var(--color-popup-border);\n}\n.flexlayout__popup_menu_container {\n box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);\n border: 1px solid var(--color-popup-border);\n color: var(--color-popup-unselected);\n background: var(--color-popup-unselected-background);\n border-radius: 3px;\n position: absolute;\n z-index: 3000;\n max-height: 50%;\n min-width: 100px;\n overflow: auto;\n padding: 2px;\n}\n.flexlayout__float_window {\n box-sizing: border-box;\n background-color: var(--color-tabset-background);\n border-radius: 5px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n z-index: 2000;\n}\n.flexlayout__float_window_header {\n display: flex;\n align-items: center;\n padding: 5px 5px;\n background-color: var(--color-float-window-header-background);\n border-bottom: 1px solid var(--color-tabset-divider-line);\n cursor: move;\n user-select: none;\n font-family: var(--font-family);\n font-size: 0.8em;\n min-height: 15px;\n}\n.flexlayout__float_window_header_title {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.flexlayout__float_window_drag_handle {\n display: flex;\n align-items: center;\n padding: 0 4px;\n opacity: 0.7;\n cursor: grab;\n}\n.flexlayout__float_window_drag_handle:hover {\n opacity: 1;\n}\n.flexlayout__float_window_drag_handle:active {\n cursor: grabbing;\n}\n.flexlayout__float_window_button {\n display: flex;\n align-items: center;\n padding: 0 4px;\n margin: 0;\n border: none;\n background: none;\n opacity: 0.7;\n cursor: pointer;\n}\n.flexlayout__float_window_button:hover {\n opacity: 1;\n}\n.flexlayout__float_window_content {\n position: relative;\n overflow: auto;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n min-width: 0;\n margin: 5px;\n}\n.flexlayout__floating_window _body {\n height: 100%;\n}\n.flexlayout__floating_window_content {\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n}\n.flexlayout__error_boundary_container {\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n display: flex;\n justify-content: center;\n}\n.flexlayout__error_boundary_content {\n display: flex;\n align-items: center;\n}\n.flexlayout__border_sizer {\n position: absolute;\n padding-top: 6px;\n padding-bottom: 5px;\n font-size: var(--font-size);\n font-family: var(--font-family);\n font-weight: var(--font-weight);\n}\n.flexlayout__mini_scrollbar {\n position: absolute;\n background-color: var(--color-mini-scroll-indicator);\n border-radius: 5px;\n width: var(--size-mini-scroll-indicator);\n height: var(--size-mini-scroll-indicator);\n visibility: hidden;\n opacity: 0;\n transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n}\n.flexlayout__mini_scrollbar:hover {\n background-color: var(--color-mini-scroll-indicator-hovered);\n transition: background-color 0.3s ease-in-out;\n}\n.flexlayout__mini_scrollbar_container {\n position: relative;\n display: flex;\n flex-grow: 1;\n overflow: hidden;\n}\n@media (hover: hover) {\n .flexlayout__mini_scrollbar_container:hover .flexlayout__mini_scrollbar {\n opacity: 1;\n visibility: visible;\n }\n}\n\n/* ======================== End of Base Classes =========================== */\n/* \n dark theme overrides \n*/\n.flexlayout__tabset-selected {\n background-image: linear-gradient(var(--color-background), var(--color-4));\n}\n.flexlayout__tabset-maximized {\n background-image: linear-gradient(var(--color-6), var(--color-2));\n}\n.flexlayout__tab_top {\n box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n}\n.flexlayout__tab_bottom {\n box-shadow: inset -2px 0px 5px rgba(0, 0, 0, 0.1);\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n}\n.flexlayout__border_button {\n box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);\n border-radius: 3px;\n}\n\n/* ============================================================================\n * Rapid Design System overrides (flexlayout-react.overrides.css) \u2014 applied last.\n * ========================================================================== */\n/*\n * flexlayout-react.overrides.css \u2014 Rapid Design System theme overrides for flexlayout-react.\n *\n * THIS IS THE SINGLE SOURCE OF TRUTH for how flexlayout-react looks across every app that\n * consumes Foundation. Do NOT copy these rules into apps \u2014 import the compiled theme from\n * `@genesislcap/rapid-design-system` instead (see flexlayout-react-theme.ts).\n *\n * Build pipeline: `scripts/generate-flexlayout-theme.mjs` concatenates the vendored\n * flexlayout-react base theme (structural CSS + dark palette) FIRST, then this file LAST,\n * into `flexlayout-react-theme.generated.ts`. Equal specificity means the later sheet wins,\n * so every rule here overrides the vendored default. Run `pnpm flexlayout:generate` after\n * editing (the package build does this automatically).\n *\n * The flexlayout theme is almost entirely driven by CSS custom properties declared on\n * `.flexlayout__layout` (see the full list at the top of the vendored base theme). The\n * easiest way to re-skin is to remap those variables to rapid design-system tokens, as\n * below. For anything the variables don't cover, target the `.flexlayout__*` classes\n * directly (examples at the bottom).\n *\n * Tokens resolve from the nearest design-system provider ancestor (CSS custom properties\n * inherit across shadow boundaries), so flexlayout-react must render under a\n * `<rapid-design-system-provider>` for these to take effect.\n */\n\n/* --- Variable remap: flexlayout palette -> rapid design tokens ----------------- */\n.flexlayout__layout {\n --font-family: var(--body-font, Roboto, Arial, sans-serif);\n --font-size: var(--type-ramp-base-font-size);\n\n --color-text: var(--neutral-foreground-rest);\n --color-background: var(--fill-color);\n\n /* Greyscale ramp used across tabsets, borders and toolbars. */\n --color-1: var(--neutral-layer-1);\n --color-2: var(--neutral-layer-2);\n --color-3: var(--neutral-layer-3);\n --color-4: var(--neutral-layer-4);\n\n /* Selected tab + active splitter pick up the accent colour. */\n --color-tab-selected: var(--accent-foreground-rest);\n --color-tab-unselected: var(--neutral-foreground-hint);\n --color-tab-selected-background: var(--accent-fill-rest);\n --color-splitter-drag: var(--accent-fill-rest);\n --color-splitter-hover: var(--accent-fill-hover);\n\n --tabgroup-pill-radius: 9999px;\n}\n\n.flexlayout__tabset-selected,\n.flexlayout__tabset-maximized {\n background-image: none !important;\n}\n\n.flexlayout__tab_button_content {\n font-weight: 400;\n font-size: var(--type-ramp-minus-1-font-size);\n}\n\n.flexlayout__tab_button--unselected:hover {\n color: var(--neutral-foreground-rest, #e0e0e0) !important;\n background-color: var(--neutral-fill-stealth-active, rgba(255, 255, 255, 0.06)) !important;\n}\n\n.flexlayout__tab_top,\n.flexlayout__tab_bottom {\n border-radius: 0 !important;\n box-shadow: none !important;\n}\n\n.flexlayout__tab_toolbar_button-max,\n.flexlayout__tab_toolbar_button-min {\n order: 100;\n}\n\n.flexlayout__tab_button_textbox {\n box-sizing: border-box;\n width: auto;\n min-width: 8em;\n max-width: 100%;\n margin: 0;\n padding: 0 calc(var(--design-unit, 4) * 1px);\n font-family: var(--body-font);\n font-size: var(--type-ramp-base-font-size, var(--font-size));\n font-weight: 500;\n line-height: var(--type-ramp-base-line-height, normal);\n color: var(--neutral-foreground-rest);\n background-color: var(--neutral-fill-input-rest);\n border: 1px solid var(--neutral-stroke-rest);\n border-radius: calc(var(--control-corner-radius, 2) * 1px);\n\n &:focus {\n outline: none;\n color: var(--neutral-foreground-rest);\n background-color: var(--neutral-fill-input-focus, var(--neutral-fill-input-rest));\n border-color: var(--accent-fill-rest);\n }\n}\n\n.flexlayout__tabset {\n border: var(--card-border, 1px solid var(--neutral-stroke-rest));\n border-radius: var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));\n background-color: var(--rapid-layout-item-background, var(--neutral-layer-3));\n}\n\n.flexlayout__tabset_content {\n margin-top: -1px;\n}\n\n.flexlayout__tabset_tabbar_outer_top {\n border: 0;\n height: var(\n --foundation-tab-height,\n calc((((var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px)\n );\n background: none;\n z-index: 1;\n}\n\n.flexlayout__tabset_container {\n border-radius: var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));\n}\n\n.flexlayout__tabset_tabbar_inner_tab_container_top {\n border-top: 0;\n}\n\n.flexlayout__tab_button {\n padding: 0 calc((12 + var(--design-unit) * 2 * var(--density)) * 1px);\n gap: 8px;\n height: 100%;\n}\n\n.flexlayout__tab_button--selected {\n position: relative;\n color: var(--accent-foreground-rest) !important;\n background: var(--tab-active-background-color, var(--neutral-layer-card-container));\n\n /*\n * Keep this border-* trio: themes that mark selection with an underline rather than a\n * background (corporate sets `--tab-active-border-width: 0 0 2px 0`) have nothing to\n * hang the underline on without it. Defaults to 0 because the spacers now draw the\n * separators \u2014 the old `0 1px 0 0` default would double up against them.\n */\n border-style: solid;\n border-width: var(--tab-active-border-width, 0);\n border-color: var(--tab-active-border-color, var(--neutral-stroke-rest));\n}\n\n.flexlayout__tab {\n border-radius: 0 0 var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px))\n var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));\n border-top: var(--card-border, 1px solid var(--neutral-stroke-rest));\n background: var(--neutral-layer-card-container);\n\n rapid-card {\n display: flex;\n flex-direction: column;\n border: 0;\n border-radius: 0 0 var(--card-corner-radius) var(--card-corner-radius);\n grid-register {\n display: block;\n height: 100%;\n }\n }\n}\n\n/*\n * Tab separators live on flexlayout's own spacer elements, not as borders on the tab\n * buttons. flexlayout emits a spacer before every tab, group pill and end marker, plus a\n * trailing one, and every spacer carries `_tab_spacer` \u2014 `_tab_divider` is an extra class\n * on just the subset sitting between two tabs. Styling `_tab_spacer` therefore covers the\n * dividers too, and separates every element in the strip including the leading and\n * trailing edges. It also needs no positional selectors: the previous rule bordered the\n * buttons and reached the leading edge via `:nth-of-type(2)`, which assumed exactly one\n * leading spacer, and a leading group pill or `tabGroupType: 'splitpill'` pushes more.\n *\n * Driven by the same `--tab-rest-border-*` tokens the buttons used before, so the\n * separators stay consistent with rapid-tabs (tabs.styles.ts) and foundation-layout\n * (layout.styles.ts), which read the same pair. Set `--tab-rest-border-color: transparent`\n * (or `--tab-rest-border-width: 0`) to hide them.\n *\n * `align-self: stretch` is required because the tab container centres its items, so the\n * spacer would otherwise collapse to its content height and the line would not show.\n */\n.flexlayout__tabset_tab_spacer {\n align-self: stretch;\n width: 0;\n border-left: var(--tab-rest-border-width, 1px) solid\n var(--tab-rest-border-color, var(--neutral-stroke-rest));\n}\n\n.flexlayout__tab_button_trailing {\n rapid-icon {\n color: var(--accent-foreground-rest);\n\n &:hover {\n color: var(--accent-foreground-hover);\n }\n }\n}\n\n.flexlayout__popup_menu_container {\n box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);\n padding: 0;\n border: 1px solid var(--neutral-stroke-rest);\n}\n\n.flexlayout__popup_menu_item {\n padding: calc((8 + var(--design-unit) * 2 * var(--density)) * 1px);\n border-bottom: 1px solid var(--neutral-stroke-divider-rest);\n\n &:hover {\n background-color: var(--neutral-fill-rest);\n color: contrast-color(var(--neutral-fill-rest));\n }\n\n &:last-child {\n border-bottom: 0;\n }\n}\n\n.flexlayout__popup_menu_item--selected {\n background-color: var(--neutral-fill-rest);\n color: contrast-color(var(--neutral-fill-rest));\n}\n\n.flexlayout__tab_toolbar_button {\n padding: 0;\n height: unset;\n width: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n > svg {\n height: 16px !important;\n width: 16px !important;\n padding: 4px;\n fill: var(--neutral-foreground-hint);\n }\n}\n\n.flexlayout__splitter_vert {\n background-color: var(--neutral-foreground-rest);\n mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDI0IEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNDE2IDI1NmEzMiAzMiAwIDEgMSAtNjQgMCAzMiAzMiAwIDEgMSA2NCAwem0tMTYwIDBhMzIgMzIgMCAxIDEgLTY0IDAgMzIgMzIgMCAxIDEgNjQgMHpNNjQgMjg4YTMyIDMyIDAgMSAxIDAtNjQgMzIgMzIgMCAxIDEgMCA2NHoiLz48L3N2Zz4=);\n mask-repeat: no-repeat;\n mask-position: center;\n mask-size: 12px;\n &:hover {\n mask-image: none;\n }\n}\n\n.flexlayout__splitter_horz {\n background-color: var(--neutral-foreground-rest);\n mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDI0IEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNjQgMzg0YTMyIDMyIDAgMSAwIDAgNjQgMzIgMzIgMCAxIDAgMC02NHptMC0xNjBhMzIgMzIgMCAxIDAgMCA2NCAzMiAzMiAwIDEgMCAwLTY0ek05NiA5NkEzMiAzMiAwIDEgMCAzMiA5NmEzMiAzMiAwIDEgMCA2NCAweiIvPjwvc3ZnPg==);\n mask-repeat: no-repeat;\n mask-position: center;\n mask-size: 4px;\n &:hover {\n mask-image: none;\n }\n}\n\n.flexlayout__layout {\n top: 8px;\n bottom: 8px;\n left: 8px;\n right: 8px;\n}\n\n.flexlayout__mini_scrollbar_container {\n height: 100%;\n}\n\n.flexlayout__group_pill {\n margin: 2px 0 2px 8px;\n height: calc(100% - 12px);\n font-size: 11px;\n + .flexlayout__tabset_tab_spacer {\n display: none;\n }\n}\n\n.flexlayout__group_pill_collapsed {\n margin: 2px 8px;\n + .flexlayout__tabset_tab_spacer {\n display: block;\n }\n}\n\n.flexlayout__group_end_marker {\n margin: 2px 8px 2px 0;\n height: calc(100% - 12px);\n}\n\n.flexlayout__tab_button_grouped {\n &.flexlayout__tab_button {\n border-right: 0;\n height: auto;\n padding: 0 8px;\n height: calc(100% - 12px);\n border-top: 1px solid var(--neutral-stroke-rest);\n border-bottom: 1px solid var(--neutral-stroke-rest);\n border-right: 1px solid var(--neutral-stroke-rest);\n .flexlayout__tab_button_content {\n font-size: 11px;\n }\n + .flexlayout__tabset_tab_divider {\n display: none;\n }\n + .flexlayout__tabset_tab_spacer {\n display: none;\n }\n }\n &.flexlayout__tab_button--selected {\n border: 0;\n }\n}";
|
|
5
5
|
//# sourceMappingURL=flexlayout-react-theme.generated.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flexlayout-react-theme.generated.d.ts","sourceRoot":"","sources":["../../../src/flexlayout-react-theme/flexlayout-react-theme.generated.ts"],"names":[],"mappings":"AAWA,qEAAqE;AACrE,eAAO,MAAM,8BAA8B,WAAW,CAAC;AAEvD,0EAA0E;AAC1E,eAAO,MAAM,0BAA0B
|
|
1
|
+
{"version":3,"file":"flexlayout-react-theme.generated.d.ts","sourceRoot":"","sources":["../../../src/flexlayout-react-theme/flexlayout-react-theme.generated.ts"],"names":[],"mappings":"AAWA,qEAAqE;AACrE,eAAO,MAAM,8BAA8B,WAAW,CAAC;AAEvD,0EAA0E;AAC1E,eAAO,MAAM,0BAA0B,kuvCA60CrC,CAAC"}
|