1
This commit is contained in:
zhangkai
672
src/style/knowledge.css
Normal file
672
src/style/knowledge.css
Normal file
@@ -0,0 +1,672 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
|
||||
.dark {
|
||||
--accent: 0 0% 100% / 8%; /* hsl(210 30% 96%) */
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-feature-settings: "rlig" 1, "calt" 1;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.knowledge-header{
|
||||
margin-bottom: 18px;
|
||||
line-height: 35px;
|
||||
height: 35px;
|
||||
|
||||
.knowledge-title{
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #FEFEFE;
|
||||
display: inline-block;
|
||||
|
||||
.title-list{
|
||||
display: inline-block;
|
||||
|
||||
.title-item{
|
||||
display: inline-block;
|
||||
|
||||
& span {
|
||||
padding: 0px 15px;
|
||||
}
|
||||
|
||||
& label{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.title-item:last-child label{
|
||||
cursor: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.knowledge-create-box{
|
||||
float: right;
|
||||
.knowledge-create{
|
||||
padding: 0px 14px;
|
||||
line-height: 35px;
|
||||
height: 35px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid #E6B71E;
|
||||
background: transparent;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #E6B71E;
|
||||
letter-spacing: 5px;
|
||||
cursor: pointer;
|
||||
|
||||
.create-icon{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
& label{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.folder-list{
|
||||
margin-left: -35px;
|
||||
|
||||
.folder-item{
|
||||
width: calc(25% - 35px);
|
||||
display: inline-block;
|
||||
margin-left: 35px;
|
||||
margin-bottom: 30px;
|
||||
background: #1A1A1A;
|
||||
border-radius: 14px;
|
||||
padding: 1px;
|
||||
cursor: pointer;
|
||||
|
||||
.folder-content-item{
|
||||
padding: 19px;
|
||||
background: #1A1A1A;
|
||||
border-radius: 14px;
|
||||
|
||||
.folder-header{
|
||||
display: flex;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
|
||||
.knowledge-img{
|
||||
width: 35px;
|
||||
border-radius: 7px;
|
||||
margin-right: 14px;
|
||||
height: 35px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
& label{
|
||||
flex: 1;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.more-button{
|
||||
width: 20px;
|
||||
height: 4px;
|
||||
margin-bottom: 15px;
|
||||
margin-left: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-description{
|
||||
margin: 14px 0 18px 0;
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
color: #CCCCCC;
|
||||
overflow: hidden; /* 确保超出的内容会被隐藏 */
|
||||
display: -webkit-box; /* 用于弹性盒子布局模型 */
|
||||
-webkit-line-clamp: 3; /* 限制在3行 */
|
||||
-webkit-box-orient: vertical; /* 垂直方向的子元素排列 */
|
||||
text-overflow: ellipsis; /* 多行时显示省略号 */
|
||||
white-space: normal; /* 允许文本换行 */
|
||||
height: 75px; /* 设置最大高度以适应3行文本 */
|
||||
line-height: 25px; /* 设置行高以便计算最大高度 */
|
||||
box-sizing: border-box; /* 防止padding影响最大高度 */
|
||||
}
|
||||
|
||||
.folder-type{
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: #666666;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.third-item{
|
||||
width: calc(33.33% - 28px);
|
||||
margin-left: 28px;
|
||||
margin-bottom: 20px;
|
||||
.folder-description{
|
||||
-webkit-line-clamp: 1!important;
|
||||
height: 25px!important;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-item:hover{
|
||||
background: linear-gradient(150deg, rgba(0,0,0,0.6), rgba(255,255,255,0.6));
|
||||
}
|
||||
|
||||
.folder-item-active,.folder-item-active:hover{
|
||||
background: #FFD025;
|
||||
}
|
||||
}
|
||||
|
||||
.third-list{
|
||||
margin-left: -28px;
|
||||
}
|
||||
|
||||
.no-folder{
|
||||
& img {
|
||||
width: 147px;
|
||||
height: 70px;
|
||||
margin: 15% auto 0 auto;
|
||||
}
|
||||
|
||||
& p {
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #666666;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.file-content{
|
||||
display: flex;
|
||||
height:100%;
|
||||
|
||||
.file-info{
|
||||
width: 211px;
|
||||
box-shadow: 0px 0px 35px 0px rgba(255,255,255,0.2);
|
||||
|
||||
.file-name{
|
||||
margin: 1.5em 30px 15px 30px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
display: flex;
|
||||
|
||||
& label{
|
||||
flex: 1;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
color: #FFFEFE;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-type{
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #666666;
|
||||
margin: 0px 13px 15px 13px;
|
||||
}
|
||||
|
||||
.file-menu{
|
||||
margin: 0px 21px 0 7px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
padding: 0px 21px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
cursor: pointer;
|
||||
& img{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 13px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.file-menu-active{
|
||||
margin: 0px 21px 0 7px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
padding: 0px 21px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #FFD54C;
|
||||
background-color: rgba(255, 225, 128, 0.1);
|
||||
border-radius: 7px;
|
||||
cursor: pointer;
|
||||
& img{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 13px;
|
||||
display: inline-block;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.back-knowledge{
|
||||
position: absolute;
|
||||
left: 21px;
|
||||
right: 21px;
|
||||
bottom: 28px;
|
||||
background: #1A1A1A;
|
||||
border-radius: 21px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #FEFEFE;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
& img{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 13px;
|
||||
display: inline-block;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-list{
|
||||
flex: 1;
|
||||
|
||||
.search-box{
|
||||
position: relative;
|
||||
float: right;
|
||||
margin-right: 21px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
& img{
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
z-index: 99;
|
||||
top:10px;
|
||||
}
|
||||
|
||||
.form-input{
|
||||
background: #1A1A1A;
|
||||
border-radius: 18px;
|
||||
border: unset;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
border-radius: 18px;
|
||||
width: 432px;
|
||||
padding: 0px 70px 0px 40px;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.search-btn{
|
||||
width: 56px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
background: #E6B71E;
|
||||
border-radius: 18px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #010101;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.text-muted-foreground{
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF!important;
|
||||
}
|
||||
|
||||
.more-button{
|
||||
width: 20px;
|
||||
height: 4px;
|
||||
margin-left: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-row td{
|
||||
color: #CCCCCC;
|
||||
}
|
||||
|
||||
& tr{
|
||||
border-color: #333333;
|
||||
}
|
||||
|
||||
.img-icon{
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-box{
|
||||
background-color: #262626!important;
|
||||
border-radius: 14px;
|
||||
max-width: 1000px!important;
|
||||
|
||||
.dialog-title{
|
||||
font-weight: 600;
|
||||
font-size: 17px;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 20px;
|
||||
.dialog-title-icon{
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
margin-right: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-content{
|
||||
.dialog-item-title{
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.select-item{
|
||||
cursor: pointer;
|
||||
background: #1A1A1A;
|
||||
border-radius: 7px;
|
||||
border: 1px solid transparent;
|
||||
padding: 14px 22px;
|
||||
margin-top: 15px;
|
||||
|
||||
& label {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.select-item-active{
|
||||
cursor: pointer;
|
||||
background: #1A170D;
|
||||
border-radius: 7px;
|
||||
border: 1px solid #FFD025;
|
||||
padding: 14px 22px;
|
||||
margin-top: 15px;
|
||||
|
||||
& label {
|
||||
color: #FFD54C;
|
||||
}
|
||||
}
|
||||
|
||||
.select-item,.select-item-active{
|
||||
& img {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 13px;
|
||||
}
|
||||
|
||||
& label {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
& p{
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #999999;
|
||||
margin-top: 13px;
|
||||
margin-left: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-content{
|
||||
background: #1A1A1A;
|
||||
border-radius: 7px;
|
||||
padding: 14px 14px 20px 14px;
|
||||
margin-top: 14px;
|
||||
margin-bottom: 17px;
|
||||
|
||||
.form-item{
|
||||
display: flex;
|
||||
margin-top: 14px;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
justify-content: space-between;
|
||||
|
||||
.form-title{
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
margin-right: 15px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.form-input{
|
||||
height: 35px;
|
||||
background: #262626;
|
||||
border-radius: 7px;
|
||||
padding: 0 14px;
|
||||
border: unset;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #ffffff;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.form-input::placeholder{
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.form-dropdown{
|
||||
flex: 1;
|
||||
|
||||
& button {
|
||||
background: #262626;
|
||||
width: 100%;
|
||||
border: unset;
|
||||
color: #FFFFFF;
|
||||
min-height: 35px!important;
|
||||
padding: 0px 14px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.dropdown-component-display{
|
||||
background: #262626;
|
||||
}
|
||||
|
||||
.form-radio-group{
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.change-button{
|
||||
padding: 0px 12px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
background: #262626;
|
||||
border-radius: 14px;
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: #999999;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 4px;
|
||||
|
||||
& img{
|
||||
display:inline-block;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tip-title{
|
||||
font-weight: 600;
|
||||
font-size: 17px;
|
||||
color: #FFFFFF;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.tip-title-icon{
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-right: 13px;
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
.tip-title-left{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tip-message{
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
white-space: pre;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.tip-input{
|
||||
height: 35px;
|
||||
background: #1A1A1A;
|
||||
border-radius: 7px;
|
||||
width: 100%;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
padding: 0px 14px;
|
||||
}
|
||||
|
||||
.tip-input::placeholder{
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.button-box{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
.cancel-button{
|
||||
width: 127px;
|
||||
height: 35px;
|
||||
background: #404040;
|
||||
border-radius: 18px;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #FEFEFE;
|
||||
}
|
||||
|
||||
.confirm-button{
|
||||
width: 127px;
|
||||
height: 35px;
|
||||
background: #FFD025;
|
||||
border-radius: 18px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #010101;
|
||||
margin-left: 77px;
|
||||
}
|
||||
|
||||
.tip-button{
|
||||
width: 100px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.tip-button-margin{
|
||||
margin-left: 28px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.delete-button{
|
||||
width: 100px;
|
||||
margin-top: 28px;
|
||||
background: rgba(255, 96, 96, 0.2);
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #FF6060;
|
||||
}
|
||||
}
|
||||
|
||||
.right-button-box{
|
||||
text-align: right;
|
||||
|
||||
.yellow-button{
|
||||
width: 98px;
|
||||
height: 35px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid #FFD025;
|
||||
text-align:center;
|
||||
line-height: 35px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #FFD025;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.knowledge-img-bg {
|
||||
width: 35px;
|
||||
background: #000000;
|
||||
border-radius: 7px;
|
||||
margin-right: 14px;
|
||||
height: 35px;
|
||||
display: inline-block;
|
||||
|
||||
& img{
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
margin: 7px 0 0 7px;
|
||||
}
|
||||
}
|
||||
|
||||
/*dropdown*/
|
||||
.bg-popover{
|
||||
background-color: #2C2C2C!important;
|
||||
box-shadow: 0px 2px 7px 0px rgba(51,51,51,0.5)!important;
|
||||
border-radius: 7px!important;
|
||||
padding: 7px!important;
|
||||
}
|
||||
|
||||
.text-popover-foreground{
|
||||
font-weight: 400!important;
|
||||
font-size: 13px!important;
|
||||
color: #CCCCCC!important;
|
||||
}
|
||||
|
||||
.focus\:bg-accent:focus{
|
||||
border-radius: 6px;
|
||||
}
|
||||
Reference in New Issue
Block a user