You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
167 lines
2.8 KiB
167 lines
2.8 KiB
.video-grid.disabled { |
|
pointer-events: none; |
|
} |
|
|
|
.video-grid { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); |
|
gap: 24px; |
|
padding: 32px 24px; |
|
max-width: 1600px; |
|
margin: 0 auto; |
|
} |
|
|
|
.skeleton-card { |
|
animation: pulse 1.5s ease-in-out infinite; |
|
} |
|
|
|
.skeleton-thumbnail { |
|
width: 100%; |
|
aspect-ratio: 16 / 9; |
|
background-color: var(--color-surface-muted); |
|
border-radius: 16px; |
|
} |
|
|
|
.skeleton-info { |
|
display: flex; |
|
gap: 12px; |
|
margin-top: 12px; |
|
} |
|
|
|
.skeleton-avatar { |
|
width: 36px; |
|
height: 36px; |
|
border-radius: 50%; |
|
background-color: var(--color-surface-muted); |
|
} |
|
|
|
.skeleton-text { |
|
flex: 1; |
|
} |
|
|
|
.skeleton-title { |
|
height: 16px; |
|
background-color: var(--color-surface-muted); |
|
border-radius: 4px; |
|
margin-bottom: 8px; |
|
} |
|
|
|
.skeleton-meta { |
|
height: 12px; |
|
width: 60%; |
|
background-color: var(--color-surface-muted); |
|
border-radius: 4px; |
|
} |
|
|
|
@keyframes pulse { |
|
0%, 100% { |
|
opacity: 1; |
|
} |
|
50% { |
|
opacity: 0.5; |
|
} |
|
} |
|
|
|
.error-message { |
|
text-align: center; |
|
padding: 48px 24px; |
|
color: var(--color-primary-dark); |
|
} |
|
|
|
.empty-state { |
|
text-align: center; |
|
padding: 48px 24px; |
|
color: var(--color-muted); |
|
} |
|
|
|
.empty-state h2 { |
|
margin: 0 0 8px 0; |
|
font-size: 20px; |
|
font-weight: 500; |
|
} |
|
|
|
.empty-state p { |
|
margin: 0; |
|
font-size: 14px; |
|
} |
|
|
|
.pagination { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
gap: 12px; |
|
padding: 32px 24px 48px; |
|
margin: 0 auto; |
|
max-width: 1600px; |
|
} |
|
|
|
.pagination-button { |
|
padding: 8px 16px; |
|
background-color: var(--color-secondary); |
|
border: none; |
|
border-radius: 999px; |
|
cursor: pointer; |
|
font-size: 14px; |
|
font-weight: 500; |
|
transition: transform 0.2s, box-shadow 0.2s; |
|
color: white; |
|
box-shadow: 0 12px 26px rgba(32, 76, 130, 0.2); |
|
} |
|
|
|
.pagination-button:hover:not(:disabled) { |
|
transform: translateY(-2px); |
|
box-shadow: 0 16px 30px rgba(32, 76, 130, 0.28); |
|
} |
|
|
|
.pagination-button:disabled { |
|
opacity: 0.5; |
|
cursor: not-allowed; |
|
} |
|
|
|
.pagination-numbers { |
|
display: flex; |
|
gap: 4px; |
|
} |
|
|
|
.pagination-number { |
|
width: 36px; |
|
height: 36px; |
|
background-color: var(--color-surface); |
|
border: 1px solid transparent; |
|
border-radius: 999px; |
|
cursor: pointer; |
|
font-size: 14px; |
|
font-weight: 500; |
|
transition: background-color 0.2s, color 0.2s, border-color 0.2s; |
|
color: var(--color-text); |
|
} |
|
|
|
.pagination-number:hover { |
|
background-color: rgba(47, 128, 237, 0.12); |
|
border-color: rgba(47, 128, 237, 0.5); |
|
} |
|
|
|
.pagination-number.active { |
|
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); |
|
color: white; |
|
border-color: transparent; |
|
} |
|
|
|
@media (max-width: 768px) { |
|
.video-grid { |
|
grid-template-columns: 1fr; |
|
gap: 16px; |
|
padding: 16px; |
|
} |
|
|
|
.pagination { |
|
padding: 16px; |
|
} |
|
|
|
.pagination-numbers { |
|
display: none; |
|
} |
|
} |
|
|
|
|
|
|
|
|