phantasmal-world/src/ui/index.less

@import "~antd/dist/antd.less";
@import "./theme.less";

// React Root Element

#phantasmal-world-root {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

// antd

* {
    scrollbar-color: @scrollbar-thumb-color @scrollbar-color;

    // Turn off all animations.
    animation-duration: 0s !important;
    transition-duration: 0s !important;
}

::-webkit-scrollbar {
    background-color: @scrollbar-color;
}

::-webkit-scrollbar-track {
    background-color: @scrollbar-color;
}

::-webkit-scrollbar-thumb {
    background-color: @scrollbar-thumb-color;
}

::-webkit-scrollbar-corner {
    background-color: @scrollbar-color;
}

body {
    overflow: hidden; // Necessary for golden layout.
}

// react-virtualized

#phantasmal-world-root {
    & .ReactVirtualized__Grid {
        outline: none;
    }

    & .ReactVirtualized__Table__headerRow {
        text-transform: none;
    }

    .ant-tabs-bar {
        margin: 0;
    }
}

// golden-layout

#phantasmal-world-root {
    & .lm_header {
        background: darken(@component-background, 5%);
    }

    & .lm_goldenlayout {
        background: darken(@component-background, 5%);
    }

    & .lm_content {
        background: @component-background;
    }

    & .lm_tab {
        height: 26px;
        line-height: 26px;
        padding: 0px 16px;
        margin: 2px 2px 0px 0px;
        background: darken(@component-background, 3%);
        box-shadow: none;

        &.lm_active {
            background: @component-background;
        }
    }

    & .lm_controls {
        top: 6px;
        right: 6px;
    }
}