Home Explore Help
Register Sign In
zhh
/
zentao
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Branch: master
Branches Tags
zentao
/
module
/
ai
/
css
/
prompts.ui.css

prompts.ui.css 2.3 KB
Permalink History Raw

1234567891011121314151617181920 
  1. .prompts-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 18px; background: #FFF; padding: 14px 18px; }
    2. 

  2. .prompts-container .prompt-card { position: relative; }
    3. 

  3. .prompts-container .prompt-card .card-action-btn { position: absolute; top: 9px; right: 9px; z-index: 1; opacity: 0; transition: opacity 0.2s ease; }
    4. 

  4. .prompts-container .prompt-card:hover .card-action-btn { opacity: 1; }
    5. 

  5. .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; }
    6. 

  6. .prompts-container .prompt-card:hover a { border-color: #007AFF; }
    7. 

  7. .prompts-container .card-title { margin: 0; padding-right: 24px; display: flex; align-items: center; gap: 8px; overflow: hidden; font-weight: normal; }
    8. 

  8. .prompts-container .card-title .icon { font-size: 24px; color: var(--color-primary-500); flex-shrink: 0; }
    9. 

  9. .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; }
    10. 

  10. .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; }
    11. 

  11. .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; }
    12. 

  12. .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; }
    13. 

  13. .prompts-container .creator { display: flex; gap: 4px; align-items: center; }
    14. 

  14. .prompts-container .creator img { width: 20px; height: 20px; border-radius: 50%; background-color: #EDEEF2; }
    15. 

  15. .prompts-container .creator span { font-size: 12px; line-height: 13px; color: #AAAAB8; }
    16. 

  16. .prompts-container .created-date { font-size: 12px; line-height: 13px; color: #8F8FA0; }
    17. 

  17. .pager-container { padding-top: 8px; display: flex; justify-content: flex-end; background: #FFF; padding: 12px; }
    18. 

  18. @media (max-width: 768px) {
    19. 

  19.   .prompts-container { grid-template-columns: 1fr; padding: 8px; }
    20. 

  20. }
    21.