MediaWiki:Common.css - Revision history

Mvuijlst at 19:19, 2 October 2025

2025-10-02T19:19:08Z

← Older revision		Revision as of 19:19, 2 October 2025
Line 151:		Line 151:
	}		}

	/* ===== ~~Hero~~ from infobox image (touch devices only) ===== */		/* ======= Article hero from infobox image (touch devices only) ======= */
	@media (pointer: coarse) {		@media (pointer: coarse) {
	~~/* If JS is enabled, don't show the infobox image in its cell.~~
	~~This prevents the "double image" flash before promotion. */~~
	~~html.client-js table.infobox .infobox-image-cell {~~
	~~display: none !important;~~
	}

	~~/* The hero frame inserted above the title; height is stable immediately. */~~
	.article-hero {		.article-hero {
	width: 100%;		width: 100%;
	aspect-ratio: 10 / 7; /* ~~reserve space —~~ no jump ~~after insert~~ */		aspect-ratio: 10 / 7; /* reserves height: no reflow jump */
	overflow: hidden;		overflow: hidden;
	border-radius: 0 0 8px 8px;		border-radius: 0 0 8px 8px;
	margin: 0 0 1rem 0;		margin: 0 0 1rem 0;
	background: #111;		background: #111;
	contain: layout paint size; ~~/* isolate painting for smoother render */~~		contain: layout paint size;
	transform: translateZ(0); /* ~~promote~~ to ~~its own layer on many GPUs~~ */		transform: translateZ(0);

			/* gentle reveal to avoid flash while cloning */
			opacity: 0;
			transition: opacity .2s ease;
	}		}
			.article-hero.is-ready { opacity: 1; }

	/* Make ~~whatever~~ we ~~moved in (a <span><a><img>…)~~ fill ~~and~~ crop */		/* Make any wrapper we clone fill the crop frame */
	.article-hero a,		.article-hero a,
	.article-hero span,		.article-hero span,
	.article-hero figure,		.article-hero figure,
	.article-hero picture {		.article-hero picture { display: block; height: 100%; }
	display: block; height: 100%;
	}
	.article-hero img, .article-hero video {		.article-hero img, .article-hero video {
	display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;		display: block; width: 100%; height: 100%;
			object-fit: cover; object-position: center;
	}		}
	}		}

Mvuijlst at 19:14, 2 October 2025

2025-10-02T19:14:30Z

← Older revision		Revision as of 19:14, 2 October 2025
Line 151:		Line 151:
	}		}

	/* =====~~== Article hero~~ from infobox image (touch devices only) ======= */		/* ===== Hero from infobox image (touch devices only) ===== */
	@media (pointer: coarse) {		@media (pointer: coarse) {
	/* 10:~~7 container~~ above the title */		/* If JS is enabled, don't show the infobox image in its cell.
			This prevents the "double image" flash before promotion. */
			html.client-js table.infobox .infobox-image-cell {
			display: none !important;
			}

			/* The hero frame inserted above the title; height is stable immediately. */
	.article-hero {		.article-hero {
	width: 100%;		width: 100%;
	aspect-ratio: 10 / 7; /* ~~crop frame~~ */		aspect-ratio: 10 / 7; /* reserve space — no jump after insert */
	overflow: hidden;		overflow: hidden;
	border-radius: 0 0 8px 8px; ~~/* subtle rounding on bottom edges */~~		border-radius: 0 0 8px 8px;
	margin: 0 0 1rem 0; /* ~~space before the title~~ */		margin: 0 0 1rem 0;
	~~background~~: ~~#111~~; /* ~~placeholder while the image decodes~~ */		background: #111;
			contain: layout paint size; /* isolate painting for smoother render */
			transform: translateZ(0); /* promote to its own layer on many GPUs */
			}

			/* Make whatever we moved in (a <span><a><img>…) fill and crop */
			.article-hero a,
			.article-hero span,
			.article-hero figure,
			.article-hero picture {
			display: block; height: 100%;
	}		}
	.article-hero img {		.article-hero img, .article-hero video {
	display: block;		display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
	width: 100%;
	height: 100%;
	object-fit: cover; ~~/* crop to 10:7 */~~
	object-position: center; ~~/* center the crop */~~
	}		}

	~~/* Hide the image cell inside infobox when we've promoted it */~~
	~~.infobox--image-promoted .infobox-image-cell { display: none !important; }~~
	}		}

	/* ~~Optional: dark-mode~~ placeholder tint ~~for when image is still loading~~ */		/* Dark/auto placeholder tint */
	html.skin-theme-clientpref-night .article-hero,		html.skin-theme-clientpref-night .article-hero,
	html.skin-theme-clientpref-dark .article-hero,		html.skin-theme-clientpref-dark .article-hero,

Mvuijlst at 19:03, 2 October 2025

2025-10-02T19:03:47Z

@@ Line 149: / Line 149: @@
      --qf-border: #3c4043;
+   }
+}

Mvuijlst at 18:42, 2 October 2025

2025-10-02T18:42:49Z

@@ Line 69: / Line 69: @@
-/* === Quick facts (touch devices only) === */
+/* ===================== QUICK FACTS (touch devices only) ===================== */
 @media (pointer: coarse) {
    details.quickfacts {
      margin: .5em 0 1em;
-     border: 1px solid #a2a9b1;
+     border: 1px solid var(--qf-border);
      border-radius: 6px;
-     background: #f8f9fa;
+     background: var(--qf-bg);
      overflow: hidden;
+   }
    details.quickfacts > summary.quickfacts-summary {
      cursor: pointer;
      font-weight: 600;
      padding: .6em .8em;
-     background: #eaecf0;
+     background: var(--qf-hdr-bg);
-     list-style: none;              /* some browsers */
+    color: var(--qf-fg);
+   }
    details.quickfacts > summary.quickfacts-summary::-webkit-details-marker { display: none; }
    details.quickfacts > summary.quickfacts-summary::after {
      content: "▾";                 /* closed state chevron */
@@ Line 128: / Line 109: @@
      transition: transform .2s ease;
+   }
    details.quickfacts[open] > summary.quickfacts-summary::after {
-     content: "▴";
+     content: "▴";                 /* open state chevron */
+   }
-   /* Optional: nicer focus state for keyboard users on mobile */
+   /* Optional polish */
    details.quickfacts > summary.quickfacts-summary:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 2px;
      border-radius: 4px;
+   }
+}

Mvuijlst at 18:34, 2 October 2025

2025-10-02T18:34:55Z

@@ Line 108: / Line 108: @@
      background: #2a2e33;
      color: #e8eaed;
+   }
+}

Mvuijlst at 18:28, 2 October 2025

2025-10-02T18:28:31Z

@@ Line 66: / Line 66: @@
    background: #f2f2f2;
    font-weight: 600;
+}

Mvuijlst at 18:01, 2 October 2025

2025-10-02T18:01:05Z

@@ Line 66: / Line 66: @@
    background: #f2f2f2;
    font-weight: 600;
+}

Mvuijlst at 18:00, 2 October 2025

2025-10-02T18:00:52Z

← Older revision		Revision as of 18:00, 2 October 2025
Line 1:		Line 1:
	/* Prevent Chrome auto-boost weirdness */		/* Prevent Chrome auto-boost weirdness */
	html { -webkit-text-size-adjust: 100%; }		html { -webkit-text-size-adjust: 100%; }

			/* ===== Infobox base (light theme default) ===== */
			table.infobox{
			width:22em; max-width:22em; box-sizing:border-box;
			float:right; clear:right; margin:0 0 1em 1em;
			border:1px solid #a2a9b1; background:#f8f9fa; color:inherit;
			font-size:90%; line-height:1.5em;
			/* use 'separate' so table padding works like enwiki */
			border-collapse:separate; border-spacing:0; padding:.5em;
			}

			table.infobox th, table.infobox td{
			padding:.5em .45em; /* enwiki-ish cell padding */
			vertical-align:top;
			}
			table.infobox th{ text-align:left; }

			/* Title — no background by default; 125% and centered */
			table.infobox th.infobox-title{
			text-align:center;
			font-size:125%;
			font-weight:bold;
			background:transparent; /* default: none */
			padding:.35em .45em .3em;
			}

			/* Only apply color when \|color= was set (module adds class + CSS var) */
			table.infobox th.infobox-title.has-title-color{
			background:var(--ib-title-bg);
			}

			/* Image row: remove padding so image can touch the inner edges; make image 100% */
			table.infobox td.infobox-image-cell{
			padding:0;
			}
			table.infobox td.infobox-image-cell img{
			display:block; width:100%; height:auto;
			}

			/* Prevent long strings from breaking layout */
			table.infobox td{ overflow-wrap:anywhere; word-break:break-word; }

			/* Explicit Dark (already present, keep yours) */
			html.skin-theme-clientpref-night table.infobox { background:#1f2327; border-color:#3c4043; color:#e8eaed; }
			html.skin-theme-clientpref-night table.infobox th { background:transparent; color:#e8eaed; }
			html.skin-theme-clientpref-night table.infobox td { background:transparent; color:#e8eaed; }
			html.skin-theme-clientpref-night table.infobox a { color:#8ab4f8; }
			html.skin-theme-clientpref-night table.infobox a:visited { color:#c58af9; }

			/* Automatic + OS is dark */
			@media (prefers-color-scheme: dark) {
			html.skin-theme-clientpref-os table.infobox { background:#1f2327; border-color:#3c4043; color:#e8eaed; }
			html.skin-theme-clientpref-os table.infobox th { background:transparent; color:#e8eaed; }
			html.skin-theme-clientpref-os table.infobox td { background:transparent; color:#e8eaed; }
			html.skin-theme-clientpref-os table.infobox a { color:#8ab4f8; }
			html.skin-theme-clientpref-os table.infobox a:visited { color:#c58af9; }
			/* keep title readable; no special bg unless \|color= was set */
			html.skin-theme-clientpref-os table.infobox th.infobox-title { background: transparent; }
			}


			/* — Light mode: improve infobox label/value contrast; title stays transparent — */
			table.infobox th:not(.infobox-title) {
			background: #f2f2f2;
			font-weight: 600;
			}


			/* === Larger, comfortable article text on phones (Vector 2022) === */

			/* A) Override the tokens at the root for Vector (works whether Vector reads from :root or cascaded scopes) */
			@media (max-width: 768px) {
			html[class*="skin-vector"] {
			--font-size-medium: 180px !important;
			--line-height-medium: 1.65 !important;
			}
			}
			@media (max-width: 480px) {
			html[class*="skin-vector"] {
			--font-size-medium: 190px !important;
			--line-height-medium: 1.7 !important;
			}
			}

			/* B) Also override the computed value exactly where Vector applies it */
			@media (max-width: 768px) {
			html[class*="skin-vector"] .vector-body { font-size: 180px !important; line-height: 1.65 !important; }
			}
			@media (max-width: 480px) {
			html[class*="skin-vector"] .vector-body { font-size: 190px !important; line-height: 1.7 !important; }
			}

			@media (max-width: 768px) {
			.vector-body { outline: 3px solid magenta !important; }
			}

Mvuijlst: Replaced content with "/* Prevent Chrome auto-boost weirdness */ html { -webkit-text-size-adjust: 100%; }"

2025-10-02T18:00:30Z

Replaced content with "Prevent Chrome auto-boost weirdness: html { -webkit-text-size-adjust: 100%; }"

← Older revision		Revision as of 18:00, 2 October 2025
Line 1:		Line 1:
	/* Prevent Chrome auto-boost weirdness */		/* Prevent Chrome auto-boost weirdness */
	html { -webkit-text-size-adjust: 100%; }		html { -webkit-text-size-adjust: 100%; }

	~~/* ===== Infobox base (light theme default) ===== */~~
	~~table.infobox{~~
	~~width:22em; max-width:22em; box-sizing:border-box;~~
	~~float:right; clear:right; margin:0 0 1em 1em;~~
	~~border:1px solid #a2a9b1; background:#f8f9fa; color:inherit;~~
	~~font-size:90%; line-height:1.5em;~~
	~~/* use 'separate' so table padding works like enwiki */~~
	~~border-collapse:separate; border-spacing:0; padding:.5em;~~
	}

	~~table.infobox th, table.infobox td{~~
	~~padding:.5em .45em; /* enwiki-ish cell padding */~~
	~~vertical-align:top;~~
	}
	~~table.infobox th{ text-align:left; }~~

	~~/* Title — no background by default; 125% and centered */~~
	~~table.infobox th.infobox-title{~~
	~~text-align:center;~~
	~~font-size:125%;~~
	~~font-weight:bold;~~
	~~background:transparent; /* default: none */~~
	~~padding:.35em .45em .3em;~~
	}

	~~/* Only apply color when \|color= was set (module adds class + CSS var) */~~
	~~table.infobox th.infobox-title.has-title-color{~~
	~~background:var(--ib-title-bg);~~
	}

	~~/* Image row: remove padding so image can touch the inner edges; make image 100% */~~
	~~table.infobox td.infobox-image-cell{~~
	~~padding:0;~~
	}
	~~table.infobox td.infobox-image-cell img{~~
	~~display:block; width:100%; height:auto;~~
	}

	~~/* Prevent long strings from breaking layout */~~
	~~table.infobox td{ overflow-wrap:anywhere; word-break:break-word; }~~

	~~/* Explicit Dark (already present, keep yours) */~~
	~~html.skin-theme-clientpref-night table.infobox { background:#1f2327; border-color:#3c4043; color:#e8eaed; }~~
	~~html.skin-theme-clientpref-night table.infobox th { background:transparent; color:#e8eaed; }~~
	~~html.skin-theme-clientpref-night table.infobox td { background:transparent; color:#e8eaed; }~~
	~~html.skin-theme-clientpref-night table.infobox a { color:#8ab4f8; }~~
	~~html.skin-theme-clientpref-night table.infobox a:visited { color:#c58af9; }~~

	~~/* Automatic + OS is dark */~~
	~~@media (prefers-color-scheme: dark) {~~
	~~html.skin-theme-clientpref-os table.infobox { background:#1f2327; border-color:#3c4043; color:#e8eaed; }~~
	~~html.skin-theme-clientpref-os table.infobox th { background:transparent; color:#e8eaed; }~~
	~~html.skin-theme-clientpref-os table.infobox td { background:transparent; color:#e8eaed; }~~
	~~html.skin-theme-clientpref-os table.infobox a { color:#8ab4f8; }~~
	~~html.skin-theme-clientpref-os table.infobox a:visited { color:#c58af9; }~~
	~~/* keep title readable; no special bg unless \|color= was set */~~
	~~html.skin-theme-clientpref-os table.infobox th.infobox-title { background: transparent; }~~
	}


	~~/* — Light mode: improve infobox label/value contrast; title stays transparent — */~~
	~~table.infobox th:not(.infobox-title) {~~
	~~background: #f2f2f2;~~
	~~font-weight: 600;~~
	}


	~~/* === Larger, comfortable article text on phones (Vector 2022) === */~~

	~~/* A) Override the tokens at the root for Vector (works whether Vector reads from :root or cascaded scopes) */~~
	~~@media (max-width: 768px) {~~
	~~html[class*="skin-vector"] {~~
	~~--font-size-medium: 180px !important;~~
	~~--line-height-medium: 1.65 !important;~~
	}
	}
	~~@media (max-width: 480px) {~~
	~~html[class*="skin-vector"] {~~
	~~--font-size-medium: 190px !important;~~
	~~--line-height-medium: 1.7 !important;~~
	}
	}

	~~/* B) Also override the computed value exactly where Vector applies it */~~
	~~@media (max-width: 768px) {~~
	~~html[class*="skin-vector"] .vector-body { font-size: 180px !important; line-height: 1.65 !important; }~~
	}
	~~@media (max-width: 480px) {~~
	~~html[class*="skin-vector"] .vector-body { font-size: 190px !important; line-height: 1.7 !important; }~~
	}

	~~@media (max-width: 768px) {~~
	~~.vector-body { outline: 3px solid magenta !important; }~~
	}

Mvuijlst at 17:57, 2 October 2025

2025-10-02T17:57:19Z

← Older revision		Revision as of 17:57, 2 October 2025
Line 74:		Line 74:
	@media (max-width: 768px) {		@media (max-width: 768px) {
	html[class*="skin-vector"] {		html[class*="skin-vector"] {
	--font-size-medium: ~~18px~~ !important;		--font-size-medium: 180px !important;
	--line-height-medium: 1.65 !important;		--line-height-medium: 1.65 !important;
	}		}
Line 80:		Line 80:
	@media (max-width: 480px) {		@media (max-width: 480px) {
	html[class*="skin-vector"] {		html[class*="skin-vector"] {
	--font-size-medium: ~~19px~~ !important;		--font-size-medium: 190px !important;
	--line-height-medium: 1.7 !important;		--line-height-medium: 1.7 !important;
	}		}