MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
Content deleted Content added
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* Global */ |
|||
/* CSS placed here will be applied to all skins */ |
|||
/* Keep header and page clean */ |
|||
.mw-page-container { |
.mw-page-container { |
||
max-width: 100%; |
max-width: 100%; |
||
} |
|||
.vector-header-container, |
|||
.vector-sticky-header-container { |
|||
border-bottom: 1px solid #eaecf0; |
|||
} |
} |
||
| Line 16: | Line 9: | ||
} |
} |
||
/* Clean tables */ |
|||
.wikitable { |
|||
font-size: 0.95rem; |
|||
border-collapse: collapse; |
|||
} |
|||
.wikitable th, |
|||
.wikitable td { |
|||
padding: 0.5em 0.75em; |
|||
} |
|||
/* Make general content safer on small screens */ |
|||
img, |
img, |
||
video, |
video, |
||
| Line 40: | Line 21: | ||
} |
} |
||
/* |
/* Main page */ |
||
.mp-banner { |
|||
@media (max-width: 768px) { |
|||
background: #cfe8f1; |
|||
/* Reduce page side padding */ |
|||
border: 1px solid #222; |
|||
.mw-body, |
|||
padding: 2rem 1rem; |
|||
.vector-body { |
|||
text-align: center; |
|||
padding-left: 0.75rem !important; |
|||
font-size: 2.2rem; |
|||
padding-right: 0.75rem !important; |
|||
font-weight: 700; |
|||
} |
|||
margin: 0 0 1rem 0; |
|||
} |
|||
.mp-toplinks { |
|||
/* Welcome banner */ |
|||
display: grid; |
|||
.mainpage-banner { |
|||
grid-template-columns: repeat(3, 1fr); |
|||
width: 100% !important; |
|||
background: #cfe8f1; |
|||
box-sizing: border-box; |
|||
border: 1px solid #222; |
|||
padding: 1rem !important; |
|||
margin: 0 0 1.5rem 0; |
|||
} |
|||
line-height: 1.4 !important; |
|||
text-align: center; |
|||
} |
|||
.mp-toplinks > div { |
|||
/* Top quick links table must stop behaving like a table */ |
|||
padding: 1.5rem 1rem; |
|||
.mainpage-links, |
|||
text-align: center; |
|||
.mainpage-links tbody, |
|||
border-right: 1px solid #222; |
|||
.mainpage-links tr { |
|||
display: flex; |
|||
align-items: center; |
|||
width: 100% !important; |
|||
justify-content: center; |
|||
} |
|||
min-height: 90px; |
|||
} |
|||
.mp-toplinks > div:last-child { |
|||
.mainpage-links td, |
|||
border-right: none; |
|||
.mainpage-links th { |
|||
} |
|||
display: block !important; |
|||
width: 100% !important; |
|||
box-sizing: border-box; |
|||
text-align: center; |
|||
padding: 1rem 0.75rem !important; |
|||
border-left: none !important; |
|||
border-right: none !important; |
|||
border-top: 1px solid #a2a9b1 !important; |
|||
white-space: normal !important; |
|||
} |
|||
.mp-sections { |
|||
.mainpage-links tr:first-child td:first-child, |
|||
display: grid; |
|||
.mainpage-links tr:first-child th:first-child { |
|||
grid-template-columns: 1fr 1fr 0.8fr; |
|||
border-top: none !important; |
|||
border: 1px solid #a2a9b1; |
|||
} |
|||
background: #f8f9fa; |
|||
} |
|||
.mp-section { |
|||
/* Main section table must also stop behaving like a table */ |
|||
padding: 1rem; |
|||
.mainpage-sections, |
|||
border-right: 1px solid #a2a9b1; |
|||
.mainpage-sections tbody, |
|||
} |
|||
.mainpage-sections tr { |
|||
display: block !important; |
|||
.mp-section:last-child { |
|||
width: 100% !important; |
|||
border-right: none; |
|||
} |
|||
.mp-section h2 { |
|||
margin: 0 0 0.75rem 0; |
|||
font-size: 1.3rem; |
|||
text-align: center; |
|||
border-bottom: 1px solid #a2a9b1; |
|||
padding-bottom: 0.5rem; |
|||
} |
|||
.mp-section ul { |
|||
margin: 0; |
|||
padding-left: 1.2rem; |
|||
} |
|||
.mp-section li { |
|||
margin: 0.45rem 0; |
|||
} |
|||
@media (max-width: 768px) { |
|||
.mw-body, |
|||
.vector-body { |
|||
padding-left: 0.75rem !important; |
|||
padding-right: 0.75rem !important; |
|||
} |
} |
||
.mp-banner { |
|||
.mainpage-sections td, |
|||
font-size: 1.5rem; |
|||
.mainpage-sections th { |
|||
padding: 1.2rem 0.8rem; |
|||
width: 100% !important; |
|||
box-sizing: border-box; |
|||
padding: 0.9rem !important; |
|||
white-space: normal !important; |
|||
border-left: none !important; |
|||
border-right: none !important; |
|||
} |
} |
||
.mp-toplinks, |
|||
.mainpage-sections th { |
|||
.mp-sections { |
|||
text-align: center; |
|||
grid-template-columns: 1fr; |
|||
font-size: 1.1rem; |
|||
} |
} |
||
.mp-toplinks > div, |
|||
/* Let long links wrap normally */ |
|||
.mp-section { |
|||
.mainpage-sections a, |
|||
border-right: none; |
|||
.mainpage-links a { |
|||
border-bottom: 1px solid #a2a9b1; |
|||
white-space: normal !important; |
|||
word-break: break-word; |
|||
} |
} |
||
.mp-toplinks > div:last-child, |
|||
/* Optional: make normal wikitable content scroll instead of crushing */ |
|||
.mp-section:last-child { |
|||
.wikitable { |
|||
border-bottom: none; |
|||
width: 100%; |
|||
overflow-x: auto; |
|||
white-space: nowrap; |
|||
} |
} |
||
} |
} |
||
Revision as of 15:43, 7 April 2026
/* Global */
.mw-page-container {
max-width: 100%;
}
.mw-body {
font-size: 0.98rem;
line-height: 1.6;
}
img,
video,
iframe {
max-width: 100%;
height: auto;
}
pre,
code {
overflow-x: auto;
}
/* Main page */
.mp-banner {
background: #cfe8f1;
border: 1px solid #222;
padding: 2rem 1rem;
text-align: center;
font-size: 2.2rem;
font-weight: 700;
margin: 0 0 1rem 0;
}
.mp-toplinks {
display: grid;
grid-template-columns: repeat(3, 1fr);
background: #cfe8f1;
border: 1px solid #222;
margin: 0 0 1.5rem 0;
}
.mp-toplinks > div {
padding: 1.5rem 1rem;
text-align: center;
border-right: 1px solid #222;
display: flex;
align-items: center;
justify-content: center;
min-height: 90px;
}
.mp-toplinks > div:last-child {
border-right: none;
}
.mp-sections {
display: grid;
grid-template-columns: 1fr 1fr 0.8fr;
border: 1px solid #a2a9b1;
background: #f8f9fa;
}
.mp-section {
padding: 1rem;
border-right: 1px solid #a2a9b1;
}
.mp-section:last-child {
border-right: none;
}
.mp-section h2 {
margin: 0 0 0.75rem 0;
font-size: 1.3rem;
text-align: center;
border-bottom: 1px solid #a2a9b1;
padding-bottom: 0.5rem;
}
.mp-section ul {
margin: 0;
padding-left: 1.2rem;
}
.mp-section li {
margin: 0.45rem 0;
}
@media (max-width: 768px) {
.mw-body,
.vector-body {
padding-left: 0.75rem !important;
padding-right: 0.75rem !important;
}
.mp-banner {
font-size: 1.5rem;
padding: 1.2rem 0.8rem;
}
.mp-toplinks,
.mp-sections {
grid-template-columns: 1fr;
}
.mp-toplinks > div,
.mp-section {
border-right: none;
border-bottom: 1px solid #a2a9b1;
}
.mp-toplinks > div:last-child,
.mp-section:last-child {
border-bottom: none;
}
}