diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
index c25a3df55..38c58c886 100644
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -67,6 +67,7 @@ pref('zen.tabs.vertical', true);
pref('zen.theme.accent-color', "#aac7ff");
pref('zen.theme.toolbar-themed', true);
pref('zen.theme.pill-button', false);
+pref('zen.theme.floating-urlbar', false);
pref('zen.view.compact', false);
pref('zen.view.compact.hide-toolbar', false);
pref('zen.view.sidebar-expanded', false);
diff --git a/src/browser/components/preferences/zen-settings.js b/src/browser/components/preferences/zen-settings.js
index c0d4dd75c..aa1313a1a 100644
--- a/src/browser/components/preferences/zen-settings.js
+++ b/src/browser/components/preferences/zen-settings.js
@@ -93,5 +93,10 @@ Preferences.addAll([
id: "zen.theme.pill-button",
type: "bool",
default: true,
+ },
+ {
+ id: "zen.theme.floating-urlbar",
+ type: "bool",
+ default: false,
}
]);
diff --git a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
index 698d2d02d..c06281adc 100644
--- a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
+++ b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
@@ -29,13 +29,6 @@
data-l10n-id="zen-look-and-feel-compact-view-top-toolbar"
preference="zen.view.compact.hide-toolbar"/>
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/browser/locales/en-US/browser/preferences/zen-preferences.ftl b/src/browser/locales/en-US/browser/preferences/zen-preferences.ftl
index 7250212a3..054d423c8 100644
--- a/src/browser/locales/en-US/browser/preferences/zen-preferences.ftl
+++ b/src/browser/locales/en-US/browser/preferences/zen-preferences.ftl
@@ -41,6 +41,14 @@ zen-settings-workspaces-description = With workspaces, you can have multiple bro
zen-settings-workspaces-enabled =
.label = Enable Workspaces (Experimental)
+pane-zen-theme-title = Theme Settings
+
+zen-look-and-feel-urlbar-header = Awesome Bar Settings
+zen-look-and-feel-urlbar-description = Customize the look and feel of the Awesome Bar
+
+zen-look-and-feel-floating-urlbar =
+ .label = Floating URL Bar when focused
+
zen-vertical-tabs-title = Sidebar and tabs layout
zen-vertical-tabs-header = Vertical Tabs
zen-vertical-tabs-description = Manage your tabs in a vertical layout
diff --git a/src/browser/themes/shared/zen-browser-shared.css b/src/browser/themes/shared/zen-browser-shared.css
index e8d1c909e..75ccec46c 100644
--- a/src/browser/themes/shared/zen-browser-shared.css
+++ b/src/browser/themes/shared/zen-browser-shared.css
@@ -222,6 +222,7 @@ button.popup-notification-dropmarker {
#navigator-toolbox {
min-width: 55px;
max-width: 55px;
+ transition: .4s !important;
}
#navigator-toolbox toolbar#TabsToolbar {
@@ -832,4 +833,50 @@ panelmultiview {
#zen-sidebar-icons-wrapper::before {
width: 100%;
}
-}
\ No newline at end of file
+}
+
+/* Popup Search */
+
+@media (-moz-bool-pref: "zen.theme.floating-urlbar") {
+ #urlbar:is([breakout][breakout-extend], [breakout][usertyping][focused]) {
+ #urlbar-input {
+ font-size: 16px !important;
+ text-align: left !important;
+ }
+
+ z-index: 1;
+ position: fixed !important;
+ --urlbar-height: auto !important;
+ bottom: auto !important;
+ top: 20vh !important;
+ padding-left: 6px !important;
+ padding-right: 8px !important;
+
+ left: 18vw !important;
+ right: 18vw !important;
+ width: 64vw !important;
+
+ &:after {
+ content: "";
+ position: fixed;
+ pointer-events: none;
+
+ width: 100vw;
+ height: 100vh;
+
+ top: 0px;
+ left: 0px;
+
+ background-color: rgba(0, 0, 0, 0.3);
+ backdrop-filter: blur(8px);
+
+ z-index: -1;
+ }
+
+ #identity-box {
+ margin: auto 0;
+ height: 30px;
+ margin-right: 10px;
+ }
+ }
+}