MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 28: | Line 28: | ||
background: linear-gradient(135deg, #226065 0%, #1f4b4f 60%, #17373a 100%); | background: linear-gradient(135deg, #226065 0%, #1f4b4f 60%, #17373a 100%); | ||
border-radius: 16px; | border-radius: 16px; | ||
padding: 22px | padding: 28px 28px 22px 28px; /* more breathing room */ | ||
color: #fff; | color: #fff; | ||
box-shadow: 0 10px 30px rgba(0,0,0,.15); | box-shadow: 0 10px 30px rgba(0,0,0,.15); | ||
| Line 34: | Line 34: | ||
.bc-hero h1 { | .bc-hero h1 { | ||
margin: 0 0 | margin: 0 0 10px 0; | ||
font-size: | font-size: 34px; | ||
line-height: 1. | line-height: 1.12; | ||
} | } | ||
| Line 42: | Line 42: | ||
margin: 0; | margin: 0; | ||
opacity: .92; | opacity: .92; | ||
max-width: | max-width: 920px; | ||
font-size: 16px; | |||
line-height: 1.55; | |||
margin-top: 2px; | |||
margin-bottom: 14px; | |||
} | } | ||
.bc-hero .bc-meta { | .bc-hero .bc-meta { | ||
margin-top: 10px; | margin-top: 10px; | ||
margin-bottom: 14px; | |||
font-size: 13px; | font-size: 13px; | ||
opacity: .9; | opacity: .9; | ||
| Line 57: | Line 62: | ||
color: rgba(255,255,255,.85); | color: rgba(255,255,255,.85); | ||
margin-top: 10px; | margin-top: 10px; | ||
} | } | ||
| Line 121: | Line 99: | ||
/* ============================================================ | /* ============================================================ | ||
Pills | Pills (UPDATED: bigger + more padding + guaranteed wrap) | ||
============================================================ */ | ============================================================ */ | ||
| Line 127: | Line 105: | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
gap: 10px; | gap: 10px 12px; /* prevents overlap + adds breathing room */ | ||
margin-top: 10px; | margin-top: 10px; | ||
} | } | ||
.bc-pill { | .bc-pill { | ||
padding: | display: inline-flex; | ||
align-items: center; | |||
justify-content: center; | |||
padding: 8px 14px; /* bigger click target */ | |||
border-radius: 999px; | border-radius: 999px; | ||
border: 1px solid rgba(255,255,255,. | border: 1px solid rgba(255,255,255,.22); | ||
background: rgba(255,255,255,. | background: rgba(255,255,255,.14); | ||
font-size: | |||
font-size: 14px; /* slightly larger */ | |||
line-height: 1.1; | |||
white-space: nowrap; | white-space: nowrap; | ||
box-shadow: inset 0 1px 0 rgba(255,255,255,.10); | box-shadow: inset 0 1px 0 rgba(255,255,255,.10); | ||
transition: background .15s ease, transform .12s ease, box-shadow .12s ease, border-color .12s ease; | |||
} | } | ||
| Line 154: | Line 140: | ||
.bc-pill:hover { | .bc-pill:hover { | ||
background: rgba(255,255,255,. | background: rgba(255,255,255,.22); | ||
border-color: rgba(255,255,255,. | border-color: rgba(255,255,255,.30); | ||
transform: translateY(-1px); | |||
box-shadow: 0 4px 12px rgba(0,0,0,.18); | |||
} | |||
/* Slightly roomier on small screens (helps long labels) */ | |||
@media (max-width: 600px) { | |||
.bc-pill { | |||
padding: 9px 16px; | |||
font-size: 13px; | |||
} | |||
} | } | ||
| Line 417: | Line 413: | ||
} | } | ||
/* Internet link grid */ | /* ============================================================ | ||
Internet link grid | |||
============================================================ */ | |||
.bc-linkgrid{ | .bc-linkgrid{ | ||
display:grid; | display:grid; | ||