use css borders for split button triangle

edit/edit.css

@@ -267,7 +267,7 @@ input:invalid {
 }
 
 #actions .buttons > * {
-  margin: 0 .2rem .5rem 0;
+  margin: 0 .25rem .5rem 0;
 }
 
 #options:not([open]) + #lint h2 {

global.css

@@ -313,13 +313,25 @@ body.resizing-v > * {
 }
 .split-btn-pedal {
   margin-left: -1px !important;
-  padding-left: .2em !important;
-  padding-right: .2em !important;
+  padding-left: .25em !important;
+  padding-right: .25em !important;
   min-width: 0 !important;
 }
 .split-btn-pedal::after {
-  content: '\25BC'; /* down triangle */
-  font-size: 90%;
+  --side: 4px;
+  content: '';
+  border: var(--side) solid transparent;
+  display: inline-block;
+}
+.split-btn-pedal:not(.up)::after {
+  border-top: calc(var(--side) * 1.3) solid currentColor;
+  vertical-align: bottom;
+}
+.split-btn-pedal.up::after {
+  border-bottom: calc(var(--side) * 1.3) solid currentColor;
+  vertical-align: top;
+  position: relative;
+  top: 1px;
 }
 .split-btn-pedal.active {
   box-shadow: inset 0 0 100px rgba(0, 0, 0, .2);

popup.html

@@ -222,7 +222,7 @@
       <div class="split-btn">
         <button id="popup-manage-button" i18n-text="openManage"
                 data-href="manage.html" i18n-title="popupManageTooltip"></button
-        ><button class="split-btn-pedal" i18n-menu-site="popupManageSiteStyles"></button>
+        ><button class="split-btn-pedal up" i18n-menu-site="popupManageSiteStyles"></button>
       </div>
       <button id="popup-options-button" i18n-text="openOptions"></button>
       <button id="popup-wiki-button"

popup/popup.css

@@ -686,9 +686,6 @@ body.blocked .actions > .main-controls {
   flex: 1 1 auto;
   min-width: 2em;
 }
-#popup-manage-button + .split-btn-pedal::after {
-  content: '\25B2'; /* up triangle */
-}
 #popup-manage-button ~ .split-btn-menu {
   bottom: 0;
   transform: translateY(-20px); /* global button style: 13(font) * 1.2(line) + 4(pad) + 2(border) */