MediaWiki:Common.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* CSS placed here will be applied to all skins */
.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;
}
}
.wp-contrib-cta {
display: flex;
justify-content: center;
margin: 1rem 0;
}
/* layout */
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; /* soft indigo focus ring */
outline-offset: 3px;
}
.wp-contrib-cta__icon,
.wp-contrib-cta__arrow {
/* fixed space so the label stays visually centered,
even with icons on both sides */
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);
}
}
body.page-Main_Page #firstHeading,
body.page-Main_Page .firstHeading,
body.page-Main_Page h1.firstHeading {
display: none !important;
}
body.page-Main_Page #siteSub,
body.page-Main_Page .mw-body h1,
body.page-Main_Page #contentSub {
display: none !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}