1 files changed, 168 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/attachmentList.css b/comm/mail/themes/shared/mail/attachmentList.css
new file mode 100644
index 0000000000..a0142d2b00
--- /dev/null
+++ b/comm/mail/themes/shared/mail/attachmentList.css
@@ -0,0 +1,168 @@
+/* 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/. */
+
+.attachmentList {
+  appearance: none;
+  -moz-user-focus: normal;
+  margin: 0;
+  padding: 3px;
+  background-color: var(--layout-background-2);
+  color: var(--layout-color-2);
+  border: none;
+  display: flex;
+  overflow-x: hidden;
+  align-items: start;
+  align-content: start;
+  flex: 1;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.attachmentList[collapsed] {
+  display: none;
+  height: 0;
+}
+
+.attachmentItem {
+  border: 1px solid transparent;
+  min-width: 10em;
+  padding: 1px 3px;
+  border-radius: 2px;
+  display: flex;
+  align-items: baseline;
+}
+
+.attachmentItem > * {
+  /* We treat the entire attachment item as a single object for click events.
+   * This ensures that dragging will drag the entire widget by default, and
+   * click event targets will point to the attachmentItem, rather than a
+   * descendant. */
+  pointer-events: none;
+}
+
+.attachmentList:focus > .attachmentItem[selected="true"] > * {
+  color: inherit;
+}
+
+.attachmentItem > .attachmentcell-icon {
+  flex: 0 0 auto;
+  align-self: center;
+}
+
+.attachmentItem > .attachmentcell-name {
+  flex: 0 1 auto;
+  white-space: nowrap;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+
+.attachmentItem > .attachmentcell-extension {
+  /* The extension part grows to fill the available space after the attachment
+   * name, but the name part shrinks when we do not have enough space. */
+  flex: 1 0 auto;
+}
+
+.attachmentItem > .attachmentcell-size {
+  flex: 0 0 auto;
+}
+
+.attachmentList[seltype="multiple"]:focus .attachmentItem[current="true"] {
+  border-color: var(--selected-item-color);
+  outline: none;
+}
+
+/* Hide the drop indicator for the message pane attachment list. */
+#attachmentList .attachmentItem .attach-drop-indicator {
+  display: none;
+}
+
+#attachmentBucket .attachmentItem .attach-drop-indicator {
+  position: absolute;
+  z-index: 3;
+  display: none;
+  margin: -6px -6px -4px;
+  transform: scale(0.8);
+}
+
+#attachmentBucket .attachmentItem[dropOn="before"] .attach-drop-indicator.before {
+  display: inline;
+}
+
+#attachmentBucket .attachmentItem[dropOn="after"] .attach-drop-indicator.after {
+  display: inline;
+}
+
+.attachmentList[seltype="multiple"]:focus
+  .attachmentItem[current="true"][selected="true"] {
+  border-color: var(--sidebar-highlight-border-color, var(--item-focus-selected-border-color));
+}
+
+:root[lwt-tree] .attachmentList {
+  background-color: var(--sidebar-background-color);
+  color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree] .attachmentList .attachmentItem {
+  color: var(--sidebar-text-color) !important;
+}
+
+:root[lwt-tree] .attachmentList .attachmentItem:hover {
+  background-color: hsla(0, 0%, 50%, .15);
+  border-color: transparent;
+}
+
+:root[lwt-tree] .attachmentList .attachmentItem[selected="true"] {
+  border-color: hsla(0, 0%, 50%, 0.2);
+  background: hsla(0, 0%, 50%, 0.2);
+  color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree] .attachmentList:focus .attachmentItem[selected="true"] {
+  background: var(--sidebar-highlight-background-color, hsla(0, 0%, 80%, .3));
+  color: var(--sidebar-highlight-text-color, var(--sidebar-text-color)) !important;
+}
+
+:root[lwt-tree-brighttext] .attachmentList:focus .attachmentItem[selected="true"] {
+  background: var(--sidebar-highlight-background-color, rgba(249, 249, 250, .1));
+}
+
+#attachmentName.notfound,
+.attachmentItem.notfound {
+  text-decoration-line: line-through;
+}
+
+.attachmentcell-icon {
+  margin: 1px;
+  width: 16px;
+  height: 16px;
+}
+
+.attachmentcell-name,
+.attachmentcell-extension,
+.attachmentcell-size {
+  margin-block: 2px;
+}
+
+/* NOTE: We do not create a margin between the name and extension. */
+.attachmentcell-name,
+.attachmentcell-size {
+  margin-inline-start: 6px;
+}
+
+.attachmentcell-extension,
+.attachmentcell-size {
+  margin-inline-end: 5px;
+}
+
+.attachmentcell-size {
+  opacity: 0.6;
+}
+
+.attachmentList:focus .attachmentItem[selected="true"] .attachmentcell-size {
+  opacity: 0.8;
+}
+
+.attachmentItem:not(.notfound):hover .text-link {
+  text-decoration: underline;
+}