summaryrefslogtreecommitdiffstats
path: root/comm/mail/themes/shared/mail/messenger.css
diff options
context:
space:
mode:
Diffstat (limited to 'comm/mail/themes/shared/mail/messenger.css')
-rw-r--r--comm/mail/themes/shared/mail/messenger.css1506
1 files changed, 1506 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/messenger.css b/comm/mail/themes/shared/mail/messenger.css
new file mode 100644
index 0000000000..1f568a4b1c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/messenger.css
@@ -0,0 +1,1506 @@
+/* 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/. */
+
+@import url("chrome://global/skin/global.css");
+@import url("chrome://messenger/content/webextensions.css");
+@import url("chrome://messenger/skin/autocomplete.css");
+@import url("chrome://messenger/skin/variables.css");
+@import url("chrome://messenger/skin/splitter.css");
+@import url("chrome://messenger/skin/widgets.css");
+
+@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+:root {
+ user-select: none;
+}
+
+:root,
+body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ width: 100%;
+ overflow: clip;
+}
+
+#messengerWindow {
+ text-rendering: optimizeLegibility;
+ min-height: 95px;
+ min-width: 95px;
+}
+
+:root:-moz-locale-dir(rtl) {
+ direction: rtl;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+}
+
+p {
+ margin: 2px 4px;
+}
+
+hr {
+ width: 100%;
+ border-top: 1px solid var(--field-border-color);
+ border-bottom: 0;
+}
+
+:root:not([sizemode=maximized]) .titlebar-restore,
+:root:is([sizemode=maximized]) .titlebar-max {
+ display: none;
+}
+
+#toolbar-menubar[autohide="true"] {
+ overflow: hidden;
+}
+
+#toolbar-menubar[autohide="true"][inactive="true"]:not([customizing="true"]) {
+ min-height: 0 !important;
+ height: 0 !important;
+ padding: 0 !important;
+ appearance: none !important;
+}
+
+#titlebar-spacer {
+ pointer-events: none;
+}
+
+#navigation-toolbox:-moz-lwtheme,
+#compose-toolbox:-moz-lwtheme {
+ background-color: var(--lwt-accent-color);
+ background-image: var(--lwt-additional-images);
+ background-repeat: var(--lwt-background-tiling);
+ background-position: var(--lwt-background-alignment);
+}
+
+:root:not([tabsintitlebar]) #navigation-toolbox:-moz-lwtheme {
+ color: var(--toolbar-color, inherit);
+ background-color: var(--toolbar-bgcolor);
+}
+
+/* When a theme defines both theme_frame and additional_backgrounds, show
+ the latter atop the former. */
+:root[lwtheme-image] #navigation-toolbox,
+:root[lwtheme-image] #compose-toolbox {
+ background-image: var(--lwt-header-image), var(--lwt-additional-images);
+ background-repeat: no-repeat, var(--lwt-background-tiling);
+ background-position: right top, var(--lwt-background-alignment);
+}
+
+:root[tabsintitlebar] #navigation-toolbox:-moz-window-inactive:-moz-lwtheme,
+#compose-toolbox:-moz-window-inactive:-moz-lwtheme {
+ background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
+}
+
+#titlebar > #toolbar-menubar:-moz-window-inactive,
+#titlebar > #tabs-toolbar:-moz-window-inactive {
+ color: color-mix(in srgb, currentColor 70%, transparent);
+}
+
+.tree-columnpicker-button {
+ list-style-image: var(--icon-column-menu);
+ padding-inline: 4px;
+ border-style: none;
+ border-radius: 0;
+ -moz-context-properties: stroke, fill;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+.thread-tree-col-picker > image,
+.thread-tree-icon-header img {
+ -moz-context-properties: stroke, fill;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+treechildren::-moz-tree-row(selected, current, focus) {
+ outline: 1px solid color-mix(in srgb, var(--selected-item-color), black 10%);
+ outline-offset: -1px;
+}
+
+tree > treechildren::-moz-tree-row(hover) {
+ background-color: hsla(0, 0%, 50%, 0.15);
+}
+
+tree > treechildren::-moz-tree-row(selected) {
+ background-color: -moz-cellhighlight;
+}
+
+tree > treechildren::-moz-tree-row(selected, focus) {
+ background-color: var(--selected-item-color);
+}
+
+treechildren::-moz-tree-twisty {
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+ color: #505050;
+}
+
+@media (prefers-color-scheme: dark) {
+ treechildren::-moz-tree-twisty {
+ color: #d4d4d4;
+ }
+}
+
+treechildren::-moz-tree-twisty(selected, focus) {
+ stroke: var(--select-focus-text-color);
+}
+
+/* LW theme tree styling */
+:root[lwt-tree] #threadTree treechildren::-moz-tree-row(untagged, selected),
+:root[lwt-tree]:-moz-window-inactive #threadTree treechildren::-moz-tree-row(selected),
+:root[lwt-tree] tree:not(#threadTree) treechildren::-moz-tree-row(selected) {
+ border-color: var(--sidebar-highlight-background-color, hsla(0, 0%, 80%, .3));
+ background: var(--sidebar-highlight-background-color, hsla(0, 0%, 80%, .3));
+ outline: none;
+}
+
+:root[lwt-tree] treechildren::-moz-tree-row(current, focus) {
+ border-color: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.6));
+}
+
+/* Dark theme adaptions */
+:root[lwt-tree-brighttext] #threadTree treechildren::-moz-tree-row(untagged, selected),
+:root[lwt-tree-brighttext]:-moz-window-inactive #threadTree treechildren::-moz-tree-row(selected),
+:root[lwt-tree-brighttext] tree:not(#threadTree) treechildren::-moz-tree-row(selected) {
+ border-color: var(--sidebar-highlight-background-color, rgba(249, 249, 250, .1));
+ background: var(--sidebar-highlight-background-color, rgba(249, 249, 250, .1));
+}
+
+:root[lwt-tree-brighttext] treechildren::-moz-tree-row(current, focus) {
+ border-color: var(--sidebar-highlight-background-color, rgba(249,249,250,.3));
+}
+
+:root[lwt-tree] #threadTree treechildren::-moz-tree-row(untagged, selected, focus, current),
+:root[lwt-tree] tree:not(#threadTree) treechildren::-moz-tree-row(selected, focus, current) {
+ border-color: var(--sidebar-highlight-border-color, var(--item-focus-selected-border-color));
+}
+
+/* toolbar */
+
+toolbar[type="menubar"][autohide="true"] {
+ overflow: hidden;
+}
+
+toolbar[type="menubar"][autohide="true"][inactive="true"]:not([customizing="true"]) {
+ min-height: 0 !important;
+ height: 0 !important;
+ appearance: none !important;
+}
+
+/* Show hidden toolbars in customize mode */
+toolbar[customizing="true"][collapsed="true"] {
+ visibility: visible;
+}
+
+/* toolbarbutton */
+
+.toolbarbutton-1 {
+ flex-direction: column;
+ margin: 4px 1px;
+ padding: 1px 5px !important;
+ -moz-context-properties: fill, stroke, fill-opacity;
+ fill: color-mix(in srgb, var(--toolbarbutton-icon-fill, currentColor) 20%, transparent);
+ stroke: var(--toolbarbutton-icon-fill, currentColor);
+ fill-opacity: var(--toolbarbutton-icon-fill-opacity);
+}
+
+.toolbarbutton-1,
+.toolbarbutton-menubutton-button {
+ min-height: 24px;
+ min-width: 32px;
+ margin: 4px 1px;
+ padding: 1px 5px !important;
+}
+
+:root[uidensity="touch"] .toolbarbutton-1:not([is="toolbarbutton-menu-button"]),
+:root[uidensity="touch"] .toolbarbutton-1 > .toolbarbutton-menubutton-button,
+:root[uidensity="touch"] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
+ padding: 5px !important;
+}
+
+.toolbarbutton-menubutton-button {
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+}
+
+toolbox[labelalign="end"] .toolbarbutton-1,
+toolbox[labelalign="end"] .toolbarbutton-menubutton-button,
+toolbox:not([mode="full"]) .toolbarbutton-1,
+toolbox:not([mode="full"]) .toolbarbutton-menubutton-button {
+ flex-direction: row;
+}
+
+/* Replicate the xul.css rule for when toolbar button icons are html:img instead
+ * of xul:image. */
+toolbar[mode="text"] .toolbarbutton-icon {
+ display: none;
+}
+
+toolbar[mode="full"] .toolbarbutton-1:not([hideWebExtensionLabel="true"]) {
+ min-width: 55px;
+}
+
+toolbar:not([mode="text"]) .toolbarbutton-1[hideWebExtensionLabel="true"] .toolbarbutton-text {
+ display: none;
+}
+
+#header-view-toolbar .toolbarbutton-1[hideWebExtensionLabel="true"] .toolbarbutton-text {
+ display: none;
+}
+
+.toolbarbutton-menubutton-dropmarker {
+ pointer-events: none;
+}
+
+.toolbarbutton-1:not([is="toolbarbutton-menu-button"]),
+.toolbarbutton-1 > .toolbarbutton-menubutton-button,
+.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
+ border: 1px solid transparent;
+ border-radius: var(--button-border-radius);
+ transition: background-color .15s, border-color .15s;
+}
+
+.toolbarbutton-1:not([disabled="true"]):is(:hover,[open="true"]) >
+.toolbarbutton-menubutton-button,
+.toolbarbutton-1:not([disabled="true"]):hover >
+.toolbarbutton-menubutton-dropmarker,
+.toolbarbutton-1:not([is="toolbarbutton-menu-button"],[disabled="true"],[checked="true"],[open="true"],:active):hover {
+ background-color: var(--toolbarbutton-hover-background);
+ border-color: var(--toolbarbutton-hover-bordercolor);
+ box-shadow: var(--toolbarbutton-hover-boxshadow);
+}
+
+.toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled="true"]):hover:active,
+.toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]),
+.toolbarbutton-1:not([is="toolbarbutton-menu-button"],[disabled="true"]):is([open="true"],[checked="true"],:hover:active) {
+ background-color: var(--toolbarbutton-checked-background);
+ border-color: var(--toolbarbutton-active-bordercolor);
+ box-shadow: var(--toolbarbutton-active-boxshadow);
+ transition-duration: 10ms;
+}
+
+.toolbarbutton-1:not([is="toolbarbutton-menu-button"],[disabled="true"]):hover:active,
+.toolbarbutton-1:not([is="toolbarbutton-menu-button"],[disabled="true"])[open="true"],
+.toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled="true"]):hover:active,
+.toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]) {
+ background-color: var(--toolbarbutton-active-background) !important;
+}
+
+.toolbarbutton-1[is="toolbarbutton-menu-button"] > .toolbarbutton-menubutton-button {
+ border-inline-end: none;
+ margin: 0;
+}
+
+.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
+ height: auto;
+ width: auto;
+ padding: 1px 5px;
+}
+
+.toolbarbutton-1 .toolbarbutton-menu-dropmarker,
+.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
+ list-style-image: var(--icon-nav-down-sm);
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+}
+
+.toolbarbutton-1 .toolbarbutton-menu-dropmarker::part(icon),
+.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker::part(icon) {
+ width: 12px;
+}
+
+/* Separator between menu and split type buttons */
+.toolbarbutton-1:not(:hover,:active,[open],[checked]) >
+.toolbarbutton-menubutton-dropmarker::before,
+.toolbarbutton-1[disabled="true"] >
+.toolbarbutton-menubutton-dropmarker::before {
+ margin-inline: -6px 5px;
+}
+
+.toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-locale-dir(ltr),
+.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+.toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-locale-dir(rtl),
+.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(ltr) {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+toolbox[labelalign="end"] > toolbar[mode="full"] .toolbarbutton-1 .toolbarbutton-text {
+ padding-inline-start: 2px;
+}
+
+.toolbarbutton-1 .toolbarbutton-icon {
+ /* NOTE: At the moment, these rule can be applied to either xul:image elements
+ * (the plain toolbarbutton elements, defined in mozilla) or html:img
+ * elements (custom extensions in comm).
+ * The icon content is meant to be 16px by 16px, but xul:image sizing is
+ * essentially always border-box, and a content-box value would be ignored. We
+ * include this explicit border-box value for buttons that use a html:img
+ * icon.
+ * If all such icons become html:img elements, then it will be safe to use the
+ * default content-box sizing. */
+ box-sizing: border-box;
+ padding: 1px;
+ width: 18px;
+ height: 18px;
+}
+
+.toolbarbutton-menubutton-button > .toolbarbutton-icon {
+ padding: 1px;
+}
+
+/* Separator between menu and split type buttons */
+.toolbarbutton-1:not(:hover,:active,[open],[checked]) >
+.toolbarbutton-menubutton-dropmarker::before,
+.toolbarbutton-1[disabled="true"] >
+.toolbarbutton-menubutton-dropmarker::before {
+ content: "";
+ display: flex;
+ width: 1px;
+ height: 18px;
+ background-image: linear-gradient(currentColor 0, currentColor 100%);
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 1px 18px;
+ opacity: .2;
+}
+
+toolbox:not([labelalign="end"]) > toolbar[mode="full"]
+ .toolbarbutton-1:not(.button-appmenu,[is="toolbarbutton-menu-button"])[type="menu"] {
+ padding-inline-end: 15px !important;
+ background-image: var(--icon-nav-down-sm);
+ background-size: 12px;
+ background-repeat: no-repeat;
+ background-position: calc(100% - 4px) center;
+}
+
+toolbox:not([labelalign="end"]) > toolbar[mode="full"]
+ .toolbarbutton-1:not(.button-appmenu,[is="toolbarbutton-menu-button"])[type="menu"]:-moz-locale-dir(rtl) {
+ background-position: 4px center;
+}
+
+toolbox:not([labelalign="end"]) > toolbar[mode="full"]
+ .toolbarbutton-1:not(.button-appmenu,[is="toolbarbutton-menu-button"])[type="menu"][disabled="true"] {
+ opacity: 0.4;
+}
+
+/* Don't set a reduced opacity because we set it on the whole button. */
+toolbox:not([labelalign="end"]) > toolbar[mode="full"]
+ .toolbarbutton-1:not(.button-appmenu,[is="toolbarbutton-menu-button"])[type="menu"][disabled="true"]
+ .toolbarbutton-icon,
+toolbox:not([labelalign="end"]) > toolbar[mode="full"]
+ .toolbarbutton-1:not(.button-appmenu,[is="toolbarbutton-menu-button"])[type="menu"][disabled="true"]
+ .toolbarbutton-text {
+ opacity: 1;
+}
+
+toolbox:not([labelalign="end"]) > toolbar[mode="full"]
+ .toolbarbutton-1:not(.button-appmenu,[is="toolbarbutton-menu-button"])[type="menu"] >
+ .toolbarbutton-menu-dropmarker {
+ display: none;
+}
+
+toolbar[brighttext] .toolbarbutton-1:not(:hover,:active,[open]) >
+ .toolbarbutton-menubutton-dropmarker::before {
+ opacity: .3;
+}
+
+#alltabs-button {
+ margin-block: 3px;
+}
+
+#palette-box .toolbarbutton-1 {
+ flex-direction: row;
+}
+
+description.error {
+ color: #f00;
+}
+
+.sidebar-header {
+ min-height: 25px;
+ text-shadow: none;
+}
+
+.sidebar-header > xul|label {
+ padding-inline-start: 4px;
+}
+
+menupopup,
+menubar {
+ font-size: inherit;
+}
+
+menulist {
+ min-height: 24px;
+ margin-block: 4px;
+ color: var(--button-text-color);
+ border: 1px solid var(--toolbarbutton-hover-bordercolor);
+ border-radius: var(--button-border-radius);
+ background-color: var(--toolbarbutton-hover-background);
+ box-shadow: var(--toolbarbutton-hover-boxshadow);
+ transition-property: background-color, border-color, box-shadow;
+ transition-duration: 150ms;
+}
+
+menulist:-moz-lwtheme {
+ color: inherit;
+}
+
+/* Override the not existing rule in menu.css */
+menulist[disabled="true"]:hover,
+menulist[open="true"]:hover {
+ background-color: var(--toolbarbutton-hover-background);
+}
+
+menulist:not([disabled="true"],[open="true"]):hover {
+ background-color: var(--toolbarbutton-active-background);
+ border-color: var(--toolbarbutton-active-bordercolor);
+}
+
+menulist[open="true"] {
+ background-color: var(--toolbarbutton-active-background);
+ border-color: var(--toolbarbutton-active-bordercolor);
+ box-shadow: var(--toolbarbutton-active-boxshadow);
+}
+
+menulist[disabled="true"] {
+ opacity: 0.6;
+}
+
+menulist::part(label-box) {
+ font-weight: inherit;
+}
+
+menulist::part(dropmarker-icon) {
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+ width: 16px;
+}
+
+menupopup.no-accel-menupopup > :is(menu, menuitem) > .menu-accel-container {
+ display: none;
+}
+
+/* NOTE: the menuitem children must be constructed with the menuitem-iconic
+ * class so that this rule can hide the icon container. */
+menupopup.no-icon-menupopup > :is(menu, menuitem) > .menu-iconic-left {
+ display: none;
+}
+
+/* Buttons */
+
+button,
+html|input[type="color"] {
+ appearance: none;
+ min-height: 24px;
+ min-width: 5.5em;
+ color: inherit;
+ border: 1px solid var(--button-border-color);
+ border-radius: var(--button-border-radius);
+ background: var(--button-background-color);
+ margin: 1px 5px;
+ padding: 0 4px;
+ box-shadow: none;
+}
+
+xul|button:is(:not([disabled="true"])):hover,
+html|button:is(:not([disabled])):hover {
+ border-color: var(--button-border-color);
+ background-color: var(--button-hover-background-color);
+}
+
+xul|button:is(:not([disabled="true"])):hover:active,
+html|button:is(:not([disabled])):hover:active,
+xul|button:is(:not([disabled="true"]))[open="true"],
+html|input[type="color"]:not([disabled="true"]):hover,
+html|input[type="color"]:not([disabled="true"]):hover:active {
+ border-color: var(--button-border-color);
+ background-color: var(--button-active-background-color);
+}
+
+html|input[type="color"] {
+ padding: 4px;
+}
+
+/* For buttons that wraps its content with no outline or background.
+ * NOTE: the hover background will still appear on hover. */
+button.plain-button {
+ /* grid display ensures the button only takes up the same room as its
+ * content. */
+ display: inline grid;
+ height: -moz-fit-content;
+ min-height: auto;
+ min-width: -moz-fit-content;
+ border: none;
+ background: none;
+}
+
+button.plain-button[hidden] {
+ display: none;
+}
+
+button[is="toolbarbutton-menu-button"] {
+ appearance: none;
+}
+
+button[is="toolbarbutton-menu-button"] > .button-box > button {
+ appearance: none;
+ min-width: 5.5em;
+ background: transparent;
+ border-color: transparent;
+ border-inline-end-color: var(--toolbarbutton-active-bordercolor);
+ margin-inline: -4px 5px;
+ padding: 0 4px;
+}
+
+button > .button-box > dropmarker {
+ appearance: none;
+ list-style-image: var(--icon-nav-down-sm);
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+}
+
+img.invisible-on-broken:-moz-broken {
+ visibility: hidden;
+}
+
+.popup-notification-button {
+ height: auto;
+ border-style: none;
+ border-radius: 0;
+}
+
+#notification-popup-box {
+ display: flex;
+ align-items: center;
+ gap: 9px;
+}
+
+#notification-popup-box > .notification-anchor-icon {
+ width: 16px;
+ height: 16px;
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, var(--toolbarbutton-icon-fill, currentColor) 20%, transparent);
+ stroke: var(--toolbarbutton-icon-fill, currentColor);
+ opacity: var(--toolbarbutton-icon-fill-opacity);
+}
+
+/* notification anchors should only be visible when their associated
+ notifications are */
+.notification-anchor-icon {
+ -moz-user-focus: normal;
+}
+
+.notification-anchor-icon:not([showing]) {
+ display: none;
+}
+
+.popup-notification-icon {
+ width: 32px;
+ height: 32px;
+ margin-inline-end: 12px;
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+.popup-notification-icon[popupid="xpinstall-disabled"],
+.popup-notification-icon[popupid="addon-install-blocked"],
+.popup-notification-icon[popupid="addon-install-origin-blocked"] {
+ list-style-image: url(chrome://messenger/skin/icons/addon-install-blocked.svg);
+}
+
+.popup-notification-icon[popupid="addon-progress"] {
+ list-style-image: url(chrome://messenger/skin/icons/addon-install-downloading.svg);
+}
+
+.popup-notification-icon[popupid="addon-install-failed"] {
+ list-style-image: url(chrome://messenger/skin/icons/addon-install-error.svg);
+}
+
+.popup-notification-icon[popupid="addon-install-confirmation"] {
+ list-style-image: url(chrome://messenger/skin/icons/addon-install-confirm.svg);
+}
+
+#addon-install-confirmation-notification[warning]
+ .popup-notification-icon[popupid="addon-install-confirmation"] {
+ list-style-image: url(chrome://messenger/skin/icons/addon-install-warning.svg);
+}
+
+.popup-notification-icon[popupid="addon-install-complete"] {
+ list-style-image: url(chrome://messenger/skin/icons/addon-install-installed.svg);
+}
+
+.popup-notification-body[popupid="addon-progress"],
+.popup-notification-body[popupid="addon-install-confirmation"] {
+ width: 28em;
+ max-width: 28em;
+}
+
+.addon-install-confirmation-name {
+ font-weight: bold;
+}
+
+html|*.addon-webext-perm-list {
+ margin-block-end: 0;
+ padding-inline-start: 10px;
+}
+
+.addon-webext-perm-single-entry {
+ margin-top: 11px;
+}
+
+.addon-webext-perm-text,
+.addon-webext-perm-single-entry {
+ margin-inline-start: 0;
+}
+
+.popup-notification-description[popupid="addon-webext-permissions"],
+.popup-notification-description[popupid="addon-webext-permissions-notification"] {
+ margin-inline-start: -1px;
+}
+
+.addon-webext-perm-notification-content,
+.addon-installed-notification-content {
+ margin-top: 0;
+}
+
+#addon-webext-experiment-warning {
+ margin-top: 11px;
+ margin-inline-start: 0;
+}
+
+#addon-webext-perm-info {
+ margin-inline-start: 0;
+}
+
+#addon-progress-notification-progressmeter {
+ margin: 2px 4px;
+}
+
+.addon-webext-name {
+ display: inline;
+ font-weight: bold;
+ margin: 0;
+}
+
+html|ul.addon-installed-list {
+ margin-top: 0;
+}
+
+.chromeclass-toolbar {
+ overflow-x: hidden;
+}
+
+.chromeclass-toolbar toolbarseparator {
+ appearance: none;
+ min-width: 1px;
+ background-image: linear-gradient(
+ transparent 4px,
+ var(--toolbarseparator-color) 4px,
+ var(--toolbarseparator-color) calc(100% - 4px),
+ transparent calc(100% - 4px));
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+#tabpanelcontainer {
+ /* While mail tab browsers load, the window goes transparent. Stop that. */
+ background-color: -moz-Dialog;
+}
+
+.button-more {
+ list-style-image: var(--icon-more);
+}
+
+:root[lwt-tree] tree,
+:root[lwt-tree] #folderPaneHeader {
+ background-color: var(--sidebar-background-color);
+ color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree-brighttext] treechildren::-moz-tree-twisty {
+ color: #d4d4d4;
+}
+
+:root[lwt-tree] treechildren::-moz-tree-image,
+:root[lwt-tree] #threadTree treechildren::-moz-tree-cell-text(untagged),
+:root[lwt-tree] tree:not(#threadTree) treechildren::-moz-tree-cell-text {
+ color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree] treechildren::-moz-tree-image(selected),
+:root[lwt-tree] #threadTree treechildren::-moz-tree-cell-text(untagged, selected),
+:root[lwt-tree] tree:not(#threadTree) treechildren::-moz-tree-cell-text(selected) {
+ color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
+}
+
+tree:-moz-lwtheme:not(:focus)
+ treechildren::-moz-tree-row(selected) {
+ --sidebar-highlight-background-color: hsla(0, 0%, 50%, 0.2);
+}
+
+:root[lwt-tree] tree:not(:focus) treechildren::-moz-tree-image(selected),
+:root[lwt-tree] #threadTree:not(:focus) treechildren::-moz-tree-cell-text(untagged, selected),
+:root[lwt-tree] tree:not(#threadTree,:focus) treechildren::-moz-tree-cell-text(selected) {
+ color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree] treechildren::-moz-tree-line {
+ border-color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree] treechildren::-moz-tree-line(selected, focus) {
+ border-color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
+}
+
+tree > treechildren::-moz-tree-row(dropOn) {
+ border-color: var(--selected-item-text-color);
+ background-color: var(--selected-item-color) !important;
+}
+
+tree > treechildren::-moz-tree-cell-text(primary, dropOn) {
+ color: var(--selected-item-text-color);
+}
+
+tree > treechildren::-moz-tree-image(primary, dropOn) {
+ fill: color-mix(in srgb, var(--selected-item-text-color) 20%, transparent);
+ stroke: var(--selected-item-text-color) !important;
+}
+
+:root:-moz-lwtheme treecol:not([hideheader="true"]),
+:root:-moz-lwtheme .tree-columnpicker-button:not([hideheader="true"]) {
+ appearance: none;
+ color: inherit;
+ background-color: transparent;
+ padding-block: 2px;
+ border-bottom: 1px solid color-mix(in srgb, var(--splitter-color,
+ hsla(0, 0%, 60%, 0.4)) 50%, transparent);
+}
+
+:root:-moz-lwtheme treecol {
+ border-inline-end: 1px solid color-mix(in srgb, var(--splitter-color,
+ hsla(0, 0%, 60%, 0.4)) 50%, transparent);
+}
+
+@media (prefers-color-scheme: dark) {
+ :root:-moz-lwtheme treecol,
+ :root:-moz-lwtheme .tree-columnpicker-button {
+ border-color: var(--splitter-color, rgba(249, 249, 250, 0.2));
+ }
+
+ :root:-moz-lwtheme treecol {
+ border-inline-end-color: var(--splitter-color, rgba(249, 249, 250, 0.2));
+ }
+}
+
+:root:-moz-lwtheme treecol:hover,
+:root:-moz-lwtheme .tree-columnpicker-button:hover {
+ background-color: hsla(0, 0%, 60%, 0.4);
+}
+
+@media (prefers-color-scheme: dark) {
+ :root:-moz-lwtheme treecol:hover,
+ :root:-moz-lwtheme .tree-columnpicker-button:hover {
+ background-color: rgba(249, 249, 250, 0.2);
+ }
+}
+
+.treecol-sortdirection {
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+}
+
+.toolbarbutton-1:not(.qfb-tag-button),
+.toolbarbutton-menubutton-button {
+ color: inherit !important;
+}
+
+/* Don't show a menupopup in customize mode */
+toolbarpaletteitem menulist,
+toolbarpaletteitem toolbarbutton {
+ pointer-events: none;
+}
+
+/* throbber */
+
+#throbber-box {
+ margin: 0 3px;
+ /* Allow image to be center aligned vertically (when in the toolbar) or
+ * horizontally (when in the customize toolbar dialog). */
+ display: grid;
+}
+
+#throbber-box img {
+ width: 16px;
+ height: 16px;
+ align-self: center;
+ justify-self: center;
+}
+
+#throbber-box:not([busy="true"]) .animated-throbber-icon {
+ /* Hide the icon, but still occupy space in the toolbar. */
+ visibility: hidden;
+}
+
+/* When the throbber-box is wrapped by the customizeToolbar dialog, we show the
+ * static image. */
+#wrapper-throbber-box > #throbber-box .animated-throbber-icon {
+ display: none;
+}
+/* Else, we hide the static image. */
+:not(#wrapper-throbber-box) > #throbber-box .static-throbber-icon {
+ display: none;
+}
+
+/* Panels. */
+
+panelmultiview[transitioning] {
+ pointer-events: none;
+}
+
+.panel-viewcontainer {
+ overflow: hidden;
+}
+
+.panel-viewcontainer[panelopen] {
+ transition-property: height;
+ transition-timing-function: var(--animation-easing-function);
+ transition-duration: var(--panelui-subview-transition-duration);
+ will-change: height;
+}
+
+.panel-viewcontainer.offscreen {
+ display: block;
+}
+
+.panel-viewstack {
+ overflow: visible;
+ transition: height var(--panelui-subview-transition-duration);
+}
+
+/* Status panel */
+
+statuspanel {
+ position: fixed;
+ display: block;
+ left: 0;
+ bottom: 0;
+ z-index: 20;
+ max-width: 50%;
+ transition: opacity 120ms ease-out, visibility 120ms;
+}
+
+statuspanel:-moz-locale-dir(ltr)[mirror],
+statuspanel:-moz-locale-dir(rtl):not([mirror]) {
+ left: auto;
+ right: 0;
+}
+
+statuspanel[label=""],
+statuspanel:not([label]) {
+ opacity: 0;
+ pointer-events: none;
+ visibility: hidden;
+}
+
+.statuspanel-inner {
+ height: 3em;
+ align-items: flex-end;
+}
+
+.statuspanel-label {
+ display: inline-block;
+}
+
+:root[lwt-tree] .statuspanel-label {
+ background-color: var(--toolbar-field-background-color);
+ color: var(--toolbar-field-color);
+ border-color: var(--toolbar-field-border-color);
+}
+
+/* Status bar */
+
+.statusbar {
+ background-color: var(--layout-background-1);
+ border-top: 1px solid var(--splitter-color);
+ min-height: 22px;
+}
+
+#status-bar:-moz-lwtheme {
+ appearance: none;
+ background-repeat: no-repeat, var(--lwt-background-tiling);
+ background-position: bottom right, var(--lwt-background-alignment);
+ background-color: var(--lwt-accent-color);
+ background-image: var(--lwt-header-image), var(--lwt-additional-images);
+ color: var(--lwt-text-color);
+ border-top-color: var(--lwt-tabs-border-color);
+}
+
+@media (prefers-color-scheme: dark) {
+ .statusbar:-moz-lwtheme {
+ border-top-color: var(--lwt-accent-color);
+ }
+}
+
+#status-bar:-moz-lwtheme toolbarbutton {
+ color: var(--lwt-text-color, inherit);
+}
+
+.statusbarpanel {
+ padding: 0 4px;
+}
+
+label.statusbarpanel {
+ margin-block: 3px;
+ display: inline-block;
+}
+
+.statusbarpanel-progress {
+ align-items: center;
+}
+
+#dialog\.progress,
+#shutdown_progressmeter,
+.progressmeter-statusbar {
+ appearance: none;
+ height: 4px;
+ background-color: hsla(0, 0%, 60%, 0.2);
+ border-style: none;
+ border-radius: 2px;
+}
+
+#dialog\.progress::-moz-progress-bar,
+#shutdown_progressmeter::-moz-progress-bar,
+.progressmeter-statusbar::-moz-progress-bar {
+ appearance: none;
+ background-color: var(--primary);
+ border-radius: 2px;
+}
+
+#dialog\.progress:indeterminate::-moz-progress-bar,
+#shutdown_progressmeter:indeterminate::-moz-progress-bar,
+.progressmeter-statusbar:indeterminate::-moz-progress-bar {
+ /* Make a white reflecting animation.
+ Create a gradient with 2 identical pattern, and enlarge the size to 200%.
+ This allows us to animate background-position with percentage. */
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%,
+ rgba(255, 255, 255, 0.2) 25%,
+ rgba(255, 255, 255, 0.8) 50%,
+ rgba(255, 255, 255, 0.2) 75%,
+ rgba(255, 255, 255, 0.8) 100%);
+ background-size: 200% 100%;
+}
+
+@media (prefers-color-scheme: dark) {
+ #dialog\.progress:indeterminate::-moz-progress-bar,
+ #shutdown_progressmeter:indeterminate::-moz-progress-bar,
+ .progressmeter-statusbar:indeterminate::-moz-progress-bar {
+ background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%,
+ rgba(0, 0, 0, 0.1) 25%,
+ rgba(0, 0, 0, 0.5) 50%,
+ rgba(0, 0, 0, 0.1) 75%,
+ rgba(0, 0, 0, 0.5) 100%);
+ }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ #dialog\.progress:indeterminate::-moz-progress-bar,
+ #shutdown_progressmeter:indeterminate::-moz-progress-bar,
+ .progressmeter-statusbar:indeterminate::-moz-progress-bar {
+ animation: progressSlideX 1.5s linear infinite;
+ }
+
+ @keyframes progressSlideX {
+ 0% {
+ background-position: 0 0;
+ }
+ 100% {
+ background-position: -100% 0;
+ }
+ }
+}
+
+/* online/offline icons */
+
+#offline-status {
+ padding: 0 2px;
+ list-style-image: var(--icon-online);
+ appearance: none;
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+#offline-status[offline="true"] {
+ list-style-image: var(--icon-offline);
+}
+
+/* status bar adjustments */
+
+#quotaMeter {
+ min-width: 8em;
+ max-width: 8em;
+ height: 10px;
+ border: 1px solid var(--chrome-content-separator-color);
+}
+
+#quotaPercentageBar {
+ border-color: ThreeDShadow;
+}
+
+#quotaPanel ::-moz-progress-bar {
+ appearance: none;
+ background-color: #45a1ff;
+ opacity: .75;
+ border-radius: 0;
+}
+
+#quotaPanel.alert-warning ::-moz-progress-bar {
+ background-color: orange;
+}
+
+#quotaPanel.alert-critical ::-moz-progress-bar {
+ background-color: red;
+ opacity: .6;
+}
+
+#quotaLabel {
+ text-align: center;
+ font-size: 0.8rem;
+ text-decoration: none;
+ margin-top: -1px;
+}
+
+/* searchTermOverlay */
+@media (prefers-reduced-motion: no-preference) {
+ #searchTermList > richlistitem[highlight = "true"] {
+ animation: highlight .4s ease-in;
+ }
+
+ @keyframes highlight {
+ from { background-color: Highlight; }
+ to { background-color: transparent; }
+ }
+}
+
+#findbar-beforeReplaceSeparator {
+ height: 16px;
+}
+
+findbar {
+ background-color: var(--toolbar-bgcolor);
+ color: var(--toolbar-color);
+ border-top-color: var(--chrome-content-separator-color, ThreeDShadow);
+}
+
+findbar:-moz-lwtheme {
+ background-color: var(--lwt-accent-color);
+ background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images);
+ background-repeat: no-repeat, var(--lwt-background-tiling);
+ background-position: right bottom, var(--lwt-background-alignment);
+ background-position-y: bottom;
+}
+
+:root[lwtheme-image] findbar {
+ background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)),
+ var(--lwt-header-image), var(--lwt-additional-images);
+ background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling);
+ background-position: center, right bottom, var(--lwt-background-alignment);
+}
+
+/* Workaround until bug 1828322 is fixed */
+#messagepanebox > findbar {
+ color: var(--layout-color-1);
+ background-color: var(--layout-background-1);
+ border-top-color: var(--splitter-color);
+}
+
+#messagepanebox > findbar > .findbar-container {
+ min-width: 100px;
+}
+
+/* menupopup/panel */
+:is(panel, menupopup)::part(content) {
+ --panel-color: var(--layout-color-1);
+ --panel-background: var(--layout-background-1);
+ --panel-border-color: var(--layout-border-1);
+}
+
+/* Panel toolbarbuttons */
+
+.panelTitle {
+ margin-top: 8px;
+ margin-inline-start: 7px;
+ margin-bottom: 6px;
+}
+
+.panelButton {
+ appearance: none;
+ min-height: 24px;
+ padding: 4px 6px;
+ background-color: transparent;
+ -moz-context-properties: fill, fill-opacity;
+ fill: currentColor;
+ fill-opacity: var(--toolbarbutton-icon-fill-opacity);
+}
+
+.panelButton:focus {
+ outline: 0;
+}
+
+.panelButton:not([disabled],[open],:active):is(:hover,:focus-visible) {
+ background-color: var(--arrowpanel-dimmed);
+}
+
+.panelButton:not([disabled]):is([open],:hover:active) {
+ background-color: var(--arrowpanel-dimmed-further);
+ box-shadow: 0 1px 0 hsla(210, 4%, 10%, .03) inset;
+}
+
+.panelButton > .toolbarbutton-text {
+ text-align: start;
+ padding-inline-start: 6px;
+ padding-inline-end: 6px;
+}
+
+.panelButton[prettykey]::after {
+ content: attr(prettykey);
+ float: inline-end;
+ color: GrayText;
+}
+
+toolbarpaletteitem toolbarspacer,
+toolbarpaletteitem toolbarspring {
+ -moz-window-dragging: no-drag;
+}
+
+/* MailExtension panels */
+
+.mail-extension-panel {
+ font: menu;
+}
+
+/* Autocomplete labels
+ * These styles match those in chrome://calendar/content/calendar-event-dialog-attendees.css. */
+
+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: flex;
+}
+
+.autocomplete-richlistitem[type$="-abook"]:not([ac-comment=""]) > .ac-url {
+ order: 1;
+}
+
+.autocomplete-richlistitem[type$="-abook"]:not([ac-comment=""]) > .ac-separator {
+ order: 2;
+}
+
+.autocomplete-richlistitem[type$="-abook"]:not([ac-comment=""]) > .ac-title {
+ order: 3;
+}
+
+.ac-url-text {
+ max-width: unset !important;
+}
+
+/* Date/time picker anchor */
+.popup-anchor {
+ /* should occupy space but not be visible */
+ opacity: 0;
+ pointer-events: none;
+ position: absolute;
+}
+
+html|input[type="number"] {
+ margin: 2px 4px;
+}
+/* sizes: chars + 8px padding + 1px borders + spin buttons 14+0+10px */
+html|input[type="number"].size2 {
+ width: calc(2ch + 44px);
+}
+html|input[type="number"].size3 {
+ width: calc(3ch + 44px);
+}
+html|input[type="number"].size4 {
+ width: calc(4ch + 44px);
+}
+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[customizing="true"] {
+ outline: 2px dashed var(--focus-outline-color);
+ outline-offset: -3px;
+ border-radius: 3px;
+}
+
+toolbarpaletteitem[type="spacer"][place="toolbar"],
+toolbarpaletteitem[type="spring"][place="toolbar"] {
+ align-items: center;
+}
+
+toolbarpaletteitem[type="spring"][place="toolbar"] {
+ flex: 1000 1000;
+}
+
+toolbarpaletteitem[type="spacer"][place="toolbar"] toolbarspacer,
+toolbarpaletteitem[type="spring"][place="toolbar"] toolbarspring {
+ height: 16px;
+ margin-inline: 6px;
+ opacity: 0.5;
+ border-inline: 2px solid currentColor;
+ background-image: linear-gradient(transparent calc(50% - 1px), currentColor calc(50% - 1px),
+ currentColor calc(50% + 1px), transparent calc(50% + 1px));
+}
+
+toolbarpaletteitem[type="separator"][place="palette"] toolbarseparator {
+ appearance: none;
+ width: 1px;
+ height: 50px;
+ background-color: currentColor;
+}
+
+toolbarpaletteitem[type="spacer"][place="palette"] toolbarspacer,
+toolbarpaletteitem[type="spring"][place="palette"] toolbarspring {
+ margin-bottom: 2px;
+ border: 1px solid currentColor;
+ background-color: hsla(0, 0%, 100%, .3) !important;
+}
+
+toolbarpaletteitem[type="spring"][place="palette"] toolbarspring {
+ background: url("chrome://messenger/skin/icons/spring.svg") no-repeat center;
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+panel[type="arrow"].panel-block-padding::part(content) {
+ padding-block: 6px;
+}
+
+/* Used by the import dialog */
+.wizard-box {
+ padding: 20px 44px 10px;
+}
+
+.image-container > html|img {
+ width: 32px;
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+.text-container description {
+ margin-block-end: 1em;
+}
+
+#viewSource-toolbox {
+ appearance: none;
+}
+
+/* Print UI, mostly from browser.css */
+
+.browserContainer,
+.browserStack {
+ flex: 10000 10000;
+}
+
+.printPreviewStack {
+ position: relative;
+}
+
+:is(browser, hbox, tabbox, vbox)[tabDialogShowing],
+:is(browser, hbox, tabbox, vbox)[tabDialogShowing] * {
+ -moz-user-focus: none !important;
+}
+
+.printSettingsBrowser {
+ width: 250px !important;
+}
+
+.previewStack {
+ background-color: #f9f9fa;
+ color: #0c0c0d;
+}
+
+.previewRendering {
+ background-repeat: no-repeat;
+ background-size: 60px 60px;
+ background-position: center center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ visibility: hidden;
+}
+
+.printPreviewBrowser {
+ visibility: collapse;
+ opacity: 1;
+}
+
+.previewStack[rendering=true] > .previewRendering,
+.previewStack[previewtype="source"] > .printPreviewBrowser[previewtype="source"],
+.previewStack[previewtype="selection"] > .printPreviewBrowser[previewtype="selection"],
+.previewStack[previewtype="simplified"] > .printPreviewBrowser[previewtype="simplified"] {
+ visibility: inherit;
+}
+
+.previewStack[rendering=true] > .printPreviewBrowser {
+ opacity: 0;
+}
+
+.print-pending-label {
+ margin-top: 110px;
+ font-size: large;
+}
+
+printpreview-pagination {
+ opacity: 0;
+}
+printpreview-pagination:focus-within,
+.previewStack:hover printpreview-pagination {
+ opacity: 1;
+}
+.previewStack[rendering=true] printpreview-pagination {
+ opacity: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+ .previewStack {
+ background-color: #2A2A2E;
+ color: rgb(249, 249, 250);
+ }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .previewRendering {
+ background-image: url("chrome://messenger/skin/images/pendingpaint.png");
+ }
+
+ .printPreviewBrowser {
+ transition: opacity 60ms;
+ }
+
+ .previewStack[rendering=true] > .printPreviewBrowser {
+ transition: opacity 1ms 250ms;
+ }
+
+ printpreview-pagination {
+ transition: opacity 100ms 500ms;
+ }
+
+ printpreview-pagination:focus-within,
+ .previewStack:hover printpreview-pagination {
+ transition: opacity 100ms;
+ }
+}
+
+.dialogStack {
+ /* Should outrank the z-index values of other UI elements, particularly the devtools
+ splitter element. */
+ z-index: 11;
+ position: absolute;
+ inset: 0 0 0 0;
+}
+
+.dialogStack.temporarilyHidden {
+ /* For some printing use cases we need to visually hide the dialog before
+ * actually closing it / make it disappear from the frame tree. */
+ visibility: hidden;
+}
+
+.dialogOverlay {
+ visibility: hidden;
+}
+
+.dialogOverlay[topmost="true"] {
+ z-index: 1;
+}
+
+.dialogBox {
+ background-clip: content-box;
+ box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
+ display: flex;
+ margin: 0;
+ padding: 0;
+ overflow-x: auto;
+ border-radius: 8px;
+}
+
+.dialogBox[resizable="true"] {
+ resize: both;
+ overflow: hidden;
+ min-height: 20em;
+}
+
+.dialogBox[sizeto="available"] {
+ --box-inline-margin: 4px;
+ --box-block-margin: 4px;
+ --box-ideal-width: 1000;
+ --box-ideal-height: 650;
+ --box-max-width-margin: calc(100vw - 2 * var(--box-inline-margin));
+ --box-max-height-margin: calc(100vh - var(--box-top-px) - var(--box-block-margin));
+ --box-max-width-ratio: 70vw;
+ --box-max-height-ratio: calc(var(--box-ideal-height) / var(--box-ideal-width) * var(--box-max-width-ratio));
+ max-width: min(max(var(--box-ideal-width) * 1px, var(--box-max-width-ratio)), var(--box-max-width-margin));
+ max-height: min(max(var(--box-ideal-height) * 1px, var(--box-max-height-ratio)), var(--box-max-height-margin));
+ width: 100vw;
+ height: 85vh; /* This is 100vh in Firefox but we have less space to work with. */
+}
+
+@media (min-width: 550px) {
+ .dialogBox[sizeto="available"] {
+ --box-inline-margin: min(calc(4px + (100vw - 550px) / 4), 16px);
+ }
+}
+
+@media (min-width: 800px) {
+ .dialogBox[sizeto="available"] {
+ --box-inline-margin: min(calc(16px + (100vw - 800px) / 4), 32px);
+ }
+}
+
+@media (min-height: 350px) {
+ .dialogBox[sizeto="available"] {
+ --box-block-margin: min(calc(4px + (100vh - 350px) / 4), 16px);
+ }
+}
+
+@media (min-height: 550px) {
+ .dialogBox[sizeto="available"] {
+ --box-block-margin: min(calc(16px + (100vh - 550px) / 4), 32px);
+ }
+}
+
+:not(.content-prompt-dialog) > .dialogOverlay > .dialogBox {
+ /* Make dialogs overlap with upper chrome UI. */
+ margin-top: 5px;
+}
+
+.dialogOverlay[topmost="true"] {
+ background-color: rgba(28, 27, 34, 0.45);
+}
generated by cgit v1.2.3 (git 2.39.1) at 2024-05-14 04:06:17 +0000