MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
mNo edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* ---------- IMAGE-ONLY BUTTONS – | /* ---------- IMAGE-ONLY BUTTONS – BLOCK CITIZEN THEME (div-safe) ---------- */ | ||
.cat-grid { | .cat-grid { | ||
display: flex; | display: flex; | ||
| Line 10: | Line 10: | ||
} | } | ||
/* | /* DIV button – RESET ALL CITIZEN CARD STYLES */ | ||
.cat-button { | .cat-button { | ||
position: relative; | position: relative; | ||
display: block; | display: block !important; | ||
line-height: 0; | line-height: 0 !important; | ||
margin: 0 !important; | |||
padding: 0 !important; | |||
border: none; | border: none !important; | ||
border-radius: 0 !important; | |||
background: none !important; | |||
box-shadow: none !important; | |||
overflow: visible !important; | |||
transition: transform 0.25s ease; | transition: transform 0.25s ease; | ||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
/* | /* HOVER: only lift */ | ||
.cat-button:hover, | .cat-button:hover, | ||
.cat-button:focus { | .cat-button:focus { | ||
transform: translateY(-4px); | transform: translateY(-4px); | ||
outline: none !important; | |||
} | } | ||
/* | /* IMAGE = FULL BUTTON */ | ||
.cat-button img { | .cat-button img { | ||
width: 100%; | width: 100%; | ||
| Line 40: | Line 41: | ||
padding: 0; | padding: 0; | ||
border: 0; | border: 0; | ||
vertical-align: top; | |||
} | } | ||
/* | /* OVERLAY TEXT */ | ||
.cat-overlay { | .cat-overlay { | ||
position: absolute; | position: absolute; | ||
| Line 56: | Line 58: | ||
padding: 8px; | padding: 8px; | ||
pointer-events: none; | pointer-events: none; | ||
background: rgba(0,0,0,0.3); | background: rgba(0,0,0,0.3); | ||
transition: background 0.25s ease; | transition: background 0.25s ease; | ||
} | } | ||
.cat-button:hover .cat-overlay { | .cat-button:hover .cat-overlay { | ||
background: rgba(0,0,0,0.5); | background: rgba(0,0,0,0.5); | ||
} | } | ||
/* | /* RESPONSIVE */ | ||
@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 10:04, 16 November 2025
/* ---------- IMAGE-ONLY BUTTONS – BLOCK CITIZEN THEME (div-safe) ---------- */
.cat-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
max-width: 960px;
margin: 30px auto;
padding: 0 12px;
}
/* DIV button – RESET ALL CITIZEN CARD STYLES */
.cat-button {
position: relative;
display: block !important;
line-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
overflow: visible !important;
transition: transform 0.25s ease;
cursor: pointer;
}
/* HOVER: only lift */
.cat-button:hover,
.cat-button:focus {
transform: translateY(-4px);
outline: none !important;
}
/* IMAGE = FULL BUTTON */
.cat-button img {
width: 100%;
height: auto;
display: block;
margin: 0;
padding: 0;
border: 0;
vertical-align: top;
}
/* OVERLAY TEXT */
.cat-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 1.1em;
text-shadow: 0 1px 3px rgba(0,0,0,0.7);
text-align: center;
padding: 8px;
pointer-events: none;
background: rgba(0,0,0,0.3);
transition: background 0.25s ease;
}
.cat-button:hover .cat-overlay {
background: rgba(0,0,0,0.5);
}
/* RESPONSIVE */
@media (max-width: 768px) {
.cat-grid { gap: 16px; }
.cat-overlay { font-size: 1em; }
}