browser/themes/shared/addons/unified-extensions-item.css

   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   --icon-size: 32px;
   7   --dot-position: calc(var(--icon-size) / 2 + var(--arrowpanel-menuitem-margin-inline) + var(--arrowpanel-menuitem-padding-inline) - 4px);
   8   /* uei = unified extensions item */
   9   --uei-button-hover-bgcolor: var(--panel-item-hover-bgcolor);
  10   --uei-button-hover-color: inherit;
  11   --uei-button-active-bgcolor: var(--panel-item-active-bgcolor);
  12   --uei-button-active-color: inherit;
  13 }
  14
  15 :root[uidensity="compact"] {
  16   --icon-size: 24px;
  17 }
  18
  19 unified-extensions-item {
  20   align-items: center;
  21   display: flex;
  22 }
  23
  24 unified-extensions-item,
  25 .unified-extensions-item {
  26   padding-block: 2px;
  27 }
  28
  29 /* This is based on the attention UI defined in:
  30  * https://searchfox.org/mozilla-central/rev/560b7b1b17/browser/themes/shared/tabs.css#624 */
  31 #unified-extensions-button[attention],
  32 .unified-extensions-item[attention],
  33 unified-extensions-item[attention] {
  34   background-image: radial-gradient(circle, var(--tab-attention-icon-color), var(--tab-attention-icon-color) 2px, transparent 2px);
  35   background-position: center bottom max(0px, calc(var(--arrowpanel-menuitem-padding-block) - 4px));
  36   background-size: 8px 8px;
  37   background-repeat: no-repeat;
  38 }
  39
  40 unified-extensions-item[attention] {
  41   background-position: left var(--dot-position) bottom 0px;
  42 }
  43
  44 unified-extensions-item[attention]:-moz-locale-dir(rtl) {
  45   background-position-x: right var(--dot-position);
  46 }
  47
  48 .unified-extensions-item-action {
  49   overflow: hidden;
  50   background-color: transparent;
  51 }
  52
  53 /* The padding-block for menuitems is set to 0 in compact mode which, with the
  54  * extension icon being 32px in this case, makes the item look crowded even for
  55  * compact mode. */
  56 :root[uidensity="compact"] panel:not([touchmode]) .unified-extensions-item-action {
  57   padding-block: 4px;
  58 }
  59
  60 .unified-extensions-item-action[disabled].subviewbutton {
  61   color: var(--panel-description-color);
  62 }
  63
  64 .unified-extensions-item-action[disabled] .unified-extensions-item-icon {
  65   opacity: 0.5;
  66 }
  67
  68 :is(
  69   unified-extensions-item[secondary-button-hovered="true"],
  70   .unified-extensions-item[secondary-button-hovered="true"]
  71 ) .unified-extensions-item-action.subviewbutton {
  72   color: inherit;
  73 }
  74
  75 .unified-extensions-item-icon,
  76 /* When the unified extensions pref is enabled, we also want to increase the
  77  * size of the icons in the extension CUI widgets. */
  78 panel .unified-extensions-item[unified-extensions="true"] .webextension-browser-action > .toolbarbutton-badge-stack > .toolbarbutton-icon {
  79   height: var(--icon-size);
  80   width: var(--icon-size);
  81   margin-inline-end: 6px;
  82 }
  83
  84 .unified-extensions-item-icon,
  85 .unified-extensions-item-contents {
  86   pointer-events: none;
  87 }
  88
  89 .unified-extensions-item-name,
  90 .unified-extensions-item-message {
  91   margin: 0;
  92   padding-inline-start: .5em;
  93   width: 22em;
  94   word-break: break-word;
  95 }
  96
  97 .unified-extensions-item-message {
  98   color: var(--panel-description-color);
  99 }
 100
 101 unified-extensions-item[secondary-button-hovered="true"] .unified-extensions-item-message:not(.unified-extensions-item-message-hover),
 102 unified-extensions-item:not([secondary-button-hovered="true"]) .unified-extensions-item-message-hover,
 103 /* The two selectors below are for CUI widgets. */
 104 .unified-extensions-item[secondary-button-hovered="true"] .unified-extensions-item-message:not(.unified-extensions-item-message-hover),
 105 .unified-extensions-item:not([secondary-button-hovered="true"]) .unified-extensions-item-message-hover {
 106   display: none;
 107 }
 108
 109 .unified-extensions-item-open-menu.subviewbutton {
 110   list-style-image: url("chrome://global/skin/icons/settings.svg");
 111   margin: 0;
 112   margin-inline-end: var(--arrowpanel-menuitem-margin-inline);
 113   /* Have the icon even padding all around by default */
 114   padding: var(--arrowpanel-menuitem-padding-inline);
 115   border: 1px solid transparent;
 116   background-color: transparent;
 117 }
 118
 119 .unified-extensions-item-open-menu.subviewbutton > .toolbarbutton-text {
 120   display: none;
 121 }
 122
 123 /* --- browser action CUI widget styles --- */
 124
 125 /* Hide secondary (menu) button when the widget is in the list of widgets in
 126  * customization mode. */
 127 toolbaritem.unified-extensions-item:not([cui-areatype="panel"], [overflowedItem=true]) .unified-extensions-item-open-menu {
 128   display: none;
 129 }
 130
 131 /* Hide subviewbutton label by default, it should only be shown in the old
 132  * overflow panel and the palette. */
 133 toolbaritem.unified-extensions-item[cui-areatype="toolbar"] .toolbarbutton-text,
 134 #unified-extensions-area > toolbaritem.unified-extensions-item .toolbarbutton-text {
 135   display: none;
 136 }
 137
 138 /* Hide unified extensions content by default, unless the item is overflowed or in
 139  * a panel. Also hide this content if the item is visible in customize mode. */
 140 toolbaritem.unified-extensions-item:not([overflowedItem="true"], [cui-areatype="panel"]) .unified-extensions-item-contents,
 141 toolbarpaletteitem > toolbaritem.unified-extensions-item .unified-extensions-item-contents {
 142   display: none;
 143 }
 144
 145 toolbaritem.unified-extensions-item .unified-extensions-item-open-menu.subviewbutton {
 146   -moz-box-flex: 0;
 147   margin-inline-start: var(--arrowpanel-menuitem-margin-inline);
 148   padding: var(--arrowpanel-menuitem-padding);
 149   border: 1px solid transparent;
 150 }
 151
 152 /* When the unified extensions pref is set, we want to always have a "large"
 153  * menu button, even on compact mode since each extension has two lines of text
 154  * anyway (extension name and message). */
 155 toolbaritem.unified-extensions-item[unified-extensions="true"] .unified-extensions-item-open-menu.subviewbutton {
 156   padding: 8px;
 157 }
 158
 159 /* --- browser action CUI widget styles in the overflow/unified extensions panel --- */
 160
 161 /* Align CUI widgets with the custom elements in the unified extensions panel. */
 162 #unified-extensions-panel toolbaritem.unified-extensions-item {
 163   max-width: max-content;
 164 }
 165
 166 /* Show CUI widget label in overflow panel when the unified extensions pref is
 167  * not set. */
 168 .widget-overflow-list toolbaritem.unified-extensions-item[unified-extensions="false"] .unified-extensions-item-action .toolbarbutton-text {
 169   text-align: start;
 170   display: block;
 171 }
 172
 173 .widget-overflow-list .unified-extensions-item[attention],
 174 #unified-extensions-panel .unified-extensions-item[attention] {
 175   background-position: left calc(12px + var(--arrowpanel-menuitem-margin-inline)) bottom;
 176 }
 177
 178 .widget-overflow-list .unified-extensions-item[attention]:-moz-locale-dir(rtl),
 179 #unified-extensions-panel .unified-extensions-item[attention]:-moz-locale-dir(rtl) {
 180   background-position-x: right calc(12px + var(--arrowpanel-menuitem-margin-inline));
 181 }
 182
 183 .widget-overflow-list .unified-extensions-item[attention][unified-extensions="false"] {
 184   background-position-x: left 12px;
 185 }
 186
 187 .widget-overflow-list .unified-extensions-item[attention][unified-extensions="false"]:-moz-locale-dir(rtl) {
 188   background-position-x: right 12px;
 189 }
 190
 191 @media (prefers-contrast) {
 192   .unified-extensions-item[attention],
 193   unified-extensions-item[attention] {
 194     background-image: radial-gradient(circle, ButtonText, ButtonText 2px, transparent 2px);
 195   }
 196
 197   .unified-extensions-item-action:not([disabled]).subviewbutton,
 198   .unified-extensions-item-open-menu.subviewbutton,
 199   toolbaritem.unified-extensions-item .unified-extensions-action:not([disabled]).subviewbutton,
 200   toolbaritem.unified-extensions-item .unified-extensions-item-open-menu.subviewbutton {
 201     border-color: currentColor;
 202     background-color: ButtonFace;
 203     color: ButtonText;
 204     --uei-button-hover-bgcolor: SelectedItem;
 205     --uei-button-hover-color: SelectedItemText;
 206     --uei-button-active-bgcolor: ButtonFace;
 207     --uei-button-active-color: ButtonText;
 208   }
 209
 210   .unified-extensions-item-action[disabled].subviewbutton {
 211     background-color: Canvas;
 212     color: GrayText;
 213   }
 214
 215   .unified-extensions-item-action[disabled] .unified-extensions-item-message,
 216   unified-extensions-item[secondary-button-hovered="true"] .unified-extensions-item-action[disabled].subviewbutton,
 217   .unified-extensions-item[secondary-button-hovered="true"] .unified-extensions-item-action[disabled].subviewbutton {
 218     color: GrayText;
 219   }
 220
 221   .unified-extensions-item-action:not([disabled]) .unified-extensions-item-message {
 222     color: ButtonText;
 223   }
 224
 225   .unified-extensions-item-action:not([disabled]):hover .unified-extensions-item-message {
 226     color: inherit;
 227   }
 228 }
 229
 230 :is(
 231   .unified-extensions-item-action:not([disabled]).subviewbutton,
 232   .unified-extensions-item-open-menu.subviewbutton,
 233   toolbaritem.unified-extensions-item .unified-extensions-action:not([disabled]).subviewbutton,
 234   toolbaritem.unified-extensions-item .unified-extensions-item-open-menu.subviewbutton
 235 ):hover:not(:active) {
 236   background-color: var(--uei-button-hover-bgcolor);
 237   color: var(--uei-button-hover-color);
 238   border-color: var(--uei-button-hover-bgcolor);
 239 }
 240
 241 :is(
 242   .unified-extensions-item-action:not([disabled]).subviewbutton,
 243   .unified-extensions-item-open-menu.subviewbutton,
 244   toolbaritem.unified-extensions-item .unified-extensions-action:not([disabled]).subviewbutton,
 245   toolbaritem.unified-extensions-item .unified-extensions-item-open-menu.subviewbutton
 246 ):hover:active {
 247   background-color: var(--uei-button-active-bgcolor);
 248   color: var(--uei-button-active-color);
 249 }