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: #52193
Reviewed-By: Antoine du Hamel <[email protected]>
Reviewed-By: Luigi Pinca <[email protected]>
Reviewed-By: Moshe Atlow <[email protected]>

Author: akashyeole

doc/api_assets/style.css

@@ -183,27 +183,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 {
-  display: inline-block;
-}
-
-li.picker-header .expanded-arrow {
-  display: none;
-}
-
-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 {
+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 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 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,

doc/template.html

@@ -60,7 +60,7 @@ <h1>Node.js __VERSION__ documentation</h1>
             __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>
 

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>