Incorporate Vanilla-Notify for HUD on Entering Insert/Normal Mode

.gitignore

@@ -19,3 +19,4 @@ timeline.xctimeline
 playground.xcworkspace
 
 .vscode/
+.DS_Store

README.md

@@ -1,7 +1,5 @@
 # Vimari - Keyboard Shortcuts extension for Safari
 
-[![Actions Status](https://github.com/danielcompton/vimari/workflows/Node%20CI/badge.svg)](https://github.com/danielcompton/vimari/actions)
-
 [![Download on the Mac App Store](assets/Download_on_the_Mac_App_Store_Badge_US.svg)](https://apps.apple.com/us/app/vimari/id1480933944?ls=1&mt=12)
 
 Vimari is a Safari extension that provides keyboard based navigation.

Vimari Extension/Info.plist

@@ -30,6 +30,10 @@
 		<string>$(PRODUCT_MODULE_NAME).SafariExtensionHandler</string>
 		<key>SFSafariContentScript</key>
 		<array>
+			<dict>
+				<key>Script</key>
+				<string>vnotify.js</string>
+			</dict>
 			<dict>
 				<key>Script</key>
 				<string>svim-scripts.js</string>
@@ -61,6 +65,10 @@
 		</array>
 		<key>SFSafariStyleSheet</key>
 		<array>
+			<dict>
+				<key>Style Sheet</key>
+				<string>vnotify.css</string>
+			</dict>
 			<dict>
 				<key>Style Sheet</key>
 				<string>injected.css</string>

Vimari Extension/css/injected.css

@@ -1,3 +1,4 @@
+/* vimium */
 .vimiumReset {
   background: none;
   border: none;
@@ -7,7 +8,7 @@
   cursor: auto;
   display: inline;
   float: none;
-  font-family : "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   font-size: inherit;
   font-style: normal;
   font-variant: normal;
@@ -81,34 +82,33 @@ div.internalVimiumHintMarker > .matchingCharacter {
   border: 1px solid #b3b3b3;
   border-bottom: none;
   border-radius: 4px 4px 0 0;
-  font-family: Lucida Grande, Arial, Sans;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
   /* One less than vimium's hint markers, so link hints can be shown e.g. for the panel's close button. */
   z-index: 99999998;
   text-shadow: 0px 1px 2px #FFF;
   line-height: 1.0;
   opacity: 0;
 }
 
-.vimiumHUD a, .vimiumHUD a:hover {
+.vimiumHUD a, .vimiumHUD a: hover {
   background: transparent;
   color: blue;
   text-decoration: underline;
 }
 
 .vimiumHUD a.close-button {
-  float:right;
-  font-family:courier new;
-  font-weight:bold;
-  color:#9C9A9A;
-  text-decoration:none;
-  padding-left:10px;
-  margin-top:-1px;
-  font-size:14px;
+  float: right;
+  font-family: courier new;
+  font-weight: bold;
+  color: #9C9A9A;
+  text-decoration: none;
+  padding-left: 10px;
+  margin-top: -1px;
+  font-size: 14px;
 }
 
-.vimiumHUD a.close-button:hover {
-  color:#333333;
-  cursor:default;
-  -webkit-user-select:none;
+.vimiumHUD a.close-button: hover {
+  color: #333333;
+  cursor: default;
+  -webkit-user-select: none;
 }
-

Vimari Extension/css/vnotify.css

@@ -0,0 +1,90 @@
+/* vNotify */
+.vnotify-container {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
+  font-size: 12px !important;
+  line-height: 1.5 !important;
+  position: fixed !important; }
+/*
+  .vnotify-container.vn-top-right {
+    right: 10px !important;
+    top: 10px !important; }
+  .vnotify-container.vn-top-left {
+    top: 10px !important;
+    left: 10px !important; }
+*/
+  .vnotify-container.vn-bottom-right {
+    bottom: 10px !important;
+    right: 10px !important; }
+/*
+  .vnotify-container.vn-bottom-left {
+    bottom: 10px !important;
+    left: 10px !important; }
+  .vnotify-container.vn-center {
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important; }
+ */
+  .vnotify-container .vn-close {
+    position: absolute !important;
+    top: 5px !important;
+    right: 10px !important;
+    width: 15px !important;
+    height: 15px !important;
+    padding: 2px !important;
+    cursor: pointer !important; }
+    .vnotify-container .vn-close: before, .vnotify-container .vn-close: after {
+      content: '' !important;
+      position: absolute !important;
+      width: 100% !important;
+      top: 50% !important;
+      height: 2px !important;
+      background: #fff !important; }
+    .vnotify-container .vn-close: before {
+      -webkit-transform: rotate(45deg) !important;
+/*      -moz-transform: rotate(45deg) !important;*/
+      transform: rotate(45deg) !important; }
+    .vnotify-container .vn-close: after {
+      -webkit-transform: rotate(-45deg) !important;
+/*      -moz-transform: rotate(-45deg) !important;*/
+      transform: rotate(-45deg) !important; }
+
+.vnotify-item {
+  width: 8em !important;
+  padding: 7.5px !important;
+  position: relative !important;
+  -webkit-border-radius: 5px !important;
+/*  -moz-border-radius: 5px !important;*/
+/*  -ms-border-radius: 5px !important;*/
+  border-radius: 5px !important;
+  margin-bottom: 7.5px !important;
+  opacity: 0.5 !important;
+/*  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=75)" !important;*/
+  filter: alpha(opacity=50) !important; }
+  .vnotify-item: hover {
+    opacity: 1 !important; }
+
+.vnotify-title {
+  font-weight: bold !important; }
+
+.vnotify-notify {
+background: #333 !important;
+color: #fff !important; }
+
+/*
+.vnotify-success {
+  background: #2ecc71 !important;
+  color: #fff !important; }
+
+.vnotify-error {
+  background: #e74c3c !important;
+  color: #fff !important; }
+
+.vnotify-warning {
+  background: #f39c12 !important;
+  color: #fff !important; }
+
+ .vnotify-info {
+ background: #3498db !important;
+ color: #fff !important; }
+
+*/