unified-extensions.css (11472B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 :root { 6 /* uei = unified extensions item */ 7 --uei-icon-size: 32px; 8 --uei-attention-dot-size: 8px; 9 --uei-button-bgcolor: var(--button-background-color-ghost); 10 --uei-button-color: var(--button-text-color-ghost); 11 --uei-button-hover-bgcolor: var(--button-background-color-ghost-hover); 12 --uei-button-hover-color: var(--button-text-color-ghost-hover); 13 --uei-button-active-bgcolor: var(--button-background-color-ghost-active); 14 --uei-button-active-color: var(--button-text-color-ghost-active); 15 --uei-button-attention-dot-color: var(--attention-dot-color); 16 17 &[uidensity="compact"] { 18 --uei-icon-size: 24px; 19 } 20 } 21 22 #unified-extensions-panel { 23 --uei-dot-horizontal-position-in-panel: calc(var(--uei-icon-size) / 2 + var(--arrowpanel-menuitem-padding-inline) - var(--uei-attention-dot-size) / 2); 24 --uei-dot-vertical-position-in-panel: max(0px, calc(var(--arrowpanel-menuitem-padding-block) / 2 - var(--uei-attention-dot-size) / 2)); 25 } 26 27 #unified-extensions-view { 28 width: var(--menu-panel-width-wide); 29 } 30 31 #unified-extensions-empty-state { 32 > img { 33 /* The parent is a vbox using flexbox, which causes the img to grow to the full width by default. Avoid that: */ 34 align-self: center; 35 } 36 > h2 { 37 color: inherit; /* undo var(--text-color-deemphasized) from panelUI-shared.css */ 38 font-weight: var(--heading-font-weight); /* undo inherit from panelUI-shared.css that overrode h2's font-weight */ 39 } 40 41 > description { 42 /* Horizontally align the text with the "Manage extensions" button/item at the bottom */ 43 margin: var(--arrowpanel-menuitem-margin); 44 padding: var(--arrowpanel-menuitem-padding); 45 } 46 } 47 48 #unified-extensions-discover-extensions { 49 width: auto; /* full width instead of fit-content */ 50 51 + toolbarseparator, 52 + toolbarseparator + #unified-extensions-manage-extensions { 53 display: none; 54 } 55 } 56 57 /* Align extensions rendered with custom elements. */ 58 unified-extensions-item { 59 display: flex; 60 61 & > .unified-extensions-item-row-wrapper > .subviewbutton { 62 flex-shrink: 1; 63 } 64 } 65 66 #unified-extensions-panel .unified-extensions-item { 67 -moz-context-properties: fill; 68 fill: currentColor; 69 /* Have some spacing between items in the panel; mainly useful for when HCM is enabled. */ 70 margin-block: 2px !important; /* override panelUI-shared.css */ 71 } 72 73 /* Override the margin for the subviewbutton wrapped inside 74 * the row wrapper box */ 75 .unified-extensions-item > .unified-extensions-item-row-wrapper > .subviewbutton { 76 margin: 0; 77 } 78 79 /* The "attention UI" for the unified extensions is based on: 80 * https://searchfox.org/mozilla-central/rev/560b7b1b17/browser/themes/shared/tabs.css#624 */ 81 82 /* On the main unified extensions button, we draw the attention on the icon element. */ 83 #unified-extensions-button[attention] > .toolbarbutton-icon, 84 /* For extension widgets placed in a toolbar, we use the stack element 85 * (containing the icon) of the action button to draw the attention dot. 86 * Otherwise (in the extensions panel), we use the action button itself. */ 87 .unified-extensions-item[attention] > .unified-extensions-item-row-wrapper > .unified-extensions-item-action-button.toolbarbutton-1 > .toolbarbutton-badge-stack, 88 .unified-extensions-item[attention] > .unified-extensions-item-row-wrapper > .unified-extensions-item-action-button.subviewbutton { 89 background-image: radial-gradient(circle, var(--uei-button-attention-dot-color), var(--uei-button-attention-dot-color) 2px, transparent 2px); 90 background-size: var(--uei-attention-dot-size) var(--uei-attention-dot-size); 91 background-repeat: no-repeat; 92 93 /* Adjust attention dots position in the toolbar. */ 94 background-position: center bottom calc(var(--toolbarbutton-inner-padding) / 2 - var(--uei-attention-dot-size) / 2); 95 96 /* Adjust attention dots position in the unified extensions panel. */ 97 &.subviewbutton { 98 background-position: left var(--uei-dot-horizontal-position-in-panel) bottom var(--uei-dot-vertical-position-in-panel); 99 100 &:-moz-locale-dir(rtl) { 101 background-position-x: right var(--uei-dot-horizontal-position-in-panel); 102 } 103 } 104 } 105 106 .unified-extensions-item-action-button { 107 flex: 1; 108 overflow: hidden; 109 110 /* The padding-block for menuitems is set to 0 in compact mode which, with the 111 * extension icon being 32px in this case, makes the item look crowded even for 112 * compact mode. */ 113 :root[uidensity="compact"] panel:not([touchmode]) & { 114 padding-block: 4px; 115 } 116 } 117 118 .unified-extensions-item-action-button { 119 list-style-image: var(--webextension-toolbar-image, inherit); 120 121 toolbar[brighttext] & { 122 /* separate image used for dark toolbars */ 123 list-style-image: var(--webextension-toolbar-image-dark, inherit); 124 } 125 toolbaritem:is([overflowedItem="true"], [cui-areatype="panel"]) > .unified-extensions-item-row-wrapper > & { 126 list-style-image: var(--webextension-menupanel-image, inherit); 127 :root[lwt-popup="dark"] & { 128 /* separate image used for dark toolbars */ 129 list-style-image: var(--webextension-menupanel-image-dark, inherit); 130 } 131 } 132 133 > .toolbarbutton-badge-stack > .toolbarbutton-icon { 134 height: 16px; 135 width: 16px; 136 } 137 } 138 139 .unified-extensions-item-icon, 140 .unified-extensions-item .webextension-browser-action.subviewbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon { 141 height: var(--uei-icon-size); 142 width: var(--uei-icon-size); 143 } 144 145 /* The first selector is for the custom elements icon, which appears only in the UEP. */ 146 .unified-extensions-item-icon, 147 .unified-extensions-item .webextension-browser-action.subviewbutton > .toolbarbutton-badge-stack { 148 margin-inline-end: 6px; 149 } 150 151 .unified-extensions-item-icon, 152 .unified-extensions-item-contents { 153 pointer-events: none; 154 } 155 156 .unified-extensions-item-name, 157 .unified-extensions-item-message { 158 margin: 0; 159 padding-inline-start: 0.5em; 160 word-break: break-word; 161 } 162 163 .unified-extensions-item-message { 164 color: var(--text-color-deemphasized); 165 } 166 167 .unified-extensions-item-menu-button.subviewbutton { 168 list-style-image: url("chrome://global/skin/icons/settings.svg"); 169 /* subtract the child's ~1px border from the block padding */ 170 padding: calc(var(--arrowpanel-menuitem-margin-inline) - 1px) var(--arrowpanel-menuitem-margin-inline); 171 padding-inline-end: 0; 172 border-radius: 0; 173 /* override panelUI-shared.css */ 174 background-color: transparent !important; 175 box-shadow: none !important; 176 outline: none !important; 177 178 > .toolbarbutton-icon { 179 box-sizing: content-box; 180 padding: var(--arrowpanel-menuitem-padding-inline); 181 border: 1px solid transparent; 182 border-radius: var(--arrowpanel-menuitem-border-radius); 183 color: var(--uei-button-color); 184 background-color: var(--uei-button-bgcolor); 185 } 186 187 /* Background color, outline, and shadow on the icon to allow the clickable 188 * padding on the button to remain invisible */ 189 &:hover > .toolbarbutton-icon { 190 color: var(--uei-button-hover-color); 191 background-color: var(--uei-button-hover-bgcolor); 192 } 193 194 &:hover:active > .toolbarbutton-icon { 195 color: var(--uei-button-active-color); 196 background-color: var(--uei-button-active-bgcolor); 197 box-shadow: 0 1px 0 hsla(210, 4%, 10%, 0.03) inset; 198 } 199 200 &:focus-visible > .toolbarbutton-icon { 201 outline: var(--focus-outline); 202 outline-offset: var(--focus-outline-inset); 203 } 204 } 205 206 /* Hide subview label. */ 207 .unified-extensions-item .toolbarbutton-text { 208 display: none !important; /* override panelUI-shared.css */ 209 } 210 211 /* --- warning messages --- */ 212 213 #unified-extensions-messages-container { 214 margin: var(--arrowpanel-menuitem-margin); 215 } 216 217 .unified-extensions-message-bar { 218 margin-bottom: var(--space-small); 219 } 220 221 /* Hide the menu button and the unified extensions content when the extension 222 * item is placed on the toolbar. */ 223 .unified-extensions-item-menu-button.toolbarbutton-1, 224 .unified-extensions-item-action-button.toolbarbutton-1 > .unified-extensions-item-contents { 225 display: none; 226 } 227 228 .unified-extensions-item-messagebar { 229 /* Keep the messagebar hidden when the extension item is placed 230 * in the toolbar */ 231 display: none; 232 233 /* Show the messagebar when the item is placed into the panel unless it is 234 * explicitly hidden */ 235 toolbaritem:is([overflowedItem="true"], [cui-areatype="panel"]).unified-extensions-item > unified-extensions-item-messagebar-wrapper > &, 236 unified-extensions-item > unified-extensions-item-messagebar-wrapper > & { 237 display: block; 238 margin-top: var(--space-xsmall); 239 240 &[hidden] { 241 display: none; 242 } 243 } 244 } 245 246 .unified-extensions-item-row-wrapper { 247 display: flex; 248 flex-direction: row; 249 flex: 1; 250 } 251 252 /* Override .toolbaritem-combined-buttons rules applied from panelUI-shared.css 253 * to make sure the extensions panel item row (the one including extension icon, 254 * name, origin control message and gear menu button) and the messagebar that may 255 * follow it (e.g. when the extension is soft-blocked) are going to be rendered 256 * as two separate rows */ 257 toolbaritem:is([overflowedItem="true"], [cui-areatype="panel"]).unified-extensions-item, 258 unified-extensions-item.unified-extensions-item { 259 flex-direction: column; 260 align-items: normal; 261 } 262 263 /* --- browser action CUI widget styles in the extensions panel --- */ 264 265 @media (prefers-contrast) { 266 :root:not([lwtheme]) { 267 --uei-button-attention-dot-color: ButtonText; 268 269 .unified-extensions-item-action-button.subviewbutton:not([disabled]), 270 .unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-icon { 271 border-color: currentColor; 272 background-color: ButtonFace; 273 color: ButtonText; 274 --uei-button-hover-bgcolor: SelectedItem; 275 --uei-button-hover-color: SelectedItemText; 276 --uei-button-active-bgcolor: ButtonFace; 277 --uei-button-active-color: ButtonText; 278 } 279 280 .unified-extensions-item-action-button[disabled].subviewbutton { 281 background-color: Canvas; 282 color: GrayText !important; /* override panelUI-shared.css */ 283 opacity: 1 !important; /* override panelUI-shared.css */ 284 } 285 286 .unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton:hover:not(:active) { 287 --uei-button-attention-dot-color: ButtonFace; 288 } 289 290 .unified-extensions-item-message { 291 color: inherit; 292 } 293 294 .unified-extensions-item > .unified-extensions-item-action-button.subviewbutton:hover:not([disabled]), 295 .unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:hover > .toolbarbutton-icon { 296 background-color: var(--uei-button-hover-bgcolor); 297 color: var(--uei-button-hover-color); 298 border-color: var(--uei-button-hover-bgcolor); 299 } 300 301 .unified-extensions-item > .unified-extensions-item-action-button.subviewbutton:hover:active:not([disabled]), 302 .unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:hover:active > .toolbarbutton-icon { 303 background-color: var(--uei-button-active-bgcolor); 304 color: var(--uei-button-active-color); 305 border-color: var(--uei-button-active-color); 306 } 307 308 .unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:focus-visible > .toolbarbutton-icon { 309 /* The border would otherwise overlap with the focus outline, causing an 310 * unsightly anti-aliasing artifact */ 311 border-color: transparent; 312 } 313 } 314 }