Bug 1453722 - Improvements to Dark Theme search bar. r?dao
MozReview-Commit-ID: 7JX1bO5rzCr
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -27,22 +27,23 @@
--chrome-selection-background-color: #5675B9;
/* Url and search bars */
--lwt-toolbar-field-background-color: rgb(71, 71, 73);
--lwt-toolbar-field-border-color: rgba(249, 249, 250, 0.2);
--lwt-toolbar-field-color: var(--chrome-color);
--urlbar-separator-color: #5F6670;
- --autocomplete-popup-background: #2A2A2E;
+ /* !important to override LightweightThemeManager.addBuiltInTheme in
+ nsBrowserGlue.js */
+ --autocomplete-popup-background: #2A2A2E !important;
--autocomplete-popup-highlight-background: #0060DF;
--autocomplete-popup-color: var(--chrome-color);
- --arrowpanel-dimmed: rgba(12,12,13,0.30);
- --arrowpanel-dimmed-further: rgba(12,12,13,0.40);
+ --arrowpanel-dimmed: rgba(249,249,250,0.10);
}
:root:-moz-lwtheme-darktext {
--lwt-toolbar-field-background-color: #fff;
--chrome-background-color: #E3E4E6;
--chrome-color: #18191a;
--chrome-secondary-background-color: #f5f6f7;
--toolbox-border-bottom-color: #cccccc;
--- a/browser/themes/shared/searchbar.inc.css
+++ b/browser/themes/shared/searchbar.inc.css
@@ -46,26 +46,28 @@
.search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-current-input,
.search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-one-offs,
.search-panel-tree[collapsed=true] + .search-one-offs > vbox > .addengine-item:last-of-type {
border-bottom: 1px solid var(--panel-separator-color);
}
.search-panel-header {
font-weight: normal;
- font-size: 11px;
background-color: var(--arrowpanel-dimmed);
border-top: 1px solid var(--panel-separator-color);
margin: 0;
padding: 3px 6px;
color: var(--autocomplete-popup-secondary-color);
}
+/* Dark theme requires that the search panel is darker
+ than the arrowpanel color */
:root[lwt-popup-brighttext] .search-panel-header {
- color: var(--autocomplete-popup-highlight-color);
+ background-color: #4A4A4F;
+ color: var(--autocomplete-popup-color);
}
.search-panel-header > label {
margin-top: 2px !important;
margin-bottom: 1px !important;
}
.search-panel-current-input > label {
@@ -80,17 +82,17 @@
margin: 0 !important;
border-top: 1px solid var(--panel-separator-color);
background-color: var(--arrowpanel-dimmed);
/* Bug 1108841: prevent font-size from affecting the layout */
line-height: 0;
}
:root[lwt-popup-brighttext] .search-panel-one-offs {
- border-top: 1px solid rgba(249,249,250,0.10);
+ background-color: #4A4A4F;
}
.searchbar-engine-one-off-item {
-moz-appearance: none;
display: inline-block;
min-width: 48px;
height: 32px;
margin: 0;