(Make infobox full width at top instead of floating right) |
(Horizontal infobox layout - fields in columns) |
||
| Line 12: | Line 12: | ||
} | } | ||
/* Infobox styling */ | /* Infobox styling - horizontal layout */ | ||
.infobox { | .infobox { | ||
width: 100%; | width: 100%; | ||
margin: 0 0 16px 0; | margin: 0 0 16px 0; | ||
border: 1px solid var(--border-color-base, #555); | border: 1px solid var(--border-color-base, #555); | ||
| Line 25: | Line 24: | ||
border-spacing: 0; | border-spacing: 0; | ||
overflow: hidden; | overflow: hidden; | ||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); | |||
} | } | ||
.infobox-title | .infobox .infobox-title { | ||
grid-column: 1 / -1; | |||
display: block; | |||
padding: 12px; | padding: 12px; | ||
text-align: center; | text-align: center; | ||
| Line 33: | Line 36: | ||
background: var(--color-surface-2, #2a2a3a); | background: var(--color-surface-2, #2a2a3a); | ||
} | } | ||
.infobox-data | .infobox .infobox-title th { | ||
padding: | display: block; | ||
text-align: | } | ||
.infobox .infobox-data { | |||
display: flex; | |||
flex-direction: column; | |||
padding: 10px 12px; | |||
border-top: none; | |||
border-left: 1px solid var(--border-color-base, #333); | |||
} | |||
.infobox .infobox-data:first-of-type { | |||
border-left: none; | |||
} | |||
.infobox .infobox-data th { | |||
text-align: left; | |||
white-space: nowrap; | white-space: nowrap; | ||
color: var(--color-base--subtle, #aaa); | color: var(--color-base--subtle, #aaa); | ||
font-weight: 400; | font-weight: 400; | ||
font-size: 0. | font-size: 0.75rem; | ||
padding: 0 0 4px 0; | |||
} | } | ||
.infobox-data td { | .infobox .infobox-data td { | ||
font-weight: 600; | font-weight: 600; | ||
padding: 0; | |||
} | } | ||
.infobox | |||
@media (max-width: 600px) { | |||
.infobox { | |||
grid-template-columns: repeat(2, 1fr); | |||
} | |||
} | } | ||
Revision as of 10:08, 18 February 2026
/* Game card grid - make thumbnails fill card width */
.game-card > p {
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
.game-card > p > a > img {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
display: block;
}
/* Infobox styling - horizontal layout */
.infobox {
width: 100%;
margin: 0 0 16px 0;
border: 1px solid var(--border-color-base, #555);
border-radius: 8px;
background: var(--color-surface-1, #1e1e2e);
font-size: 0.875rem;
text-align: left;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.infobox .infobox-title {
grid-column: 1 / -1;
display: block;
padding: 12px;
text-align: center;
font-size: 1.1rem;
font-weight: 700;
background: var(--color-surface-2, #2a2a3a);
}
.infobox .infobox-title th {
display: block;
}
.infobox .infobox-data {
display: flex;
flex-direction: column;
padding: 10px 12px;
border-top: none;
border-left: 1px solid var(--border-color-base, #333);
}
.infobox .infobox-data:first-of-type {
border-left: none;
}
.infobox .infobox-data th {
text-align: left;
white-space: nowrap;
color: var(--color-base--subtle, #aaa);
font-weight: 400;
font-size: 0.75rem;
padding: 0 0 4px 0;
}
.infobox .infobox-data td {
font-weight: 600;
padding: 0;
}
@media (max-width: 600px) {
.infobox {
grid-template-columns: repeat(2, 1fr);
}
}