Revision control
Copy as Markdown
Other Tools
/* 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
.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;
&[collapsed] {
display: none;
height: 0;
}
:root[lwt-tree] & {
background-color: var(--sidebar-background-color);
color: var(--sidebar-text-color);
}
}
.attachmentItem {
border: 1px solid transparent;
min-width: 10em;
padding: 1px 3px;
border-radius: 2px;
display: flex;
align-items: baseline;
flex-shrink: 1;
& > * {
/* 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;
}
& > .attachmentcell-icon {
flex: 0 0 auto;
align-self: center;
}
& > .attachmentcell-name {
flex: 0 1 auto;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
& > .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;
}
& > .attachmentcell-size {
flex: 0 0 auto;
}
&:not(.notfound):hover .text-link {
text-decoration: underline;
}
.attachmentList:focus &[selected="true"] {
background-color: var(--button-primary-background-color);
& .attachmentcell-size {
opacity: 0.8;
}
& > * {
color: inherit;
}
}
.attachmentList[seltype="multiple"]:focus &[current="true"] {
background-color: var(--selected-item-color);
outline: none;
&[selected="true"] {
border-color: var(--sidebar-highlight-border-color,
var(--item-focus-selected-border-color));
}
}
/* Hide the drop indicator for the message pane attachment list. */
#attachmentList & .attach-drop-indicator {
display: none;
}
#attachmentBucket & .attach-drop-indicator {
position: absolute;
z-index: 3;
display: none;
margin: -6px -6px -4px;
transform: scale(0.8);
}
#attachmentBucket &[dropOn="before"] .attach-drop-indicator.before {
display: inline;
}
#attachmentBucket &[dropOn="after"] .attach-drop-indicator.after {
display: inline;
}
:root[lwt-tree] .attachmentList & {
color: var(--sidebar-text-color) !important;
}
:root[lwt-tree] .attachmentList &:hover {
background-color: hsla(0, 0%, 50%, 0.15);
border-color: transparent;
}
:root[lwt-tree] .attachmentList &[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 &[selected="true"] {
background: var(--sidebar-highlight-background-color, hsla(0, 0%, 80%, 0.3));
color: var(--sidebar-highlight-text-color, var(--sidebar-text-color)) !important;
}
:root[lwt-tree-brighttext] .attachmentList:focus &[selected="true"] {
background: var(--sidebar-highlight-background-color, rgba(249, 249, 250, 0.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;
}