From 27493a1dd73f41c07f04ca5d89d001e340a9feec Mon Sep 17 00:00:00 2001
From: Akash Yeole <97229205+akashyeole@users.noreply.github.com>
Date: Thu, 28 Mar 2024 05:05:22 +0530
Subject: [PATCH] doc: fix arrow vertical alignment in HTML version

This commit fixes the alignment of the bullet points (green arrow) under
'Node.js <version> documentation' by drawing a triangle in CSS instead
of using an ASCII char.

PR-URL: https://github.com/nodejs/node/pull/52193
Reviewed-By: Antoine du Hamel <duhamelantoine1995@gmail.com>
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Reviewed-By: Moshe Atlow <moshe@atlow.co.il>
---
 doc/api_assets/style.css | 37 +++++++++++++++++++++----------------
 doc/template.html        |  2 +-
 tools/doc/html.mjs       |  6 +++---
 3 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css
index 674a218a882..073d202b3cb 100644
--- a/doc/api_assets/style.css
+++ b/doc/api_assets/style.css
@@ -182,27 +182,32 @@ li.picker-header {
   position: relative;
 }
 
-li.picker-header .collapsed-arrow, li.picker-header .expanded-arrow {
-  width: 1.5ch;
-  height: 1.5em;
-}
-
-li.picker-header .collapsed-arrow {
+li.picker-header .picker-arrow {
   display: inline-block;
+  width: .6rem;
+  height: .6rem;
+  border-top: .3rem solid transparent;
+  border-bottom: .3rem solid transparent;
+  border-left: .6rem solid var(--color-links);
+  border-right: none;
+  margin: 0 .2rem .05rem 0;
 }
 
-li.picker-header .expanded-arrow {
-  display: none;
+li.picker-header a:focus .picker-arrow,
+li.picker-header a:active .picker-arrow,
+li.picker-header a:hover .picker-arrow {
+  border-left: .6rem solid var(--white);
 }
 
-li.picker-header.expanded .collapsed-arrow, 
-:root:not(.has-js) li.picker-header:hover .collapsed-arrow {
-  display: none;
-}
-
-li.picker-header.expanded .expanded-arrow, 
-:root:not(.has-js) li.picker-header:hover .expanded-arrow {
-  display: inline-block;
+li.picker-header.expanded a:focus .picker-arrow,
+li.picker-header.expanded a:active .picker-arrow,
+li.picker-header.expanded a:hover .picker-arrow,
+:root:not(.has-js) li.picker-header:hover .picker-arrow  {
+  border-top: .6rem solid var(--white);
+  border-bottom: none;
+  border-left: .35rem solid transparent;
+  border-right: .35rem solid transparent;
+  margin-bottom: 0;
 }
 
 li.picker-header.expanded > a,
diff --git a/doc/template.html b/doc/template.html
index 658c8d94cd0..ab8be0e747f 100644
--- a/doc/template.html
+++ b/doc/template.html
@@ -60,7 +60,7 @@
             __ALTDOCS__
             <li class="picker-header">
               <a href="#">
-                <span class="collapsed-arrow">&#x25ba;</span><span class="expanded-arrow">&#x25bc;</span>
+                <span class="picker-arrow"></span>
                 Options
               </a>
         
diff --git a/tools/doc/html.mjs b/tools/doc/html.mjs
index 95782efe03d..ff1c6854b58 100644
--- a/tools/doc/html.mjs
+++ b/tools/doc/html.mjs
@@ -528,7 +528,7 @@ function altDocs(filename, docCreated, versions) {
   return list ? `
     <li class="picker-header">
       <a href="#">
-        <span class="collapsed-arrow">&#x25ba;</span><span class="expanded-arrow">&#x25bc;</span>
+        <span class="picker-arrow"></span>
         Other versions
       </a>
       <div class="picker"><ol id="alt-docs">${list}</ol></div>
@@ -558,7 +558,7 @@ function gtocPicker(id) {
   return `
     <li class="picker-header">
       <a href="#">
-        <span class="collapsed-arrow">&#x25ba;</span><span class="expanded-arrow">&#x25bc;</span>
+        <span class="picker-arrow"></span>
         Index
       </a>
 
@@ -575,7 +575,7 @@ function tocPicker(id, content) {
   return `
     <li class="picker-header">
       <a href="#">
-        <span class="collapsed-arrow">&#x25ba;</span><span class="expanded-arrow">&#x25bc;</span>
+        <span class="picker-arrow"></span>
         Table of contents
       </a>