MediaWiki:Common.css: Difference between revisions

Latest revision as of 07:10, 15 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;
}
/* Before/after image slider (Template:Before after) */
.ba-slider { position: relative; display: block; margin: 0.6em 0; overflow: hidden; line-height: 0; user-select: none; -webkit-user-select: none; touch-action: none; cursor: ew-resize; }
.ba-slider img { display: block; width: 100%; height: auto; }
.ba-slider .mw-default-size, .ba-slider .mw-default-size > span { display: block; }
.ba-slider .ba-after-wrap { position: absolute; top: 0; left: 0; width: 100%; clip-path: inset(0 0 0 50%); -webkit-clip-path: inset(0 0 0 50%); }
.ba-slider .ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 4px rgba( 0, 0, 0, 0.55 ); pointer-events: none; }
.ba-slider .ba-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; transform: translate( -50%, -50% ); border-radius: 50%; background: #fff; box-shadow: 0 0 5px rgba( 0, 0, 0, 0.4 ); }
.ba-slider .ba-handle::before { content: "\276E \276F"; position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50% ); z-index: 1; font: 13px/1 sans-serif; color: #555; letter-spacing: 2px; white-space: nowrap; }
.ba-slider .ba-label { position: absolute; top: 8px; padding: 2px 8px; font: 12px/1.4 sans-serif; color: #fff; background: rgba( 0, 0, 0, 0.55 ); border-radius: 3px; pointer-events: none; }
.ba-slider .ba-label-before { left: 8px; }
.ba-slider .ba-label-after { right: 8px; }
.ba-caption { font-size: 0.85em; color: #555; margin: 0.2em 0 0.7em; line-height: 1.4; }
.ba-caption:empty { display: none; }