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

React components for Vortex

.container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.container .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%, #111010 90%);
}
.container .cesium-popup {
  background: rgba(75, 15, 15, 0.9) !important;
  -webkit-box-shadow: 0 0 3rem rgba(228, 53, 40, 0.75) inset !important;
          box-shadow: 0 0 3rem rgba(228, 53, 40, 0.75) inset !important;
}
.container .cesium-popup .title {
  background: rgba(255, 193, 191, 0.2) !important;
}
.container .cesium-popup::after {
  border-top-color: rgba(228, 53, 40, 0.5) !important;
}
.container .cesium-popup::before {
  border-top-color: rgba(75, 15, 15, 0.92) !important;
}
.company {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
}
.company-title {
  color: #ffffff;
  background: -webkit-gradient(linear, left top, left bottom, from(#4a6199), color-stop(52%, rgba(16, 32, 65, 0.6)), to(#4a6199));
  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;
}
.company-body {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0080ff;
  -webkit-box-shadow: 0 0 10px rgba(0, 128, 255, 0.5);
          box-shadow: 0 0 10px rgba(0, 128, 255, 0.5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-animation: ripple 0.8s linear infinite;
          animation: ripple 0.8s linear infinite;
  margin-bottom: 4px;
  pointer-events: auto;
}
.company-body-icon {
  width: 18px;
  height: 18px;
  background: url('./image/company.png') no-repeat 0 0;
  background-size: 100% 100%;
}
@-webkit-keyframes ripple {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 128, 255, 0.5), 0 0 0 7.5px rgba(0, 128, 255, 0.5);
            box-shadow: 0 0 0 0 rgba(0, 128, 255, 0.5), 0 0 0 7.5px rgba(0, 128, 255, 0.5);
  }
  100% {
    -webkit-box-shadow: 0 0 0 7.5px rgba(0, 128, 255, 0.5), 0 0 0 15px rgba(0, 128, 255, 0);
            box-shadow: 0 0 0 7.5px rgba(0, 128, 255, 0.5), 0 0 0 15px rgba(0, 128, 255, 0);
  }
}
@keyframes ripple {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 128, 255, 0.5), 0 0 0 7.5px rgba(0, 128, 255, 0.5);
            box-shadow: 0 0 0 0 rgba(0, 128, 255, 0.5), 0 0 0 7.5px rgba(0, 128, 255, 0.5);
  }
  100% {
    -webkit-box-shadow: 0 0 0 7.5px rgba(0, 128, 255, 0.5), 0 0 0 15px rgba(0, 128, 255, 0);
            box-shadow: 0 0 0 7.5px rgba(0, 128, 255, 0.5), 0 0 0 15px rgba(0, 128, 255, 0);
  }
}
.company-footer {
  width: 4px;
  height: 80px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 128, 255, 0.7)), to(rgba(0, 128, 255, 0.2)));
  background: linear-gradient(to bottom, rgba(0, 128, 255, 0.7), rgba(0, 128, 255, 0.2));
}
.company-warn .company-title {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(250, 70, 70, 0.3)), color-stop(52%, rgba(250, 70, 70, 0.6)), to(rgba(250, 70, 70, 0.3)));
  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-warn .company-body {
  background: #fa4646;
  -webkit-box-shadow: 0 0 10px rgba(250, 70, 70, 0.5);
          box-shadow: 0 0 10px rgba(250, 70, 70, 0.5);
  -webkit-animation: rippleWarn 0.8s linear infinite;
          animation: rippleWarn 0.8s linear infinite;
}
@-webkit-keyframes rippleWarn {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(250, 70, 70, 0.5), 0 0 0 7.5px rgba(250, 70, 70, 0.5);
            box-shadow: 0 0 0 0 rgba(250, 70, 70, 0.5), 0 0 0 7.5px rgba(250, 70, 70, 0.5);
  }
  100% {
    -webkit-box-shadow: 0 0 0 7.5px rgba(250, 70, 70, 0.5), 0 0 0 15px rgba(250, 70, 70, 0);
            box-shadow: 0 0 0 7.5px rgba(250, 70, 70, 0.5), 0 0 0 15px rgba(250, 70, 70, 0);
  }
}
@keyframes rippleWarn {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(250, 70, 70, 0.5), 0 0 0 7.5px rgba(250, 70, 70, 0.5);
            box-shadow: 0 0 0 0 rgba(250, 70, 70, 0.5), 0 0 0 7.5px rgba(250, 70, 70, 0.5);
  }
  100% {
    -webkit-box-shadow: 0 0 0 7.5px rgba(250, 70, 70, 0.5), 0 0 0 15px rgba(250, 70, 70, 0);
            box-shadow: 0 0 0 7.5px rgba(250, 70, 70, 0.5), 0 0 0 15px rgba(250, 70, 70, 0);
  }
}
.company-warn .company-footer {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(250, 70, 70, 0.7)), to(rgba(250, 70, 70, 0.2)));
  background: linear-gradient(to bottom, rgba(250, 70, 70, 0.7), rgba(250, 70, 70, 0.2));
}