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
/* ===== messenger.css ==================================================
== Styles shared throughout the Messenger application.
======================================================================= */
/* stylelint-disable-next-line media-query-no-invalid */
@media (-moz-bool-pref: "mail.theme.macos.native-theme") {
/* TODO: Share this with Linux, which effectively does ~the same */
@media not (prefers-contrast) {
:root:not([lwtheme]) {
--toolbar-field-border-color: transparent;
--toolbar-field-background-color: light-dark(rgba(0, 0, 0, .05), rgba(0, 0, 0, .3));
--toolbar-field-color: inherit;
@media (prefers-color-scheme: light) {
--toolbar-bgcolor: white;
--search-bar-background: #fafafa;
}
}
}
:root[tabsintitlebar]:not([lwtheme]) {
-moz-default-appearance: -moz-mac-unified-toolbar-window;
appearance: auto;
#navigation-toolbox {
background: transparent;
/* This is conceptually a background, but putting this on a
* pseudo-element avoids it from suppressing the chrome-content separator
* border, etc */
&::after {
-moz-default-appearance: -moz-window-titlebar;
appearance: auto;
content: "";
position: absolute;
inset: 0;
z-index: -1;
}
}
}
}
#mail-menubar,
#mailContext {
-moz-context-properties: fill, stroke;
fill: color-mix(in srgb, currentColor 20%, transparent);
stroke: currentColor;
}
.sidebar-header {
background-color: -moz-Dialog;
color: -moz-dialogText;
text-shadow: none;
}
.inline-toolbar,
.contentTabToolbar {
appearance: none;
min-width: 50px;
min-height: 14px;
}
.mail-toolbox,
.contentTabToolbox {
box-shadow: inset 0 -1px var(--chrome-content-separator-color);
}
.inline-toolbar > toolbarseparator {
height: 20px;
margin-top: 2px;
}
#titlebar {
/* Centrally align content items vertically */
justify-content: center;
:root[lwtheme] & {
appearance: none;
}
}
.titlebar-button {
display: none;
}
#toolbar-menubar {
visibility: collapse;
}
/* ::::: toolbarbutton menu-button ::::: */
toolbarbutton[is="toolbarbutton-menu-button"] {
align-items: stretch;
flex-direction: row !important;
background-color: transparent;
}
.toolbarbutton-menubutton-button {
text-shadow: inherit;
}
/* .......... dropmarker .......... */
.toolbarbutton-menubutton-dropmarker {
appearance: none;
border: none;
padding: 0 5px;
}
/* ::::: primary toolbar buttons ::::: */
.toolbarbutton-1 {
&[open],
&[open] > .toolbarbutton-menubutton-button {
text-shadow: none;
}
&[checked="true"]:-moz-window-inactive {
box-shadow: var(--toolbarbutton-inactive-boxshadow);
border-color: var(--toolbarbutton-inactive-bordercolor);
background: transparent !important;
}
&[is="toolbarbutton-menu-button"] {
padding: 0;
}
&[disabled="true"] .toolbarbutton-text,
&[is="toolbarbutton-menu-button"] > .toolbarbutton-menubutton-button[disabled="true"]
> .toolbarbutton-icon {
opacity: .4;
}
&[disabled="true"] .toolbarbutton-icon,
&[is="toolbarbutton-menu-button"]
> .toolbarbutton-menubutton-button[disabled="true"] > .toolbarbutton-icon,
&[disabled="true"] > .toolbarbutton-menu-dropmarker,
&[disabled="true"] > .toolbarbutton-menubutton-dropmarker,
&:not(:hover):-moz-window-inactive .toolbarbutton-icon,
&:not(:hover):-moz-window-inactive > .toolbarbutton-menu-dropmarker,
&:not(:hover):-moz-window-inactive > .toolbarbutton-menubutton-dropmarker {
opacity: .5;
}
&:-moz-window-inactive[disabled="true"] > .toolbarbutton-icon,
&:-moz-window-inactive[is="toolbarbutton-menu-button"]
> .toolbarbutton-menubutton-button[disabled="true"] > .toolbarbutton-icon {
opacity: .25;
}
& > .toolbarbutton-menu-dropmarker {
margin-inline-end: 1px;
padding-inline-start: 4px;
}
}
toolbar[mode="icons"] .toolbarbutton-1 > menupopup {
margin-top: 1px;
}
menulist {
padding: 1px 6px;
& > menupopup:not([position]) {
margin-inline-start: 0;
}
}
menulist > menupopup menu,
menulist > menupopup menuitem,
toolbarbutton > menupopup menu,
toolbarbutton > menupopup menuitem {
appearance: none !important;
padding-block: 4px !important;
@media (-moz-mac-big-sur-theme) {
margin-inline: 5px;
border-radius: 4px;
}
}
menulist > menupopup menu .menu-right,
toolbarbutton > menupopup menu .menu-right {
appearance: none;
-moz-context-properties: fill;
fill: currentColor;
}
menulist > menupopup menu .menu-right:-moz-locale-dir(rtl),
toolbarbutton > menupopup menu .menu-right:-moz-locale-dir(rtl) {
}
/* :::::: throbber :::::::::: */
#throbber-box {
margin: 0 4px;
}
/* ::::: online/offline icons ::::: */
#offline-status {
padding-inline-start: 3px;
}
/* ::::: directional button icons ::::: */
.up,
.down {
min-width: 0;
-moz-context-properties: stroke, fill-opacity;
stroke: currentColor;
fill-opacity: 1;
&[disabled="true"] {
fill-opacity: .5;
}
}
.up {
}
.down {
}
/* ::::: Tabs ::::: */
tabmail > tabbox {
margin: 0;
}
/* ::::: Trees ::::: */
treechildren::-moz-tree-cell-text {
padding-inline-start: 2px;
}
treechildren::-moz-tree-line {
border-color: inherit;
}
treechildren::-moz-tree-line(selected, focus) {
border-color: var(--selected-item-text-color);
}
/* message column icons */
:root:not([lwtheme]) {
& treecol:not([hideheader="true"]),
& .tree-columnpicker-button:not([hideheader="true"]) {
appearance: none;
color: inherit;
background-color: transparent;
padding-block: 2px;
border-bottom: 1px solid ThreeDShadow;
}
& treecol {
border-inline-end: 1px solid ThreeDShadow;
}
& treecol:hover:active,
& .tree-columnpicker-button:hover:active {
background-color: ThreeDFace;
}
}
.treecol-sortdirection {
appearance: none;
-moz-context-properties: fill;
fill: currentColor;
treecol[sortDirection="ascending"]:not([hideheader="true"]) > & {
}
treecol[sortDirection="descending"]:not([hideheader="true"]) > & {
}
}
:root[lwt-tree] {
& treechildren::-moz-tree-row(odd) {
background-color: transparent;
}
& treechildren::-moz-tree-row(odd, hover) {
background-color: hsla(0, 0%, 50%, 0.15);
}
}
/* ::::: Tabs in Titlebar :::::: */
:root:not([lwtheme]) #messengerWindow[tabsintitlebar="true"] #titlebar {
appearance: auto;
-moz-default-appearance: -moz-window-titlebar;
}
.titlebar-buttonbox-container {
align-items: center;
@media not (-moz-mac-rtl) {
&:-moz-locale-dir(ltr) {
order: -1;
}
}
@media (-moz-mac-rtl) {
&:-moz-locale-dir(rtl) {
order: -1;
}
}
}
@media (-moz-mac-rtl) {
#unifiedToolbarContainer:-moz-locale-dir(rtl) {
flex-direction: row-reverse;
}
}
.titlebar-buttonbox {
appearance: auto;
-moz-default-appearance: -moz-window-button-box;
margin-inline: 12px;
}
#messengerWindow[sizemode="fullscreen"] .titlebar-buttonbox-container {
display: none;
}
button.notification-button[is="toolbarbutton-menu-button"] {
margin: 0 6px;
}
button[is="toolbarbutton-menu-button"] > .button-box > button {
margin-block: -4px;
margin-inline: -7px 2px;
}
.button-menubutton-dropmarker {
appearance: none;
}
button dropmarker::part(icon) {
margin-inline-start: 3px;
}
toolbarbutton.notification-button[is="toolbarbutton-menu-button"] > .button-box > dropmarker {
margin-inline-end: -5px;
}
/* Status bar */
:root[lwtheme] #status-bar {
padding-top: 1px;
}
.statusbar {
min-width: 1px; /* DON'T DELETE!
Prevents hiding of scrollbars in browser when window is made smaller.*/
min-height: 15px !important;
margin: 0 !important;
padding: 0 16px 1px 1px;
text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
:root[lwtheme] & {
background: none;
border-style: none;
text-shadow: inherit;
}
}
/* Status panel */
.statuspanel-label {
margin: 0;
padding: 2px 4px;
background-color: #f9f9fa;
border: 1px none #ddd;
border-top-style: solid;
color: #444;
text-shadow: none;
&:-moz-locale-dir(ltr):not([mirror]),
&:-moz-locale-dir(rtl)[mirror] {
border-right-style: solid;
border-top-right-radius: .3em;
margin-right: 1em;
}
&:-moz-locale-dir(rtl):not([mirror]),
&:-moz-locale-dir(ltr)[mirror] {
border-left-style: solid;
border-top-left-radius: .3em;
margin-left: 1em;
}
}
.contentTabInstance {
background-color: -moz-dialog;
:root[lwtheme] & {
background-color: transparent;
background-image: linear-gradient(transparent 40px, -moz-dialog 40px);
}
}
.contentTabAddress * {
text-shadow: none;
}
fieldset {
padding: 0 8px 5px;
margin: 1.5em 6px 6px;
border: none;
& > hbox,
& > vbox,
& > radiogroup {
width: -moz-available;
}
}
legend {
font-size: 1.18em;
margin-top: -1.3em;
margin-bottom: 5px;
margin-inline-start: -5px;
font-weight: bold;
}
/* UI Density customization */
treechildren::-moz-tree-row {
min-height: 1.8rem;
}
:root[uidensity="compact"] treechildren::-moz-tree-row {
min-height: 1.6rem;
}
:root[uidensity="touch"] treechildren::-moz-tree-row {
min-height: 2.4rem;
}
/* Infobar styles */
.notification-button.small-button {
padding-block: 4px;
}