geekai/web/src/assets/css/chat-app.styl

.page-apps {
  background-color: #282c34;
  height 100%

  .apps-type-nav{
    height 43px
    padding 8px 0;
    margin-bottom 3px
  }

  .scrollbar-type-nav{
    display flex
    align-items center
    height 43px
    padding 0 5px
    li{
      flex-shrink 0
      display flex
      align-items center
      justify-content center
      margin 0 10px
      height 26px
      border-radius 4px
      border 1px solid rgb(80,80,80)
      padding 2px 12px
      background rgba(60,60,60 0.9)
      color #fff
      font-size 14px
      cursor pointer

      .image {
        width 22px
        height 22px
        overflow hidden
        margin-right 5px
        border-radius 50%
      }
      &.active{
        background #21aa93;
      }
    }
  }


  .app-list-container {
    display flex
    color #ffffff
    padding 2px 15px;
    overflow-y visible
    overflow-x hidden

    .item__list-box {
      .item {
        display flex
        flex-flow row
        border 1px solid rgb(80,80,80)
        padding 10px
        background rgba(60,60,60 0.5)

        .image {
          width 80px
          height 80px
          min-width 80px
          border-radius 5px
          overflow hidden
        }

        .inner {
          display flex
          flex-flow column
          padding 0 0 0 10px
          width 100%

          .info {
            text-align left

            .info-title {
              color var(--el-text-color)
              font-size 1.25rem
              line-height 1.75rem
              letter-spacing: .025em;
              font-weight: 600;
              word-break: break-all;
              overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
            }

            .info-text {
              padding 8px 0
              overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              word-break: break-all;
              height 34px
              font-size: .875rem;
              color #999999
            }
          }

          .btn {
            margin-top 10px
            display flex
            justify-content right

            .el-button {
              margin-left 10px

              .el-icon {
                margin-right 5px
              }
            }
          }
        }
      }

    }
  }

}