waveterm/frontend/layout/lib/tilelayout.less

// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0

.tile-layout {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;

    --gap-size-px: 5px;

    .overlay-container,
    .display-container,
    .placeholder-container {
        position: absolute;
        display: flex;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        min-height: 4rem;
        min-width: 4rem;
    }

    .display-container {
        z-index: var(--zindex-layout-display-container);
    }

    .placeholder-container {
        z-index: var(--zindex-layout-placeholder-container);
    }

    .overlay-container {
        z-index: var(--zindex-layout-overlay-container);
    }

    .overlay-node {
        display: flex;
        flex: 0 1 auto;
    }

    .resize-handle {
        z-index: var(--zindex-layout-resize-handle);
        &.flex-row {
            cursor: ew-resize;
            .line {
                height: 100%;
                margin-left: calc(var(--gap-size-px) - 1px);
            }
        }
        &.flex-column {
            cursor: ns-resize;
            .line {
                margin-top: calc(var(--gap-size-px) - 1px);
            }
        }
        &:hover {
            &.flex-row .line {
                border-left: 2px solid var(--accent-color);
            }
            &.flex-column .line {
                border-bottom: 2px solid var(--accent-color);
            }
        }
    }

    .tile-node {
        border-radius: calc(var(--block-border-radius) + 2px);
        overflow: hidden;
        width: 100%;
        height: 100%;

        &.dragging {
            filter: blur(8px);
        }

        &.magnified {
            background-color: var(--block-bg-solid-color);
            z-index: var(--zindex-layout-magnified-node);
        }
        &.last-magnified {
            z-index: var(--zindex-layout-last-magnified-node);
        }

        .tile-preview-container {
            position: absolute;
            top: 10000px;
            white-space: nowrap !important;
            user-select: none;
            -webkit-user-select: none;

            .tile-preview {
                width: 100%;
                height: 100%;
            }
        }

        &.resizing {
            border: 1px solid var(--accent-color);
            backdrop-filter: blur(8px);
        }

        .tile-leaf {
            overflow: hidden;
        }

        &:not(:only-child) .tile-leaf {
            padding: calc(var(--gap-size-px) / 2);
        }
    }

    &.animate {
        .tile-node,
        .placeholder {
            transition-duration: var(--animation-time-s);
            transition-timing-function: ease-in;
            transition-property: transform, width, height, background-color;
        }
    }

    .tile-leaf,
    .overlay-leaf {
        height: 100%;
        width: 100%;
    }

    .placeholder {
        background-color: var(--accent-color);
        opacity: 0.5;
        border-radius: calc(var(--block-border-radius) + 2px);
    }
}

.prefers-reduced-motion {
    .tile-layout {
        &.animate {
            .tile-node,
            .placeholder {
                transition-duration: none;
                transition-timing-function: none;
                transition-property: none;
            }
        }
    }
}