MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 390: | Line 390: | ||
.mw-file-description .mw-file-element { | .mw-file-description .mw-file-element { | ||
filter: invert(1) hue-rotate(180deg) brightness(1.5) drop-shadow(0 0 6px #A020F0) drop-shadow(0 0 12px rgba(160,32,240,0.4)); | filter: invert(1) hue-rotate(180deg) brightness(1.5) drop-shadow(0 0 6px #A020F0) drop-shadow(0 0 12px rgba(160,32,240,0.4)); | ||
} | |||
/* ============================================ | |||
CATEGORY GRID COMPONENT - ax-cat-grid | |||
Reusable 8-box responsive category grid | |||
Matches Sexual Health card design exactly | |||
============================================ */ | |||
/* Grid container: 4 columns desktop */ | |||
.ax-cat-grid { | |||
display: grid; | |||
grid-template-columns: repeat(4, 1fr); | |||
gap: 16px; | |||
margin: 0 0 32px 0; | |||
} | |||
/* Individual card */ | |||
.ax-cat-card { | |||
background: #1A1A1A; | |||
border: 1px solid #2E2E2E; | |||
border-radius: 16px; | |||
overflow: hidden; | |||
transition: border-color 0.2s, box-shadow 0.2s; | |||
cursor: pointer; | |||
display: flex; | |||
flex-direction: column; | |||
} | |||
.ax-cat-card:hover { | |||
border-color: rgba(255,102,0,0.5); | |||
box-shadow: 0 0 20px rgba(255,102,0,0.08); | |||
} | |||
/* Image area - fixed height banner, full width */ | |||
.ax-cat-img { | |||
width: 100%; | |||
height: 140px; | |||
background-color: #111; | |||
background-size: cover; | |||
background-position: center center; | |||
border-radius: 15px 15px 0 0; | |||
flex-shrink: 0; | |||
} | |||
/* Card body */ | |||
.ax-cat-body { | |||
padding: 16px 18px 18px 18px; | |||
display: flex; | |||
flex-direction: column; | |||
gap: 8px; | |||
flex: 1; | |||
} | |||
/* Category title */ | |||
.ax-cat-title { | |||
font-size: 15px; | |||
font-weight: 700; | |||
color: #FFFFFF; | |||
letter-spacing: 0.2px; | |||
line-height: 1.3; | |||
} | |||
.ax-cat-title a { | |||
color: #FF6600 !important; | |||
text-decoration: none; | |||
} | |||
.ax-cat-title a:hover { | |||
color: #FF8533 !important; | |||
text-decoration: underline; | |||
} | |||
/* Short description */ | |||
.ax-cat-desc { | |||
font-size: 13px; | |||
line-height: 1.55; | |||
color: #999999; | |||
} | |||
/* Tablet: 2 columns */ | |||
@media (max-width: 900px) { | |||
.ax-cat-grid { | |||
grid-template-columns: repeat(2, 1fr); | |||
} | |||
} | |||
/* Mobile: 1 column */ | |||
@media (max-width: 500px) { | |||
.ax-cat-grid { | |||
grid-template-columns: 1fr; | |||
} | |||
} | } | ||