geekai/web/src/assets/css/suno.styl

.page-suno {
  display flex
  height 100%
  background-color #0E0808
  overflow auto

  .left-bar {
    max-width 340px
    min-width 340px
    padding 20px 30px

    .bar-top {
      display flex
      flex-flow row
      justify-content: space-between;
    }

    .params {
      padding 20px 0
      color rgb(250 247 245)
      position relative

      .pure-music {
        position absolute
        right 0
        top 24px
        display flex

        .text {
          margin-top 5px
          margin-left 5px
        }
      }

      .label {
        padding 10px 0

        .text {
          margin-right 10px
        }
      }
      .item {
        margin-bottom: 20px

        .create-btn {
          margin 20px 0
          background-image url("~@/assets/img/suno-create-bg.svg")
          background-size: cover;
          background-position: 50% 50%;
          transition: background 1s ease-in-out;
          overflow: hidden;
          font-size 16px
          width 100%
          padding 16px
          border-radius 25px
          border none
          cursor pointer

          img {
            position relative
            top 3px
            margin-right 5px
          }

          &:hover {
            opacity: 0.9;
          }
        }
      }
    }
  }
  .right-box {
    width 100%
    color rgb(250 247 245)
    overflow hidden

    .list-box {
      padding 0 0 0 20px
      .item {
        display flex
        flex-flow row
        padding 5px 0
        cursor pointer

        &:hover {
          background-color #1C1616
        }

        .left {
          .container {
            width 60px
            height 90px
            position relative

            .el-image {
              height 90px
              border-radius 5px
            }

            .duration {
              position absolute
              bottom 0
              right 0
              background-color rgba(14,8,8,.7)
              padding 0 3px
              font-family 'Input Sans'
              font-size 14px
              font-weight 700
              border-radius .125rem
            }

            .play {
              position absolute
              width: 56px;
              height 100%
              top: 0;
              left: 50%;
              border none
              border-radius 5px
              background rgba(100, 100, 100, 0.3)
              cursor pointer
              color #ffffff
              opacity 0
              transform: translate(-50%, 0px);
              transition opacity 0.3s ease 0s
            }

            &:hover {
              .play {
                opacity 1
                //display block
              }
            }
          }
        }

        .center {
          width 100%
          //border 1px solid saddlebrown
          display flex
          justify-content center
          align-items flex-start
          flex-flow column
          height 90px
          padding 0 20px

          .title {
            padding 6px 0
            font-size 16px
            font-weight 700

            a {
              color rgb(250 247 245)
              &:hover {
                text-decoration underline
              }
            }

            .model {
              color #E2E8F0
              background-color #1C1616
              border 1px solid #8f8f8f
              font-weight normal
              font-size 14px
              padding 1px 3px
              border-radius 5px
              margin-left 10px
            }
          }

          .tags {
            font-size 14px
            color #d1d1d1
            padding 3px 0
          }
        }

        .right {
          min-width 320px;
          font-size 14px
          padding 0 15px

          .tools {
            display flex
            justify-content left
            align-items center
            flex-flow row
            height 90px

            .btn {
              margin-right 10px
              background-color #363030
              border none
              border-radius 5px
              padding 5px 10px
              cursor pointer

              &:hover {
                background-color #5F5958
              }
            }

            .btn-publish {
              padding 2px 10px

              .text {
                margin-right 10px
              }
            }

            .btn-icon {
              background none
              padding 6px
              transition background 0.6s ease 0s
              color #726E6C

              &:hover {
                background #3C3737
              }
            }
          }
        }
      }

      .item.active {
        background-color #2A2525
      }
    }

    .music-player {
      width 100%
      position: fixed;
      bottom: 0;
      left: 50px;
      padding 20px 0
    }
  }

}