Jump to content

MediaWiki:Common.css: Difference between revisions

From LGBT History Project
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.5em; }
.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;
}