@vtx/cs-map/lib/map/style/index.less

React components for Vortex

.cs-map-container {
    width: 100%;
    height: 100%;
    position: relative;

    .cs-map {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;

        .cesium-viewer-bottom {
            display: none;
        }

        .cesium-performanceDisplay-defaultContainer {
            top: 100px;
        }

        .map-dark {
            filter: sepia(100%) hue-rotate(-25deg) invert(100%);
        }

        .map-dark-label {
            filter: sepia(10%) hue-rotate(-10deg) invert(80%);
        }

        .custom-tip {
            position: absolute;
            z-index: 2;
            padding: 2px 6px;
            background: rgba(0, 0, 0, 0.5);
            color: #ffffff;
            font-size: 14px;
            border-radius: 4px;
        }

        .point_animation {
            height: 65px;
            width: 65px;
            margin-bottom: 4px;
            border-radius: 40px;
            background: rgb(0, 128, 255, 0.8);
            transform: scale(0);
            animation: point 2s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            pointer-events: none;
        }

        @keyframes point {
            to {
                transform: scale(0.8, 0.3);
                background: rgba(0, 0, 0, 0);
            }
        }
    }

    .cs-map-popup-cluster-title {
        display: flex;
        align-items: center;

        .cs-map-popup-cluster-title-img {
            max-height: 26px;
        }

        .cs-map-popup-cluster-title-text {
            margin-left: 4px;
        }
    }

    .cs-map-popup-cluster {
        .cs-map-popup-cluster-header {
            padding: 4px 0;
        }

        .ant-empty-description {
            color: #c4d4e5;
        }

        .ant-table {
            background-color: transparent;
            color: #fff;

            .ant-table-cell-scrollbar {
                box-shadow: none;
            }

            .ant-table-thead {
                > tr > th {
                    background-color: rgba(14, 156, 255, 0.2);
                    color: #fff;
                    border-bottom: none;
                }

                th.ant-table-column-has-sorters:hover {
                    background-color: rgba(106, 228, 255, 0.1) !important;
                }
            }

            .ant-table-body {
                &::-webkit-scrollbar {
                    width: 4px;
                    background-color: hsla(0, 0%, 80%, 0.08);
                }

                &::-webkit-scrollbar-thumb {
                    background-color: #012f54;
                }

                &::-webkit-scrollbar-corner {
                    background-color: #012f54;
                }

                .ant-table-tbody {
                    > tr.ant-table-placeholder:hover > td {
                        background: transparent;
                    }

                    > tr {
                        td {
                            border-bottom: none;
                        }
                        &:nth-child(odd) {
                            background-color: rgba(14, 156, 255, 0.15);
                        }
                        &:nth-child(even) {
                            background-color: rgba(14, 156, 255, 0.05);
                        }
                        .ant-table-column-sort {
                            background-color: transparent;
                        }
                    }

                    > tr.ant-table-row:hover > td, > tr > td.ant-table-cell-row-hover {
                        background: rgba(106, 228, 255, 0.1);
                    }

                    &::-webkit-scrollbar {
                        background-color: hsla(0, 0%, 80%, 0.08);
                    }

                    &::-webkit-scrollbar-thumb {
                        -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.3);
                        background-color: #012f54;
                    }

                    &::-webkit-scrollbar-corner {
                        -webkit-box-shadow: inset 0 0 0.025rem #012f54;
                        background-color: #012f54;
                    }
                }
            }
        }
    }
}