MediaWiki:Common.css - Revision history

LGBT-HP: Before/after slider: force mw-default-size image wrappers to block

2026-07-15T07:10:10Z

Before/after slider: force mw-default-size image wrappers to block

← Older revision		Revision as of 07:10, 15 July 2026
Line 78:		Line 78:
	.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 { 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 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-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 { 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; }

LGBT-HP: Before/after slider: styles

2026-07-15T07:05:00Z

Before/after slider: styles

← Older revision		Revision as of 07:05, 15 July 2026
Line 75:		Line 75:
	overflow: hidden;		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 .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; }

LGBT-HP: Recent-articles widget: draw bullets via ::before (native marker swallowed by -webkit-line-clamp box)

2026-07-14T13:20:42Z

Recent-articles widget: draw bullets via ::before (native marker swallowed by -webkit-line-clamp box)

← Older revision		Revision as of 13:20, 14 July 2026
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

LGBT-HP: Recent-articles widget: hide stray intro/hatnote images (fixes disambig icon breaking layout) + restore bullet markers

2026-07-14T13:11:43Z

Recent-articles widget: hide stray intro/hatnote images (fixes disambig icon breaking layout) + restore bullet markers

← Older revision		Revision as of 13:11, 14 July 2026
Line 1:		Line 1:
	~~/* 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;~~
	}
	/* Larger, easier-to-click form action buttons (Request account, Confirm, etc.) */		/* Larger, easier-to-click form action buttons (Request account, Confirm, etc.) */
	input[type="submit"],		input[type="submit"],
Line 59:		Line 50:
	#mp-upper img { max-width: 100% !important; height: auto !important; }		#mp-upper img { max-width: 100% !important; height: auto !important; }
	}		}
	/* Main Page "recent articles": bold title + teaser clamped to 2 lines */		/* Main Page "recent articles": bold title + teaser clamped to 3 lines */
	.dpl-recent { margin: 0.3em 0 0 ~~1.4em~~; padding: 0; }		.dpl-recent { margin: 0.3em 0 0 0; padding: 0 0 0 1.5em; }
	.dpl-recent li { margin: 0 0 0.6em 0; }		.dpl-recent li { margin: 0 0 0.6em 0; }
			/* 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 {		.dpl-recent .clamp {
	display: -webkit-box;		display: -webkit-box;

LGBT-HP at 19:41, 13 July 2026

2026-07-13T19:41:46Z

← Older revision		Revision as of 19:41, 13 July 2026
Line 64:		Line 64:
	.dpl-recent .clamp {		.dpl-recent .clamp {
	display: -webkit-box;		display: -webkit-box;
	-webkit-line-clamp: 2;		-webkit-line-clamp: 3;
	line-clamp: 2;		line-clamp: 3;
	-webkit-box-orient: vertical;		-webkit-box-orient: vertical;
	overflow: hidden;		overflow: hidden;
	}		}

LGBT-HP at 19:32, 13 July 2026

2026-07-13T19:32:36Z

@@ Line 58: / Line 58: @@
+   }
    #mp-upper img { max-width: 100% !important; height: auto !important; }
+}

LGBT-HP: mobile

2026-07-11T22:02:46Z

mobile

@@ Line 41: / Line 41: @@
 .cm-editor .cm-content {
 	line-height: 1.7 !important;
+}

LGBT-HP: Roomier wikitext editor – easier to read while editing

2026-07-11T15:44:25Z

Roomier wikitext editor – easier to read while editing

@@ Line 32: / Line 32: @@
 .oo-ui-inputWidget-input {
 	font-size: 1em;
+}

LGBT-HP: text in form fields should not be smaller than the text on the page (ie labels)

2026-07-11T14:43:42Z

text in form fields should not be smaller than the text on the page (ie labels)

← Older revision		Revision as of 14:43, 11 July 2026
Line 25:		Line 25:
	vertical-align: middle;		vertical-align: middle;
	cursor: pointer;		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;
	}		}

LGBT-HP at 22:56, 10 July 2026

2026-07-10T22:56:44Z

@@ Line 6: / Line 6: @@
 	padding: 0.55em 1.6em;
 	line-height: 1.4;
 	cursor: pointer;
+}