MediaWiki:Gadget-bhc-accessibility.css - Revision history

Steve: Addes tocuh spacing for the table of contents and some focus help.

2026-01-29T12:54:06Z

Addes tocuh spacing for the table of contents and some focus help.

@@ Line 279: / Line 279: @@
 body.skin-vector .mw-portlet-body li > a > span{
    display: inline-block;
+}

Steve: Addedd bettr links spacing for touch screen.

2026-01-29T12:51:05Z

Addedd bettr links spacing for touch screen.

← Older revision		Revision as of 12:51, 29 January 2026
Line 264:		Line 264:
	body.skin-timeless .mw-portlet-body li,		body.skin-timeless .mw-portlet-body li,
	body.skin-vector .mw-portlet-body li{		body.skin-vector .mw-portlet-body li{
	margin: ~~2px~~ 0; /* keeps list tidy but adds breathing space */		margin: 1.5px 0; /* keeps list tidy but adds breathing space */
	}		}

Line 270:		Line 270:
	body.skin-vector .mw-portlet-body li > a{		body.skin-vector .mw-portlet-body li > a{
	display: inline-block;		display: inline-block;
	padding: 6px ~~8px~~; /* increases hit area */		padding: 4px 6px; /* increases hit area */
	line-height: 1.3;		line-height: 1.3;
	border-radius: 6px; /* optional: helps focus visibility */		border-radius: 6px; /* optional: helps focus visibility */

Steve at 12:46, 29 January 2026

2026-01-29T12:46:02Z

@@ Line 258: / Line 258: @@
     Feature classes
     ========================================================= */
 /* [A11Y-SECTION:high-contrast-black-yellow-blue] */

Steve: Re-organised structure with no rule loss. For the benefit of clarity and later edits.

2026-01-29T12:02:52Z

Re-organised structure with no rule loss. For the benefit of clarity and later edits.

← Older revision		Revision as of 12:02, 29 January 2026
Line 3:		Line 3:
	*/		*/


			/* =========================================================
			Accessibility Gadget CSS — quick navigation
			(No rules reordered; section tags added for readability)
			Search for: [A11Y-SECTION: ...]
			========================================================= */
			/* 01. BHC Accessibility Gadget – MediaWiki / Timeless → [A11Y-SECTION:bhc-accessibility-gadget-mediawiki-timeless] */
			/* 02. Variables → [A11Y-SECTION:variables] */
			/* 03. Skip links (appear when focused) → [A11Y-SECTION:skip-links-appear-when-focused] */
			/* 04. Floating accessibility toggle → [A11Y-SECTION:floating-accessibility-toggle] */
			/* 05. Panel → [A11Y-SECTION:panel] */
			/* 06. Feature classes → [A11Y-SECTION:feature-classes] */
			/* 07. High contrast (black/yellow/blue) → [A11Y-SECTION:high-contrast-black-yellow-blue] */
			/* 08. High contrast presets → [A11Y-SECTION:high-contrast-presets] */
			/* 09. HIGH CONTRAST: Links must be visually distinct → [A11Y-SECTION:high-contrast-links-must-be-visually-distinct] */
			/* 10. Underline links → [A11Y-SECTION:underline-links] */
			/* 11. Text spacing → [A11Y-SECTION:text-spacing] */
			/* 12. Large cursors (wiki-hosted) → [A11Y-SECTION:large-cursors-wiki-hosted] */
			/* 13. Reading ruler → [A11Y-SECTION:reading-ruler] */
			/* 14. MediaWiki: extra HIGH CONTRAST coverage (Timeless + Vector) → [A11Y-SECTION:mediawiki-extra-high-contrast-coverage-timeless-vector] */
			/* 15. HIGH CONTRAST: Footer (Vector + Timeless) → [A11Y-SECTION:high-contrast-footer-vector-timeless] */
			/* 16. Underline links: ensure TOC wins → [A11Y-SECTION:underline-links-ensure-toc-wins] */
			/* 17. HIGH CONTRAST: Header + search + user tools → [A11Y-SECTION:high-contrast-header-search-user-tools] */
			/* 18. HIGH CONTRAST: Personal tools (reduce border clutter) → [A11Y-SECTION:high-contrast-personal-tools-reduce-border-clutter] */
			/* ========================================================= */

			/* [A11Y-SECTION:bhc-accessibility-gadget-mediawiki-timeless] */
	/* =========================================================		/* =========================================================
	BHC Accessibility Gadget – MediaWiki / Timeless		BHC Accessibility Gadget – MediaWiki / Timeless
	========================================================= */		========================================================= */

			/* [A11Y-SECTION:variables] */
	/* ---------------------------------------------------------		/* ---------------------------------------------------------
	Variables		Variables
Line 44:		Line 72:
	}		}

			/* [A11Y-SECTION:skip-links-appear-when-focused] */
	/* ---------------------------------------------------------		/* ---------------------------------------------------------
	Skip links (appear when focused)		Skip links (appear when focused)
Line 89:		Line 118:


			/* [A11Y-SECTION:floating-accessibility-toggle] */
	/* ---------------------------------------------------------		/* ---------------------------------------------------------
	Floating accessibility toggle		Floating accessibility toggle
Line 124:		Line 154:
	}		}

			/* [A11Y-SECTION:panel] */
	/* ---------------------------------------------------------		/* ---------------------------------------------------------
	Panel		Panel
Line 223:		Line 254:
	}		}

			/* [A11Y-SECTION:feature-classes] */
	/* =========================================================		/* =========================================================
	Feature classes		Feature classes
	========================================================= */		========================================================= */

			/* [A11Y-SECTION:high-contrast-black-yellow-blue] */
	/* ------------------------------		/* ------------------------------
	High contrast (black/yellow/blue)		High contrast (black/yellow/blue)
	------------------------------ */		------------------------------ */

			/* [A11Y-SECTION:high-contrast-presets] */
	/* ------------------------------		/* ------------------------------
	High contrast presets		High contrast presets
Line 268:		Line 302:
	}		}

			/* [A11Y-SECTION:high-contrast-links-must-be-visually-distinct] */
	/* =========================================================		/* =========================================================
	HIGH CONTRAST: Links must be visually distinct		HIGH CONTRAST: Links must be visually distinct
Line 358:		Line 393:
	}		}

			/* [A11Y-SECTION:underline-links] */
	/* ------------------------------		/* ------------------------------
	Underline links		Underline links
Line 370:		Line 406:
	}		}

			/* [A11Y-SECTION:text-spacing] */
	/* ------------------------------		/* ------------------------------
	Text spacing		Text spacing
Line 384:		Line 421:
	}		}

			/* [A11Y-SECTION:large-cursors-wiki-hosted] */
	/* ------------------------------		/* ------------------------------
	Large cursors (wiki-hosted)		Large cursors (wiki-hosted)
Line 396:		Line 434:
	}		}

			/* [A11Y-SECTION:reading-ruler] */
	/* ------------------------------		/* ------------------------------
	Reading ruler		Reading ruler
Line 420:		Line 459:
	#a11y-ruler[hidden]{ display:none !important; }		#a11y-ruler[hidden]{ display:none !important; }

			/* [A11Y-SECTION:mediawiki-extra-high-contrast-coverage-timeless-vector] */
	/* =========================================================		/* =========================================================
	MediaWiki: extra HIGH CONTRAST coverage (Timeless + Vector)		MediaWiki: extra HIGH CONTRAST coverage (Timeless + Vector)
Line 495:		Line 535:
	}		}

			/* [A11Y-SECTION:high-contrast-footer-vector-timeless] */
	/* =========================================================		/* =========================================================
	HIGH CONTRAST: Footer (Vector + Timeless)		HIGH CONTRAST: Footer (Vector + Timeless)
Line 532:		Line 573:
	}		}

			/* [A11Y-SECTION:underline-links-ensure-toc-wins] */
	/* =========================================================		/* =========================================================
	Underline links: ensure TOC wins		Underline links: ensure TOC wins
Line 544:		Line 586:
	}		}

			/* [A11Y-SECTION:high-contrast-header-search-user-tools] */
	/* =========================================================		/* =========================================================
	HIGH CONTRAST: Header + search + user tools		HIGH CONTRAST: Header + search + user tools
Line 651:		Line 694:
	}		}

			/* [A11Y-SECTION:high-contrast-personal-tools-reduce-border-clutter] */
	/* =========================================================		/* =========================================================
	HIGH CONTRAST: Personal tools (reduce border clutter)		HIGH CONTRAST: Personal tools (reduce border clutter)

Steve at 10:02, 29 January 2026

2026-01-29T10:02:00Z

Show changes

Steve at 09:17, 29 January 2026

2026-01-29T09:17:14Z

@@ Line 1,102: / Line 1,102: @@
 body.a11y-contrast a *,
 body.a11y-contrast a:visited *{
    color: inherit !important;
+}

Steve: Final change to using variables.

2026-01-29T09:05:02Z

Final change to using variables.

@@ Line 1,084: / Line 1,084: @@
 body.a11y-contrast .mw-portlet-body a:visited{
    color: var(--a11y-contrast-fg) !important;
+}

Steve: Full css for both contrast colour schemes plus the css is variable driven.

2026-01-29T09:02:14Z

Full css for both contrast colour schemes plus the css is variable driven.

@@ Line 17: / Line 17: @@
    --a11y-link-underline: #3366CC; /* MediaWiki link blue */
    --a11y-menu-width: 340px;
+}
 /* Timeless: stop skin CSS shrinking the accessibility icon */
@@ Line 242: / Line 240: @@
    --a11y-contrast-fg: #FFD400;
    --a11y-contrast-fg-hover: #FFE066;
-   --a11y-contrast-link: #36C; /* MediaWiki blue */
+   --a11y-contrast-link: var(--a11y-contrast-fg); /* same as text */
    --a11y-contrast-border-70: rgba(255,212,0,.7);
    --a11y-contrast-border-75: rgba(255,212,0,.75);
@@ Line 1,055: / Line 1,053: @@
 body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a:visited *{
    color: inherit !important;
+}

Steve at 08:41, 29 January 2026

2026-01-29T08:41:34Z

← Older revision		Revision as of 08:41, 29 January 2026
Line 17:		Line 17:
	--a11y-link-underline: #3366CC; /* MediaWiki link blue */		--a11y-link-underline: #3366CC; /* MediaWiki link blue */
	--a11y-menu-width: 340px;		--a11y-menu-width: 340px;
			--a11y-contrast-fg: #FFD400;
	}		}


	/* Timeless: stop skin CSS shrinking the accessibility icon */		/* Timeless: stop skin CSS shrinking the accessibility icon */

Steve at 08:26, 29 January 2026

2026-01-29T08:26:15Z

Show changes