mrleo1nidandCursor
72567acd28
release / desktop (Linux и Windows в релиз) (push) Successful in 16m22s
release / prune (старые файлы и прогоны) (push) Successful in 6s
ci / mobile / mobile (Metro-бандл Android) (push) Successful in 1m23s
release / release (версия и заметки) (push) Successful in 6s
ci / ts / ts (packages + web) (push) Failing after 5m25s
release / android (APK в релиз) (push) Successful in 4m18s
Co-authored-by: Cursor <cursoragent@cursor.com>
22 lines
1.7 KiB
CSS
22 lines
1.7 KiB
CSS
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 24px; margin-top: 24px; }
|
|
.card { display: flex; flex-direction: column; gap: 8px; color: inherit; text-decoration: none; min-width: 0; border-radius: 16px; padding: 12px; background: var(--surface); animation: pipuIn 0.2s ease-out both; }
|
|
.coverWrap { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; }
|
|
.coverWrap > :first-child { width: 100%; height: 100%; }
|
|
.card strong { overflow-wrap: anywhere; }
|
|
.card span { font-size: 13px; }
|
|
.card:hover { background: var(--hover); }
|
|
.play {
|
|
position: absolute; right: 10px; bottom: 10px; z-index: 1; display: grid; place-items: center;
|
|
width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #05070d;
|
|
opacity: 0; transform: translateY(6px); transition: opacity 0.18s, transform 0.18s;
|
|
}
|
|
.card:hover .play, .card:focus-within .play, .play:focus-visible { opacity: 1; transform: none; }
|
|
.description { white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
.card .description { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
|
|
.actions { display: flex; align-items: center; }
|
|
.actions button { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 20px; }
|
|
.actions button:disabled { opacity: .3; cursor: default; }
|
|
.hero { overflow-wrap: anywhere; }
|
|
@media (max-width: 600px) { .hero { flex-direction: column; align-items: flex-start; gap: 16px; } .hero > div { width: 100%; } }
|
|
@media (max-width: 600px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .card { padding: 8px; } .play { opacity: 1; transform: none; } }
|