20 lines
2.3 KiB
CSS
20 lines
2.3 KiB
CSS
.prompts-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 18px; background: #FFF; padding: 14px 18px; }
|
|
.prompts-container .prompt-card { position: relative; }
|
|
.prompts-container .prompt-card .card-action-btn { position: absolute; top: 9px; right: 9px; z-index: 1; opacity: 0; transition: opacity 0.2s ease; }
|
|
.prompts-container .prompt-card:hover .card-action-btn { opacity: 1; }
|
|
.prompts-container .prompt-card a { border-radius: 4px; border: 1px solid #F0F0F5; background-color: #FFF; padding: 8px 16px 14px; display: flex; flex-direction: column; overflow: hidden; gap: 6px; transition: border-color 0.2s ease; text-decoration: none; }
|
|
.prompts-container .prompt-card:hover a { border-color: #007AFF; }
|
|
.prompts-container .card-title { margin: 0; padding-right: 24px; display: flex; align-items: center; gap: 8px; overflow: hidden; font-weight: normal; }
|
|
.prompts-container .card-title .icon { font-size: 24px; color: var(--color-primary-500); flex-shrink: 0; }
|
|
.prompts-container .card-title span { font-size: 13px; font-weight: 400; color: #3C4353; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.prompts-container .card-title .draft-tag { margin-left: 2px; border-radius: 2px; padding: 1px 5px; background-color: #DCEBFE; font-size: 10px; line-height: 13px; color: #007AFF; flex-shrink: 0; }
|
|
.prompts-container .card-description { color: #8F8FA0; font-size: 12px; line-height: 16px; height: 32px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
|
|
.prompts-container .card-meta { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #838A9D; gap: 8px; flex: none; }
|
|
.prompts-container .creator { display: flex; gap: 4px; align-items: center; }
|
|
.prompts-container .creator img { width: 20px; height: 20px; border-radius: 50%; background-color: #EDEEF2; }
|
|
.prompts-container .creator span { font-size: 12px; line-height: 13px; color: #AAAAB8; }
|
|
.prompts-container .created-date { font-size: 12px; line-height: 13px; color: #8F8FA0; }
|
|
.pager-container { padding-top: 8px; display: flex; justify-content: flex-end; background: #FFF; padding: 12px; }
|
|
@media (max-width: 768px) {
|
|
.prompts-container { grid-template-columns: 1fr; padding: 8px; }
|
|
} |