MediaWiki:Common.css: Difference between revisions
CaptainChris (talk | contribs) No edit summary Tag: Reverted |
CaptainChris (talk | contribs) Undo revision 321 by CaptainChris (talk) Tag: Undo |
||
| (23 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* ============================== | |||
GLOBAL LAYOUT / PAGE STYLES | |||
============================== */ | |||
/* Base page container */ | |||
.mp-container { | |||
display: flex; | |||
align-items: flex-start; | |||
gap: 20px; | |||
box-sizing: border-box; | |||
} | |||
.mp-left { | |||
flex: 1 1 auto; | |||
min-width: 0; | |||
} | |||
/* Right sidebar */ | |||
.mp-right { | |||
flex: 0 0 320px; | |||
max-width: 100%; | |||
box-sizing: border-box; | |||
border-left: 1px solid #e0e0e0; | |||
padding-left: 16px; | |||
margin-left: 4px; | |||
} | |||
.mp-right > * { | |||
width: 100%; | |||
} | |||
@media (max-width: 900px) { | |||
.mp-container { | |||
flex-direction: column; | |||
} | |||
.mp-right { | |||
flex: none; | |||
width: 100%; | |||
border-left: 0; | |||
border-top: 1px solid #e0e0e0; | |||
padding-left: 0; | |||
padding-top: 12px; | |||
margin-left: 0; | |||
margin-top: 12px; | |||
} | |||
} | |||
/* ============================== | |||
CONTRIBUTION CTA BUTTON | |||
============================== */ | |||
.wp-contrib-cta { | |||
display: flex; | |||
justify-content: center; | |||
margin: 1rem 0; | |||
} | |||
.wp-contrib-cta__btn { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 0.75rem; | |||
width: min(100%, 28rem); | |||
padding: 0.9rem 1.2rem; | |||
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%); | |||
color: #fff; | |||
border-radius: 999px; | |||
font-weight: 700; | |||
font-size: clamp(14px, 2.8vw, 18px); | |||
text-decoration: none; | |||
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); | |||
transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease; | |||
} | |||
.wp-contrib-cta__btn:hover { | |||
transform: translateY(-1px); | |||
box-shadow: 0 14px 30px rgba(37, 99, 235, 0.45), | |||
0 4px 10px rgba(0, 0, 0, 0.18); | |||
filter: brightness(1.03); | |||
} | |||
.wp-contrib-cta__btn:active { | |||
transform: translateY(0); | |||
box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35), | |||
0 2px 6px rgba(0, 0, 0, 0.14); | |||
} | |||
.wp-contrib-cta__btn:focus-visible { | |||
outline: 3px solid #a5b4fc; | |||
outline-offset: 3px; | |||
} | |||
.wp-contrib-cta__icon, | |||
.wp-contrib-cta__arrow { | |||
width: 1.5em; | |||
height: 1.5em; | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
flex: 0 0 1.5em; | |||
line-height: 1; | |||
} | |||
.wp-contrib-cta__text { | |||
text-align: center; | |||
flex: 0 1 auto; | |||
line-height: 1.2; | |||
} | |||
@media (prefers-reduced-motion: no-preference) { | |||
.wp-contrib-cta__btn:hover .wp-contrib-cta__arrow { | |||
transform: translateX(2px); | |||
transition: transform 120ms ease; | |||
} | |||
} | |||
@media (prefers-color-scheme: dark) { | |||
.wp-contrib-cta__btn { | |||
border-color: rgba(255, 255, 255, 0.22); | |||
} | |||
} | |||
/* ============================== | |||
MAIN PAGE HEADING HIDES | |||
============================== */ | |||
body.page-Main_Page #firstHeading, | body.page-Main_Page #firstHeading, | ||
body.page-Main_Page .firstHeading, | body.page-Main_Page .firstHeading, | ||
body.page-Main_Page h1.firstHeading { | body.page-Main_Page h1.firstHeading { | ||
display: none !important; | |||
} | } | ||
| Line 8: | Line 136: | ||
body.page-Main_Page .mw-body h1, | body.page-Main_Page .mw-body h1, | ||
body.page-Main_Page #contentSub { | body.page-Main_Page #contentSub { | ||
display: none !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
border: none !important; | border: none !important; | ||
} | |||
/* ============================== | |||
INFOBOX | |||
============================== */ | |||
.infobox { | |||
float: right; | |||
clear: right; | |||
width: 280px; | |||
margin: 0 0 1em 1em; | |||
background: #f9f9f9; | |||
border: 1px solid #aaa; | |||
font-size: 90%; | |||
color: #000; | |||
border-collapse: collapse; | |||
} | |||
@media (max-width: 600px) { | |||
.infobox { | |||
float: none; | |||
margin: 0 auto 1em auto; | |||
width: 100%; | |||
} | |||
} | |||
/* title */ | |||
.infobox-title { | |||
background: #b0c4de; | |||
text-align: center; | |||
font-weight: bold; | |||
font-size: 110%; | |||
padding: 3px 4px; | |||
border-bottom: 1px solid #aaa; | |||
} | |||
/* image */ | |||
.infobox-imagearea { | |||
text-align: center; | |||
background: #fff; | |||
padding: 4px; | |||
border-bottom: 1px solid #aaa; | |||
} | |||
.infobox-imagearea img { | |||
max-width: 100%; | |||
height: auto; | |||
} | |||
/* rows */ | |||
.infobox-rows { | |||
width: 100%; | |||
border-collapse: collapse; | |||
} | |||
.infobox-rows th, | |||
.infobox-rows td { | |||
padding: 2px 5px; /* tighter spacing */ | |||
vertical-align: top; | |||
border-bottom: 1px solid #ddd; | |||
} | |||
.infobox-rows th { | |||
text-align: left; | |||
font-weight: bold; | |||
width: 35%; | |||
background: #f2f2f2; | |||
} | |||
.infobox-rows td { | |||
background: #fff; | |||
} | |||
/* footer */ | |||
.infobox-footer { | |||
text-align: center; | |||
font-style: italic; | |||
background: #f2f2f2; | |||
border-top: 1px solid #aaa; | |||
padding: 3px; | |||
font-size: 85%; | |||
} | |||
/* spacing fix */ | |||
.mw-parser-output > .infobox + p { | |||
margin-top: 0 !important; | |||
} | |||
.infobox td p:empty, | |||
.infobox td p:has(br) { | |||
display: none !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
} | |||
.infobox-section th { | |||
background: #b0c4de !important; | |||
color: #000; | |||
text-align: center; | |||
font-weight: bold; | |||
border-bottom: 1px solid #aaa; | |||
padding: 4px; | |||
} | |||
.infobox .infobox-section{ | |||
background: var(--quaternary, #5865f2); | |||
color:#fff; | |||
text-align:left; | |||
padding:.35em .6em; | |||
font-weight:600; | |||
} | |||
.infobox .infobox-section{ | |||
display:block; | |||
background: var(--quaternary, #5865f2); | |||
color:#fff; | |||
padding:.4em .6em; | |||
font-weight:600; | |||
border-radius:4px; | |||
margin:.5em 0; | |||
} | } | ||