From b4b135826ca8f05badd0f7ecf66faf866584ad31 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sat, 22 Jan 2022 12:06:29 +0300
Subject: [PATCH] use css borders for split button triangle

---
 edit/edit.css   |  2 +-
 global.css      | 20 ++++++++++++++++----
 popup.html      |  2 +-
 popup/popup.css |  3 ---
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/edit/edit.css b/edit/edit.css
index 9008a798..28011872 100644
--- a/edit/edit.css
+++ b/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 {
diff --git a/global.css b/global.css
index 6f4613bc..e6c9229a 100644
--- a/global.css
+++ b/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);
diff --git a/popup.html b/popup.html
index b83df58f..c700be32 100644
--- a/popup.html
+++ b/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"
diff --git a/popup/popup.css b/popup/popup.css
index 97763ca0..ece8aedb 100644
--- a/popup/popup.css
+++ b/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) */