|
/* Global */
/* CSS placed here will be applied to all skins */
/* Keep header and page clean */
.mw-page-container {
max-width: 100%;
}
.vector-header-container,
.vector-sticky-header-container {
border-bottom: 1px solid #eaecf0;
}
}
/* 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,
video,
}
/* MobileMain layoutpage */
.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;
font-size margin: 0 0 1.5rem !important0;
}
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: block !importantflex;
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 {
displaypadding: block1.2rem !important0.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 {
displayborder-bottom: blocknone;
width: 100%;
overflow-x: auto;
white-space: nowrap;
}
}
|