From a0aab2fe848a4b26ac57b7c887d2b7aee55e3104 Mon Sep 17 00:00:00 2001
From: Simon Lydell <simon.lydell@gmail.com>
Date: Wed, 14 Sep 2016 08:12:56 +0200
Subject: [PATCH] Improve hint marker styling

- Increase contrast between the hint chars and the background color by
  changing the text color to fully black.

- Make the styling for hint markers for scrollable elements scale with
  the font size.

- Make highlighted hint markers more prominent. The changes in commit
  4bb0b56c made the difference _too_ subtle. While it looked pretty good
  on the computer I developed it on, the highlighting was almost
  invisible on a different screen. The new styling relies not solely on
  color, but also on border-radius, to increase the visual difference.
---
 documentation/commands.md |  6 +++---
 documentation/options.md  |  4 ++--
 extension/skin/style.css  | 13 +++++--------
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/documentation/commands.md b/documentation/commands.md
index be21a03..0738dca 100644
--- a/documentation/commands.md
+++ b/documentation/commands.md
@@ -280,9 +280,9 @@ 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 diagonal white stripe, 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.
+with a different border, 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.
 
 (Also see the advanced options [`hints.toggle_in_tab`] and
 [`hints.toggle_in_background`].)
diff --git a/documentation/options.md b/documentation/options.md
index be4211d..ce63cf2 100644
--- a/documentation/options.md
+++ b/documentation/options.md
@@ -236,8 +236,8 @@ 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 diagonal white stripe. You may at any time press `<enter>` to activate
-those markers.
+with a different border. 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
 you want to activate gets highlighted, and then hit `<enter>`. To make this more
diff --git a/extension/skin/style.css b/extension/skin/style.css
index 16f0416..c2b6666 100644
--- a/extension/skin/style.css
+++ b/extension/skin/style.css
@@ -101,7 +101,7 @@ toolbarpaletteitem[place="palette"] > #VimFxButton {
   --border-width: 1px;
   border: solid var(--border-width) var(--border-color);
   background-color: #ffd76e;
-  color: #302505;
+  color: black;
   font-size: 0.8em;
   line-height: 1;
   font-weight: bold;
@@ -123,12 +123,9 @@ toolbarpaletteitem[place="palette"] > #VimFxButton {
 }
 
 #VimFxMarkersContainer .marker--highlighted {
-  background-image: linear-gradient(
-    to bottom right,
-    transparent 25%,
-    white 50%,
-    transparent 75%
-  );
+  --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;
 }
 
 #VimFxMarkersContainer .marker--hidden {
@@ -142,7 +139,7 @@ toolbarpaletteitem[place="palette"] > #VimFxButton {
 }
 
 #VimFxMarkersContainer .marker[data-type="scrollable"] {
-  --width: 1px;
+  --width: 0.17em;
   padding-right: calc(var(--padding) + var(--border-width) + var(--width));
 }
 
-- 
2.39.3