@vtx/cs-map/lib/cesium-tiles-layer/demo/index.less

React components for Vortex

.container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .mask {
        position: absolute;
        top:0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 2;
        background-image: radial-gradient(rgba(219,225,239, 0.05) 50%, rgba(65, 57, 57, 0.5) 70%, rgba(17, 16, 16, 1) 90%);
    }

    .cesium-popup {
        background: rgba(75, 15, 15, 0.9) !important;
        box-shadow: 0 0 3rem rgba(228, 53, 40, 0.75) inset !important;
        .title {
            background: rgba(255, 193, 191, 0.2) !important;
        }
        &::after {
            border-top-color: rgba(228, 53, 40, 0.5) !important;
        }

        &::before {
            border-top-color: rgba(75, 15, 15, 0.92) !important;
        }
    }
}

.company {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none;
    pointer-events: none;

    &-title {
        color: #ffffff;
        background: linear-gradient(180deg, #4a6199 0%, rgba(16, 32, 65, 0.6) 52%, #4a6199 100%);
        padding: 2px 4px;
        margin-bottom: 10px;
        white-space: nowrap;
        pointer-events: auto;
    }

    &-body {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(0, 128, 255, 1);
        box-shadow: 0 0 10px rgba(0, 128, 255, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        animation: ripple .8s linear infinite;
        margin-bottom: 4px;
        pointer-events: auto;

        &-icon {
            width: 18px;
            height: 18px;
            background: url('./image/company.png') no-repeat 0 0;
            background-size: 100% 100%;
        }
    }

    @keyframes ripple {
        0% {
            box-shadow: 0 0 0 0 rgba(0, 128, 255, 0.5), 0 0 0 7.5px rgba(0, 128, 255, 0.5);
        }

        100% {
            box-shadow: 0 0 0 7.5px rgba(0, 128, 255, 0.5), 0 0 0 15px rgba(0, 128, 255, 0);
        }
    }

    &-footer {
        width: 4px;
        height: 80px;
        background: linear-gradient(to bottom, rgba(0, 128, 255, 0.7), rgba(0, 128, 255, 0.2));;
    }
}

.company-warn {
    .company-title {
        background: linear-gradient(180deg, rgba(250, 70, 70, 0.3) 0%, rgba(250, 70, 70, 0.6) 52%, rgba(250, 70, 70, 0.3) 100%);
    }
    .company-body {
        background: rgba(250, 70, 70, 1);
        box-shadow: 0 0 10px rgba(250, 70, 70, 0.5);
        animation: rippleWarn .8s linear infinite;
    }

    @keyframes rippleWarn {
        0% {
            box-shadow: 0 0 0 0 rgba(250, 70, 70, 0.5), 0 0 0 7.5px rgba(250, 70, 70, 0.5);
        }

        100% {
            box-shadow: 0 0 0 7.5px rgba(250, 70, 70, 0.5), 0 0 0 15px rgba(250, 70, 70, 0);
        }
    }

    .company-footer {
        background: linear-gradient(to bottom, rgba(250, 70, 70, 0.7), rgba(250, 70, 70, 0.2));;
    }
}