UNPKG

@danfessler/react-dockable

Version:

![react-dockable-splash](https://github.com/user-attachments/assets/3465dd6d-5ea8-4249-ae9d-09e498d26797)

268 lines (239 loc) 6.04 kB
._container_gmt9a_1 { display: flex; flex-direction: column; background: var(--dockable-colors-headers); border-radius: var(--dockable-radius); overflow: hidden; flex: 1; /* position: relative; */ /* margin-left: 64px; */ transition: margin 0.1s ease-in-out; } ._container_gmt9a_1::after { box-shadow: 0 0px 0px 1px rgba(255, 255, 255, 0.025) inset, 0 0px 2px 1px rgba(255, 255, 255, 0.05) inset; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; pointer-events: none; z-index: 1; } ._tabBar_gmt9a_53 { background: var(--dockable-colors-background); display: flex; position: relative; } ._isOver_gmt9a_65._container_gmt9a_1::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; box-shadow: 0 0 0 3px var(--dockable-colors-selected) inset; pointer-events: none; } ._edgeZone_gmt9a_91 { position: absolute; display: flex; align-items: center; justify-content: center; z-index: 1; opacity: 0.75; width: 100%; height: 100%; text-align: center; pointer-events: none; border-radius: inherit; transition: background 0.1s cubic-bezier(0.4, 0, 0.2, 1); /* filter: blur(4px); */ --dockable-edge-width: 50%; /* mix-blend-mode: screen; */ } ._edgeZone_gmt9a_91::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scale(0); background-color: transparent; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 0.1s; border-radius: inherit; /* border: 2px solid rgba(255, 255, 255, 0.5); */ box-sizing: border-box; } ._edgeZoneLeft_gmt9a_163 { width: var(--dockable-edge-width); left: 0; } ._edgeZoneRight_gmt9a_173 { width: var(--dockable-edge-width); right: 0; } ._edgeZoneBottom_gmt9a_183 { height: var(--dockable-edge-width); bottom: 0; } ._edgeZoneTop_gmt9a_193 { height: var(--dockable-edge-width); top: 0; } ._edgeZoneCenter_gmt9a_203 { width: 100%; height: 100%; top: 0; left: 0; } ._edgeZoneLeft_gmt9a_163::after { transform-origin: left; transform: scaleX(0) scaleY(1); /* background: linear-gradient(to right, var(--dockable-colors-selected), transparent 100%); */ } ._edgeZoneRight_gmt9a_173::after { transform-origin: right; transform: scaleX(0) scaleY(1); /* background: linear-gradient(to left, var(--dockable-colors-selected), transparent 100%); */ } ._edgeZoneBottom_gmt9a_183::after { transform-origin: bottom; transform: scaleX(1) scaleY(0); /* background: linear-gradient(to top, var(--dockable-colors-selected), transparent 100%); */ } ._edgeZoneTop_gmt9a_193::after { transform-origin: top; transform: scaleX(1) scaleY(0); /* background: linear-gradient(to bottom, var(--dockable-colors-selected), transparent 100%); */ } ._edgeZoneHover_gmt9a_265::after { width: 100%; height: 100%; transform: scaleX(1) scaleY(1); background-color: var(--dockable-colors-selected); } ._tab_anjxt_1 { display: flex; flex-shrink: 1; overflow: visible; text-align: center; font-size: 12px; font-weight: bold; line-height: 12px; border-radius: var(--dockable-radius) var(--dockable-radius) 0 0; box-sizing: border-box; cursor: pointer; min-width: 0; font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; } ._tabNameContainer_anjxt_31 { display: flex; flex-shrink: 1; overflow: hidden; } ._tabName_anjxt_31 { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; padding: 8px 16px; } ._tab_anjxt_1._selected_anjxt_61 { background: var(--dockable-colors-headers); position: relative; } ._tab_anjxt_1:not(._selected_anjxt_61):hover { backdrop-filter: brightness(1.1); border-radius: var(--dockable-radius); opacity: 1; z-index: 1; } ._tab_anjxt_1._selected_anjxt_61::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient( to bottom, rgba(255, 255, 255, 0.025), transparent 95% ); } ._tabCornerRight_anjxt_115 { position: absolute; bottom: 0; right: calc(var(--dockable-radius) * -2); width: calc(var(--dockable-radius) * 2); height: calc(var(--dockable-radius) * 2); background: var(--dockable-colors-headers); } ._tabCornerLeft_anjxt_133::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--dockable-colors-background); border-radius: 0 0 var(--dockable-radius) 0; } ._tabCornerLeft_anjxt_133 { position: absolute; bottom: 0; left: calc(var(--dockable-radius) * -2); width: calc(var(--dockable-radius) * 2); height: calc(var(--dockable-radius) * 2); background: var(--dockable-colors-headers); } ._tabCornerRight_anjxt_115::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--dockable-colors-background); border-radius: 0 0 0 var(--dockable-radius); } ._tab_anjxt_1:not(._selected_anjxt_61) { opacity: 0.75; } ._handle_1af3z_1:hover { background: var(--dockable-colors-selected); } ._container_15k5i_1 { width: 100%; height: 100%; padding: var(--dockable-gap); color: var(--dockable-colors-text); background: var(--dockable-colors-gap); box-sizing: border-box; } ._edgeDroppable_15k5i_19 { position: absolute; z-index: 10; overflow: hidden; border-radius: 2px; width: 100%; height: 100%; } ._edgeDroppableHandle_15k5i_37 { width: calc(100% + 16px); height: calc(100% + 16px); position: absolute; top: -8px; left: -8px; transition: all 0.1s ease-in-out; }