lrc-editor.component.scss 1.95 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116
@import '../../style/common_mixin.css';
:host ::ng-deep .cmp-lrc-editor .ant-spin-container {
  width: 100%;
  height: 100%;
}
.cmp-lrc-editor{
  width: 100%;


  .step{
    width: 100%;
    height: 500px;
    position: relative;
    .content{
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
  }

  .flex1{
    flex: 1;
  }
  .wave-player{
    display: inline-block;
    position: relative;
    width: 100%;
    canvas{
      width: 100%;
      height: 100px;
    }
  }
  .time-line{
    height: 100%;
    position: absolute;
    border: 0;
    top: 0;
    opacity: 0.5;
    width: 0px;
    z-index: 1;
  }
  .line-break{
    margin: 0 4px 0 8px;
  }
  .time-tag.warn{
    background: firebrick;
  }
  .time-tag:after {
    content: "\27A4";
  }


  .timestamp-container{
    width: 100%;
    flex: 1;
    overflow: auto;
  }
  .timestamp-line.selected{
    background: green;
  }
  .timestamp-line{
    display: flex;
    margin: 2px 0;
    height: 36px;
    line-height: 36px;
    .time-tag{
      flex: 0;
      margin-right: 4px;
    }
    .time-content{
      flex: 1;
    }
    .time-del{
      margin-left: 4px;
      flex: 0;
    }

  }
  .ctrl-bar{
    height: 100%;
    width: 0px;
    transform: translateX(50%);
    position: absolute;
    cursor: ew-resize;
    user-select: none;
    padding: 0 2px;
    box-shadow: 0.5px 0 0 blue;
  }
  .point-line{
    position: relative;
    height: 5px;
    .arrow-up.selected{
     border-bottom-color: #faad14;
    }
    .arrow-up {
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      position: absolute;
      border-bottom: 5px solid black;
      //transform: translateX(-100%);
      .ctrl-bar{
        bottom: 0;
        transform: translateX(-100%);
        box-shadow: 0.5px 0 0 blue;
        height: 100px;
        position: absolute;
      }
    }
  }
}