geekai/web/src/assets/css/chat-app.styl
2024-12-19 16:57:57 +08:00

142 lines
3.0 KiB
Stylus

.page-apps {
// background-color: #282c34;
height 100%
.apps-type-nav{
height 50px
padding 8px 0;
margin 10px auto
}
.scrollbar-type-nav{
display flex
align-items center
padding 2px
background-color #f4f1f7
width fit-content
border 1px solid rgba(79,89,102,.078)
border-radius: 20px
margin: 0 auto
// background: var(--chat-bg);
// width 100%
li{
flex-shrink 0
display flex
align-items center
justify-content center
margin 5px 8px
height 26px
border-radius 4px
// border 1px solid rgb(80,80,80)
padding 2px 12px
// background rgba(60,60,60 0.9)
color var(--theme-text-tertiary)
font-weight: bold
font-size 14px
cursor pointer
.image {
width 22px
height 22px
overflow hidden
margin-right 5px
border-radius 50%
}
&.active{
background #fff;
color: var(--el-color-primary);
border-radius 20px
}
}
}
.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: var(--chat-bg);
border-radius 8px
.image {
width 80px
height 80px
min-width 80px
border-radius 50%
overflow hidden
object-fit: contain
display: flex
align-items center
justify-content center
flex-shrink 0
border: 2px solid #f5f7fd
background: #fff
}
.inner {
display flex
flex-flow column
padding 0 0 0 10px
width 100%
.info {
text-align left
.info-title {
color: var(--text-theme-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 var(--el-text-color-primary)
}
}
.btn {
margin-top 10px
display flex
justify-content right
.el-button {
margin-left 10px
.el-icon {
margin-right 5px
}
}
}
}
}
}
}
}