From 29416898b8ce4cbbe102070de2b6f37df59c0118 Mon Sep 17 00:00:00 2001
From: Simon Lydell <simon.lydell@gmail.com>
Date: Wed, 14 Sep 2016 18:52:24 +0200
Subject: [PATCH] Simplify styling for highlighted markers

Let's try _only_ changing the background color, to bright green. This
particular green does stand out compared to other markers, and does not
obscure the text, in my opinion. Green is also commonly associated with
success -- in this case, having successfully filtered your way to a
specific link.

To make the above easier, I replaced the border and matched-char colors
with semi-transparent black, so that they work on the green background
as well.
---
 documentation/commands.md | 2 +-
 documentation/options.md  | 2 +-
 documentation/styling.md  | 2 +-
 extension/skin/style.css  | 8 +++-----
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/documentation/commands.md b/documentation/commands.md
index 0738dca..a30346f 100644
--- a/documentation/commands.md
+++ b/documentation/commands.md
@@ -280,7 +280,7 @@ For the `F` and `et` commands, holding ctrl makes them open links in the same
 tab instead, as if you’d used the `f` command. Holding alt toggles whether to
 open tabs in the background or foreground—it makes `F` work like `et`, and `et`
 like `F`. As mentioned in [Hint auto-activation], the best hint is highlighted
-with a different border, and can be activated by pressing `<enter>`. Holding alt
+with a different color, and can be activated by pressing `<enter>`. Holding alt
 or ctrl works there too: `<c-enter>` toggles same/new tab and `<a-enter>`
 toggles background/foreground tab.
 
diff --git a/documentation/options.md b/documentation/options.md
index ce63cf2..fd36c5b 100644
--- a/documentation/options.md
+++ b/documentation/options.md
@@ -236,7 +236,7 @@ simply begin typing the text of the link you wish to follow.
 
 The marker (or marker<strong>s</strong> in the case where several links go to
 the same place and have gotten the same hint) with the best hint are highlighted
-with a different border. You may at any time press `<enter>` to activate those
+with a different color. You may at any time press `<enter>` to activate those
 markers.
 
 One workflow is to type non-hint characters until the hint marker of the element
diff --git a/documentation/styling.md b/documentation/styling.md
index 2556058..922a351 100644
--- a/documentation/styling.md
+++ b/documentation/styling.md
@@ -65,7 +65,7 @@ To make the hint markers look like they did in version 0.5.x:
   color: #FFA22A !important;
 }
 #VimFxMarkersContainer .marker--highlighted {
-  background-image: none;
+  background-color: #FFD76E !important;
 }
 ```
 
diff --git a/extension/skin/style.css b/extension/skin/style.css
index c2b6666..b8c85c3 100644
--- a/extension/skin/style.css
+++ b/extension/skin/style.css
@@ -97,7 +97,7 @@ toolbarpaletteitem[place="palette"] > #VimFxButton {
   position: absolute;
   --padding: 0.2em;
   padding: var(--padding);
-  --border-color: #ad810c;
+  --border-color: rgba(0, 0, 0, 0.4);
   --border-width: 1px;
   border: solid var(--border-width) var(--border-color);
   background-color: #ffd76e;
@@ -119,13 +119,11 @@ toolbarpaletteitem[place="palette"] > #VimFxButton {
 
 #VimFxMarkersContainer .marker--matched,
 #VimFxMarkersContainer .marker-char--matched {
-  color: #ffa22a;
+  color: rgba(0, 0, 0, 0.3);
 }
 
 #VimFxMarkersContainer .marker--highlighted {
-  --border-color: black;
-  border-radius: 0.34em;
-  box-shadow: inset 0 0 0.28em 0 var(--border-color), 0 0 0 var(--border-width) white;
+  background-color: lime;
 }
 
 #VimFxMarkersContainer .marker--hidden {
-- 
2.39.3