toolkit/content/widgets/message-bar.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 :host {
   6   --info-icon-url: url("chrome://global/skin/icons/info-filled.svg");
   7   --warn-icon-url: url("chrome://global/skin/icons/warning.svg");
   8   --success-icon-url: url("chrome://global/skin/icons/check.svg");
   9   --error-icon-url: url("chrome://global/skin/icons/error.svg");
  10   --close-icon-url: url("chrome://global/skin/icons/close-12.svg");
  11   --close-fill-color: var(--in-content-icon-color);
  12   --icon-size: 16px;
  13   --close-icon-size: 28px;
  14 }
  15
  16 :host([message-bar-type=infobar]) {
  17   --close-icon-size: 28px;
  18 }
  19
  20 :host {
  21   --message-bar-background-color: var(--in-content-box-info-background);
  22   --message-bar-text-color: var(--in-content-text-color);
  23   --message-bar-icon-url: var(--info-icon-url);
  24   /* The default values of --in-content-button* are sufficient, even for dark themes */
  25 }
  26
  27 :host([type=warning]) {
  28   --message-bar-icon-url: var(--warn-icon-url);
  29 }
  30
  31 :host([type=success]:not([message-bar-type=infobar])) {
  32   --message-bar-icon-url: var(--success-icon-url);
  33 }
  34
  35 :host([type=error]),
  36 :host([type=critical]) {
  37   --message-bar-icon-url: var(--error-icon-url);
  38 }
  39
  40 :host {
  41   border: 1px solid transparent;
  42   border-radius: 4px;
  43 }
  44
  45 /* Make the host to behave as a block by default, but allow hidden to hide it. */
  46 :host(:not([hidden])) {
  47   display: block;
  48 }
  49
  50 ::slotted(button) {
  51   /* Enforce micro-button width. */
  52   min-width: -moz-fit-content !important;
  53 }
  54
  55 /* MessageBar Grid Layout */
  56
  57 .container {
  58   background: var(--message-bar-background-color);
  59   color: var(--message-bar-text-color);
  60
  61   padding: 3px 7px;
  62   position: relative;
  63
  64   border-radius: 4px;
  65
  66   display: flex;
  67   /* Ensure that the message bar shadow dom elements are vertically aligned. */
  68   align-items: center;
  69 }
  70
  71 :host([align="center"]) .container {
  72   justify-content: center;
  73 }
  74
  75 .content {
  76   margin: 0 4px;
  77   display: inline-block;
  78   /* Ensure that the message bar content is vertically aligned. */
  79   align-items: center;
  80   /* Ensure that the message bar content is wrapped. */
  81   word-break: break-word;
  82 }
  83
  84 /* MessageBar icon style */
  85
  86 .icon {
  87   padding: 4px;
  88   width: var(--icon-size);
  89   height: var(--icon-size);
  90   flex-shrink: 0;
  91 }
  92
  93 .icon::after {
  94   display: inline-block;
  95   appearance: none;
  96   -moz-context-properties: fill, stroke;
  97   fill: currentColor;
  98   stroke: currentColor;
  99   content: "";
 100   background-image: var(--message-bar-icon-url);
 101   background-size: var(--icon-size);
 102   width: var(--icon-size);
 103   height: var(--icon-size);
 104 }
 105
 106 /* Use a spacer to position the close button at the end, but also support
 107  * centering if required. */
 108 .spacer {
 109   flex-grow: 1;
 110 }
 111
 112 /* Close icon styles */
 113
 114 :host(:not([dismissable])) .close {
 115   display: none;
 116 }
 117
 118 .close {
 119   background-image: var(--close-icon-url);
 120   background-repeat: no-repeat;
 121   background-position: center center;
 122   -moz-context-properties: fill;
 123   fill: currentColor;
 124   min-width: auto;
 125   min-height: auto;
 126   width: var(--close-icon-size);
 127   height: var(--close-icon-size);
 128   margin: 0;
 129   padding: 0;
 130   flex-shrink: 0;
 131 }
 132
 133 @media (prefers-contrast) {
 134   :host {
 135     border-color: CanvasText;
 136   }
 137
 138   .container.infobar::before {
 139     background-color: CanvasText;
 140   }
 141 }
 142
 143 @media not (prefers-contrast) {
 144   /* MessageBar colors by message type */
 145   /* Colors from: https://design.firefox.com/photon/components/message-bars.html#type-specific-style */
 146
 147   :host([type=warning]:not([message-bar-type=infobar])) {
 148     /* Ensure colors within the bar are adjusted and controls are readable */
 149     color-scheme: light;
 150
 151     --message-bar-background-color: var(--yellow-50);
 152     --message-bar-text-color: var(--yellow-90);
 153
 154     --in-content-button-background: var(--yellow-60);
 155     --in-content-button-background-hover: var(--yellow-70);
 156     --in-content-button-background-active: var(--yellow-80);
 157
 158     --close-fill-color: var(--message-bar-text-color);
 159   }
 160
 161   :host([type=success]:not([message-bar-type=infobar])) {
 162     /* Ensure colors within the bar are adjusted and controls are readable */
 163     color-scheme: light;
 164
 165     --message-bar-background-color: var(--green-50);
 166     --message-bar-text-color: var(--green-90);
 167
 168     --in-content-button-background: var(--green-60);
 169     --in-content-button-background-hover: var(--green-70);
 170     --in-content-button-background-active: var(--green-80);
 171   }
 172
 173   :host([type=error]:not([message-bar-type=infobar])) {
 174     --message-bar-background-color: var(--red-60);
 175     --message-bar-text-color: #ffffff;
 176
 177     --in-content-button-background: var(--red-70);
 178     --in-content-button-background-hover: var(--red-80);
 179     --in-content-button-background-active: var(--red-90);
 180   }
 181
 182   :host([type=info]) .icon {
 183     color: rgb(0,144,237);
 184   }
 185
 186   :host([type=warning]) .icon {
 187     color: rgb(255,164,54);
 188   }
 189
 190   :host([type=critical]) .icon {
 191     color: rgb(226,40,80);
 192   }
 193
 194   .container.infobar {
 195     box-shadow: 0 1px 2px rgba(58, 57, 68, 0.1);
 196     background: var(--in-content-page-background);
 197   }
 198
 199   .container.infobar::before {
 200     background-image: linear-gradient(0deg, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%);
 201   }
 202
 203   .close {
 204     fill: var(--close-fill-color);
 205   }
 206
 207   @media (prefers-color-scheme: dark) {
 208     /* Don't set the background in prefers-contrast mode or macOS can end up
 209      * with black on black text. */
 210     .container.infobar {
 211       background: rgb(66,65,77);
 212     }
 213
 214     :host([type=info]) .icon {
 215       color: rgb(128,235,255);
 216     }
 217
 218     :host([type=warning]) .icon {
 219       color: rgb(255,189,79);
 220     }
 221
 222     :host([type=critical]) .icon {
 223       color: rgb(255,154,162);
 224     }
 225   }
 226 }
 227
 228 :host([message-bar-type=infobar]:first-of-type) {
 229   margin-top: 4px;
 230 }
 231
 232 :host([message-bar-type=infobar]) {
 233   margin: 0 4px 4px;
 234 }
 235
 236 .container.infobar {
 237   /* Don't let lwthemes set a text-shadow. */
 238   text-shadow: none;
 239   padding: 0;
 240 }
 241
 242 .container.infobar::before {
 243   content: "";
 244   display: block;
 245   width: 2px;
 246   position: absolute;
 247   top: 0;
 248   inset-inline-start: 0;
 249   height: 100%;
 250   border-start-start-radius: 4px;
 251   border-end-start-radius: 4px;
 252 }
 253
 254 .container.infobar {
 255   align-items: flex-start;
 256 }
 257
 258 /* Infobars styling. */
 259 .notification-content {
 260   margin: 0;
 261   margin-inline-start: 8px;
 262   padding-block: 3px;
 263 }
 264
 265 .notification-message {
 266   padding-block: 8px;
 267   margin-inline-end: 20px;
 268   /* Prevent misalignment issue in the infobar on Linux  */
 269   @media (-moz-platform: linux) {
 270     padding-block-start: 6px;
 271   }
 272 }
 273
 274 .notification-button-container,
 275 .notification-message {
 276   display: inline-block;
 277   vertical-align: middle;
 278 }
 279
 280 .container.infobar > .notification-content > .notification-message img.inline-icon {
 281   /* Align inline icon images in the message content */
 282   vertical-align: middle;
 283   /* Ensure they get the right fill color. */
 284   -moz-context-properties: fill;
 285   fill: currentColor;
 286 }
 287
 288 .close {
 289   margin: 4px 8px;
 290   background-size: 12px;
 291 }
 292
 293 .notification-button {
 294   align-items: center;
 295   margin: 0 4px;
 296 }
 297
 298 .notification-button:first-of-type {
 299   /* When the buttons wrap to their own line we want to match the 8px on the message. */
 300   margin-inline-start: 0;
 301 }
 302
 303 strong {
 304   font-weight: 600;
 305 }
 306
 307 .text-link:hover {
 308   cursor: pointer;
 309 }
 310
 311 .infobar > .icon {
 312   padding: 0;
 313   margin: 10px 0;
 314 }
 315
 316 .infobar > .icon,
 317 :host([type=system]) .notification-content {
 318   margin-inline-start: 16px;
 319 }
 320
 321 :host([type=system]) .icon {
 322   display: none;
 323 }
 324
 325 @keyframes spin {
 326   from { transform: rotate(0); }
 327   to { transform: rotate(360deg); }
 328 }