@import '../../../assets/constants'
.visualizer-container
  height: 100%
  display: flex
  flex-direction: row
  .visua-add-dialog .c-dialog-content
    width: 400px
    &>label
      margin-right: 10px
  .visua-center
    flex: 1
    position: relative
    .visua-guide
      text-align: center
      position: absolute
      width: 100%
      top: 50%
      transform: translateY(-50%)
      .visua-gif
        display: inline-block
        width: 400px
        height: 400px
        background-image: url(../../assets/images/shan.gif)
      .guide-banner
        height: 60px
        line-height: 60px
        background: $color-status-normal
        color: #fff
        font-size: $size-font-title-large
      .guide-tip
        margin-top: 10px
        color: $color-font-tip
        font-size: $size-font-mark
        a
          color: $color-status-normal
    .visua-log
      position: absolute
      left: 0
      top: 0
      height: 450px
      width: 150px
      overflow: hidden
      li
        display: block
        background: #a0a0a0
        margin-bottom: 10px
        padding: 7px 10px 7px 30px
        border-radius: 5px
        color: #fff
    .visua-scene
      margin: 0 auto
      position: relative
      img
        box-shadow: $shadow-normal
      .tree-container
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        overflow: hidden
        .clickable-ele
          position: absolute
          border: 1px solid #eee
          background: $color-status-success-light
          opacity: .4
          cursor: pointer
          &:hover
            background: $color-status-normal
          &.visua-checked
            background: rgba(248, 107, 79, 0.7)
            cursor: default
      canvas
        position: absolute
        left: 0
        top: 0
        display: none

.fade-enter-active, .fade-leave-active
  transition: opacity .5s

.fade-enter, .fade-leave-to
  opacity: 0