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

      .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
          }
        }
      }
    }

    .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
    }

    .videos {
      .item {
        margin-bottom 20px

        .video-box {
          width 100%
          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)
            }
          }
        }
      }
    }
  }

}