MediaWiki:Mobile.css: Difference between revisions
Appearance
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* ========================= | /* ========================= | ||
ACCESSIBLE | VECTOR 2022 MOBILE (ACCESSIBLE) | ||
========================= */ | ========================= */ | ||
/* Prevent | /* Prevent iOS font auto-scaling issues */ | ||
html { | html { | ||
-webkit-text-size-adjust: 100%; | -webkit-text-size-adjust: 100%; | ||
-ms-text-size-adjust: 100%; | |||
text-size-adjust: 100%; | |||
} | } | ||
/* | /* Base layout */ | ||
body, | body, | ||
.vector-body, | |||
.mw-body, | .mw-body, | ||
. | .mw-parser-output { | ||
font-size: 22px; | font-size: 22px !important; | ||
line-height: 1.8 | line-height: 1.8 !important; | ||
max-width: 100%; | max-width: 100%; | ||
overflow-x: hidden; | overflow-x: hidden; | ||
word-wrap: break-word; | |||
overflow-wrap: break-word; | |||
padding-left: 14px; | padding-left: 14px; | ||
padding-right: 14px; | padding-right: 14px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
/* Paragraphs */ | /* Paragraphs + general text */ | ||
p, | p, | ||
li, | li, | ||
td, | td, | ||
th { | th { | ||
font-size: 1rem; | font-size: 1rem !important; | ||
line-height: 1.8; | line-height: 1.8 !important; | ||
} | } | ||
/* Headings */ | /* Headings */ | ||
h1 { | h1 { | ||
font-size: 2.2rem; | font-size: 2.2rem !important; | ||
line-height: 1.2; | line-height: 1.2; | ||
} | } | ||
h2 { | h2 { | ||
font-size: 1.8rem; | font-size: 1.8rem !important; | ||
line-height: 1.3; | line-height: 1.3; | ||
} | } | ||
h3 { | h3 { | ||
font-size: 1. | font-size: 1.4rem !important; | ||
line-height: 1.4; | line-height: 1.4; | ||
} | } | ||
/* Infobox */ | /* Infobox (mobile-friendly) */ | ||
.infobox { | .infobox { | ||
float: none; | float: none !important; | ||
width: 100%; | width: 100% !important; | ||
max-width: 100%; | max-width: 100% !important; | ||
margin: 1em 0; | margin: 1em 0 !important; | ||
padding: 14px; | padding: 14px; | ||
border: 1px solid #aaa; | border: 1px solid #aaa; | ||
background | background: #f9f9f9; | ||
font-size: 1rem !important; | |||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
/* Tables */ | /* Tables */ | ||
table { | table { | ||
display: block; | |||
width: 100%; | width: 100%; | ||
max-width: 100%; | |||
overflow-x: auto; | overflow-x: auto; | ||
border-collapse: collapse; | border-collapse: collapse; | ||
| Line 82: | Line 82: | ||
a { | a { | ||
word-break: break-word; | word-break: break-word; | ||
overflow-wrap: break-word; | |||
} | } | ||
| Line 96: | Line 90: | ||
select, | select, | ||
textarea { | textarea { | ||
font-size: 1rem; | font-size: 1rem !important; | ||
} | } | ||
| Line 102: | Line 96: | ||
pre, | pre, | ||
code { | code { | ||
font-size: 0.9rem; | |||
overflow-x: auto; | overflow-x: auto; | ||
max-width: 100%; | max-width: 100%; | ||
font-size: | } | ||
/* Sidebar / navigation cleanup */ | |||
#mw-panel, | |||
.vector-sidebar, | |||
.vector-toc { | |||
font-size: 1rem; | |||
width: 100%; | |||
} | } | ||
Revision as of 23:17, 15 May 2026
/* =========================
VECTOR 2022 MOBILE (ACCESSIBLE)
========================= */
/* Prevent iOS font auto-scaling issues */
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* Base layout */
body,
.vector-body,
.mw-body,
.mw-parser-output {
font-size: 22px !important;
line-height: 1.8 !important;
max-width: 100%;
overflow-x: hidden;
word-wrap: break-word;
overflow-wrap: break-word;
padding-left: 14px;
padding-right: 14px;
box-sizing: border-box;
}
/* Paragraphs + general text */
p,
li,
td,
th {
font-size: 1rem !important;
line-height: 1.8 !important;
}
/* Headings */
h1 {
font-size: 2.2rem !important;
line-height: 1.2;
}
h2 {
font-size: 1.8rem !important;
line-height: 1.3;
}
h3 {
font-size: 1.4rem !important;
line-height: 1.4;
}
/* Infobox (mobile-friendly) */
.infobox {
float: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 1em 0 !important;
padding: 14px;
border: 1px solid #aaa;
background: #f9f9f9;
font-size: 1rem !important;
box-sizing: border-box;
}
/* Tables */
table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
border-collapse: collapse;
}
/* Images */
img {
max-width: 100%;
height: auto;
}
/* Links */
a {
word-break: break-word;
overflow-wrap: break-word;
}
/* Forms */
input,
button,
select,
textarea {
font-size: 1rem !important;
}
/* Code blocks */
pre,
code {
font-size: 0.9rem;
overflow-x: auto;
max-width: 100%;
}
/* Sidebar / navigation cleanup */
#mw-panel,
.vector-sidebar,
.vector-toc {
font-size: 1rem;
width: 100%;
}