179 lines
3.2 KiB
CSS
179 lines
3.2 KiB
CSS
/* V21 标题库页面 */
|
|
.xx-project-titles {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* 页面头部 */
|
|
.xx-page-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 18px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.xx-page-head h2 {
|
|
font-size: 28px;
|
|
font-weight: 850;
|
|
color: var(--slate, #0f172a);
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.xx-page-head p {
|
|
font-size: 14px;
|
|
color: var(--muted, #64748b);
|
|
margin: 0;
|
|
}
|
|
|
|
/* V21 按钮 */
|
|
.xx-primary-btn {
|
|
background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
|
|
color: white !important;
|
|
border: none !important;
|
|
border-radius: 14px !important;
|
|
padding: 12px 24px !important;
|
|
font-weight: 850 !important;
|
|
box-shadow: 0 14px 26px rgba(79,70,229,0.22) !important;
|
|
transition: all 0.2s !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.xx-primary-btn:hover {
|
|
box-shadow: 0 18px 34px rgba(79,70,229,0.28) !important;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* V21 卡片 */
|
|
.xx-card {
|
|
background: rgba(255,255,255,0.94);
|
|
border: 1px solid rgba(226,232,240,0.95);
|
|
border-radius: 28px;
|
|
box-shadow: 0 24px 70px rgba(15,23,42,0.09);
|
|
padding: 28px;
|
|
margin-bottom: 24px;
|
|
transition: all 0.25s;
|
|
}
|
|
|
|
.xx-card:hover {
|
|
box-shadow: 0 26px 64px rgba(15,23,42,0.14);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* 搜索栏 - V21 风格 */
|
|
.xx-search-bar {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.xx-search-input {
|
|
width: 100%;
|
|
padding: 14px 20px;
|
|
border: 2px solid var(--line, #e2e8f0);
|
|
border-radius: 16px;
|
|
font-size: 15px;
|
|
background: white;
|
|
transition: all 0.2s;
|
|
outline: none;
|
|
}
|
|
|
|
.xx-search-input:focus {
|
|
border-color: var(--indigo, #4f46e5);
|
|
box-shadow: 0 0 0 4px rgba(79,70,229,0.1);
|
|
}
|
|
|
|
.xx-search-input::placeholder {
|
|
color: var(--muted, #64748b);
|
|
}
|
|
|
|
/* 标题列表网格 */
|
|
.xx-title-grid {
|
|
display: grid;
|
|
gap: 16px;
|
|
}
|
|
|
|
/* V21 标题卡片 */
|
|
.xx-title-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 20px;
|
|
border: 1px solid var(--line, #e2e8f0);
|
|
background: white;
|
|
border-radius: 20px;
|
|
transition: all 0.25s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.xx-title-row:hover {
|
|
border-color: var(--indigo, #4f46e5);
|
|
box-shadow: 0 12px 36px rgba(79,70,229,0.1);
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.xx-title-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.xx-title-row b {
|
|
display: block;
|
|
font-size: 16px;
|
|
font-weight: 850;
|
|
color: var(--slate, #0f172a);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.xx-title-row p {
|
|
font-size: 14px;
|
|
color: var(--muted, #64748b);
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* 操作按钮 */
|
|
.xx-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.xx-action-btn {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 12px;
|
|
background: var(--bg, #f8fafc);
|
|
border: 1px solid var(--line, #e2e8f0);
|
|
cursor: pointer;
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: 16px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.xx-action-btn:hover {
|
|
background: var(--indigo-soft, #eef2ff);
|
|
border-color: var(--indigo, #4f46e5);
|
|
}
|
|
|
|
.xx-action-btn.copy:hover {
|
|
color: var(--indigo, #4f46e5);
|
|
}
|
|
|
|
.xx-action-btn.delete:hover {
|
|
color: var(--red, #ef4444);
|
|
background: #fee2e2;
|
|
border-color: #fecaca;
|
|
}
|
|
|
|
/* 空状态 */
|
|
.xx-empty-state {
|
|
text-align: center;
|
|
padding: 60px 24px;
|
|
color: var(--muted, #64748b);
|
|
}
|
|
|
|
.xx-empty-state p {
|
|
font-size: 16px;
|
|
margin: 12px 0;
|
|
}
|