From 629e0509b8cc2baeda477ed1724285dd4a1fe3a7 Mon Sep 17 00:00:00 2001
From: Fomafix <fomafix@googlemail.com>
Date: Sat, 9 Feb 2019 17:21:07 +0100
Subject: [PATCH] Use CSS instead of Unicode to create triangles

The Unicode characters have a different shape based on the font.

Bug: T184792
Change-Id: Ia5e506f25067558cb9f879c7d1dca707ea795603
---
 modules/ext.categoryTree.styles.css | 58 +++++++++++++++++++----------
 1 file changed, 39 insertions(+), 19 deletions(-)

diff --git a/modules/ext.categoryTree.styles.css b/modules/ext.categoryTree.styles.css
index db546f1f..b97503df 100644
--- a/modules/ext.categoryTree.styles.css
+++ b/modules/ext.categoryTree.styles.css
@@ -112,32 +112,52 @@
  * that includes a bullet in the HTML from showing two bullets. After the cache
  * has expired the :empty selectors can be removed.
  */
-/* @noflip */
-body.ltr .CategoryTreeEmptyBullet:empty:before,
-body.ltr .CategoryTreeToggle[ data-ct-state='collapsed' ]:empty:before,
-body.mediawiki .mw-content-ltr .CategoryTreeEmptyBullet:empty:before,
-body.mediawiki .mw-content-ltr .CategoryTreeToggle[ data-ct-state='collapsed' ]:empty:before,
-body.mediawiki .mw-content-rtl .mw-content-ltr .CategoryTreeEmptyBullet:empty:before,
-body.mediawiki .mw-content-rtl .mw-content-ltr .CategoryTreeToggle[ data-ct-state='collapsed' ]:empty:before {
-	content: '►';
+.CategoryTreeEmptyBullet:empty,
+.CategoryTreeToggle:empty,
+.CategoryTreePageBullet {
+	display: inline-block;
+	width: 0;
+	height: 0;
+}
+
+.CategoryTreeEmptyBullet:empty,
+.CategoryTreeToggle[ data-ct-state='collapsed' ]:empty {
+	border-top: 5px solid transparent;
+	border-left: 10px solid;
+	border-bottom: 5px solid transparent;
+	border-right: 0 none;
 }
 
 /* @noflip */
-body.rtl .CategoryTreeEmptyBullet:empty:before,
-body.rtl .CategoryTreeToggle[ data-ct-state='collapsed' ]:empty:before,
-body.mediawiki .mw-content-rtl .CategoryTreeEmptyBullet:empty:before,
-body.mediawiki .mw-content-rtl .CategoryTreeToggle[ data-ct-state='collapsed' ]:empty:before,
-body.mediawiki .mw-content-ltr .mw-content-rtl .CategoryTreeEmptyBullet:empty:before,
-body.mediawiki .mw-content-ltr .mw-content-rtl .CategoryTreeToggle[ data-ct-state='collapsed' ]:empty:before {
-	content: '◄';
+.mw-content-ltr .CategoryTreeEmptyBullet:empty,
+.mw-content-ltr .CategoryTreeToggle[ data-ct-state='collapsed' ]:empty,
+.mw-content-rtl .mw-content-ltr .CategoryTreeEmptyBullet:empty,
+.mw-content-rtl .mw-content-ltr .CategoryTreeToggle[ data-ct-state='collapsed' ]:empty {
+	border-left: 10px solid;
+	/* The following @noflip is necessary to prevent the flipping. (T288943) */
+	/* @noflip */
+	border-right: 0 none;
 }
 
-.CategoryTreeToggle[ data-ct-state='expanded' ]:empty:before {
-	content: '▼';
+/* @noflip */
+.mw-content-rtl .CategoryTreeEmptyBullet:empty,
+.mw-content-rtl .CategoryTreeToggle[ data-ct-state='collapsed' ]:empty,
+.mw-content-ltr .mw-content-rtl .CategoryTreeEmptyBullet:empty,
+.mw-content-ltr .mw-content-rtl .CategoryTreeToggle[ data-ct-state='collapsed' ]:empty {
+	border-right: 10px solid;
+	/* The following @noflip is necessary to prevent the flipping. (T288943) */
+	/* @noflip */
+	border-left: 0 none;
 }
 
-.CategoryTreePageBullet:before {
-	content: '\A0';
+.CategoryTreeToggle[ data-ct-state='expanded' ]:empty {
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-top: 10px solid;
+}
+
+.CategoryTreePageBullet {
+	border-left: 10px solid transparent;
 }
 
 .CategoryTreeLabelPage {