diff --git a/README.md b/README.md index c2f6cc0..574c403 100644 --- a/README.md +++ b/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)   diff --git a/assets/cat-vimium.png b/assets/cat-vimium.png index 0febe79..9e03d1e 100644 Binary files a/assets/cat-vimium.png and b/assets/cat-vimium.png differ diff --git a/catppuccin-vimium.css b/src/catppuccin-vimium-frappe.css similarity index 65% rename from catppuccin-vimium.css rename to src/catppuccin-vimium-frappe.css index 75e71ff..26c124e 100644 --- a/catppuccin-vimium.css +++ b/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 */ } diff --git a/src/catppuccin-vimium-latte.css b/src/catppuccin-vimium-latte.css new file mode 100644 index 0000000..1e863ba --- /dev/null +++ b/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 */ +} diff --git a/src/catppuccin-vimium-macchiato.css b/src/catppuccin-vimium-macchiato.css new file mode 100644 index 0000000..d0de202 --- /dev/null +++ b/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 */ +} diff --git a/src/catppuccin-vimium-mocha.css b/src/catppuccin-vimium-mocha.css new file mode 100644 index 0000000..0f3e818 --- /dev/null +++ b/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 */ +}