1 files changed, 197 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/quickFilterBar.css b/comm/mail/themes/shared/mail/quickFilterBar.css
new file mode 100644
index 0000000000..ccdbdca2a7
--- /dev/null
+++ b/comm/mail/themes/shared/mail/quickFilterBar.css
@@ -0,0 +1,197 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+:root {
+  --qfb-padding: 3px;
+}
+
+:root[uidensity="compact"] {
+  --qfb-padding: 0 3px;
+}
+
+#quick-filter-bar {
+  --button-margin: 3px;
+  background-color: var(--layout-background-1);
+  padding: var(--qfb-padding);
+  border-bottom: 1px solid
+    var(--sidebar-border-color, var(--tree-view-header-border-color));
+}
+
+:root[lwt-tree] #quick-filter-bar:-moz-lwtheme {
+  background-color: color-mix(in srgb, var(--toolbar-bgcolor) 50%, transparent);
+  color: var(--lwt-text-color);
+}
+
+#qfb-sticky {
+  background-image: var(--icon-pin);
+  height: auto;
+}
+
+#qfb-unread {
+  background-image: var(--icon-unread);
+}
+
+#qfb-starred {
+  background-image: var(--icon-star);
+}
+
+#qfb-inaddrbook {
+  background-image: var(--icon-address-book);
+}
+
+#qfb-tags {
+  background-image: var(--icon-tag);
+}
+
+#qfb-attachment {
+  background-image: var(--icon-attachment);
+}
+
+#qfd-dropdown {
+  background-image: var(--icon-filter);
+  display: none;
+}
+
+#qfb-results-label {
+  margin: 3px;
+  text-align: end;
+  align-self: center;
+}
+
+#qfb-qs-textbox {
+  flex: 1;
+  height: unset;
+  margin: 3px;
+  padding-block: 3px;
+  max-width: 450px;
+}
+
+@media (-moz-platform: windows-win7) {
+  #qfb-qs-textbox {
+    margin-block: 4px;
+  }
+}
+
+@container threadPane (max-width: 499px) {
+  #qfb-qs-textbox {
+    min-width: 200px;
+  }
+
+  #qfd-dropdown {
+    display: inline-block;
+    min-width: 22px;
+  }
+
+  .button-group.quickFilterButtons{
+    display: none;
+  }
+}
+
+#quickFilterBarTagsContainer:not([hidden]) {
+  display: flex;
+  align-items: center;
+  margin-inline-start: -3px;
+  flex-wrap: wrap;
+}
+
+#qfb-boolean-mode {
+  line-height: unset;
+  min-height: 0;
+  margin: 3px;
+  padding-block: 3px;
+}
+
+.qfb-tag-button {
+  --tag-color: currentColor;
+  --tag-contrast-color: currentColor;
+  --button-padding: 3px;
+  --button-margin: 3px;
+  background-color: transparent;
+  color: var(--tag-color);
+  border-color: var(--tag-color);
+  border-radius: 100px;
+  padding-inline: 9px;
+  min-height: 0;
+  min-width: 0;
+  line-height: 1;
+}
+
+.qfb-tag-button:enabled:hover:not([aria-pressed="true"]) {
+  color: var(--tag-color);
+  background-color: color-mix(in srgb, var(--tag-color) 20%, transparent);
+  border-color: var(--tag-color);
+}
+
+.qfb-tag-button[aria-pressed="true"]:enabled:hover {
+  color: var(--tag-contrast-color);
+  background-color: color-mix(in srgb, var(--tag-color) 70%, white);
+  border-color: color-mix(in srgb, var(--tag-color) 60%, black);
+}
+
+.qfb-tag-button[aria-pressed="true"] {
+  --tag-color: currentColor;
+  color: var(--tag-contrast-color);
+  background-color: var(--tag-color);
+  border-color: color-mix(in srgb, var(--tag-color) 60%, black);
+  border-radius: 100px;
+  box-shadow: none;
+}
+
+.qfb-tag-button:enabled:hover:active {
+  background-color: color-mix(in srgb, var(--tag-color) 80%, black);
+  border-color: color-mix(in srgb, var(--tag-color) 60%, black);
+}
+
+.qfb-tag-button[inverted] {
+  background-color: transparent;
+  color: var(--tag-color);
+  border-color: var(--tag-color);
+  text-decoration: line-through;
+}
+
+.qfb-tag-button[inverted]:enabled:hover {
+  color: var(--tag-color);
+  background-color: color-mix(in srgb, var(--tag-color) 20%, transparent);
+  border-color: var(--tag-color);
+}
+
+#quickFilterBarContainer {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+#quickFilterBarSecondFilters {
+  display: flex;
+  align-items: center;
+  padding-inline-start: var(--button-margin);
+  flex-wrap: wrap;
+  column-gap: 12px;
+}
+
+#quick-filter-bar-filter-text-bar:not([hidden]) {
+  --button-padding: 3px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+#quick-filter-bar-filter-text-bar > .button-group > .button {
+  min-width: 0;
+}
+
+#qfb-upsell-line-one {
+  font-weight: bold;
+}
+
+/*#threadTree[filterActive] {
+  background-repeat: no-repeat;
+  background-position: center;
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: .3;
+}
+
+#threadTree[filterActive="searching"] {
+  background-image: url("chrome://messenger/skin/icons/search-spinner.svg");
+}*/