toolkit/themes/pinstripe/global/global.css

   1 /* ***** BEGIN LICENSE BLOCK *****
   2  * Version: MPL 1.1/GPL 2.0/LGPL 2.1
   3  *
   4  * The contents of this file are subject to the Mozilla Public License Version
   5  * 1.1 (the "License"); you may not use this file except in compliance with
   6  * the License. You may obtain a copy of the License at
   7  * http://www.mozilla.org/MPL/
   8  *
   9  * Software distributed under the License is distributed on an "AS IS" basis,
  10  * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
  11  * for the specific language governing rights and limitations under the
  12  * License.
  13  *
  14  * The Original Code is Mozilla Communicator client code, released
  15  * March 31, 1998.
  16  *
  17  * The Initial Developer of the Original Code is
  18  * Netscape Communications Corporation.
  19  * Portions created by the Initial Developer are Copyright (C) 1998-1999
  20  * the Initial Developer. All Rights Reserved.
  21  *
  22  * Contributor(s):
  23  *   Kevin Gerich (webmail@kmgerich.com)
  24  *
  25  * Alternatively, the contents of this file may be used under the terms of
  26  * either the GNU General Public License Version 2 or later (the "GPL"), or
  27  * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
  28  * in which case the provisions of the GPL or the LGPL are applicable instead
  29  * of those above. If you wish to allow use of your version of this file only
  30  * under the terms of either the GPL or the LGPL, and not to allow others to
  31  * use your version of this file under the terms of the MPL, indicate your
  32  * decision by deleting the provisions above and replace them with the notice
  33  * and other provisions required by the GPL or the LGPL. If you do not delete
  34  * the provisions above, a recipient may use your version of this file under
  35  * the terms of any one of the MPL, the GPL or the LGPL.
  36  *
  37  * ***** END LICENSE BLOCK ***** */
  38
  39 /* all localizable skin settings shall live here */
  40 @import url("chrome://global/locale/intl.css");
  41
  42 %include shared.inc
  43 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
  44
  45 /* ::::: XBL bindings ::::: */
  46
  47 menulist > menupopup,
  48 .menulist-menupopup {
  49   -moz-binding: url("chrome://global/content/bindings/popup.xml#popup-scrollbars");
  50 }
  51
  52 .menulist-compact {
  53   -moz-binding: url("chrome://global/content/bindings/menulist.xml#menulist-compact");
  54 }
  55
  56 /* ::::: draggable elements ::::: */
  57
  58 toolbar:not([nowindowdrag="true"]) {
  59   -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag");
  60 }
  61
  62 statusbar:not([nowindowdrag="true"]) {
  63   -moz-binding: url("chrome://global/content/bindings/general.xml#statusbar-drag");
  64 }
  65
  66 windowdragbox {
  67   -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
  68 }
  69
  70 /* ::::: root elements ::::: */
  71
  72 window,
  73 page,
  74 dialog,
  75 wizard,
  76 prefwindow {
  77   -moz-appearance: dialog;
  78   background-color: #FFFFFF;
  79   color: -moz-DialogText;
  80   font: message-box;
  81 }
  82
  83 prefwindow[type="child"] {
  84   padding-top: 18px;
  85   padding-bottom: 15px;
  86   -moz-padding-start: 18px;
  87   -moz-padding-end: 20px;
  88 }
  89
  90 /* deprecated */
  91 window.dialog {
  92   padding-top: 8px;
  93   padding-bottom: 10px;
  94   -moz-padding-start: 8px;
  95   -moz-padding-end: 10px;
  96 }
  97
  98 /* ::::: alert icons :::::*/
  99
 100 .message-icon,
 101 .alert-icon,
 102 .error-icon,
 103 .question-icon {
 104   width: 64px;
 105   height: 64px;
 106   margin: 6px;
 107   -moz-margin-end: 20px;
 108 }
 109
 110 .message-icon {
 111   list-style-image: url("chrome://global/skin/icons/information-64.png");
 112 }
 113
 114 .alert-icon {
 115   list-style-image: url("chrome://global/skin/icons/warning-64.png");
 116 }
 117
 118 .error-icon {
 119   list-style-image: url("chrome://global/skin/icons/error-64.png");
 120 }
 121
 122 .question-icon {
 123   list-style-image: url("chrome://global/skin/icons/question-64.png");
 124 }
 125
 126 /* ::::: iframe ::::: */
 127
 128 iframe {
 129   border: none;
 130   width: 100px;
 131   height: 100px;
 132   min-width: 10px;
 133   min-height: 10px;
 134 }
 135
 136 /* ::::: statusbar ::::: */
 137
 138 statusbar {
 139   min-width: 1px; /* DON'T DELETE!
 140   Prevents hiding of scrollbars in browser when window is made smaller.*/
 141   min-height: 15px !important;
 142   margin: 0px !important;
 143   /* need to use -moz-padding-end when/if bug 631729 gets fixed: */
 144   padding: 0px 16px 1px 1px;
 145   -moz-appearance: statusbar;
 146   text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
 147 }
 148
 149 statusbarpanel {
 150   -moz-box-align: center;
 151   -moz-box-pack: center;
 152   padding: 0 4px;
 153 }
 154
 155 .statusbarpanel-iconic {
 156   padding: 0px;
 157 }
 158
 159 /* ::::: miscellaneous formatting ::::: */
 160
 161 :root:-moz-lwtheme,
 162 [lwthemefooter="true"] {
 163   -moz-appearance: none;
 164 }
 165
 166 :root:-moz-lwtheme-darktext {
 167   text-shadow: 1px 1px 1.5px white;
 168 }
 169
 170 :root:-moz-lwtheme-brighttext {
 171   text-shadow: 1px 1px 1.5px black;
 172 }
 173
 174 statusbar:-moz-lwtheme {
 175   -moz-appearance: none;
 176   background: none;
 177   border-style: none;
 178   text-shadow: inherit;
 179 }
 180
 181 .inset {
 182   border: 1px solid ThreeDShadow;
 183   border-right-color: ThreeDHighlight;
 184   border-bottom-color: ThreeDHighlight;
 185   margin: 0 5px 5px;
 186 }
 187
 188 .outset {
 189   border: 1px solid ThreeDShadow;
 190   border-left-color: ThreeDHighlight;
 191   border-top-color: ThreeDHighlight;
 192 }
 193
 194 separator:not([orient="vertical"]) {
 195   height: 1.5em;
 196 }
 197 separator[orient="vertical"] {
 198   width: 1.5em;
 199 }
 200
 201 separator.thin:not([orient="vertical"]) {
 202   height: 0.5em;
 203 }
 204 separator.thin[orient="vertical"] {
 205   width: 0.5em;
 206 }
 207
 208 separator.groove:not([orient="vertical"]) {
 209   border-top: 1px solid #A3A3A3;
 210   height: 0;
 211   margin-top: 0.4em;
 212   margin-bottom: 0.4em;
 213 }
 214 separator.groove[orient="vertical"] {
 215   border-left: 1px solid #A3A3A3;
 216   width: 0;
 217   margin-left: 0.4em;
 218   margin-right: 0.4em;
 219 }
 220
 221 .plain {
 222   -moz-appearance: none;
 223   margin: 0 !important;
 224   border: none;
 225   padding: 0;
 226 }
 227
 228 description,
 229 label {
 230   cursor: default;
 231 }
 232
 233 label {
 234   margin: 2px 6px;
 235 }
 236
 237 label[disabled="true"] {
 238   color: GrayText;
 239 }
 240
 241 .tooltip-label {
 242   margin: 0;
 243 }
 244
 245 description {
 246   margin-bottom: 4px;
 247 }
 248
 249 .header {
 250   margin-bottom: 6px;
 251   font-weight: bold;
 252 }
 253
 254 .monospace {
 255   font-family: monospace;
 256 }
 257
 258 .indent {
 259   -moz-margin-start: 23px;
 260 }
 261
 262 .box-padded {
 263   padding: 5px;
 264 }
 265
 266 .spaced {
 267   margin: 3px 5px 4px;
 268 }
 269
 270 .wizard-box {
 271   padding: 20px 44px 10px;
 272 }
 273
 274 .text-link {
 275   color: -moz-nativehyperlinktext;
 276   text-decoration: underline;
 277   border: 1px solid transparent;
 278   cursor: pointer;
 279 }
 280
 281 .text-link:-moz-focusring {
 282   border: 1px dotted -moz-DialogText;
 283 }
 284
 285 .toolbar-focustarget {
 286   -moz-user-focus: ignore !important;
 287 }
 288
 289 notification > button {
 290   margin: 0 3px;
 291   padding: 1px 10px;
 292   min-width: 60px;
 293   min-height: 16px;
 294   -moz-appearance: none;
 295   border-radius: 10000px;
 296   border: @roundButtonBorder@;
 297   text-shadow: @loweredShadow@;
 298   background: @roundButtonBackground@;
 299   box-shadow: @roundButtonShadow@;
 300 }
 301
 302 notification > button:active:hover {
 303   background: @roundButtonPressedBackground@;
 304   box-shadow: @roundButtonPressedShadow@;
 305 }
 306
 307 notification > button:-moz-focusring {
 308   box-shadow: @focusRingShadow@, @roundButtonShadow@;
 309 }
 310
 311 notification > button:active:hover:-moz-focusring {
 312   box-shadow: @focusRingShadow@, @roundButtonPressedShadow@;
 313 }
 314
 315 notification > button > .button-box > .button-text {
 316   margin: 0 !important;
 317 }
 318
 319 /* :::::: autoscroll popup ::::: */
 320
 321 .autoscroller {
 322   height: 28px;
 323   width: 28px;
 324   border: none;
 325   margin: -14px;
 326   padding: 0;
 327   background-image: url("chrome://global/skin/icons/autoscroll.png");
 328   background-color: transparent;
 329   background-position: right top;
 330   -moz-appearance: none;
 331   -moz-window-shadow: none;
 332 }
 333
 334 .autoscroller[scrolldir="NS"] {
 335   background-position: right center;
 336 }
 337
 338 .autoscroller[scrolldir="EW"] {
 339   background-position: right bottom;
 340 }
 341
 342 /* autorepeatbuttons in menus */
 343
 344 .popup-internal-box > autorepeatbutton {
 345   height: 15px;
 346   position: relative;
 347   /* Here we're using a little magic.
 348    * The arrow button is supposed to overlay the scrollbox, blocking
 349    * everything under it from reaching the screen. However, the menu background
 350    * is slightly transparent, so how can we block something completely without
 351    * messing up the transparency? It's easy: The native theming of the
 352    * "menuitem" appearance uses CGContextClearRect before drawing, which
 353    * clears everything under it.
 354    * Without help from native theming this effect wouldn't be achievable.
 355    */
 356   -moz-appearance: menuitem;
 357 }
 358
 359 .popup-internal-box > .autorepeatbutton-up {
 360   margin-bottom: -15px;
 361 }
 362
 363 .popup-internal-box > .autorepeatbutton-down {
 364   margin-top: -15px;
 365 }
 366
 367 .popup-internal-box > autorepeatbutton[disabled="true"] {
 368   visibility: collapse;
 369 }