From 6bf0a5cb5034a7e684dcc3500e841785237ce2dd Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sun, 7 Apr 2024 19:32:43 +0200 Subject: Adding upstream version 1:115.7.0. Signed-off-by: Daniel Baumann --- .../themes/shared/addons/unified-extensions.css | 240 +++++++++++++++++++++ 1 file changed, 240 insertions(+) create mode 100644 browser/themes/shared/addons/unified-extensions.css (limited to 'browser/themes/shared/addons/unified-extensions.css') diff --git a/browser/themes/shared/addons/unified-extensions.css b/browser/themes/shared/addons/unified-extensions.css new file mode 100644 index 0000000000..029061a7cb --- /dev/null +++ b/browser/themes/shared/addons/unified-extensions.css @@ -0,0 +1,240 @@ +/* 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 { + padding-bottom: 2px; +} + +/* Stack each child in the message bar. */ +.unified-extensions-message-bar > * { + display: inline-block; + padding-block: 1px; +} + +/* 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; + } +} -- cgit v1.2.3