MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary |
mNo edit summary |
||
| Line 7: | Line 7: | ||
max-width: 960px; | max-width: 960px; | ||
margin: 30px auto; | margin: 30px auto; | ||
padding: 0 12px; | |||
} | } | ||
/* Button = image size + overlay */ | |||
.cat-button { | .cat-button { | ||
position: relative; | position: relative; | ||
display: block; /* keeps the div block-level */ | |||
line-height: 0; /* removes any text-induced spacing */ | |||
border-radius: 10px; | border-radius: 10px; | ||
overflow: hidden; | overflow: hidden; | ||
| Line 17: | Line 20: | ||
transition: all 0.25s ease; | transition: all 0.25s ease; | ||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
/* Hover effect */ | |||
.cat-button:hover, | .cat-button:hover, | ||
.cat-button:focus { | .cat-button:focus { | ||
| Line 26: | Line 29: | ||
} | } | ||
/* Image fills the button exactly */ | |||
.cat-button img { | .cat-button img { | ||
width: 100%; | width: 100%; /* responsive width */ | ||
height: | height: auto; /* preserves aspect ratio */ | ||
display: block; | display: block; | ||
border: 0; | |||
} | } | ||
/* Overlay text – centered on the image */ | |||
.cat-overlay { | .cat-overlay { | ||
position: absolute; | position: absolute; | ||
| Line 47: | Line 52: | ||
text-align: center; | text-align: center; | ||
transition: background 0.25s ease; | transition: background 0.25s ease; | ||
pointer-events: none; /* lets clicks go to the button */ | |||
} | } | ||
| Line 53: | Line 59: | ||
} | } | ||
/* Responsive */ | /* Responsive – 2 per row on small screens */ | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.cat-grid { gap: 16px; } | .cat-grid { gap: 16px; } | ||
.cat-overlay { font-size: 1em; } | .cat-overlay { font-size: 1em; } | ||
} | } | ||
Revision as of 09:54, 16 November 2025
/* ---------- DULL IMAGE-ONLY BUTTONS WITH OVERLAY TEXT (ONLY DIVS) ---------- */
.cat-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
max-width: 960px;
margin: 30px auto;
padding: 0 12px;
}
/* Button = image size + overlay */
.cat-button {
position: relative;
display: block; /* keeps the div block-level */
line-height: 0; /* removes any text-induced spacing */
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
transition: all 0.25s ease;
cursor: pointer;
}
/* Hover effect */
.cat-button:hover,
.cat-button:focus {
box-shadow: 0 6px 14px rgba(0,0,0,0.15);
transform: translateY(-4px);
}
/* Image fills the button exactly */
.cat-button img {
width: 100%; /* responsive width */
height: auto; /* preserves aspect ratio */
display: block;
border: 0;
}
/* Overlay text – centered on the image */
.cat-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.25);
color: white;
font-weight: 600;
font-size: 1.1em;
text-shadow: 0 1px 3px rgba(0,0,0,0.6);
padding: 12px;
text-align: center;
transition: background 0.25s ease;
pointer-events: none; /* lets clicks go to the button */
}
.cat-button:hover .cat-overlay {
background: rgba(0,0,0,0.4);
}
/* Responsive – 2 per row on small screens */
@media (max-width: 768px) {
.cat-grid { gap: 16px; }
.cat-overlay { font-size: 1em; }
}