Russell Ballestrini
3714c9b6a9
- base.css: Core layout, typography, container - nav.css: Navigation bar styles - forms.css: Form elements, buttons, inputs, checkboxes - quests.css: CSS-only easter eggs - results.css: Media grid and result card styles Templates now link external CSS via extra_css_links block. Page-specific styles remain inline (correct pattern). Fixed OVER_9000 test (it's OVER 9000, so 9001).
125 lines
2 KiB
CSS
125 lines
2 KiB
CSS
/* results.css - Media results grid styling */
|
|
|
|
.results {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
gap: 15px;
|
|
}
|
|
|
|
.result {
|
|
background: #1a1a1a;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.result:hover {
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.result img,
|
|
.result video {
|
|
width: 100%;
|
|
height: 200px;
|
|
object-fit: contain;
|
|
background: #1a1a1a;
|
|
}
|
|
|
|
.result-info {
|
|
padding: 10px;
|
|
}
|
|
|
|
.result-filename {
|
|
font-size: 12px;
|
|
color: #aaa;
|
|
margin-bottom: 4px;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.result-meta {
|
|
font-size: 11px;
|
|
color: #666;
|
|
}
|
|
|
|
.result-type {
|
|
display: inline-block;
|
|
padding: 2px 6px;
|
|
background: #333;
|
|
border-radius: 4px;
|
|
font-size: 10px;
|
|
color: #888;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* Live feed specific */
|
|
.media-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.media-item {
|
|
background: #1a1a1a;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
animation: fadeIn 0.3s ease;
|
|
}
|
|
|
|
.media-item img,
|
|
.media-item video {
|
|
width: 100%;
|
|
height: 150px;
|
|
object-fit: contain;
|
|
background: #0a0a0a;
|
|
}
|
|
|
|
.media-item-info {
|
|
padding: 8px;
|
|
font-size: 11px;
|
|
color: #888;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* Pagination */
|
|
.pagination {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 20px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.pagination a,
|
|
.pagination span {
|
|
padding: 8px 16px;
|
|
background: #1a1a1a;
|
|
border-radius: 4px;
|
|
text-decoration: none;
|
|
color: #888;
|
|
}
|
|
|
|
.pagination a:hover {
|
|
background: #2a2a2a;
|
|
color: #ff6b6b;
|
|
}
|
|
|
|
.pagination .current {
|
|
background: #ff6b6b;
|
|
color: #fff;
|
|
}
|
|
|
|
/* Empty state */
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: #666;
|
|
}
|
|
|
|
.empty-state h2 {
|
|
color: #888;
|
|
margin-bottom: 10px;
|
|
}
|