MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* ---------- DULL CATEGORY BUTTONS WITH ALWAYS-VISIBLE OVERLAY ---------- */ | /* ---------- DULL CATEGORY BUTTONS WITH ALWAYS-VISIBLE OVERLAY + MARGIN ---------- */ | ||
.cat-button { | .cat-button { | ||
position: relative; | position: relative; | ||
| Line 10: | Line 10: | ||
border-radius: 8px; | border-radius: 8px; | ||
overflow: hidden; | overflow: hidden; | ||
background: | background: transparent; /* ← NO default color under button */ | ||
transition: box-shadow 0.2s ease; | transition: box-shadow 0.2s ease; | ||
} | } | ||
| Line 24: | Line 24: | ||
} | } | ||
/* Always-visible overlay */ | /* Always-visible overlay with margin */ | ||
.cat-button .cat-overlay { | .cat-button .cat-overlay { | ||
position: absolute; | position: absolute; | ||
| Line 33: | Line 33: | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
justify | justify-content: center; | ||
background: rgba(0, 0, 0, 0.42); | |||
pointer-events: none; | |||
padding: 16px; /* ← MARGIN around text */ | |||
box-sizing: border-box; | |||
} | |||
.cat-button .cat-label { | |||
color: #fff; | |||
font-size: 1.15em; | |||
font-weight: 600; | |||
text-shadow: 0 1px 4px rgba(0,0,0,0.6); | |||
padding: 10px 16px; /* inner padding */ | |||
background: rgba(0, 0, 0, 0.35); | |||
border-radius: 6px; | |||
max-width: 90%; /* prevents overflow */ | |||
word-wrap: break-word; | |||
} | |||
Revision as of 09:34, 16 November 2025
/* ---------- DULL CATEGORY BUTTONS WITH ALWAYS-VISIBLE OVERLAY + MARGIN ---------- */
.cat-button {
position: relative;
display: block;
width: 200px;
margin: 0 auto;
text-align: center;
text-decoration: none;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
border-radius: 8px;
overflow: hidden;
background: transparent; /* ← NO default color under button */
transition: box-shadow 0.2s ease;
}
.cat-button:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.cat-button img {
display: block;
width: 100%;
height: auto;
}
/* Always-visible overlay with margin */
.cat-button .cat-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.42);
pointer-events: none;
padding: 16px; /* ← MARGIN around text */
box-sizing: border-box;
}
.cat-button .cat-label {
color: #fff;
font-size: 1.15em;
font-weight: 600;
text-shadow: 0 1px 4px rgba(0,0,0,0.6);
padding: 10px 16px; /* inner padding */
background: rgba(0, 0, 0, 0.35);
border-radius: 6px;
max-width: 90%; /* prevents overflow */
word-wrap: break-word;
}