toolkit/themes/pinstripe/global/notification.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 %include shared.inc
   6 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
   7
   8 notification {
   9   padding: 3px 3px 4px;
  10   text-shadow: none;
  11 }
  12
  13 notification[type="info"] {
  14   color: rgba(255,255,255,0.95);
  15   background: url("chrome://global/skin/notification/info-bar-background.png") #404040 repeat-x top left;
  16   border-top: 1px solid #707070;
  17   border-bottom: 1px solid #2a2a2a;
  18 }
  19
  20 notification[type="warning"] {
  21   color: rgba(0,0,0,0.95);
  22   background: url("chrome://global/skin/notification/warning-bar-background.png") #ffc703 repeat-x top left;
  23   border-top: 1px solid #ffe970;
  24   border-bottom: 1px solid #bf8a01;
  25 }
  26
  27 notification[type="critical"] {
  28   color: rgba(255,255,255,0.95);
  29   background: url("chrome://global/skin/notification/critical-bar-background.png") #980000 repeat-x top left;
  30   border-top: 1px solid #e35959;
  31   border-bottom: 1px solid #5d0000;
  32 }
  33
  34 .messageImage {
  35   width: 16px;
  36   height: 16px;
  37   margin: 0 4px;
  38 }
  39
  40 /* Default icons for notifications */
  41
  42 .messageImage[type="info"] {
  43   list-style-image: url("chrome://global/skin/notification/info-icon.png");
  44 }
  45
  46 .messageImage[type="warning"] {
  47   list-style-image: url("chrome://global/skin/notification/warning-icon.png");
  48 }
  49
  50 .messageImage[type="critical"] {
  51   list-style-image: url("chrome://global/skin/notification/error-icon.png");
  52 }
  53
  54 .notification-inner {
  55   border: 0 !important;
  56 }
  57
  58 .messageText {
  59   margin: 0 3px !important;
  60   padding: 0;
  61   font-weight: bold;
  62 }
  63
  64 .messageCloseButton {
  65   -moz-appearance: none;
  66   padding: 0;
  67   margin: 0 2px;
  68   list-style-image: url("chrome://global/skin/icons/close.png");
  69   border: none;
  70   -moz-image-region: rect(0, 16px, 16px, 0);
  71 }
  72
  73 .messageCloseButton > .toolbarbutton-text {
  74   display: none;
  75 }
  76
  77 .messageCloseButton:hover {
  78   -moz-image-region: rect(0, 32px, 16px, 16px);
  79 }
  80
  81 .messageCloseButton:hover:active {
  82   -moz-image-region: rect(0, 48px, 16px, 32px);
  83 }
  84
  85 .messageCloseButton:-moz-focusring > .toolbarbutton-icon {
  86   border-radius: 10000px;
  87   box-shadow: 0 0 2px 1px -moz-mac-focusring,
  88               0 0 0 2px -moz-mac-focusring inset;
  89 }
  90
  91 @media (min-resolution: 2dppx) {
  92   .messageCloseButton {
  93     list-style-image: url("chrome://global/skin/icons/close@2x.png");
  94     -moz-image-region: rect(0, 32px, 32px, 0);
  95   }
  96
  97   .messageCloseButton:hover {
  98     -moz-image-region: rect(0, 64px, 32px, 32px);
  99   }
 100
 101   .messageCloseButton:hover:active {
 102     -moz-image-region: rect(0, 96px, 32px, 64px);
 103   }
 104
 105   .messageCloseButton > .toolbarbutton-icon {
 106     width: 16px;
 107   }
 108 }
 109
 110 /* Popup notification */
 111
 112 .popup-notification-description {
 113   max-width: 24em;
 114 }
 115
 116 .popup-notification-button-container {
 117   margin-top: 17px;
 118 }
 119
 120 .popup-notification-menubutton {
 121   -moz-appearance: none;
 122 }
 123
 124 .popup-notification-menubutton:not([type="menu-button"]):-moz-focusring,
 125 .popup-notification-menubutton:-moz-focusring > .button-menubutton-dropmarker,
 126 .popup-notification-menubutton > .button-menubutton-button:-moz-focusring {
 127   box-shadow: @focusRingShadow@;
 128   position: relative;
 129 }
 130
 131 .popup-notification-menubutton:not([type="menu-button"]),
 132 .popup-notification-menubutton > .button-menubutton-button,
 133 .popup-notification-menubutton > .button-menubutton-dropmarker {
 134   -moz-appearance: none;
 135   color: #434343;
 136   border-radius: 4px;
 137   border: 1px solid #b5b5b5;
 138   background: linear-gradient(#fff, #f2f2f2);
 139   box-shadow: inset 0 1px rgba(255,255,255,.8),
 140               inset 0 0 1px rgba(255,255,255,.25),
 141               0 1px rgba(255,255,255,.3);
 142   background-clip: padding-box;
 143   background-origin: padding-box;
 144   padding: 2px 6px;
 145 }
 146
 147 .popup-notification-menubutton > .button-menubutton-button {
 148   -moz-appearance: none;
 149   margin: 0;
 150   padding-top: 2px;
 151   padding-bottom: 2px;
 152   -moz-padding-start: 8px;
 153   -moz-padding-end: 5px;
 154   -moz-border-end: 1px solid rgba(0,0,0,.65);
 155 }
 156
 157 .popup-notification-menubutton > .button-menubutton-dropmarker {
 158   padding: 7px 8px;
 159   margin-top: 0;
 160   margin-bottom: 0;
 161   -moz-margin-start: -1px;
 162   list-style-image: url("chrome://global/skin/icons/panel-dropmarker.png");
 163 }
 164
 165 .popup-notification-menubutton > .button-menubutton-button:-moz-locale-dir(ltr),
 166 .popup-notification-menubutton > .button-menubutton-dropmarker:-moz-locale-dir(rtl) {
 167   border-top-right-radius: 0;
 168   border-bottom-right-radius: 0;
 169 }
 170
 171 .popup-notification-menubutton > .button-menubutton-button:-moz-locale-dir(rtl),
 172 .popup-notification-menubutton > .button-menubutton-dropmarker:-moz-locale-dir(ltr) {
 173   border-top-left-radius: 0;
 174   border-bottom-left-radius: 0;
 175 }
 176
 177 .popup-notification-menubutton:not([type="menu-button"]):hover:active,
 178 .popup-notification-menubutton > .button-menubutton-button:hover:active,
 179 .popup-notification-menubutton[open="true"] > .button-menubutton-dropmarker {
 180   box-shadow: inset 0 1px 4px -3px #000, 0 1px rgba(255, 255, 255, 0.3);
 181 }
 182
 183 .popup-notification-closebutton {
 184   -moz-margin-end: -12px;
 185   margin-top: -13px;
 186 }
 187
 188 .popup-notification-closeitem > .menu-iconic-left {
 189   display: none;
 190 }