update to 0.2.0

README.md

@@ -19,11 +19,16 @@
 
 1. Open Vimum addon's preferences.
 2. Activate advanced options.
-3. Copy the content of catppuccin-vimium.css into the custom CSS field.
+3. Copy the content of selected file from `src` folder into the custom CSS field:
+    - 🌻 catppuccin-vimium-latte.css
+    - 🪴 catppuccin-vimium-frappe.css
+    - 🌺 catppuccin-vimium-macchiato.css
+    - 🌿 catppuccin-vimium-mocha.css
 4. Save changes and reload pages.
 
 ## 💝 Thanks to
 
+- [elkrien](https://github.com/elkrien)
 - [ysjn](https://github.com/ysjn/vimium-simply-dark)
 
  

src/catppuccin-vimium-frappe.css

@@ -1,13 +1,13 @@
 #vimiumHintMarkerContainer div.internalVimiumHintMarker, #vimiumHintMarkerContainer div.vimiumHintMarker {
   padding: 3px 4px;
-  background: #F8BD96;
+  background: #EF9F76; /* peach */
   border: 1;
-  border-color: #1A1826;
+  border-color: #292C3C; /* mantle */
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 }
 
 #vimiumHintMarkerContainer div span {
-  color: #1A1826;
+  color: #292C3C; /* mantle */
   text-shadow: none;
 }
 
@@ -16,12 +16,12 @@
 }
 
 #vimiumHintMarkerContainer div > .matchingCharacter ~ span {
-  color: #96CDFB;
+  color: #8CAAEE; /* blue */
 }
 
 #vomnibar {
-  background: #1E1E2E;
-  border: 2px solid #C9CBFF;
+  background: #303446; /* base */
+  border: 2px solid #BABBF1; /* lavender */ 
   animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
 }
 
@@ -37,9 +37,9 @@
 }
 
 #vomnibar input {
-  color: #D9E0EE;
+  color: #C6D0F5; /* text */
   font: -moz-window;
-  background: #1E1E2E;
+  background: #303446; /* base */
   border: none;
   padding: 2;
 }
@@ -47,18 +47,18 @@
 #vomnibar .vomnibarSearchArea {
   padding: 10px 30px;
   border: none;
-  background: #1E1E2E;
+  background: #303446; /* base */
 }
 
 #vomnibar ul {
   padding: 0;
-  background: #1E1E2E;
-  border-top: 1px solid #302D41;
+  background: #303446; /* base */
+  border-top: 1px solid #414559; /* surface0 */
 }
 
 #vomnibar li {
   padding: 10px;
-  border-bottom: 1px solid #302D41;
+  border-bottom: 1px solid #414559; /* surface0 */
 }
 
 #vomnibar li .vomnibarTopHalf,
@@ -67,48 +67,48 @@
 }
 
 #vomnibar li .vomnibarSource {
-  color: #F8BD96;
+  color: #EF9F76; /* peach */ 
 }
 
 #vomnibar li em,
 #vomnibar li .vomnibarTitle {
-  color: #96CDFB;
+  color: #8CAAEE; /* blue */
   font-weight: bold;
 }
 
 #vomnibar li .vomnibarUrl {
-  color: #F5E0DC;
+  color: #F2D5CF; /* rosewater */
 }
 
 #vomnibar li .vomnibarMatch {
-  color: #ABE9B3;
+  color: #A6D189; /* green */
   font-weight: bold;
 }
 
 #vomnibar li .vomnibarTitle .vomnibarMatch {
-  color: #96CDFB;
+  color: #8CAAEE; /* blue */
 }
 
 #vomnibar li.vomnibarSelected {
-  background-color: #302D41;
+  background-color: #414559; /* surface0 */
 }
 
 div.vimiumHUD {
-  background: #1E1E2E;
+  background: #303446; /* base */
   border: none;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 }
 
 div.vimiumHUD span#hud-find-input,
 div.vimiumHUD .vimiumHUDSearchAreaInner {
-  color: #D9E0EE;
+  color: #C6D0F5; /* text */
 }
 
 div.vimiumHUD .hud-find {
-  background-color: #1E1E2E;
+  background-color: #303446; /* base */
   border: none;
 }
 
 div.vimiumHUD .vimiumHUDSearchArea {
-  background-color: #1E1E2E;
+  background-color: #303446; /* base */
 }

src/catppuccin-vimium-latte.css

@@ -0,0 +1,114 @@
+#vimiumHintMarkerContainer div.internalVimiumHintMarker, #vimiumHintMarkerContainer div.vimiumHintMarker {
+  padding: 3px 4px;
+  background: #FE640B; /* peach */
+  border: 1;
+  border-color: #E6E9EF; /* mantle */
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+#vimiumHintMarkerContainer div span {
+  color: #E6E9EF; /* mantle */
+  text-shadow: none;
+}
+
+#vimiumHintMarkerContainer div > .matchingCharacter {
+  opacity: 1.0;
+}
+
+#vimiumHintMarkerContainer div > .matchingCharacter ~ span {
+  color: #1E66F5; /* blue */
+}
+
+#vomnibar {
+  background: #EFF1F5; /* base */
+  border: 2px solid #7287FD; /* lavender */ 
+  animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
+}
+
+@keyframes show {
+  0% {
+    transform: translateY(50px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+#vomnibar input {
+  color: #4C4F69; /* text */
+  font: -moz-window;
+  background: #EFF1F5; /* base */
+  border: none;
+  padding: 2;
+}
+
+#vomnibar .vomnibarSearchArea {
+  padding: 10px 30px;
+  border: none;
+  background: #EFF1F5; /* base */
+}
+
+#vomnibar ul {
+  padding: 0;
+  background: #EFF1F5; /* base */
+  border-top: 1px solid #CCD0DA; /* surface0 */
+}
+
+#vomnibar li {
+  padding: 10px;
+  border-bottom: 1px solid #CCD0DA; /* surface0 */
+}
+
+#vomnibar li .vomnibarTopHalf,
+#vomnibar li .vomnibarBottomHalf {
+  padding: 3px 0;
+}
+
+#vomnibar li .vomnibarSource {
+  color: #FE640B; /* peach */ 
+}
+
+#vomnibar li em,
+#vomnibar li .vomnibarTitle {
+  color: #1E66F5; /* blue */
+  font-weight: bold;
+}
+
+#vomnibar li .vomnibarUrl {
+  color: #DC8A78; /* rosewater */
+}
+
+#vomnibar li .vomnibarMatch {
+  color: #40A02B; /* green */
+  font-weight: bold;
+}
+
+#vomnibar li .vomnibarTitle .vomnibarMatch {
+  color: #1E66F5; /* blue */
+}
+
+#vomnibar li.vomnibarSelected {
+  background-color: #CCD0DA; /* surface0 */
+}
+
+div.vimiumHUD {
+  background: #EFF1F5; /* base */
+  border: none;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+div.vimiumHUD span#hud-find-input,
+div.vimiumHUD .vimiumHUDSearchAreaInner {
+  color: #4C4F69; /* text */
+}
+
+div.vimiumHUD .hud-find {
+  background-color: #EFF1F5; /* base */
+  border: none;
+}
+
+div.vimiumHUD .vimiumHUDSearchArea {
+  background-color: #EFF1F5; /* base */
+}

src/catppuccin-vimium-macchiato.css

@@ -0,0 +1,114 @@
+#vimiumHintMarkerContainer div.internalVimiumHintMarker, #vimiumHintMarkerContainer div.vimiumHintMarker {
+  padding: 3px 4px;
+  background: #F5A97F; /* peach */
+  border: 1;
+  border-color: #1E2030; /* mantle */
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+#vimiumHintMarkerContainer div span {
+  color: #1E2030; /* mantle */
+  text-shadow: none;
+}
+
+#vimiumHintMarkerContainer div > .matchingCharacter {
+  opacity: 1.0;
+}
+
+#vimiumHintMarkerContainer div > .matchingCharacter ~ span {
+  color: #8AADF4; /* blue */
+}
+
+#vomnibar {
+  background: #24273A; /* base */
+  border: 2px solid #B7BDF8; /* lavender */ 
+  animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
+}
+
+@keyframes show {
+  0% {
+    transform: translateY(50px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+#vomnibar input {
+  color: #CAD3F5; /* text */
+  font: -moz-window;
+  background: #24273A; /* base */
+  border: none;
+  padding: 2;
+}
+
+#vomnibar .vomnibarSearchArea {
+  padding: 10px 30px;
+  border: none;
+  background: #24273A; /* base */
+}
+
+#vomnibar ul {
+  padding: 0;
+  background: #24273A; /* base */
+  border-top: 1px solid #363A4F; /* surface0 */
+}
+
+#vomnibar li {
+  padding: 10px;
+  border-bottom: 1px solid #363A4F; /* surface0 */
+}
+
+#vomnibar li .vomnibarTopHalf,
+#vomnibar li .vomnibarBottomHalf {
+  padding: 3px 0;
+}
+
+#vomnibar li .vomnibarSource {
+  color: #F5A97F; /* peach */ 
+}
+
+#vomnibar li em,
+#vomnibar li .vomnibarTitle {
+  color: #8AADF4; /* blue */
+  font-weight: bold;
+}
+
+#vomnibar li .vomnibarUrl {
+  color: #F4DBD6; /* rosewater */
+}
+
+#vomnibar li .vomnibarMatch {
+  color: #A6DA95; /* green */
+  font-weight: bold;
+}
+
+#vomnibar li .vomnibarTitle .vomnibarMatch {
+  color: #8AADF4; /* blue */
+}
+
+#vomnibar li.vomnibarSelected {
+  background-color: #363A4F; /* surface0 */
+}
+
+div.vimiumHUD {
+  background: #24273A; /* base */
+  border: none;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+div.vimiumHUD span#hud-find-input,
+div.vimiumHUD .vimiumHUDSearchAreaInner {
+  color: #CAD3F5; /* text */
+}
+
+div.vimiumHUD .hud-find {
+  background-color: #24273A; /* base */
+  border: none;
+}
+
+div.vimiumHUD .vimiumHUDSearchArea {
+  background-color: #24273A; /* base */
+}

src/catppuccin-vimium-mocha.css

@@ -0,0 +1,114 @@
+#vimiumHintMarkerContainer div.internalVimiumHintMarker, #vimiumHintMarkerContainer div.vimiumHintMarker {
+  padding: 3px 4px;
+  background: #FAB387; /* peach */
+  border: 1;
+  border-color: #181825; /* mantle */
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+#vimiumHintMarkerContainer div span {
+  color: #181825; /* mantle */
+  text-shadow: none;
+}
+
+#vimiumHintMarkerContainer div > .matchingCharacter {
+  opacity: 1.0;
+}
+
+#vimiumHintMarkerContainer div > .matchingCharacter ~ span {
+  color: #89B4FA; /* blue */
+}
+
+#vomnibar {
+  background: #1E1E2E; /* base */
+  border: 2px solid #B4BEFE; /* lavender */ 
+  animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
+}
+
+@keyframes show {
+  0% {
+    transform: translateY(50px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+#vomnibar input {
+  color: #CDD6F4; /* text */
+  font: -moz-window;
+  background: #1E1E2E; /* base */
+  border: none;
+  padding: 2;
+}
+
+#vomnibar .vomnibarSearchArea {
+  padding: 10px 30px;
+  border: none;
+  background: #1E1E2E; /* base */
+}
+
+#vomnibar ul {
+  padding: 0;
+  background: #1E1E2E; /* base */
+  border-top: 1px solid #313244; /* surface0 */
+}
+
+#vomnibar li {
+  padding: 10px;
+  border-bottom: 1px solid #313244; /* surface0 */
+}
+
+#vomnibar li .vomnibarTopHalf,
+#vomnibar li .vomnibarBottomHalf {
+  padding: 3px 0;
+}
+
+#vomnibar li .vomnibarSource {
+  color: #FAB387; /* peach */ 
+}
+
+#vomnibar li em,
+#vomnibar li .vomnibarTitle {
+  color: #89B4FA; /* blue */
+  font-weight: bold;
+}
+
+#vomnibar li .vomnibarUrl {
+  color: #F5E0DC; /* rosewater */
+}
+
+#vomnibar li .vomnibarMatch {
+  color: #A6E3A1; /* green */
+  font-weight: bold;
+}
+
+#vomnibar li .vomnibarTitle .vomnibarMatch {
+  color: #89B4FA; /* blue */
+}
+
+#vomnibar li.vomnibarSelected {
+  background-color: #313244; /* surface0 */
+}
+
+div.vimiumHUD {
+  background: #1E1E2E; /* base */
+  border: none;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+div.vimiumHUD span#hud-find-input,
+div.vimiumHUD .vimiumHUDSearchAreaInner {
+  color: #CDD6F4; /* text */
+}
+
+div.vimiumHUD .hud-find {
+  background-color: #1E1E2E; /* base */
+  border: none;
+}
+
+div.vimiumHUD .vimiumHUDSearchArea {
+  background-color: #1E1E2E; /* base */
+}