MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
mNo edit summary Tag: Manual revert |
No edit summary |
||
| Line 1: | Line 1: | ||
/* ---------- DULL CATEGORY BUTTONS | /* ---------- DULL CATEGORY BUTTONS (ONLY DIVS) ---------- */ | ||
.cat-grid { | |||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: center; | |||
gap: 24px; | |||
max-width: 960px; | |||
margin: 30px auto; | |||
padding: 0 12px; | |||
} | |||
.cat-button { | .cat-button { | ||
flex: 0 1 200px; | |||
text-decoration: none; | text-decoration: none; | ||
border-radius: 8px; | border-radius: 8px; | ||
overflow: hidden; | overflow: hidden; | ||
background: | background: #f9f9f9; | ||
box-shadow: 0 2px 6px rgba(0,0,0,0.08); | |||
transition: all 0.25s ease; | |||
cursor: pointer; | |||
display: flex; | |||
flex-direction: column; | |||
} | } | ||
.cat-button:hover { | .cat-button:hover, | ||
box-shadow: 0 | .cat-button:focus { | ||
background: #f5f5f5; | |||
box-shadow: 0 5px 12px rgba(0,0,0,0.14); | |||
transform: translateY(-3px); | |||
} | } | ||
.cat-button img { | .cat-button img { | ||
width: 100%; | width: 100%; | ||
height: auto; | height: auto; | ||
display: block; | |||
border-bottom: 1px solid #eee; | |||
flex-shrink: 0; | |||
} | } | ||
.cat-label { | |||
padding: 10px 8px; | |||
font-size: 0.95em; | |||
color: #333; | |||
font-weight: 500; | |||
text-align: center; | |||
flex-grow: 1; | |||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
} | } | ||
/* Responsive: 2 per row on small screens */ | |||
@media (max-width: 768px) { | |||
.cat-grid { gap: 16px; } | |||
.cat-button { flex: 0 1 calc(50% - 8px); } | |||
} | } | ||
Revision as of 09:48, 16 November 2025
/* ---------- DULL CATEGORY BUTTONS (ONLY DIVS) ---------- */
.cat-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
max-width: 960px;
margin: 30px auto;
padding: 0 12px;
}
.cat-button {
flex: 0 1 200px;
text-decoration: none;
border-radius: 8px;
overflow: hidden;
background: #f9f9f9;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
transition: all 0.25s ease;
cursor: pointer;
display: flex;
flex-direction: column;
}
.cat-button:hover,
.cat-button:focus {
background: #f5f5f5;
box-shadow: 0 5px 12px rgba(0,0,0,0.14);
transform: translateY(-3px);
}
.cat-button img {
width: 100%;
height: auto;
display: block;
border-bottom: 1px solid #eee;
flex-shrink: 0;
}
.cat-label {
padding: 10px 8px;
font-size: 0.95em;
color: #333;
font-weight: 500;
text-align: center;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
/* Responsive: 2 per row on small screens */
@media (max-width: 768px) {
.cat-grid { gap: 16px; }
.cat-button { flex: 0 1 calc(50% - 8px); }
}