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

.page-luma {
  display flex
  height 100%
  background-color #0E0808
  overflow auto
  //justify-content center
  flex-flow column
  align-items center
  background: linear-gradient(180deg, rgba(75, 62, 53, 0.8), rgba(144, 50, 181, 0.3));


  .prompt-box {
    display flex
    max-width 56rem
    width 100%
    padding 20px
    flex-flow column

    .images {
      display flex
      flex-flow row
      padding-bottom 10px
      justify-content center
      align-items center

      .item {
        position relative

        .el-image {
          width 100px
          height 100px
          border-radius 6px
          margin-right 10px
        }

        .el-icon {
          position absolute
          cursor pointer
          font-size 20px
          color #545454
          right 10px
          top 0

          &:hover {
            color #888888
          }
        }
      }

      .btn-swap {
        margin-right 10px
        .icon-exchange{
          color #ffffff
          cursor pointer
        }
      }
    }


    .prompt-container {
      width: 100%;
      .input-container {
        background: linear-gradient(90deg, rgba(75, 62, 53, 0.8), rgba(144, 50, 181, 0.3));
        border-radius: 28px;
        padding: 10px 20px;
        display: flex;
        align-items: center;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

        .prompt-input {
          background: transparent;
          border: none;
          outline: none;
          color: white;
          font-size: 14px;
          width: 100%;
          padding: 10px;
          resize: none;
          white-space: pre-wrap;
          word-wrap: break-word;
          line-height 24px
          overflow-wrap: break-word;

          scrollbar-width: none; /* 隐藏滚动条 */
          &::placeholder {
            color: rgba(255, 255, 255, 0.6);
          }
          &::-webkit-scrollbar {
            display: none;
          }
        }

        .upload-icon, .send-icon {
          color #e1e1e1
          .iconfont {
            font-size 20px
            cursor pointer
          }
        }
        .upload-icon {
          position relative
        }
      }
      .params {
        display flex
        justify-content right
        color #e1e1e1
        font-size 14px
        padding 10px 30px

        .item-group {
          margin-left 20px
          .label {
            margin-right 5px
            position relative
            top 1px
          }
        }
      }
    }

  }


  .video-container {
    display flex
    flex-flow column
    width 100%
    padding 0 40px

    .h-title {
      color #ffffff
      width 100%
      font-size 36px
      text-align left
    }

    .list-box {
      padding 0
      .item {
        display flex
        flex-flow row
        align-items center
        min-height 100px
        padding 10px 15px
        border-radius 10px
        cursor pointer
        margin-bottom 10px

        &:hover {
          background-color #2A2525
        }

        .left {
          .container {
            width 160px
            position relative

            .video{
              width 160px
              border-radius 5px
            }

            .el-image {
              width 160px
              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: 100%
              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
          padding 0 20px

          .prompt,.failed {
            padding 6px 0
            font-size 16px
            max-height 80px
            line-height 28px
            overflow hidden
            text-overflow ellipsis
          }
          .prompt {
            color rgb(250 247 245)
          }
          .failed {
            color #E4696B
          }
        }

        .right {
          display flex
          justify-content right
          min-width 200px;
          font-size 14px
          padding 0

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

            .btn-publish {
              padding 2px 10px

              .text {
                margin-right 10px
                color #e1e1e1
              }
            }

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

              &:hover {
                background #5f5958
                color #e1e1e1
              }

              .downloading {
                width 16px
              }
            }
          }
        }
      }

    }

    .pagination {
      padding 10px 20px
      display flex
      justify-content center
    }

    //.videos {
    //  .item {
    //    margin-bottom 20px
    //
    //    .video-box {
    //      width 100%
    //      aspect-ratio: 16/9;
    //      border-radius 10px
    //      video,img {
    //        width: 100%;
    //        height: 100%;
    //        object-fit: cover;
    //        border-radius 10px
    //        cursor pointer
    //      }
    //    }
    //
    //
    //    .video-name {
    //      color #e1e1e1
    //      font-size 16px
    //      white-space nowrap
    //      overflow hidden
    //      text-overflow ellipsis
    //      padding 6px 0
    //      text-align center
    //    }
    //
    //    .opts {
    //      display flex
    //      justify-content center
    //      .btn {
    //        margin-right 10px
    //        background-color hsla(0,0%,100%,.15)
    //        border none
    //        border-radius 20px
    //        padding 3px 15px
    //        cursor pointer
    //        color #ffffff
    //        font-size 14px
    //
    //        .iconfont {
    //          font-size 11px
    //          position relative
    //          margin-right 5px
    //          top -2px
    //        }
    //
    //        .el-image {
    //          width 14px
    //          height 14px
    //          margin-right 5px
    //        }
    //
    //        &:hover {
    //          background-color hsla(0,0%,100%,.2)
    //        }
    //      }
    //    }
    //  }
    //}
  }

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

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

}