MediaWiki:Common.css: Difference between revisions
CaptainChris (talk | contribs) No edit summary Tag: Reverted |
CaptainChris (talk | contribs) No edit summary Tag: Manual revert |
||
| Line 48: | Line 48: | ||
} | } | ||
/* layout */ | /* layout */ | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
gap: 0.75rem; | gap: 0.75rem; | ||
width: min(100%, 28rem); | width: min(100%, 28rem); | ||
padding: 0.9rem 1.2rem; | padding: 0.9rem 1.2rem; | ||
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%); | background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%); | ||
color: #fff; | color: #fff; | ||
border-radius: 999px; | border-radius: 999px; | ||
font-weight: 700; | font-weight: 700; | ||
font-size: clamp(14px, 2.8vw, 18px); | font-size: clamp(14px, 2.8vw, 18px); | ||
text-decoration: none; | text-decoration: none; | ||
box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35), | box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35), | ||
0 2px 6px rgba(0, 0, 0, 0.15); | |||
border: 1px solid rgba(255,255,255,0.18); | border: 1px solid rgba(255,255,255,0.18); | ||
transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease; | transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease; | ||
} | } | ||
| Line 88: | Line 88: | ||
.wp-contrib-cta__icon, | .wp-contrib-cta__icon, | ||
.wp-contrib-cta__arrow { | .wp-contrib-cta__arrow { | ||
/* fixed space so the label stays visually centered, | |||
even with icons on both sides */ | |||
width: 1.5em; | width: 1.5em; | ||
height: 1.5em; | height: 1.5em; | ||
| Line 135: | Line 137: | ||
position: relative; | position: relative; | ||
float: right; | float: right; | ||
margin: -2em 0 1em 1em; | margin: -2em 0 1em 1em; /* pull upward to remove top gap */ | ||
width: 300px; | width: 300px; | ||
font-size: 90%; | font-size: 90%; | ||
background: #ffffff; | background: #ffffff; | ||
border: 1px solid #b8d4f1; | border: 1px solid #b8d4f1; /* soft blue border */ | ||
padding: | padding: 2px; | ||
overflow: hidden; | overflow: hidden; /* fix weird float spacing */ | ||
box-shadow: 0 1px 3px rgba(0, 50, 100, 0.1); | box-shadow: 0 1px 3px rgba(0, 50, 100, 0.1); | ||
border-radius: 4px; | border-radius: 4px; | ||
clear: none !important; | clear: none !important; /* prevent forced drop below title */ | ||
z-index: 1; | z-index: 1; /* makes sure it stacks above content if overlapping slightly */ | ||
} | } | ||
| Line 166: | Line 167: | ||
} | } | ||
/* optional: specific fix for MW heading float glitch */ | |||
.mw-body-content > .infobox { | .mw-body-content > .infobox { | ||
margin-top: -2em !important; | margin-top: -2em !important; | ||
| Line 177: | Line 179: | ||
/* --- title --- */ | /* --- title --- */ | ||
.infobox-title { | .infobox-title { | ||
background: #3b82f6; | background: #3b82f6; /* bright medium blue */ | ||
color: #ffffff; | color: #ffffff; | ||
padding: | padding-top: 8px; | ||
padding-bottom: 8px; | |||
border-radius: 2px 2px 0 0; | border-radius: 2px 2px 0 0; | ||
} | |||
.infobox > .infobox-title { | |||
font-weight: bold; | |||
text-align: center; | text-align: center; | ||
font-size: 120%; | font-size: 120%; | ||
border: none; | |||
} | |||
/* --- lists + layout --- */ | |||
.infobox th + td > ul { | |||
list-style: none; | |||
margin-left: unset; | |||
} | } | ||
| Line 192: | Line 203: | ||
text-align: center; | text-align: center; | ||
padding: 4px; | padding: 4px; | ||
} | |||
.infobox-imagearea > div:not(:first-child) { | |||
padding-top: 1em; | |||
} | |||
/* horizontally center animated images */ | |||
.mw-body-content .infobox-imagearea .animated { | |||
display: inline-flex; | |||
align-items: center; | |||
} | |||
/* infobox gallery tweaks */ | |||
.infobox-imagearea li.gallerybox div.thumb { | |||
background: none; | |||
border: none; | |||
margin: 0; | margin: 0; | ||
} | } | ||
.infobox-imagearea > div: | .infobox-imagearea ul.gallery, | ||
padding- | .infobox-imagearea li.gallerybox, | ||
.infobox-imagearea li.gallerybox div.thumb > div { | |||
margin: 0 !important; | |||
} | |||
.infobox-imagearea li.gallerybox div.gallerytext { | |||
font-weight: bold; | |||
font-size: 100%; | |||
padding: 0; | |||
} | |||
/* --- tabber tweaks --- */ | |||
.infobox-imagearea .tabber .tabbertab, | |||
.infobox-imagearea ul.tabbernav li a, | |||
.infobox-imagearea ul.tabbernav li.tabberactive a { | |||
background: none; | |||
border: none; | |||
} | |||
.infobox-imagearea ul.tabbernav { | |||
font: inherit; | |||
font-size: 100%; | |||
} | |||
.infobox-imagearea ul.tabbernav li a:hover, | |||
.infobox-imagearea ul.tabbernav li.tabberactive a:hover { | |||
color: #0d47a1; /* deep blue hover */ | |||
} | |||
.infobox-imagearea ul.tabbernav > li { | |||
margin-bottom: 5px; | |||
padding: 0; | |||
} | |||
.infobox-imagearea ul.tabbernav > li > a { | |||
color: #2763c4; /* standard blue tab text */ | |||
padding-bottom: 1px; | |||
display: block; | |||
} | |||
/* prevent tab text jump */ | |||
.infobox-imagearea ul.tabbernav > li > a::before { | |||
display: block; | |||
content: attr(alt); | |||
font-weight: bold; | |||
height: 0; | |||
color: transparent; | |||
overflow: hidden; | |||
visibility: hidden; | |||
} | |||
.infobox-imagearea ul.tabbernav > li.tabberactive { | |||
border: none; | |||
} | |||
.infobox-imagearea ul.tabbernav > li.tabberactive > a { | |||
font-weight: bold; | |||
border-bottom: 2px solid #3b82f6; /* blue active underline */ | |||
color: #1e40af; /* darker blue active text */ | |||
} | } | ||
| Line 206: | Line 291: | ||
border-collapse: collapse !important; | border-collapse: collapse !important; | ||
border-spacing: 0; | border-spacing: 0; | ||
} | } | ||
.infobox-rows tr:nth-child(2n) { | .infobox-rows tr:nth-child(2n) { | ||
background-color: #f0f7ff; | background-color: #f0f7ff; /* light blue alternating rows */ | ||
} | } | ||
| Line 221: | Line 301: | ||
white-space: nowrap; | white-space: nowrap; | ||
color: #0d47a1; | color: #0d47a1; | ||
} | } | ||
.infobox-rows | .mw-body-content .infobox-rows p { | ||
margin: 0; | |||
} | |||
/* merge adjacent dls */ | |||
.infobox-rows dl + dl { | |||
margin-top: -0.4em; | |||
} | |||
.infobox-rows dl:last-child { | |||
margin-bottom: 0.2em; | |||
} | } | ||
| Line 236: | Line 322: | ||
background: #e8f2ff; | background: #e8f2ff; | ||
border-top: 1px solid #b8d4f1; | border-top: 1px solid #b8d4f1; | ||
padding: | padding: 4px; | ||
font-style: italic; | font-style: italic; | ||
} | } | ||
/* Hide empty paragraph after infobox */ | /* hide debug JSON */ | ||
.history-json { | |||
display: none; | |||
} | |||
/* Hide stray empty paragraph that appears after infobox templates */ | |||
.mw-parser-output > .infobox + p:empty, | .mw-parser-output > .infobox + p:empty, | ||
.mw-parser-output > .infobox + p:has(> br:only-child) { | .mw-parser-output > .infobox + p:has(> br:only-child) { | ||