Bug 1650789 - Improve styles for dark Address book. r=aleca a=wsmwk default tip
authorRichard Marti <richard.marti@gmail.com>
Mon, 06 Jul 2020 16:15:56 +0200
changeset 38908 0679cb00dccb90337fb3bba05f1756e2adf812f7
parent 38907 c8ed3cbea7a4b4905721d8d558902d928b1aa493
push id2652
push usergeoff@darktrojan.net
push dateTue, 07 Jul 2020 23:42:45 +0000
treeherdercomm-beta@0679cb00dccb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersaleca, wsmwk
bugs1650789
Bug 1650789 - Improve styles for dark Address book. r=aleca a=wsmwk
mail/base/content/notification.css
mail/themes/linux/mail/addrbook/addressbook.css
mail/themes/linux/mail/messenger.css
mail/themes/osx/mail/addrbook/addressbook.css
mail/themes/osx/mail/messenger.css
mail/themes/shared/mail/addressbook.css
mail/themes/shared/mail/messenger.css
mail/themes/windows/mail/addrbook/addressbook.css
mail/themes/windows/mail/messenger.css
--- a/mail/base/content/notification.css
+++ b/mail/base/content/notification.css
@@ -60,68 +60,27 @@ button.button-menu-list {
   -moz-appearance: menulist-button;
 }
 
 .messageText > .text-link {
   margin-inline-start: 6px;
 }
 
 button.notification-button {
-  -moz-appearance: none;
-  height: 24px;
-  min-width: 5.5em;
   color: var(--notification-button-color) !important;
   border: 1px solid var(--notification-button-border);
-  border-radius: 2px;
+  border-radius: var(--toolbarbutton-border-radius);
   background: var(--notification-button-background);
-  margin: 1px 5px;
-  padding: 0 4px;
-  box-shadow: none;
 }
 
 button.notification-button:hover {
   background-color: var(--notification-button-hover-background);
 }
 
+button[open="true"],
 button.notification-button:hover:active {
   background-color: var(--notification-button-active-background);
   border-color: var(--notification-button-active-border);
 }
 
-button.notification-button > .button-box {
-  padding: 0;
-}
-
-button.notification-button[type="menu-button"] {
-  -moz-appearance: none;
-}
-
-.notification-button.button-menu-list > .button-box {
-  -moz-appearance: none;
-  padding-inline-end: 14px;
-  background-repeat: no-repeat;
-  background-position: right;
-  background-size: 12px;
-  background-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
-  -moz-context-properties: fill;
-  fill: currentColor;
+button.notification-button[type="menu-button"] > .button-box > button {
+  border-inline-end-color: var(--notification-button-active-border);
 }
-
-button.button-menu-list:-moz-locale-dir(rtl) > .button-box {
-  background-position: left;
-}
-
-button.notification-button[type="menu-button"] > .button-box > button {
-  -moz-appearance: none;
-  height: 22px;
-  min-width: 5.5em;
-  border-inline-end: 1px solid var(--notification-button-active-border);
-  margin-block: -6px;
-  margin-inline: -4px 5px;
-  padding: 0 4px;
-}
-
-button.notification-button > .button-box > dropmarker {
-  -moz-appearance: none;
-  list-style-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
-  -moz-context-properties: fill;
-  fill: currentColor;
-}
--- a/mail/themes/linux/mail/addrbook/addressbook.css
+++ b/mail/themes/linux/mail/addrbook/addressbook.css
@@ -19,23 +19,23 @@
   /* force iconsize="small" on these toolbars */
   counter-reset: smallicons;
 }
 
 #abContent {
   background-color: -moz-Dialog;
 }
 
-/* ::::: directory pane adjustments ::::: */
+/* directory pane adjustments */
 
 #dirTree:not(:-moz-lwtheme) {
   border-bottom: 1px solid ThreeDShadow;
 }
 
-/* ::::: splitters ::::: */
+/* splitters */
 
 #dirTree-splitter {
   -moz-appearance: none;
   border-inline-end: 1px solid var(--splitter-color);
   /* splitter grip area */
   width: 4px;
   /* make only the splitter border visible */
   margin-inline-start: -4px;
@@ -51,57 +51,28 @@
   height: 4px;
   /* make only the splitter border visible */
   margin-bottom: -4px;
   /* because of the negative margin needed to make the splitter visible */
   position: relative;
   z-index: 10;
 }
 
-/* ::::: results pane ::::: */
+/* results pane */
 
 #blankResultsPaneMessageBox {
   border-bottom: 1px solid ThreeDShadow;
 }
 
 #GeneratedName {
   padding-inline-start: 26px;
 }
 
-/* ::::: card view pane ::::: */
+/* card view pane */
 
 #CardViewOuterBox {
   border-bottom: 1px solid ThreeDShadow;
 }
 
-#CardViewInnerBox {
-  margin-top: 2px;
-  margin-bottom: 2px;
-  padding: 0 8px;
-}
-
-#CardTitle {
-  font-size: 150%;
-  font-weight: bold;
-  border-bottom: 2px solid currentColor;
-  min-width: 120px;
-  margin: 0px;
-}
-
-.cardViewGroup {
-  margin-top: 8px;
-  padding-bottom: 5px;
-  min-width: 50px;
-}
-
-.CardViewHeading {
-  padding: 1px;
-  padding-inline-start: 5px;
-  background-color: Highlight;
-  color: HighlightText;
-  font-weight: bold;
-  min-width: 30px;
-}
-
 #cvHomeMapIt,
 #cvWorkMapIt {
   margin-bottom: 0;
 }
--- a/mail/themes/linux/mail/messenger.css
+++ b/mail/themes/linux/mail/messenger.css
@@ -593,32 +593,16 @@ treechildren::-moz-tree-cell-text {
 
 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
   border-left-style: solid;
   border-top-left-radius: .3em;
   margin-left: 1em;
 }
 
-/* menu-button */
-
-button[type="menu-button"] {
-  -moz-appearance: dualbutton;
-}
-
-.button-menubutton-button {
-  margin: 0;
-}
-
-.button-menubutton-dropmarker {
-  -moz-appearance: toolbarbutton-dropdown;
-  margin-left: 3px;
-  margin-right: 3px;
-}
-
 .contentTabInstance {
   background-color: -moz-dialog;
 }
 
 .contentTabInstance:-moz-lwtheme {
   background-color: transparent;
   background-image: linear-gradient(transparent 40px, -moz-dialog 40px);
 }
--- a/mail/themes/osx/mail/addrbook/addressbook.css
+++ b/mail/themes/osx/mail/addrbook/addressbook.css
@@ -33,17 +33,17 @@
   /* force iconsize="small" on these toolbars */
   counter-reset: smallicons;
 }
 
 #abContent:-moz-lwtheme {
   background-color: -moz-OddTreeRow;
 }
 
-/* ::::: directory pane icons ::::: */
+/* directory pane icons */
 
 :root:not([lwt-tree]) #dirTree {
   -moz-appearance: -moz-mac-source-list;
   -moz-font-smoothing-background-color: -moz-mac-source-list;
   border-inline-end: 1px solid #bdbdbd;
 }
 
 #dirTree treechildren::-moz-tree-row {
@@ -78,17 +78,17 @@
 
   :root:not([lwt-tree]) #dirTree treechildren::-moz-tree-image(selected, focus),
   :root:not([lwt-tree]) #dirTree treechildren::-moz-tree-twisty(selected, focus),
   :root:not([lwt-tree]) #dirTree treechildren::-moz-tree-cell-text(selected, focus) {
     color: #282828;
   }
 }
 
-/* ::::: splitters ::::: */
+/* splitters */
 
 #dirTree-splitter {
   border-width: 0;
   border-inline-end: 1px solid var(--splitter-color);
   min-width: 0;
   width: 5px;
   background-color: transparent;
   margin-inline-start: -5px;
@@ -102,72 +102,34 @@
   min-height: 0;
   height: 5px;
   background-color: transparent;
   margin-bottom: -5px;
   position: relative;
   z-index: 10;
 }
 
-/* ::::: results pane ::::: */
+/* results pane */
 
 #GeneratedName {
   padding-inline-start: 42px;
 }
 
-/* ::::: card view pane ::::: */
-
-#blankResultsPaneMessageBox {
-  border-inline-start: 1px solid #bebebe;
-}
-
-#CardViewOuterBox {
-  color: -moz-DialogText;
-  margin: 0;
-  padding: 0;
-}
-
-#CardViewInnerBox {
-  background-color: #fff;
-}
-
-#CardViewInnerBox > hbox {
-  background-color: #fff;
-}
-
-#CardTitle {
-  margin: 6px;
-  padding: 4px;
-  -moz-box-pack: center;
-  font-size: 150%;
-  font-weight: bold;
-}
-
-.cardViewGroup {
-  margin: 0;
-  padding: 6px;
-  min-width: 50px;
-}
+/* card view pane */
 
 .CardViewHeading {
   padding: 3px 5px;
   font: icon;
   font-weight: bold;
   min-width: 30px;
-  color: #505050;
-}
-
-#cvbPhone,
-#cvbWork {
-  border-left: 1px solid #D1D1D1;
 }
 
 #cvHomeMapIt,
 #cvWorkMapIt {
-  margin-bottom: 0px;
+  margin-bottom: 0;
   min-height: 19px; /* aqua size for small buttons */
 }
 
 #titlebar {
   height: 22px;
 }
 
 #titlebar-buttonbox-container {
--- a/mail/themes/osx/mail/messenger.css
+++ b/mail/themes/osx/mail/messenger.css
@@ -593,22 +593,20 @@ button[type="menu-button"] > .button-box
   margin-inline-end: 2px;
 }
 
 .button-menubutton-dropmarker {
   -moz-appearance: none;
 }
 
 button dropmarker::part(icon) {
-  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
-  -moz-context-properties: fill;
-  fill: currentColor;
+  margin-inline-start: 3px;
 }
 
-button[is="button-menu-button"] > .button-box > dropmarker {
+button.notification-button[is="button-menu-button"] > .button-box > dropmarker {
   margin-inline-end: -5px;
 }
 
 /* Status bar */
 
 #status-bar:-moz-lwtheme  {
   padding-top: 1px;
 }
--- a/mail/themes/shared/mail/addressbook.css
+++ b/mail/themes/shared/mail/addressbook.css
@@ -30,17 +30,17 @@
   height: 1px;
   border-bottom: 1px solid var(--tabs-border-color, transparent);
 }
 
 toolbox[labelalign="end"] > toolbar[mode="full"] deck .toolbarbutton-text {
   text-align: start;
 }
 
-/* ::::: primary toolbar buttons ::::: */
+/* primary toolbar buttons */
 
 #button-newcard {
   list-style-image: url("chrome://messenger/skin/icons/addcontact.svg");
 }
 
 #button-newlist {
   list-style-image: url("chrome://messenger/skin/icons/addlist.svg");
 }
@@ -68,17 +68,17 @@ toolbox[labelalign="end"] > toolbar[mode
   color: -moz-DialogText;
 }
 
 #dirTree [sortDirection="ascending"],
 #dirTree [sortDirection="descending"] {
   list-style-image: none;
 }
 
-/* ::::: directory pane icons ::::: */
+/* directory pane icons */
 
 treechildren::-moz-tree-image(DirCol) {
   margin-inline-end: 2px;
   list-style-image: url("chrome://messenger/skin/icons/address.svg");
   opacity: 0.85;
 }
 
 treechildren::-moz-tree-image(DirCol, IsMailList-true) {
@@ -88,17 +88,17 @@ treechildren::-moz-tree-image(DirCol, Is
 treechildren::-moz-tree-image(DirCol, IsRemote-true) {
   list-style-image: url("chrome://messenger/skin/icons/globe.svg");
 }
 
 treechildren::-moz-tree-image(DirCol, IsRemote-true, IsSecure-true) {
   list-style-image: url("chrome://messenger/skin/icons/globe-secure.svg");
 }
 
-/* ::::: results pane ::::: */
+/* results pane */
 
 :root[lwt-tree] #abResultsBox {
   background-color: var(--sidebar-background-color);
   background-image: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15));
   color: var(--sidebar-text-color);
 }
 
 treechildren::-moz-tree-image(GeneratedName) {
@@ -107,41 +107,66 @@ treechildren::-moz-tree-image(GeneratedN
   opacity: 0.85;
 }
 
 treechildren::-moz-tree-image(GeneratedName, MailList) {
   margin-inline-end: 2px;
   list-style-image: url("chrome://messenger/skin/icons/ablist.svg");
 }
 
-/* ::::: card view pane ::::: */
+/* card view pane */
 
 #CardViewBox {
   -moz-user-focus: ignore;
   overflow: auto;
   min-width: 150px;
 }
 
+#CardViewInnerBox {
+  margin-top: 2px;
+  margin-bottom: 2px;
+  padding: 0 8px;
+}
+
+.cardViewGroup {
+  margin: 0;
+  padding: 6px;
+  min-width: 50px;
+}
+
 #cvPhoto {
+  margin-top: 6px;
   list-style-image: url("chrome://messenger/skin/addressbook/icons/contact-generic.svg");
-  box-shadow: 0 0 5px rgba(127, 127, 127, 0.7);
+  box-shadow: 0 0 5px hsla(0, 0%, 50%, 0.7);
 }
 
 #cvBuddyIcon {
   padding-inline-start: 20px;
   padding-top: 2px;
 }
 
 #CardTitle,
 .CardViewHeading,
 .CardViewText,
 .CardViewLink {
   -moz-user-select: text;
 }
 
+#CardTitle {
+  font-size: 150%;
+  font-weight: bold;
+  border-bottom: 2px solid currentColor;
+  min-width: 120px;
+  margin: 0;
+}
+
+.CardViewHeading {
+  font-weight: 600;
+}
+
 .CardViewText,
 .CardViewLink {
   padding-inline-start: 20px;
   padding-inline-end: 2px;
   min-width: 30px;
   margin: 0;
 }
 
--- a/mail/themes/shared/mail/messenger.css
+++ b/mail/themes/shared/mail/messenger.css
@@ -132,16 +132,83 @@ description.error {
   min-height: 25px;
   text-shadow: none;
 }
 
 .sidebar-header > xul|label {
   padding-inline-start: 4px;
 }
 
+/* Buttons */
+
+button {
+  -moz-appearance: none;
+  height: 24px;
+  min-width: 5.5em;
+  color: inherit !important;
+  border: 1px solid var(--toolbarbutton-header-bordercolor);
+  border-radius: var(--toolbarbutton-border-radius);
+  background: var(--toolbarbutton-hover-background);
+  margin: 1px 5px;
+  padding: 0 4px;
+  box-shadow: none;
+}
+
+button:hover {
+  border-color: var(--toolbarbutton-active-bordercolor);
+  background-color: var(--toolbarbutton-active-background);
+}
+
+button[open="true"],
+button:hover:active {
+  border-color: var(--toolbarbutton-active-bordercolor);
+  background-color: var(--toolbarbutton-active-background);
+}
+
+button > .button-box {
+  padding: 0;
+}
+
+button[type="menu-button"] {
+  -moz-appearance: none;
+}
+
+.button-menu-list > .button-box {
+  -moz-appearance: none;
+  padding-inline-end: 14px;
+  background-repeat: no-repeat;
+  background-position: right;
+  background-size: 12px;
+  background-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+button.button-menu-list:-moz-locale-dir(rtl) > .button-box {
+  background-position: left;
+}
+
+button[type="menu-button"] > .button-box > button {
+  -moz-appearance: none;
+  min-width: 5.5em;
+  background: transparent;
+  border-color: transparent;
+  border-inline-end-color: var(--toolbarbutton-active-bordercolor);
+  margin-block: -1px;
+  margin-inline: -4px 5px;
+  padding: 0 4px;
+}
+
+button > .button-box > dropmarker {
+  -moz-appearance: none;
+  list-style-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
 #notification-popup-box > image.notification-anchor-icon {
   width: 16px;
   height: 16px;
   -moz-context-properties: fill, fill-opacity;
   fill: var(--lwt-toolbarbutton-icon-fill, currentColor);
   fill-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
 
@@ -332,17 +399,17 @@ html|ul.addon-webext-perm-list:empty {
 }
 
 /* Don't show a menupopup in customize mode */
 toolbarpaletteitem menulist,
 toolbarpaletteitem toolbarbutton {
   pointer-events: none;
 }
 
-/* :::::: throbber :::::::::: */
+/* throbber */
 
 #throbber-box {
   width: 16px;
   min-height: 16px;
   margin: 0 3px;
 }
 
 #throbber-box[busy="true"] {
@@ -356,17 +423,17 @@ toolbarpaletteitem toolbarbutton {
 /* Status panel */
 
 :root[lwt-tree] .statuspanel-label {
   background-color: var(--lwt-toolbar-field-background-color);
   color: var(--lwt-toolbar-field-color, -moz-dialogText);
   border-color: var(--lwt-toolbar-field-border-color);
 }
 
-/* ::::: Status bar ::::: */
+/* Status bar */
 
 #status-bar:-moz-lwtheme {
   border-top: 1px solid var(--tabs-border-color);
 }
 
 #status-bar:-moz-lwtheme-brighttext {
   border-top-color: var(--lwt-accent-color);
 }
@@ -382,31 +449,31 @@ toolbarpaletteitem toolbarbutton {
 label.statusbarpanel {
   margin-block: 3px;
 }
 
 .statusbarpanel-progress {
   -moz-box-align: center;
 }
 
-/* ::::: online/offline icons ::::: */
+/* online/offline icons */
 
 #offline-status {
   padding: 0 2px;
   list-style-image: url("chrome://messenger/skin/icons/online.svg");
   -moz-appearance: none;
   -moz-context-properties: fill;
   fill: currentColor;
 }
 
 #offline-status[offline="true"] {
   list-style-image: url("chrome://messenger/skin/icons/offline.svg");
 }
 
-/* ..... status bar adjustments ..... */
+/* status bar adjustments */
 
 #quotaMeter {
   min-width: 8em;
   max-width: 8em;
   border-color: ThreeDShadow;
 }
 
 #quotaPercentageBar {
@@ -430,32 +497,32 @@ label.statusbarpanel {
 
 #quotaLabel {
   text-align: center;
   margin-top: -1px;
   margin-bottom: -1px;
   color: black;
 }
 
-/* ::::: searchTermOverlay ::::: */
+/* searchTermOverlay */
 
 #searchTermList > richlistitem[highlight = "true"] {
   animation: highlight .4s ease-in;
 }
 
 @keyframes highlight {
   from { background-color: Highlight; }
   to { background-color: transparent; }
 }
 
 #findbar-beforeReplaceSeparator {
   height: 16px;
 }
 
-/* ::::: Address Book menuitem icons ::::: */
+/* Address Book menuitem icons */
 
 .abMenuItem[AddrBook="true"] {
   list-style-image: url("chrome://messenger/skin/icons/address.svg");
 }
 
 .abMenuItem[MailList="true"] {
   list-style-image: url("chrome://messenger/skin/icons/ablist.svg");
 }
@@ -463,17 +530,17 @@ label.statusbarpanel {
 .abMenuItem[AddrBook="true"][IsRemote="true"] {
   list-style-image: url("chrome://messenger/skin/icons/globe.svg");
 }
 
 .abMenuItem[AddrBook="true"][IsRemote="true"][IsSecure="true"] {
   list-style-image: url("chrome://messenger/skin/icons/globe-secure.svg");
 }
 
-/* ::::: Panel toolbarbuttons ::::: */
+/* Panel toolbarbuttons */
 
 .panelTitle {
   margin-top: 8px;
   margin-inline-start: 7px;
   margin-bottom: 6px;
 }
 
 .panelButton {
@@ -511,23 +578,23 @@ label.statusbarpanel {
   color: GrayText;
 }
 
 toolbarpaletteitem toolbarspacer,
 toolbarpaletteitem toolbarspring {
   -moz-window-dragging: no-drag;
 }
 
-/* ::::: MailExtension panels ::::: */
+/* MailExtension panels */
 
 .mail-extension-panel {
   font: menu;
 }
 
-/* :::: autocomplete labels :::: */
+/* autocomplete labels */
 
 html|span.ac-emphasize-text {
   font-weight: bold;
 }
 
 .autocomplete-richlistitem[type$="-abook"]:not([ac-comment=""]) > .ac-url,
 .autocomplete-richlistitem[type$="-abook"]:not([ac-comment=""]) > .ac-separator {
   display: -moz-box;
@@ -574,17 +641,17 @@ html|input[type="number"].size5 {
   width: calc(5ch + 44px);
 }
 
 /* Fix the height of the print preview toolbar */
 #print-preview-toolbar {
   max-height: 2.5em;
 }
 
-/* ::::: Toolbar customization ::::: */
+/* Toolbar customization */
 
 toolbarpaletteitem[type="spacer"] toolbarspacer,
 toolbarpaletteitem[type="spring"] toolbarspring {
   border: 1px solid currentColor;
   background-color: hsla(0, 0%, 100%, .3) !important;
 }
 
 toolbarpaletteitem[type="spacer"][place="toolbar"] toolbarspacer,
--- a/mail/themes/windows/mail/addrbook/addressbook.css
+++ b/mail/themes/windows/mail/addrbook/addressbook.css
@@ -8,45 +8,23 @@
 
 @import url("chrome://messenger/skin/messenger.css");
 @import url("chrome://messenger/skin/shared/addressbook.css");
 
 #abContent {
   background-color: -moz-Dialog;
 }
 
-/* ::::: results pane ::::: */
+/* results pane */
 
 #GeneratedName {
   padding-inline-start: 30px;
 }
 
-/* ::::: card view pane ::::: */
-
-#CardViewInnerBox {
-  margin-top: 2px;
-  margin-bottom: 2px;
-  padding: 0 8px;
-}
-
-#CardTitle {
-  font-size: 150%;
-  font-weight: bold;
-  border-bottom: 2px solid currentColor;
-  min-width: 120px;
-  margin: 0;
-}
-
-.cardViewGroup {
-  margin-top: 8px;
-  padding-bottom: 5px;
-  min-width: 50px;
-}
-
-/* :::: Toolbar :::: */
+/* Toolbar */
 
 #ab-toolbox {
   -moz-appearance: none;
   background-color: var(--toolbar-bgcolor);
   border-bottom: 1px solid var(--chrome-content-separator-color);
 }
 
 @media (-moz-windows-default-theme) {
@@ -96,26 +74,26 @@ toolbox > toolbar:last-of-type {
   }
 
   #menubar-items > #mail-menubar >
     menu:not([disabled="true"])[_moz-menuactive="true"]:-moz-lwtheme-brighttext {
     background-color: hsla(0, 0%, 100%, .2);
   }
 }
 
-/* ::::: Search Textbox ::::: */
+/* Search Textbox */
 
 #peopleSearchInput {
   width: 20em;
   padding-top: 3px;
   padding-bottom: 3px;
   padding-inline-start: 5px;
 }
 
-/* ::::: directory pane adjustments ::::: */
+/* directory pane adjustments */
 
 @media (-moz-windows-default-theme) {
   :root:not([lwt-tree]) #dirTree {
     background-color: #fafafa;
   }
 
   .sidebar-header {
     -moz-appearance: none;
@@ -126,17 +104,17 @@ toolbox > toolbar:last-of-type {
 }
 
 /* Don't use the listbox appearance as that gives us a blue-grey top border
    that collides with the primary toolbar border */
 #dirTree {
   border-inline-end: 1px solid transparent;
 }
 
-/* ::::: splitters ::::: */
+/* splitters */
 
 #dirTree-splitter {
   border-width: 0;
   border-inline-end: 1px solid var(--splitter-color);
   min-width: 0;
   width: 3px;
   background-color: transparent;
   margin-inline-start: -3px;
@@ -150,17 +128,17 @@ toolbox > toolbar:last-of-type {
   min-height: 0;
   height: 3px;
   background-color: transparent;
   margin-bottom: -3px;
   position: relative;
   z-index: 10;
 }
 
-/* ::::: card view pane ::::: */
+/* card view pane */
 
 #CardViewOuterBox {
   border: none;
   border-top: 1px solid ThreeDShadow;
 }
 
 @media (-moz-windows-glass) {
   #ab-toolbox:not(:-moz-lwtheme) {
--- a/mail/themes/windows/mail/messenger.css
+++ b/mail/themes/windows/mail/messenger.css
@@ -133,16 +133,17 @@ toolbar[brighttext] {
 .contentTabToolbox[brighttext],
 #header-view-toolbar[brighttext],
 #ab-toolbox > toolbar[brighttext],
 .mail-toolbox > toolbar[brighttext],
 #event-toolbox > toolbar[brighttext],
 #compose-toolbox > toolbar[brighttext],
 #navigation-toolbox > toolbar[brighttext],
 :root[lwt-tree-brighttext] .otr-container,
+:root[lwt-tree-brighttext] #CardViewBox,
 :root[lwt-tree-brighttext] #searchTerms {
   --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25));
   --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .5));
   --toolbarbutton-header-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25));
 
   --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4));
   --toolbarbutton-active-bordercolor: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .7));
   --toolbarbutton-active-boxshadow: 0 0 0 1px var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4)) inset;
@@ -540,45 +541,16 @@ menupopup[is="folder-menupopup"] > menu,
 menupopup[is="folder-menupopup"] > menuitem {
   -moz-appearance: menuitem !important;
 }
 
 menulist.folderMenuItem::part(label) {
   margin-inline-start: 2px !important;
 }
 
-button[type="menu-button"] > .button-box > button {
-  margin: -5px -7px -6px;
-  margin-inline-end: 6px;
-}
-
-@media (-moz-windows-default-theme: 0) {
-  button[type="menu-button"] > .button-box {
-    padding: 0;
-  }
-
-  button[type="menu-button"] > .button-box > button {
-    margin: -2px;
-  }
-
-  .button-menubutton-dropmarker {
-   -moz-appearance: none;
-   margin: 1px;
-   padding-inline-start: 5px;
-  }
-
-  .button-menubutton-dropmarker::part(icon) {
-    list-style-image: url("chrome://messenger/skin/icons/toolbarbutton-arrow.svg");
-    width: 9px;
-    height: 7px;
-    -moz-context-properties: fill;
-    fill: currentColor;
-  }
-}
-
 button.notification-button {
   margin-bottom: 1px;
 }
 
 .messageCloseButton > .toolbarbutton-icon {
   margin-inline-end: 12px;
 }
 
@@ -813,16 +785,21 @@ menulist > menupopup:not([is="folder-men
     background-color: var(--toolbar-bgcolor);
   }
 }
 
 @media (-moz-windows-classic) {
   .statusbarpanel:not(:-moz-lwtheme) {
     -moz-appearance: statusbarpanel;
   }
+
+  label.statusbarpanel {
+    margin: 1px;
+    padding-block: 2px;
+  }
 }
 
 .statusbarpanel-iconic {
   padding: 0 1px;
 }
 
 /* Status panel */