From a6fecc24c0d15216ef8e608be062f555e13afb1e Mon Sep 17 00:00:00 2001 From: Xavier Valarino Date: Mon, 19 Dec 2022 21:15:47 -0800 Subject: [PATCH 1/4] Remove invalid font name --- src/catppuccin-vimium-frappe.css | 1 - src/catppuccin-vimium-latte.css | 1 - src/catppuccin-vimium-macchiato.css | 1 - src/catppuccin-vimium-mocha.css | 1 - 4 files changed, 4 deletions(-) diff --git a/src/catppuccin-vimium-frappe.css b/src/catppuccin-vimium-frappe.css index 81e0e9a..8064190 100644 --- a/src/catppuccin-vimium-frappe.css +++ b/src/catppuccin-vimium-frappe.css @@ -38,7 +38,6 @@ #vomnibar input { color: #C6D0F5; /* text */ - font: -moz-window; background: #303446; /* base */ border: none; padding: 2; diff --git a/src/catppuccin-vimium-latte.css b/src/catppuccin-vimium-latte.css index 1f62ef2..199ba54 100644 --- a/src/catppuccin-vimium-latte.css +++ b/src/catppuccin-vimium-latte.css @@ -38,7 +38,6 @@ #vomnibar input { color: #4C4F69; /* text */ - font: -moz-window; background: #EFF1F5; /* base */ border: none; padding: 2; diff --git a/src/catppuccin-vimium-macchiato.css b/src/catppuccin-vimium-macchiato.css index 52f8a07..7313ed2 100644 --- a/src/catppuccin-vimium-macchiato.css +++ b/src/catppuccin-vimium-macchiato.css @@ -38,7 +38,6 @@ #vomnibar input { color: #CAD3F5; /* text */ - font: -moz-window; background: #24273A; /* base */ border: none; padding: 2; diff --git a/src/catppuccin-vimium-mocha.css b/src/catppuccin-vimium-mocha.css index 5251f39..5227baa 100644 --- a/src/catppuccin-vimium-mocha.css +++ b/src/catppuccin-vimium-mocha.css @@ -38,7 +38,6 @@ #vomnibar input { color: #CDD6F4; /* text */ - font: -moz-window; background: #1E1E2E; /* base */ border: none; padding: 2; From abc97e56a19278d84ffca021a3206787792ba69a Mon Sep 17 00:00:00 2001 From: Xavier Valarino Date: Mon, 19 Dec 2022 21:16:07 -0800 Subject: [PATCH 2/4] Remove trailing whitespace --- src/catppuccin-vimium-frappe.css | 4 ++-- src/catppuccin-vimium-latte.css | 4 ++-- src/catppuccin-vimium-macchiato.css | 4 ++-- src/catppuccin-vimium-mocha.css | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/catppuccin-vimium-frappe.css b/src/catppuccin-vimium-frappe.css index 8064190..7706ace 100644 --- a/src/catppuccin-vimium-frappe.css +++ b/src/catppuccin-vimium-frappe.css @@ -21,7 +21,7 @@ #vomnibar { background: #303446; /* base */ - border: 2px solid #BABBF1; /* lavender */ + border: 2px solid #BABBF1; /* lavender */ animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards; } @@ -66,7 +66,7 @@ } #vomnibar li .vomnibarSource { - color: #EF9F76; /* peach */ + color: #EF9F76; /* peach */ } #vomnibar li em, diff --git a/src/catppuccin-vimium-latte.css b/src/catppuccin-vimium-latte.css index 199ba54..02f176f 100644 --- a/src/catppuccin-vimium-latte.css +++ b/src/catppuccin-vimium-latte.css @@ -21,7 +21,7 @@ #vomnibar { background: #EFF1F5; /* base */ - border: 2px solid #7287FD; /* lavender */ + border: 2px solid #7287FD; /* lavender */ animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards; } @@ -66,7 +66,7 @@ } #vomnibar li .vomnibarSource { - color: #FE640B; /* peach */ + color: #FE640B; /* peach */ } #vomnibar li em, diff --git a/src/catppuccin-vimium-macchiato.css b/src/catppuccin-vimium-macchiato.css index 7313ed2..5764313 100644 --- a/src/catppuccin-vimium-macchiato.css +++ b/src/catppuccin-vimium-macchiato.css @@ -21,7 +21,7 @@ #vomnibar { background: #24273A; /* base */ - border: 2px solid #B7BDF8; /* lavender */ + border: 2px solid #B7BDF8; /* lavender */ animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards; } @@ -66,7 +66,7 @@ } #vomnibar li .vomnibarSource { - color: #F5A97F; /* peach */ + color: #F5A97F; /* peach */ } #vomnibar li em, diff --git a/src/catppuccin-vimium-mocha.css b/src/catppuccin-vimium-mocha.css index 5227baa..d4853a3 100644 --- a/src/catppuccin-vimium-mocha.css +++ b/src/catppuccin-vimium-mocha.css @@ -21,7 +21,7 @@ #vomnibar { background: #1E1E2E; /* base */ - border: 2px solid #B4BEFE; /* lavender */ + border: 2px solid #B4BEFE; /* lavender */ animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards; } @@ -66,7 +66,7 @@ } #vomnibar li .vomnibarSource { - color: #FAB387; /* peach */ + color: #FAB387; /* peach */ } #vomnibar li em, From 09eb9c41d5d9da8c968063b54d68cc6ee259cb36 Mon Sep 17 00:00:00 2001 From: Xavier Valarino Date: Mon, 19 Dec 2022 21:06:53 -0800 Subject: [PATCH 3/4] Improve Vomnibar UI * Increase input size, removing margin around search bar * Remove top and bottom margin on unordered list used for search items * Maintain consistent border radius by clipping child content with `overflow: hidden` --- src/catppuccin-vimium-frappe.css | 7 +++++-- src/catppuccin-vimium-latte.css | 7 +++++-- src/catppuccin-vimium-macchiato.css | 7 +++++-- src/catppuccin-vimium-mocha.css | 7 +++++-- 4 files changed, 20 insertions(+), 8 deletions(-) diff --git a/src/catppuccin-vimium-frappe.css b/src/catppuccin-vimium-frappe.css index 7706ace..acbc639 100644 --- a/src/catppuccin-vimium-frappe.css +++ b/src/catppuccin-vimium-frappe.css @@ -23,6 +23,7 @@ background: #303446; /* base */ border: 2px solid #BABBF1; /* lavender */ animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards; + overflow: hidden; } @keyframes show { @@ -40,17 +41,19 @@ color: #C6D0F5; /* text */ background: #303446; /* base */ border: none; - padding: 2; + height: unset; + padding: 16px 30px; } #vomnibar .vomnibarSearchArea { - padding: 10px 30px; border: none; + padding: unset; background: #303446; /* base */ } #vomnibar ul { padding: 0; + margin: 0; background: #303446; /* base */ border-top: 1px solid #414559; /* surface0 */ } diff --git a/src/catppuccin-vimium-latte.css b/src/catppuccin-vimium-latte.css index 02f176f..b691611 100644 --- a/src/catppuccin-vimium-latte.css +++ b/src/catppuccin-vimium-latte.css @@ -23,6 +23,7 @@ background: #EFF1F5; /* base */ border: 2px solid #7287FD; /* lavender */ animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards; + overflow: hidden; } @keyframes show { @@ -40,17 +41,19 @@ color: #4C4F69; /* text */ background: #EFF1F5; /* base */ border: none; - padding: 2; + height: unset; + padding: 16px 30px; } #vomnibar .vomnibarSearchArea { - padding: 10px 30px; border: none; + padding: unset; background: #EFF1F5; /* base */ } #vomnibar ul { padding: 0; + margin: 0; background: #EFF1F5; /* base */ border-top: 1px solid #CCD0DA; /* surface0 */ } diff --git a/src/catppuccin-vimium-macchiato.css b/src/catppuccin-vimium-macchiato.css index 5764313..fb3f5b8 100644 --- a/src/catppuccin-vimium-macchiato.css +++ b/src/catppuccin-vimium-macchiato.css @@ -23,6 +23,7 @@ background: #24273A; /* base */ border: 2px solid #B7BDF8; /* lavender */ animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards; + overflow: hidden; } @keyframes show { @@ -40,17 +41,19 @@ color: #CAD3F5; /* text */ background: #24273A; /* base */ border: none; - padding: 2; + height: unset; + padding: 16px 30px; } #vomnibar .vomnibarSearchArea { - padding: 10px 30px; border: none; + padding: unset; background: #24273A; /* base */ } #vomnibar ul { padding: 0; + margin: 0; background: #24273A; /* base */ border-top: 1px solid #363A4F; /* surface0 */ } diff --git a/src/catppuccin-vimium-mocha.css b/src/catppuccin-vimium-mocha.css index d4853a3..a1fc828 100644 --- a/src/catppuccin-vimium-mocha.css +++ b/src/catppuccin-vimium-mocha.css @@ -23,6 +23,7 @@ background: #1E1E2E; /* base */ border: 2px solid #B4BEFE; /* lavender */ animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards; + overflow: hidden; } @keyframes show { @@ -40,17 +41,19 @@ color: #CDD6F4; /* text */ background: #1E1E2E; /* base */ border: none; - padding: 2; + height: unset; + padding: 16px 30px; } #vomnibar .vomnibarSearchArea { - padding: 10px 30px; border: none; + padding: unset; background: #1E1E2E; /* base */ } #vomnibar ul { padding: 0; + margin: 0; background: #1E1E2E; /* base */ border-top: 1px solid #313244; /* surface0 */ } From eac0f2f59f5d4028567fd8d9413fd23131166e1f Mon Sep 17 00:00:00 2001 From: Xavier Valarino Date: Tue, 21 Mar 2023 20:30:23 -0700 Subject: [PATCH 4/4] Fix frame extending past viewport when zoomed in When a user zooms in (`ctrl/cmd` + `+`), the Vomnibar frame will extend down past the viewport. The height is set to calc(100% - 70px) on the actual iframe, and we can't reach it with this CSS. Setting a max-height that is effectively the same, but measured in viewport units, on the Vomnibar container keeps it from going past the bottom of the viewport. --- src/catppuccin-vimium-frappe.css | 1 + src/catppuccin-vimium-latte.css | 1 + src/catppuccin-vimium-macchiato.css | 1 + src/catppuccin-vimium-mocha.css | 1 + 4 files changed, 4 insertions(+) diff --git a/src/catppuccin-vimium-frappe.css b/src/catppuccin-vimium-frappe.css index acbc639..2f0e5ff 100644 --- a/src/catppuccin-vimium-frappe.css +++ b/src/catppuccin-vimium-frappe.css @@ -23,6 +23,7 @@ background: #303446; /* base */ border: 2px solid #BABBF1; /* lavender */ animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards; + max-height: calc(100vh - 70px); overflow: hidden; } diff --git a/src/catppuccin-vimium-latte.css b/src/catppuccin-vimium-latte.css index b691611..fc0c6f3 100644 --- a/src/catppuccin-vimium-latte.css +++ b/src/catppuccin-vimium-latte.css @@ -23,6 +23,7 @@ background: #EFF1F5; /* base */ border: 2px solid #7287FD; /* lavender */ animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards; + max-height: calc(100vh - 70px); overflow: hidden; } diff --git a/src/catppuccin-vimium-macchiato.css b/src/catppuccin-vimium-macchiato.css index fb3f5b8..b524178 100644 --- a/src/catppuccin-vimium-macchiato.css +++ b/src/catppuccin-vimium-macchiato.css @@ -23,6 +23,7 @@ background: #24273A; /* base */ border: 2px solid #B7BDF8; /* lavender */ animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards; + max-height: calc(100vh - 70px); overflow: hidden; } diff --git a/src/catppuccin-vimium-mocha.css b/src/catppuccin-vimium-mocha.css index a1fc828..47a87aa 100644 --- a/src/catppuccin-vimium-mocha.css +++ b/src/catppuccin-vimium-mocha.css @@ -23,6 +23,7 @@ background: #1E1E2E; /* base */ border: 2px solid #B4BEFE; /* lavender */ animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards; + max-height: calc(100vh - 70px); overflow: hidden; }