summaryrefslogtreecommitdiffstats
path: root/browser/themes/shared/addons/unified-extensions.css
diff options
context:
space:
mode:
Diffstat (limited to 'browser/themes/shared/addons/unified-extensions.css')
-rw-r--r--browser/themes/shared/addons/unified-extensions.css234
1 files changed, 234 insertions, 0 deletions
diff --git a/browser/themes/shared/addons/unified-extensions.css b/browser/themes/shared/addons/unified-extensions.css
new file mode 100644
index 0000000000..fd671e007d
--- /dev/null
+++ b/browser/themes/shared/addons/unified-extensions.css
@@ -0,0 +1,234 @@
+/* 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/. */
+
+:root {
+ /* uei = unified extensions item */
+ --uei-icon-size: 32px;
+ --uei-attention-dot-size: 8px;
+ --uei-button-hover-bgcolor: var(--panel-item-hover-bgcolor);
+ --uei-button-hover-color: inherit;
+ --uei-button-active-bgcolor: var(--panel-item-active-bgcolor);
+ --uei-button-active-color: inherit;
+ --uei-button-attention-dot-color: var(--tab-attention-icon-color);
+}
+
+:root[uidensity="compact"] {
+ --uei-icon-size: 24px;
+}
+
+#unified-extensions-panel {
+ --uei-dot-horizontal-position-in-panel: calc(var(--uei-icon-size) / 2 + var(--arrowpanel-menuitem-padding-inline) - var(--uei-attention-dot-size) / 2);
+ --uei-dot-vertical-position-in-panel: max(0px, calc(var(--arrowpanel-menuitem-padding-block) / 2 - var(--uei-attention-dot-size) / 2));
+}
+
+#unified-extensions-view {
+ width: var(--menu-panel-width-wide);
+}
+
+/* Align extensions rendered with custom elements. */
+unified-extensions-item {
+ display: flex;
+ align-items: center;
+}
+
+unified-extensions-item > .subviewbutton {
+ flex-shrink: 1;
+}
+
+#unified-extensions-panel .unified-extensions-item {
+ -moz-context-properties: fill;
+ fill: currentColor;
+ /* Have some spacing between items in the panel; mainly useful for when HCM is enabled. */
+ margin-block: 2px !important; /* override panelUI-shared.css */
+}
+
+.unified-extensions-item > .subviewbutton {
+ margin: 0;
+}
+
+/* The "attention UI" for the unified extensions is based on:
+ * https://searchfox.org/mozilla-central/rev/560b7b1b17/browser/themes/shared/tabs.css#624 */
+
+/* On the main unified extensions button, we draw the attention on the icon element. */
+#unified-extensions-button[attention] > .toolbarbutton-icon,
+/* For extension widgets placed in a toolbar, we use the stack element
+ * (containing the icon) of the action button to draw the attention dot.
+ * Otherwise (in the extensions panel), we use the action button itself. */
+.unified-extensions-item[attention] > .unified-extensions-item-action-button.toolbarbutton-1 > .toolbarbutton-badge-stack,
+.unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton {
+ background-image: radial-gradient(circle, var(--uei-button-attention-dot-color), var(--uei-button-attention-dot-color) 2px, transparent 2px);
+ background-size: var(--uei-attention-dot-size) var(--uei-attention-dot-size);
+ background-repeat: no-repeat;
+}
+
+/* Adjust attention dots position in the toolbar. */
+#unified-extensions-button[attention] > .toolbarbutton-icon,
+.unified-extensions-item[attention] > .unified-extensions-item-action-button.toolbarbutton-1 > .toolbarbutton-badge-stack {
+ background-position: center bottom calc(var(--toolbarbutton-inner-padding) / 2 - var(--uei-attention-dot-size) / 2);
+}
+
+/* Adjust attention dots position in the unified extensions panel. */
+.unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton {
+ background-position: left var(--uei-dot-horizontal-position-in-panel) bottom var(--uei-dot-vertical-position-in-panel);
+}
+
+/* Adjust attention dots position in the unified extensions panel for RTL. */
+.unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton:-moz-locale-dir(rtl) {
+ background-position-x: right var(--uei-dot-horizontal-position-in-panel);
+}
+
+.unified-extensions-item-action-button {
+ flex: 1;
+ overflow: hidden;
+}
+
+/* The padding-block for menuitems is set to 0 in compact mode which, with the
+ * extension icon being 32px in this case, makes the item look crowded even for
+ * compact mode. */
+:root[uidensity="compact"] panel:not([touchmode]) .unified-extensions-item-action-button {
+ padding-block: 4px;
+}
+
+.unified-extensions-item-icon,
+.unified-extensions-item .webextension-browser-action.subviewbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
+ height: var(--uei-icon-size);
+ width: var(--uei-icon-size);
+}
+
+/* The first selector is for the custom elements icon, which appears only in the UEP. */
+.unified-extensions-item-icon,
+.unified-extensions-item .webextension-browser-action.subviewbutton > .toolbarbutton-badge-stack {
+ margin-inline-end: 6px;
+}
+
+.unified-extensions-item-icon,
+.unified-extensions-item-contents {
+ pointer-events: none;
+}
+
+.unified-extensions-item-name,
+.unified-extensions-item-message {
+ margin: 0;
+ padding-inline-start: .5em;
+ word-break: break-word;
+}
+
+.unified-extensions-item-message {
+ color: var(--text-color-deemphasized);
+}
+
+.unified-extensions-item-menu-button.subviewbutton {
+ list-style-image: url("chrome://global/skin/icons/settings.svg");
+ /* subtract the child's ~1px border from the block padding */
+ padding: calc(var(--arrowpanel-menuitem-margin-inline) - 1px)
+ var(--arrowpanel-menuitem-margin-inline);
+ padding-inline-end: 0;
+ border-radius: 0;
+ /* override panelUI-shared.css */
+ background-color: transparent !important;
+ box-shadow: none !important;
+ outline: none !important;
+}
+
+/* Hide subview label. */
+.unified-extensions-item .toolbarbutton-text {
+ display: none !important; /* override panelUI-shared.css */
+}
+
+.unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-icon {
+ box-sizing: content-box;
+ padding: var(--arrowpanel-menuitem-padding-inline);
+ border: 1px solid transparent;
+ border-radius: var(--arrowpanel-menuitem-border-radius);
+}
+
+/* Background color, outline, and shadow on the icon to allow the clickable
+ * padding on the button to remain invisible */
+.unified-extensions-item-menu-button.subviewbutton:hover > .toolbarbutton-icon {
+ background-color: var(--uei-button-hover-bgcolor);
+}
+
+.unified-extensions-item-menu-button.subviewbutton:hover:active > .toolbarbutton-icon {
+ background-color: var(--uei-button-active-bgcolor);
+ box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
+}
+
+.unified-extensions-item-menu-button.subviewbutton:focus-visible > .toolbarbutton-icon {
+ outline: var(--focus-outline);
+ outline-offset: var(--focus-outline-inset);
+}
+
+/* --- warning messages --- */
+
+#unified-extensions-messages-container {
+ margin: var(--arrowpanel-menuitem-margin);
+}
+
+.unified-extensions-message-bar {
+ margin-bottom: 2px;
+}
+
+/* Hide the menu button and the unified extensions content when the extension
+ * item is placed on the toolbar. */
+.unified-extensions-item-menu-button.toolbarbutton-1,
+.unified-extensions-item-action-button.toolbarbutton-1 > .unified-extensions-item-contents {
+ display: none;
+}
+
+/* --- browser action CUI widget styles in the extensions panel --- */
+
+@media (prefers-contrast) {
+ :root:not(:-moz-lwtheme) {
+ --uei-button-attention-dot-color: ButtonText;
+ }
+
+ .unified-extensions-item-action-button.subviewbutton:not([disabled], :-moz-lwtheme),
+ .unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-icon:not(:-moz-lwtheme) {
+ border-color: currentColor;
+ background-color: ButtonFace;
+ color: ButtonText;
+ --uei-button-hover-bgcolor: SelectedItem;
+ --uei-button-hover-color: SelectedItemText;
+ --uei-button-active-bgcolor: ButtonFace;
+ --uei-button-active-color: ButtonText;
+ }
+
+ .unified-extensions-item-action-button[disabled].subviewbutton:not(:-moz-lwtheme) {
+ background-color: Canvas;
+ color: GrayText !important; /* override panelUI-shared.css */
+ opacity: 1 !important; /* override panelUI-shared.css */
+ }
+
+ .unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton:hover:not(:-moz-lwtheme) {
+ --uei-button-attention-dot-color: ButtonFace;
+ }
+
+ .unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton:hover:active:not(:-moz-lwtheme) {
+ --uei-button-attention-dot-color: ButtonText;
+ }
+
+ .unified-extensions-item-message:not(:-moz-lwtheme) {
+ color: inherit;
+ }
+
+ .unified-extensions-item > .unified-extensions-item-action-button.subviewbutton:hover:not([disabled], :-moz-lwtheme),
+ .unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:hover > .toolbarbutton-icon:not(:-moz-lwtheme) {
+ background-color: var(--uei-button-hover-bgcolor);
+ color: var(--uei-button-hover-color);
+ border-color: var(--uei-button-hover-bgcolor);
+ }
+
+ .unified-extensions-item > .unified-extensions-item-action-button.subviewbutton:hover:active:not([disabled], :-moz-lwtheme),
+ .unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:hover:active > .toolbarbutton-icon:not(:-moz-lwtheme) {
+ background-color: var(--uei-button-active-bgcolor);
+ color: var(--uei-button-active-color);
+ border-color: var(--uei-button-active-color);
+ }
+
+ .unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:focus-visible > .toolbarbutton-icon:not(:-moz-lwtheme) {
+ /* The border would otherwise overlap with the focus outline, causing an
+ * unsightly anti-aliasing artifact */
+ border-color: transparent;
+ }
+}