diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /browser/themes/shared/addons/unified-extensions.css | |
parent | Initial commit. (diff) | |
download | firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip |
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r-- | browser/themes/shared/addons/unified-extensions.css | 240 |
1 files changed, 240 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..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; + } +} |