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

React components for Vortex

.cesium-popup {
    --popup-width: 250px;

    width: var(--popup-width);
    position: absolute;
    transform: translateX(-50%);
    min-width: 220px;
    background: rgba(0, 35, 65, 0.9);
    box-shadow: 0 0 10px rgba(1, 211, 252, 0.75) inset;
    border-radius: 10px;
    color: #fff;
    z-index: -1;
    opacity: 0;

    &-close {
        text-decoration: none;
        position: absolute;
        top: 12px;
        right: 8px;
        cursor: pointer;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
    }

    &::after,
    &::before {
        top: 100%;
        border: solid transparent;
        content: ' ';
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    &::after {
        border-top-color: #2c69a6;
        border-width: 5px;
        left: 50%;
        transform: translateX(calc(-50%));
    }

    &::before {
        border-top-color: rgba(2, 24, 45, 0.92);
        border-width: 5px;
        left: 50%;
        transform: translateX(calc(-50%));
    }
}

.cesium-popup-title {
    font-size: 14px;
    font-weight: bold;
    padding: 10px 50px 10px 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    background: rgba(101, 211, 252, 0.2);
    border-radius: 6px 6px 0 0;
    color: #fff;
}

.cesium-popup-noTitle {
    padding: 0;
    border-bottom: 0 !important;
}

.cesium-popup-content {
    padding: 10px 12px;
}

.cesium-popup-content-item {
    display: flex;
    align-items: center;
    font-size: 14px;

    &-label {
        color: #84B5FF;
        white-space: nowrap;
    }

    &-value {
        color: #ffffff;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}

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

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

.cesium-template {
    background-color: #1890ff;
    color: #ffffff;
    padding: 5px 10px;
    box-sizing: border-box;
    min-height: 50px;
}

.cesium-popup-footer {
    border-top: 1px solid #32577c;
    padding: 4px 0;
    display: flex;
    align-items: center;
    color: #25BFFF;

    .cesium-popup-footer-item {
        display: flex;
        align-items: center;
        padding: 0 14px;
        position: relative;
        cursor: pointer;
        white-space: nowrap;

        .cesium-popup-footer-item-icon {
            font-size: 20px;
            margin-right: 8px;
            color: currentColor;
        }

        &::before {
            content: '';
            position: absolute;
            right: 0px;
            width: 1px;
            height: 14px;
            background: currentColor;
            opacity: 0.5;
        }

        &:last-child::before {
            display: none;
        }
    }
}