MediaWiki:Common.css: Difference between revisions
Appearance
Recent-articles widget: hide stray intro/hatnote images (fixes disambig icon breaking layout) + restore bullet markers |
Recent-articles widget: draw bullets via ::before (native marker swallowed by -webkit-line-clamp box) |
||
| Line 51: | Line 51: | ||
} | } | ||
/* Main Page "recent articles": bold title + teaser clamped to 3 lines */ | /* Main Page "recent articles": bold title + teaser clamped to 3 lines */ | ||
.dpl-recent { margin: 0.3em 0 0 0; padding: 0 0 0 1. | .dpl-recent { list-style: none; margin: 0.3em 0 0 0; padding: 0 0 0 1.3em; } | ||
.dpl-recent li { margin: 0 0 0.6em 0; } | .dpl-recent li { position: relative; list-style: none; margin: 0 0 0.6em 0; } | ||
/* Draw the bullet ourselves: the native list marker gets swallowed because each | |||
teaser sits in a display:-webkit-box element (needed for -webkit-line-clamp). */ | |||
.dpl-recent li::before { | |||
content: "•"; | |||
position: absolute; | |||
left: -1em; | |||
top: 0; | |||
font-weight: bold; | |||
} | |||
/* Keep teasers text-only: an article whose intro starts with an image or a | /* Keep teasers text-only: an article whose intro starts with an image or a | ||
hatnote icon (e.g. a {{disambig}} page) would otherwise float that image into | hatnote icon (e.g. a {{disambig}} page) would otherwise float that image into | ||
Revision as of 13:20, 14 July 2026
/* Larger, easier-to-click form action buttons (Request account, Confirm, etc.) */
input[type="submit"],
input[type="button"],
input[type="reset"] {
font-size: 1.15em;
padding: 0.55em 1.6em;
line-height: 1.4;
cursor: pointer;
}
/* Slightly larger checkboxes and radio buttons */
input[type="checkbox"],
input[type="radio"] {
width: 1.2em;
height: 1.2em;
vertical-align: middle;
cursor: pointer;
}
/* Form fields should match the page text size (they default smaller) */
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select,
.oo-ui-inputWidget-input {
font-size: 1em;
}
/* Roomier wikitext editor – easier to read while editing */
#wpTextbox1 {
line-height: 1.7;
padding: 14px 16px;
}
/* also covers the CodeMirror editor, if syntax highlighting is ever turned on */
.cm-editor .cm-content {
line-height: 1.7 !important;
}
/* Main Page: stack the two columns on phones/small screens */
@media screen and (max-width: 800px) {
#mp-upper,
#mp-upper > tbody,
#mp-upper > tbody > tr {
display: block !important;
width: 100% !important;
}
#mp-upper > tbody > tr > td.MainPageBG {
display: block !important;
width: 100% !important;
border: 1px solid #999 !important;
margin: 0 0 12px 0 !important;
box-sizing: border-box !important;
}
#mp-upper img { max-width: 100% !important; height: auto !important; }
}
/* Main Page "recent articles": bold title + teaser clamped to 3 lines */
.dpl-recent { list-style: none; margin: 0.3em 0 0 0; padding: 0 0 0 1.3em; }
.dpl-recent li { position: relative; list-style: none; margin: 0 0 0.6em 0; }
/* Draw the bullet ourselves: the native list marker gets swallowed because each
teaser sits in a display:-webkit-box element (needed for -webkit-line-clamp). */
.dpl-recent li::before {
content: "•";
position: absolute;
left: -1em;
top: 0;
font-weight: bold;
}
/* Keep teasers text-only: an article whose intro starts with an image or a
hatnote icon (e.g. a {{disambig}} page) would otherwise float that image into
the list and break the layout. */
.dpl-recent figure,
.dpl-recent .thumb,
.dpl-recent img { display: none; }
.dpl-recent .clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}