MediaWiki:Common.css - Revision history

Admin: set-tile-vert: show vertical pack facsimiles without banner crop

2026-09-24T18:15:27Z

set-tile-vert: show vertical pack facsimiles without banner crop

@@ Line 287: / Line 287: @@
    word-wrap: break-word;
+}
 /* Narrow viewports: collapse legacy Vector sidebar + kill Vector ~500px min-width / header overflow */
 @media (max-width: 720px) {

2026-09-24T13:38:25Z

revert viewport: keep card-device-narrow Objective stack; no site-wide device-width

← Older revision		Revision as of 13:38, 24 September 2026
Line 472:		Line 472:
	}		}

	/* ~~Belt-and-suspenders~~: html.card-device-narrow from Common.js when screen.width ≤720		/* Primary phone path with viewport width=1120: html.card-device-narrow from
	~~(real phone)~~. ~~Media-query~~ path above still ~~applies once viewport is device-width~~. */		Common.js when screen.width ≤720. @media path above still helps desktop resize. */
	html.card-device-narrow .card-rail-dual.card-rail-responsive {		html.card-device-narrow .card-rail-dual.card-rail-responsive {
	width: 280px;		width: 280px;

2026-09-24T13:32:12Z

viewport/phone: card-device-narrow belt for Objective responsive portraits

@@ Line 470: / Line 470: @@
      margin: 0 0 0.45em;
+   }
+}

2026-09-24T13:16:08Z

card-rail-responsive / card-portraits-responsive: max-width 720px stacks dual Objective portraits

@@ Line 457: / Line 457: @@
    height: auto;
+}
 .card-nav {
    font-size: 0.9em;

2026-09-24T13:03:21Z

card-portraits-row flex side-by-side; card-rail-dual 580px for Objective sample

← Older revision		Revision as of 13:03, 24 September 2026
Line 63:		Line 63:
	}		}

	/* Search immediately right of the logo column — text field only, no overlay buttons */		/* Search immediately right of the logo column â€” text field only, no overlay buttons */
	#p-search {		#p-search {
	position: absolute !important;		position: absolute !important;
Line 278:		Line 278:
	word-break: normal;		word-break: normal;
	hyphens: auto;		hyphens: auto;
	min-height: 2.6em; /* dampen uneven rows from ~~2–3~~ line titles */		min-height: 2.6em; /* dampen uneven rows from 2â€“3 line titles */
	}		}
	.set-tile .set-meta {		.set-tile .set-meta {
Line 433:		Line 433:
	border: 1px solid #ccc;		border: 1px solid #ccc;
	background: #111;		background: #111;
			}

			.card-rail-dual {
			width: 580px;
			}
			.card-portraits-row {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			gap: 0.45em;
			margin: 0 0 0.45em;
			align-items: flex-start;
			}
			.card-portraits-row > p {
			display: none;
			}
			.card-portraits-row .card-portrait {
			margin: 0;
			flex: 0 0 auto;
			}
			.card-portraits-row .card-portrait img {
			width: 280px;
			height: auto;
	}		}
	.card-nav {		.card-nav {
Line 481:		Line 504:

	/* Card hover popup: size from natural image aspect (portrait OR landscape sites).		/* Card hover popup: size from natural image aspect (portrait OR landscape sites).
	Do NOT clamp every card to vertical 450x630 — that scrunches horizontal locations. */		Do NOT clamp every card to vertical 450x630 â€” that scrunches horizontal locations. */
	#swccg-card-zoom {		#swccg-card-zoom {
	display: none;		display: none;

2026-09-24T00:54:05Z

CardLink zoom: landscape sites keep natural aspect (no portrait clamp scrunch)

← Older revision		Revision as of 00:54, 24 September 2026
Line 480:		Line 480:
	}		}

			/* Card hover popup: size from natural image aspect (portrait OR landscape sites).
			Do NOT clamp every card to vertical 450x630 — that scrunches horizontal locations. */
	#swccg-card-zoom {		#swccg-card-zoom {
	display: none;		display: none;
	position: fixed;		position: fixed;
	z-index: 10000;		z-index: 10000;
	~~height: 630px;~~
	width: auto;		width: auto;
	max-width: ~~465px~~;		height: auto;
			max-height: min(630px, 92vh);
			max-width: min(900px, 92vw);
			object-fit: contain;
	pointer-events: none;		pointer-events: none;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);		box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
Line 494:		Line 498:
	#swccg-card-zoom.is-on {		#swccg-card-zoom.is-on {
	display: block;		display: block;
			}
			#swccg-card-zoom.is-landscape {
			max-height: min(520px, 85vh);
			max-width: min(920px, 94vw);
	}		}

2026-09-23T17:42:15Z

mobile: static search/personal; Main Page wikitable fixed; mw-head clip

@@ Line 310: / Line 310: @@
      max-width: 100%;
      box-sizing: border-box;
+   }
    #left-navigation,
    #right-navigation {
@@ Line 317: / Line 323: @@
      max-width: 100%;
+   }
-   #p-search {
+   /* Absolute #p-search was extending scrollWidth past viewport (~523 on 390) */
      max-width: 100%;
-     box-sizing: border-box;
+     table-layout: fixed;
+   }
+}

2026-09-23T17:32:46Z

set-tile wrap + mobile header min-width

← Older revision		Revision as of 17:32, 23 September 2026
Line 287:		Line 287:
	word-wrap: break-word;		word-wrap: break-word;
	}		}
	/* Narrow viewports: collapse legacy Vector sidebar ~~so tiles do not force horizontal scroll~~ */		/* Narrow viewports: collapse legacy Vector sidebar + kill Vector ~500px min-width / header overflow */
	@media (max-width: 720px) {		@media (max-width: 720px) {
			html,
			body {
			max-width: 100%;
			overflow-x: clip;
			}
	#mw-panel,		#mw-panel,
	.vector-legacy-sidebar {		.vector-legacy-sidebar {
	display: none !important;		display: none !important;
	}		}
			/* skins.vector.styles.legacy historically sets min-width ~500px on content chrome */
	#content,		#content,
	.mw-body,		.mw-body,
			#mw-page-base,
			#mw-head-base,
	#footer {		#footer {
			min-width: 0 !important;
	margin-left: 0 !important;		margin-left: 0 !important;
	}		}
	~~/* backstop only — primary fix is sidebar + content margin */~~		#mw-head {
	~~body~~ {		max-width: 100%;
	~~overflow~~-x: ~~clip~~;		box-sizing: border-box;
			}
			#p-personal,
			#left-navigation,
			#right-navigation {
			float: none;
			max-width: 100%;
			}
			#p-search {
			max-width: 100%;
			box-sizing: border-box;
	}		}
	}		}

2026-09-23T17:22:27Z

set-tile wrap + mobile sidebar

@@ Line 252: / Line 252: @@
 .set-tile {
    display: inline-block;
    width: 168px;
    margin: 0.3em 0.45em 0.85em;
    text-align: center;
@@ Line 260: / Line 262: @@
+}
 .set-tile img {
    width: 160px;
    height: 110px;
    object-fit: cover;
@@ Line 270: / Line 274: @@
    display: block;
    margin-top: 0.25em;
+}
 .set-tile .set-meta {
@@ Line 275: / Line 284: @@
    color: #54595d;
    font-size: 0.92em;
+}

2026-09-23T15:55:02Z

set-tile object-fit cover