cyber-narrator-cn-ui/src/assets/css/components/views/charts2/entityDetailSubscriberMap.scss

.subscriber-map {
  height: 100%;

  svg {
    fill: #fff;
  }
  .subscriber-map-header {
    height: 34px;
    padding-bottom: 10px;
    font-size: 14px;
    color: #353636;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .subscriber-map-title {
      height: 24px;
      overflow: hidden;
    }
  }
  .subscriber-map-body {
    position: relative;
    border: 1px solid #E2E5EC;
    border-radius: 4px;
    height: calc(100% - 34px);

    .subscriber-map {
      height: 100%;
      width: 100%;

      .maplibregl-canvas:focus-visible {
        outline: none;
      }
    }
    .panel-chart__no-data {
      height: calc(100% - 46px);
    }

    .analysis-statistics {
      width: 310px;
      overflow-y: auto;
      //padding-right: 5px;

      .analysis-statistics__subscribers {
        padding-left: 20px;

        .analysis-statistics__subscriber {
          margin-bottom: 10px;

          &:last-of-type {
            margin-bottom: 0;
          }

          background-color: #F7F7F7;
          border-left: 1px solid rgb(226,229,236);
          border-radius: 2px;

          .subscriber__body {
            padding: 0 12px;
            margin-top: -10px;
            .body__item {
              display: flex;

              .item__label {
                padding-right: 10px;
                text-align: right;
                width: 60px;
                font-size: 12px;
                color: #353636;
              }
              .item__value {
                font-size: 12px;
                font-weight: bold;
                color: #233447;
              }
            }

            .body-item-record {
              margin-top: 10px;

              .item-record__header {
                font-family: Helvetica;
                font-size: 16px;
                color: #353636;
                font-weight: 400;
                height: 38px;
                line-height: 38px;
              }
              .item-record__info {

              }
              .item-record__timeline {
                margin-left: 6px;

                .el-timeline {
                  padding-left: 0;
                  //min-height: 300px;
                  height: 360px;
                  overflow: auto;

                  &.el-timeline--hide {
                  }

                  .el-timeline-item {
                    padding-bottom: 0;
                    .el-timeline-item__tail {
                      border-left: 2px dotted #cccccc;
                      margin-left: 2px;
                    }
                    .el-timeline-item__node--normal {
                      background-image: radial-gradient(#DE3434 20%, transparent);
                      outline: #F7F7F7 solid 6px;
                      margin-left: 2px;
                    }
                  }
                  .el-timeline-item:last-child {
                    padding-bottom: 0;
                  }
                }
                .timeline__info {
                  display: flex;
                  padding-bottom: 10px;

                  .timeline__info--circle {
                    display: flex;
                    flex-direction: column;
                    .info__circle {
                      width: 17px;
                      height: 17px;
                      margin-left: -2px;
                      border-radius: 50%;
                      background-image: radial-gradient(#DE3434 20%, transparent);
                      outline: rgba(222,52,52,0.30) solid 4px;
                      margin-top: 2px;
                    }
                    .info__line {
                      border-left: 2px #cccccc dotted;
                      height: 34px;
                      margin-left: 6px;
                      transition: all 0.2s;
                    }
                  }
                  .timeline__info--item {
                    padding-left: 13px;
                    display: flex;
                    flex-direction: column;
                    font-size: 12px;
                    color: #666666;

                    .info--item__value {
                      color: #333;
                      font-weight: 500;
                      margin-left: 4px;
                    }
                  }
                }
                .timeline__item {
                  display: flex;
                  flex-direction: column;
                  font-size: 12px;
                  color: #666666;

                  .item__value {
                    color: #333;
                    font-weight: 500;
                    margin-left: 4px;
                  }
                }
                .item-record__btn, .item-record__btn-disabled {
                  padding-right: 6px;
                  cursor: pointer;
                  text-align: center;
                }
                .item-record__btn-disabled {
                  cursor: no-drop;
                }
                .scroll-view {
                  width: 100%;
                  height: 384px;
                  overflow-y: scroll;
                  position: relative;

                  .scroll__item {
                    width: 100%;
                    height: 58px;
                    display: flex;

                    .item-circle {
                      display: flex;
                      flex-direction: column;
                      .circle-circle {
                        width: 10px;
                        height: 10px;
                        margin-left: 2px;
                        border-radius: 50%;
                        background-color: #DE3434;
                      }
                      .circle-line {
                        border-left: 2px #cccccc dotted;
                        height: 34px;
                        margin-left: 6px;
                        margin-top: 6px;
                        transition: all 0.2s;
                      }
                    }

                    .item-content {
                      display: flex;
                      flex-direction: column;
                      font-size: 12px;
                      color: #666666;
                      padding-left: 16px;

                      .item__value {
                        color: #333;
                        font-weight: 500;
                        margin-left: 4px;
                      }
                    }
                  }
                  .scroll-list {
                    position: absolute;
                    top: 0;
                    left: 0;
                    cursor: pointer;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .subscriber-map-point-tooltip {
    position: fixed;
    background-color: white;
    width: 200px;
    border: 1px solid #C5C5C5;
    box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
    border-radius: 2px;

    .subscriber-map-point-tooltip__time {
      padding: 10px;
      font-size: 12px;
      color: #353636;
      font-weight: bold;
    }
    .subscriber-map-point-tooltip__coordinates {
      padding: 0 10px 10px;

      .subscriber-map-point-tooltip__coordinate {
        display: flex;

        .coordinate__label {
          width: 115px;
          font-size: 12px;
          color: #575757;
        }
        .coordinate__value {
          font-size: 12px;
          color: #353636;
          font-weight: bold;
        }
      }
    }
  }
}