browser/metro/theme/content.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 %filter substitution
   6 %include defines.inc
   7
   8 @namespace url("http://www.w3.org/1999/xhtml");
   9 @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
  10
  11 /* Typography & General Styling -------------------------------------------- */
  12
  13 ::-moz-selection {
  14   color: white;
  15   background-color: @metro_orange@;
  16 }
  17
  18 *:-moz-any-link:focus {
  19   outline-offset: -2px;
  20 }
  21
  22 /* Input Styling -------------------------------------------- */
  23
  24 select:not([size]):not([multiple]) > xul|scrollbar,
  25 select[size="1"] > xul|scrollbar,
  26 select:not([size]):not([multiple]) xul|scrollbarbutton,
  27 select[size="1"] xul|scrollbarbutton {
  28   display: block;
  29   margin-left: 0;
  30   min-width: 16px;
  31 }
  32
  33 select[size],
  34 select[multiple],
  35 select[size][multiple],
  36 * > input:not([type="image"]) {
  37   border-style: solid;
  38   border-color: #7d7d7d;
  39   color: #414141;
  40 }
  41
  42 /* For both mouse and touch, single-selects are handled by the SelectHelper popup.
  43  * Suppress mouse events on the popup itself. See also ../base/content/cursor.css */
  44 select[size="1"] :-moz-any(option, optgroup),
  45 select:not([size]):not([multiple]) :-moz-any(option, optgroup) {
  46   pointer-events: none;
  47 }
  48
  49 input:-moz-placeholder {
  50   color: GrayText;
  51 }
  52
  53 select:not([size]):not([multiple]),
  54 select[size="0"],
  55 select[size="1"],
  56 * > input[type="button"],
  57 * > input[type="submit"],
  58 * > input[type="reset"],
  59 button {
  60   border-style: solid;
  61   border-color: #7d7d7d;
  62   color: #414141;
  63 }
  64
  65 input[type="checkbox"] {
  66   background: white linear-gradient(rgba(115,115,115,0.5) 0, rgba(215,215,215,0.5) 2px, rgba(255,255,255,0.2) 6px);
  67 }
  68
  69 input[type="radio"] {
  70   background: radial-gradient(at 6px 6px, rgba(255,255,255,0.2) 3px, rgba(195,195,195,0.5) 5px, rgba(115,115,115,0.5) 100%);
  71 }
  72
  73 select {
  74   border-width: 1px;
  75   padding: 1px;
  76 }
  77
  78 select:not([size]):not([multiple]),
  79 select[size="0"],
  80 select[size="1"] {
  81   padding: 0 1px 0 1px;
  82 }
  83
  84 * > input:not([type="image"]) {
  85   border-width: 1px;
  86   padding: 1px;
  87 }
  88
  89 input[type="button"],
  90 input[type="submit"],
  91 input[type="reset"],
  92 button {
  93   border-width: 1px;
  94   padding: 0 7px 0 7px;
  95 }
  96
  97 input[type="radio"],
  98 input[type="checkbox"] {
  99   max-width: 14px;
 100   max-height: 14px;
 101   border: 1px solid #a7a7a7 !important;
 102   padding: 2px 1px 2px 1px;
 103 }
 104
 105 select > button {
 106   border-width: 1px !important;
 107   margin: 0px !important;
 108   padding: 0px !important;
 109   border-radius: 0;
 110   color: #414141;
 111   position: relative !important;
 112   font-size: inherit;
 113 }
 114
 115 input[type="checkbox"]:focus,
 116 input[type="radio"]:focus {
 117   border-color: #99c6e0 !important;
 118 }
 119
 120 input[type="checkbox"]:focus {
 121   background: white linear-gradient(rgba(27,113,177,0.5) 0, rgba(198,225,246,0.2) 2px, rgba(255,255,255,0.2) 6px);
 122 }
 123
 124 input[type="radio"]:focus {
 125   background: radial-gradient(at 6px 6px, rgba(255,255,255,0.2) 3px, rgba(198,225,246,0.2) 5px, rgba(27,113,177,0.5) 100%);
 126 }
 127
 128 /* we need to be specific for selects because the above rules are specific too */
 129 select[size][disabled],
 130 select[multiple][disabled],
 131 select[size][multiple][disabled],
 132 select:not([size]):not([multiple])[disabled],
 133 select[size="0"][disabled],
 134 select[size="1"][disabled],
 135 button[disabled],
 136 * > input:not([type="image"])[disabled] {
 137   color: rgba(0,0,0,0.3);
 138   border-color: rgba(125,125,125,0.4);
 139   border-style: solid;
 140   border-width: 1px;
 141   background: transparent linear-gradient(rgba(185,185,185,0.4) 0, rgba(235,235,235,0.4) 3px, rgba(255,255,255,0.4) 100%);
 142 }
 143
 144 select:not([size]):not([multiple])[disabled],
 145 select[size="0"][disabled],
 146 select[size="1"][disabled] {
 147   background: transparent linear-gradient(rgba(255,255,255,0.4) 0, rgba(235,235,235,0.4) 3px, rgba(185,185,185,0.4) 100%);
 148 }
 149
 150 input[type="button"][disabled],
 151 input[type="submit"][disabled],
 152 input[type="reset"][disabled],
 153 button[disabled] {
 154   padding: 0 7px 0 7px;
 155   background: transparent linear-gradient(rgba(255,255,255,0.4) 0, rgba(235,235,235,0.4) 3px, rgba(185,185,185,0.4) 100%);
 156 }
 157
 158 input[type="radio"][disabled],
 159 input[type="radio"][disabled]:active,
 160 input[type="radio"][disabled]:hover,
 161 input[type="radio"][disabled]:hover:active,
 162 input[type="checkbox"][disabled],
 163 input[type="checkbox"][disabled]:active,
 164 input[type="checkbox"][disabled]:hover,
 165 input[type="checkbox"][disabled]:hover:active {
 166   border:1px solid rgba(125,125,125,0.4) !important;
 167 }
 168
 169 select[disabled] > button {
 170   opacity: 0.6;
 171   padding: 1px 7px 1px 7px;
 172 }
 173
 174 /* -moz-touch-enabled? media elements */
 175 video > xul|videocontrols,
 176 audio > xul|videocontrols {
 177   -moz-binding: url("chrome://global/content/bindings/videocontrols.xml#touchControls");
 178 }
 179
 180 /*
 181  * Enforce nearest scaling for video in order not to lose too much performance
 182  * after fixing bug 598736 ("Use higher-quality imageinterpolation on mobile")
 183  */
 184 video {
 185     image-rendering: -moz-crisp-edges;
 186 }