diff options
Diffstat (limited to 'comm/mail/themes/shared/mail/chat.css')
| -rw-r--r-- | comm/mail/themes/shared/mail/chat.css | 1006 |
1 files changed, 1006 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/chat.css b/comm/mail/themes/shared/mail/chat.css new file mode 100644 index 0000000000..e7a65f137f --- /dev/null +++ b/comm/mail/themes/shared/mail/chat.css @@ -0,0 +1,1006 @@ +/* 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/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +#chatTabPanel { + --imbox-selected-text-color: FieldText; + --imbox-selected-background-color: Field; + --imgroup-selected-background-color: ThreeDLightShadow; + overflow: hidden; +} + +:root[lwt-tree-brighttext] #chatTabPanel { + --imbox-selected-text-color: #f9f9fa; + --imbox-selected-background-color: #18181a; +} + +.im-placeholder-screen { + color: FieldText; + background-color: Field; + overflow: auto; + font-size: 15px; + font-weight: normal; +} + +:root[lwt-tree-brighttext] .im-placeholder-screen { + color: var(--sidebar-text-color); + background-color: var(--sidebar-background-color); +} + +.im-placeholder-box { + max-width: calc(500px + 9em); + min-height: 3em; + background: url("chrome://global/skin/icons/info.svg") left 0 no-repeat; + -moz-context-properties: fill; + fill: currentColor; + background-size: 3em; + margin-right: .5em; + margin-left: .5em; + padding-right: 4.5em; + padding-left: 4.5em; +} + +.im-placeholder-innerbox { + opacity: .8; +} + +.im-placeholder-title { + font-size: 2em; + font-weight: lighter; + line-height: 1.2; + margin: 0; + margin-bottom: .5em; + padding-bottom: .4em; + border-bottom: 1px solid var(--splitter-color); +} + +.im-placeholder-desc { + margin-right: 0; + margin-left: 0; +} + +#noPreviousConvDesc { + margin-top: 0; + margin-bottom: 0; +} + +.im-placeholder-button-box > button { + appearance: none; + /* override forms.css */ + font: inherit; + min-height: 30px; + color: inherit; + border: 1px solid var(--button-border-color); + border-radius: var(--button-border-radius); + background-color: var(--button-background-color); +} + +.im-placeholder-button-box > button:hover { + background-color: var(--button-hover-background-color); +} + +.im-placeholder-button-box > button:hover:active { + background-color: var(--button-active-background-color); +} + +.im-placeholder-button-box > button:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); +} + +.im-placeholder-button-box > button > .button-box { + padding-inline: 10px; +} + +#listPaneBox { + border-inline-end: 1px solid var(--splitter-color); +} + +:root[lwt-tree] #listPaneBox { + appearance: none; + background-color: var(--sidebar-background-color); + border-inline-end-color: var(--sidebar-border-color); + color: var(--sidebar-text-color); +} + +:root[lwt-tree-brighttext] #listPaneBox { + border-inline-end-color: var(--sidebar-border-color); +} + +#contactlistbox { + color: inherit; + margin: 0; + /* make it possible to let the children overwrite the end border. + margin-inline-start because of the inverted direction */ + margin-inline-start: -1px; + contain: size; +} + +/* move the scrollbar to the left */ +#contactlistbox:-moz-locale-dir(ltr), +#contactlistbox:-moz-locale-dir(rtl) > richlistitem:is([is="chat-imconv-richlistitem"],[is="chat-contact-richlistitem"],[is="chat-group-richlistitem"]) { + direction: rtl; +} + +#contactlistbox:-moz-locale-dir(rtl), +#contactlistbox:-moz-locale-dir(ltr) > richlistitem:is([is="chat-imconv-richlistitem"],[is="chat-contact-richlistitem"],[is="chat-group-richlistitem"]) { + direction: ltr; +} + +richlistitem[is="chat-group-richlistitem"] { + align-items: center; + padding-inline-start: 4px; + margin-inline-end: 1px; +} + +richlistitem[is="chat-group-richlistitem"] > label { + margin-inline-start: 4px; +} + +richlistitem[is="chat-group-richlistitem"], +richlistitem[is="chat-imconv-richlistitem"][unread] { + font-weight: bold; +} + +richlistitem[is="chat-imconv-richlistitem"][attention] { + color: blue; +} + +richlistitem[is="chat-group-richlistitem"][selected] { + background-color: var(--imgroup-selected-background-color); + color: var(--imbox-selected-text-color); +} + +richlistbox:focus > richlistitem[is="chat-group-richlistitem"][selected="true"] { + background-color: var(--imgroup-selected-background-color); + color: var(--imbox-selected-text-color); +} + +richlistitem[is="chat-imconv-richlistitem"], +richlistitem[is="chat-contact-richlistitem"] { + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; + align-items: center; +} + +.contact-hbox { + align-items: center; + overflow: hidden; +} + +.conv-hbox { + overflow: hidden; +} + +.box-line { + width: 2px; + height: 100%; +} + +richlistitem[is="chat-contact-richlistitem"] > .box-line { + /* equalize the space, the .closeConversationButton uses */ + margin-inline-end: 22px; +} + +.box-line[selected=true] { + background-color: var(--tabline-color); +} + +richlistitem:is([is="chat-imconv-richlistitem"],[is="chat-contact-richlistitem"],[is="chat-group-richlistitem"]) { + pointer-events: auto; +} + +richlistitem:is([is="chat-imconv-richlistitem"],[is="chat-contact-richlistitem"],[is="chat-group-richlistitem"]):not([selected=true]):hover { + background-color: rgba(0,0,0,.1); +} + +:root[lwt-tree] richlistitem[is="chat-group-richlistitem"], +:root[lwt-tree] richlistitem[is="chat-imconv-richlistitem"]:not([selected]), +:root[lwt-tree] richlistitem[is="chat-contact-richlistitem"]:not([selected]) { + color: var(--sidebar-text-color); +} + +richlistitem[is="chat-imconv-richlistitem"][selected=true], +richlistitem[is="chat-contact-richlistitem"][selected=true] { + background-color: var(--imbox-selected-background-color) !important; + border-color: var(--splitter-color) !important; + color: var(--imbox-selected-text-color) !important; +} + +:root[lwt-tree] richlistitem[is="chat-group-richlistitem"][selected], +:root[lwt-tree] richlistitem:is([is="chat-imconv-richlistitem"],[is="chat-contact-richlistitem"],[is="chat-group-richlistitem"]):not([selected=true]):hover { + background-color: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.3)); + color: var(--sidebar-highlight-text-color, var(--sidebar-text-color)); +} + +:root[lwt-tree-brighttext] richlistitem[is="chat-group-richlistitem"][selected], +:root[lwt-tree-brighttext] richlistitem:is([is="chat-imconv-richlistitem"],[is="chat-contact-richlistitem"],[is="chat-group-richlistitem"]):not([selected=true]):hover { + background-color: var(--sidebar-highlight-background-color, rgba(249,249,250,.1)); +} + +richlistitem[is="chat-imconv-richlistitem"]:not(:hover) > .closeConversationButton { + visibility: hidden; +} + +/* From instantbird/themes/blist.css */ +.contactStatusText, +.convStatusText { + color: GrayText; +} + +.convDisplayName, +.blistDisplayName, +.contactDisplayName, +richlistitem[is="chat-group-richlistitem"] > label { + display: inline-block; +} + +.blistDisplayName { + flex: 1 auto; +} + +.convUnreadCount, +.contactDisplayName, +.convDisplayName, +.contactDisplayNameInput { + margin-inline-end: 0; +} + +.contactDisplayNameInput { + margin: 0; +} + +.convUnreadCount { + margin-inline-start: 0.5ch; +} + +.convUnreadTargetedCount { + color: hsl(0, 100%, 27%); + background-color: hsl(0, 100%, 87%); + border-radius: 50px; + margin: 1px 3px; + margin-inline-start: 1ch; +} + +.convUnreadCount[value="0"], +.convUnreadTargetedCount[value="0"] { + display: none; +} + +.convUnreadTargetedCountLabel { + margin: 0; +} + +.contactStatusText, +.convStatusText { + margin-inline-start: 0; +} + +/* Avoid a strange jumping bug when hovering and the startChatBubble appears */ +.contact-vbox { + min-height: 40px; +} + +.startChatBubble, +.closeConversationButton { + margin: 0 3px; + padding: 0; + border: none; + background: transparent; + appearance: none; + width: 16px; + height: 16px; + min-height: 16px; + min-width: 16px; + cursor: pointer; + -moz-user-focus: ignore; +} + +.startChatBubble { + display: none; + list-style-image: var(--icon-new-chat); + -moz-context-properties: fill, stroke; + fill: color-mix(in srgb, currentColor 20%, transparent); + stroke: currentColor; +} + +richlistitem[is="chat-contact-richlistitem"][cansend]:hover .startChatBubble { + display: flex; +} + +.closeConversationButton > .button-box > .button-icon { + width: 16px; + height: 16px; +} + +/* From im/themes/conversation.css */ +.browser { + margin: 0 0; +} + +.conv-bottom, .conv-nicklist { + margin: 0 0; +} + +.convBox { + min-height: 135px; + min-width: 200px; +} + +.conv-top { + min-height: 60px; +} + +.conv-top-info { + margin: 0; + border-style: none; + appearance: none; + -moz-window-dragging: no-drag; + border-bottom: 1px solid var(--splitter-color); +} + +.userIcon { + border: 2px solid rgba(0,0,0,0.15); + border-radius: 5px; + object-fit: contain; + width: 48px; + height: 48px; +} + +:root[lwt-tree-brighttext] .userIcon { + border-color: rgba(255,255,255,0.15); +} + +.userIcon:not([src]) { + display: none; +} + +.fillUserIcon { + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.3; +} + +.statusTypeIcon, .smallStatusIcon { + /* Place in opposite corner. */ + /* NOTE: unlike position: absolute, the image will still take up space if its + * sibling (such as .userIcon) is hidden. */ + margin-block: auto 0; + margin-inline: auto 0; +} + +.statusTypeIcon { + width: 16px; + height: 16px; + -moz-context-properties: fill, stroke; + fill: color-mix(in srgb, var(--color-ink-50) 20%, transparent); + stroke: var(--color-ink-50); +} + +#statusTypeIcon:not([disabled]) { + cursor: pointer; +} + +.userIcon:not([src]) + .statusTypeIcon { + /* If userIcon is invisible (for chat) we still keep the status icon in the + * same position. */ + padding-block-start: 32px; +} + +/* Used with protoIcon. */ +.smallStatusIcon { + width: 10px; + height: 10px; +} + +#protolist richlistitem { + align-items: center; +} + +.protoIcon { + width: 16px; + height: 16px; + object-fit: contain; +} + +.protoIconDimmed { + opacity: 0.7; +} + +richlistitem:not([selected]) .protoIconDimmed { + opacity: 0.3; +} + +:root[lwt-tree-brighttext] .protoIconDimmed { + opacity: 0.8; +} + +:root[lwt-tree-brighttext] richlistitem:not([selected]) .protoIconDimmed { + opacity: 0.5; +} + +#statusTypeIcon[status="available"], +#statusTypeAvailable, +#imStatusAvailable { + list-style-image: var(--icon-status-online); +} + +#statusTypeIcon[status="idle"] { + list-style-image: var(--icon-status-idle); +} + +#statusTypeIcon[status="offline"], +#statusTypeIcon[status="invisible"], +#statusTypeOffline, +#imStatusOffline { + list-style-image: var(--icon-status-offline); +} + +#statusTypeIcon[status="unavailable"], +#statusTypeIcon[status="away"], +#statusTypeUnavailable, +#imStatusUnavailable { + list-style-image: var(--icon-status-away); +} + +/* corresponds to im/themes/conversation.css @media all and (min-height: 251px) */ +.displayUserAccount { + padding: 6px; + display: flex; + gap: 6px; +} + +/* User image and status stack. */ +.displayUserAccount > stack { + flex: 0 0 auto; + align-self: start; +} + +.nameAndStatusGrid { + display: grid; + grid-template-columns: 1fr auto; + align-items: center; + gap: 4px; + flex: 1 1 auto; +} + +.nameAndStatusGrid > * { + margin: 0; +} + +.nameAndStatusGrid > :is(hr, .statusMessage, .statusMessageInput) { + grid-column: 1 / 3; +} + +.nameAndStatusGrid > hr { + height: 0; + border-block-start: 1px solid hsla(0, 0%, 50%, 0.5); + border-block-end: none; + border-inline: none; +} + +.displayName { + font-size: larger; + display: block; +} + +.nameAndStatusGrid > .displayName:empty + hr { + display: none; +} + +.statusMessage { + display: inline-block; +} + +.statusMessage[noTopic] { + font-style: italic; +} + +.statusMessageInput[editing] { + color: -moz-dialogtext; +} + +.conv-messages { + min-width: 150px; +} + +/* Animation copied from the find bar in Firefox - http://dxr.mozilla.org/mozilla-central/source/toolkit/themes/linux/global/findBar.css#7 */ +.conv-status-container { + display: block; + height: 20px; + padding: 3px; + border-bottom: 1px solid ThreeDShadow; + transition-property: margin-top, opacity, visibility; + transition-duration: 150ms, 150ms, 0s; + transition-timing-function: ease-in-out, ease-in-out, linear; +} + +.conv-status-container[hidden] { + /* Override display:none to make the transition work. */ + display: flex; + visibility: collapse; + margin-top: -1em; + opacity: 0; + transition-delay: 0s, 0s, 150ms; +} + +.conv-textbox { + appearance: none; + margin: 0; + /* margin-inline-end so the borders show up on all sides. */ + margin-inline-end: 1px; + padding: 2px; + box-sizing: content-box; + border: 2px solid transparent; +} + +:root[lwt-tree] .conv-textbox { + background-color: var(--toolbar-field-background-color); + color: var(--toolbar-field-color); +} + +.conv-textbox:focus-visible { + border-color: var(--toolbar-field-focus-border-color); + outline-style: none; +} + +.conv-textbox[invalidInput="true"] { + border-color: red; +} + +.conv-counter { + justify-self: end; + align-self: end; + color: #000; + background-color: rgba(246, 246, 246, 0.7); + border-inline-start: 1px solid rgb(200, 200, 200); + border-top: 1px solid rgb(200, 200, 200); + /* Padding that gets flipped to margins in .conv-counter[value^="0"] to avoid the red border. */ + font-size: 130%; + padding-top: 0; + padding-bottom: 1px; + padding-inline-start: 5px; + padding-inline-end: 6px; + margin: 0; +} + +:root[lwt-tree-brighttext] .conv-counter { + color: var(--sidebar-text-color); + background-color: rgba(22, 22, 22, 0.2); + border-inline-start: 1px solid var(--splitter-color); + border-top: 1px solid var(--splitter-color); +} + +.conv-counter:-moz-locale-dir(ltr) { + border-top-left-radius: 3px; +} + +.conv-counter:-moz-locale-dir(rtl) { + border-top-right-radius: 3px; +} + +.conv-counter[value=""] { + display: none; +} + +/* Negative counter values (user went over the character limit). */ +.conv-counter[value^="-"] { + color: red; +} + +.splitter[orient="vertical"], +#logsSplitter { + border-style: none; + min-height: 0; + /* splitter grip area */ + height: 5px; + background-color: transparent; + /* make only the splitter border visible */ + margin-top: -5px; + margin-inline-start: 0; + /* because of the negative margin needed to make the splitter visible */ + position: relative; + z-index: 10; + border-bottom: 1px solid var(--splitter-color); +} + +/* Adaptation of #folderpane_splitter */ +#listSplitter, +#contextSplitter { + margin-top: 0; + /* splitter grip area */ + width: 5px; + /* because of the negative margin needed to make the splitter visible */ + position: relative; + z-index: 10; + transition: border-width .3s ease-in; +} + +#listSplitter { + border-inline-start: 1px solid transparent; + /* make only the splitter border visible */ + margin-inline-end: -5px; +} + +#listSplitter[state="collapsed"]:hover { + border-inline-start: 4px solid var(--selected-item-color); +} + +#contextSplitter { + border-inline-end: 1px solid var(--splitter-color); + /* make only the splitter border visible */ + margin-inline-start: -5px; +} + +#contextSplitter[state="collapsed"]:hover { + border-inline-end: 4px solid var(--selected-item-color); +} + +#conv-toolbar { + border-style: none; +} + +#logTree { + margin: 0 0; +} + +.conv-nicklist-label { + pointer-events: none; + font-weight: bold; + padding-inline-start: 1px; + display: inline-block; +} + +.conv-nicklist-image { + pointer-events: none; + width: 16px; + margin: 0 2px; + -moz-context-properties: fill, stroke; + fill: color-mix(in srgb, currentColor 20%, transparent); + stroke: currentColor; +} + +.conv-nicklist-image:not([src]) { + visibility: hidden; +} + +.conv-logs-header-label { + appearance: auto; + -moz-default-appearance: treeheadercell; + margin: 0 -1px 0 0; + padding-left: 3px; +} + +#nicklist > richlistitem[inactive] > .conv-nicklist-image { + opacity: 0.45; +} + +#nicklist > richlistitem[inactive][selected] > .conv-nicklist-image { + opacity: 0.7; +} + +#nicklist > richlistitem[inactive] > label { + color: GrayText !important; + font-weight: normal; +} + +.conv-nicklist:focus > richlistitem[inactive][selected] > label { + color: var(--selected-item-text-color) !important; +} + +/* from instantbird/themes/blist.css */ +richlistitem[is="chat-group-richlistitem"] .twisty { + padding-top: 1px; + width: 10px; + height: 10px; + margin-inline-start: 5px; + background: var(--icon-nav-down-sm) no-repeat center; + background-size: contain; + -moz-context-properties: stroke; + stroke: currentColor; +} + +richlistitem[is="chat-group-richlistitem"].closed .twisty { + transform: rotate(-90deg); +} + +richlistitem[is="chat-group-richlistitem"].closed:-moz-locale-dir(rtl) .twisty { + transform: rotate(90deg); +} + +@media (prefers-reduced-motion: no-preference) { + richlistitem[is="chat-group-richlistitem"] .twisty { + transition: transform 200ms ease; + } +} + +.prplBuddyIcon { + margin: 2px 0; +} + +.searchProtoIcon { + -moz-context-properties: fill; + fill: currentColor; + opacity: 0.54; +} + +#statusTypeIcon { + min-width: 40px; +} + +/* show the status icon also in text mode */ +toolbar[mode="text"] #statusTypeIcon > .toolbarbutton-icon { + display: flex; +} + +.status-container { + width: 15em; +} + +#statusMessageLabel:not([statusType="offline"],[disabled]) { + cursor: text; +} + +#statusMessageInput.status-message-input { + margin: 0; +} + +.statusMessageToolbarItem { + margin: 2px 4px; + margin-inline-start: -1px; + padding: 3px 5px 4px; + border: 1px solid transparent; + border-radius: var(--button-border-radius); + background-clip: padding-box; +} + +#chat-status-selector:hover > vbox > .statusMessageToolbarItem, +.statusMessageToolbarItem:focus { + color: var(--toolbar-field-color); + background-color: var(--toolbar-field-background-color); + border-color: var(--toolbar-field-border-color); +} + +#chat-status-selector > vbox > .statusMessageToolbarItem[editing], +.statusMessageToolbarItem:-moz-lwtheme:focus { + appearance: none; + padding-inline-start: 4px; + padding-inline-end: 4px; + color: var(--toolbar-field-color); + background-color: var(--toolbar-field-focus-background-color); + border-color: var(--toolbar-field-focus-border-color); + outline: 1px solid var(--toolbar-field-focus-border-color); +} + +.statusMessageToolbarItem[statusType="offline"], +.statusMessageToolbarItem[disabled] { + border: none; +} + +.alltabs-item[style*="chat.svg"] { + -moz-context-properties: fill, stroke-opacity; + stroke-opacity: 0; + fill: currentColor; +} + +#button-add-buddy { + list-style-image: var(--icon-new-contact); +} + +#button-join-chat { + list-style-image: var(--icon-new-chat); +} + +#button-chat-accounts { + list-style-image: var(--icon-id); +} + +:root[lwt-tree] #contextPane { + background-color: var(--sidebar-background-color); + border-bottom: 1px solid var(--sidebar-border-color); + color: var(--sidebar-text-color); +} + +#contextPaneFlexibleBox { + overflow: hidden; + display: flex; + flex-direction: column; +} + +#contextPaneFlexibleBox vbox.conv-chat { + flex: 1 1 0; + min-height: 0; +} + +#previousConversations { + flex: 1 1 0; +} + +:root[lwt-tree] #nicklist, +:root[lwt-tree] .conv-nicklist-header, +:root[lwt-tree] .conv-logs-header-label { + appearance: none; + background-color: var(--sidebar-background-color); + border-bottom: 1px solid var(--sidebar-border-color); + color: var(--sidebar-text-color); +} + +:root[lwt-tree-brighttext] #nicklist, +:root[lwt-tree-brighttext] .conv-nicklist-header, +:root[lwt-tree-brighttext] .conv-logs-header-label { + border-bottom-color: var(--sidebar-border-color, rgba(249,249,250,.2)); +} + +.conv-header-label { + display: inline-block; +} + +#participantCount { + background: transparent; + width: 0; +} + +:root[lwt-tree] #participantCount { + color: var(--sidebar-text-color); +} + +:root[lwt-tree] .conv-nicklist > richlistitem { + color: var(--sidebar-text-color); + box-shadow: none; +} + +:root[lwt-tree] .conv-nicklist > richlistitem[selected="true"], +:root[lwt-tree] .conv-nicklist:focus > richlistitem[current="true"], +:root[lwt-tree] .conv-nicklist:focus > richlistitem[selected="true"] { + background-color: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.3)); + background-image: none; + border-color: var(--sidebar-border-color); + color: var(--sidebar-highlight-text-color, var(--sidebar-text-color)); +} + +:root[lwt-tree-brighttext] .conv-nicklist > richlistitem[selected="true"], +:root[lwt-tree-brighttext] .conv-nicklist:focus > richlistitem[current="true"], +:root[lwt-tree-brighttext] .conv-nicklist:focus > richlistitem[selected="true"] { + background-color: var(--sidebar-highlight-background-color, rgba(249,249,250,.1)); + border-color: var(--sidebar-highlight-background-color, rgba(249,249,250,.1)); +} + +:root[lwt-tree] #nicklist > richlistitem[inactive]:not([selected]) > label { + color: var(--sidebar-text-color) !important; + opacity: .55; +} + +:root[lwt-tree] #nicklist > richlistitem[inactive][selected] > label, +:root[lwt-tree] #nicklist:focus > richlistitem[inactive][selected] > label { + color: var(--sidebar-highlight-text-color, var(--sidebar-text-color)) !important; +} + +:root[lwt-tree] #logTree { + appearance: none; +} + +#goToConversation { + appearance: none !important; + margin: 4px; + padding: 1px !important; + color: inherit !important; + border: 1px solid hsla(0, 0%, 50%, 0.5); + border-radius: var(--button-border-radius); + background-color: hsla(0, 0%, 50%, 0.2) !important; + box-shadow: none; + transition-property: background-color, border-color, box-shadow; + transition-duration: 150ms; +} + +#goToConversation:hover { + background-color: hsla(0, 0%, 50%, 0.3) !important; +} + +#goToConversation:hover:active { + background-color: hsla(0, 0%, 50%, 0.4) !important; + box-shadow: 0 0 1px hsla(0, 0%, 50%, 0.15) inset; +} + + +/* Chat Toolbar button. */ +toolbar[mode="text"] #button-chat { + flex-direction: row; +} + +.badgeButton-badge { + background-color: red; + border: 1px solid white; + border-radius: 1em; + box-shadow: 1px 1px 1px black; + color: white; + font: xx-small Helvetica, Verdana, Tahoma, sans-serif; + height: -moz-fit-content; + min-width: 1em; + text-align: center; + margin-top: -4px; + margin-inline-start: 5px; + margin-inline-end: 0; + padding-inline: 1px; + padding-block: 1px 0; +} + +toolbar[mode="text"] .badgeButton-badge { + margin: 0; +} + +.badgeButton-badgeLabel { + margin: 0; +} + +/* encryption status selector */ + +.encryption-container { + border-top: 1px solid var(--splitter-color); + min-height: 32px; + padding: 4px; +} + +.encryption-label { + font-weight: 600; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden; + min-width: 0; +} + +.encryption-not-private > image { + list-style-image: url("chrome://messenger/skin/icons/new/chat-lock-insecure.svg"); +} + +.encryption-unverified > image { + list-style-image: url("chrome://messenger/skin/icons/new/chat-lock-unverified.svg"); +} + +.encryption-finished > image { + list-style-image: url("chrome://messenger/skin/icons/new/chat-lock-finished.svg"); +} + +.encryption-private > image { + list-style-image: url("chrome://messenger/skin/icons/new/chat-lock-private.svg"); +} + +.encryption-button { + appearance: none !important; + padding: 1px !important; + border: 1px solid var(--toolbarbutton-hover-bordercolor); + border-radius: var(--button-border-radius); + background: var(--toolbarbutton-hover-background) !important; + box-shadow: var(--toolbarbutton-hover-boxshadow); + transition-property: background-color, border-color, box-shadow; + transition-duration: 150ms; + -moz-context-properties: fill, stroke; + fill: color-mix(in srgb, currentColor 20%, transparent); + stroke: currentColor; +} + +.encryption-button:not([disabled="true"]):not([open="true"]):hover { + background: var(--toolbarbutton-active-background) !important; + border-color: var(--toolbarbutton-active-bordercolor); +} + +.encryption-button[open="true"] { + background: var(--toolbarbutton-active-background) !important; + border-color: var(--toolbarbutton-active-bordercolor); + box-shadow: var(--toolbarbutton-active-boxshadow); +} + +.encryption-button > image { + margin-inline-end: 3px !important; + width: 14px; +} + +.encryption-button .toolbarbutton-menu-dropmarker { + appearance: none !important; + list-style-image: var(--icon-nav-down-sm); + margin-inline: 3px 0; + -moz-context-properties: stroke; + stroke: currentColor; +} |