1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/toolkit/themes/osx/global/global.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,372 @@
1.4 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.5 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.6 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.7 +
1.8 +/* all localizable skin settings shall live here */
1.9 +@import url("chrome://global/locale/intl.css");
1.10 +
1.11 +%include shared.inc
1.12 +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
1.13 +
1.14 +/* ::::: XBL bindings ::::: */
1.15 +
1.16 +menulist > menupopup,
1.17 +.menulist-menupopup {
1.18 + -moz-binding: url("chrome://global/content/bindings/popup.xml#popup-scrollbars");
1.19 +}
1.20 +
1.21 +.menulist-compact {
1.22 + -moz-binding: url("chrome://global/content/bindings/menulist.xml#menulist-compact");
1.23 +}
1.24 +
1.25 +/* ::::: draggable elements ::::: */
1.26 +
1.27 +toolbar:not([nowindowdrag="true"]) {
1.28 + -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag");
1.29 +}
1.30 +
1.31 +statusbar:not([nowindowdrag="true"]) {
1.32 + -moz-binding: url("chrome://global/content/bindings/general.xml#statusbar-drag");
1.33 +}
1.34 +
1.35 +windowdragbox {
1.36 + -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
1.37 +}
1.38 +
1.39 +/* ::::: root elements ::::: */
1.40 +
1.41 +window,
1.42 +page,
1.43 +dialog,
1.44 +wizard,
1.45 +prefwindow {
1.46 + -moz-appearance: dialog;
1.47 + background-color: #FFFFFF;
1.48 + color: -moz-DialogText;
1.49 + font: message-box;
1.50 +}
1.51 +
1.52 +prefwindow[type="child"] {
1.53 + padding-top: 18px;
1.54 + padding-bottom: 15px;
1.55 + -moz-padding-start: 18px;
1.56 + -moz-padding-end: 20px;
1.57 +}
1.58 +
1.59 +/* deprecated */
1.60 +window.dialog {
1.61 + padding-top: 8px;
1.62 + padding-bottom: 10px;
1.63 + -moz-padding-start: 8px;
1.64 + -moz-padding-end: 10px;
1.65 +}
1.66 +
1.67 +/* ::::: alert icons :::::*/
1.68 +
1.69 +.message-icon,
1.70 +.alert-icon,
1.71 +.error-icon,
1.72 +.question-icon {
1.73 + width: 64px;
1.74 + height: 64px;
1.75 + margin: 6px;
1.76 + -moz-margin-end: 20px;
1.77 +}
1.78 +
1.79 +.message-icon {
1.80 + list-style-image: url("chrome://global/skin/icons/information-64.png");
1.81 +}
1.82 +
1.83 +.alert-icon {
1.84 + list-style-image: url("chrome://global/skin/icons/warning-64.png");
1.85 +}
1.86 +
1.87 +.error-icon {
1.88 + list-style-image: url("chrome://global/skin/icons/error-64.png");
1.89 +}
1.90 +
1.91 +.question-icon {
1.92 + list-style-image: url("chrome://global/skin/icons/question-64.png");
1.93 +}
1.94 +
1.95 +/* ::::: iframe ::::: */
1.96 +
1.97 +iframe {
1.98 + border: none;
1.99 + width: 100px;
1.100 + height: 100px;
1.101 + min-width: 10px;
1.102 + min-height: 10px;
1.103 +}
1.104 +
1.105 +/* ::::: statusbar ::::: */
1.106 +
1.107 +statusbar {
1.108 + min-width: 1px; /* DON'T DELETE!
1.109 + Prevents hiding of scrollbars in browser when window is made smaller.*/
1.110 + min-height: 15px !important;
1.111 + margin: 0px !important;
1.112 + /* need to use -moz-padding-end when/if bug 631729 gets fixed: */
1.113 + padding: 0px 16px 1px 1px;
1.114 + -moz-appearance: statusbar;
1.115 + text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
1.116 +}
1.117 +
1.118 +statusbarpanel {
1.119 + -moz-box-align: center;
1.120 + -moz-box-pack: center;
1.121 + padding: 0 4px;
1.122 +}
1.123 +
1.124 +.statusbarpanel-iconic {
1.125 + padding: 0px;
1.126 +}
1.127 +
1.128 +/* ::::: miscellaneous formatting ::::: */
1.129 +
1.130 +:root:-moz-lwtheme,
1.131 +[lwthemefooter="true"] {
1.132 + -moz-appearance: none;
1.133 +}
1.134 +
1.135 +:root:-moz-lwtheme-darktext {
1.136 + text-shadow: 0 -0.5px 1.5px white;
1.137 +}
1.138 +
1.139 +:root:-moz-lwtheme-brighttext {
1.140 + text-shadow: 1px 1px 1.5px black;
1.141 +}
1.142 +
1.143 +statusbar:-moz-lwtheme {
1.144 + -moz-appearance: none;
1.145 + background: none;
1.146 + border-style: none;
1.147 + text-shadow: inherit;
1.148 +}
1.149 +
1.150 +.inset {
1.151 + border: 1px solid ThreeDShadow;
1.152 + border-right-color: ThreeDHighlight;
1.153 + border-bottom-color: ThreeDHighlight;
1.154 + margin: 0 5px 5px;
1.155 +}
1.156 +
1.157 +.outset {
1.158 + border: 1px solid ThreeDShadow;
1.159 + border-left-color: ThreeDHighlight;
1.160 + border-top-color: ThreeDHighlight;
1.161 +}
1.162 +
1.163 +separator:not([orient="vertical"]) {
1.164 + height: 1.5em;
1.165 +}
1.166 +separator[orient="vertical"] {
1.167 + width: 1.5em;
1.168 +}
1.169 +
1.170 +separator.thin:not([orient="vertical"]) {
1.171 + height: 0.5em;
1.172 +}
1.173 +separator.thin[orient="vertical"] {
1.174 + width: 0.5em;
1.175 +}
1.176 +
1.177 +separator.groove:not([orient="vertical"]) {
1.178 + border-top: 1px solid #A3A3A3;
1.179 + height: 0;
1.180 + margin-top: 0.4em;
1.181 + margin-bottom: 0.4em;
1.182 +}
1.183 +separator.groove[orient="vertical"] {
1.184 + border-left: 1px solid #A3A3A3;
1.185 + width: 0;
1.186 + margin-left: 0.4em;
1.187 + margin-right: 0.4em;
1.188 +}
1.189 +
1.190 +.plain {
1.191 + -moz-appearance: none;
1.192 + margin: 0 !important;
1.193 + border: none;
1.194 + padding: 0;
1.195 +}
1.196 +
1.197 +description,
1.198 +label {
1.199 + cursor: default;
1.200 +}
1.201 +
1.202 +label {
1.203 + margin: 2px 6px;
1.204 +}
1.205 +
1.206 +label[disabled="true"] {
1.207 + color: GrayText;
1.208 +}
1.209 +
1.210 +.tooltip-label {
1.211 + margin: 0;
1.212 +}
1.213 +
1.214 +description {
1.215 + margin-bottom: 4px;
1.216 +}
1.217 +
1.218 +.header {
1.219 + margin-bottom: 6px;
1.220 + font-weight: bold;
1.221 +}
1.222 +
1.223 +.monospace {
1.224 + font-family: monospace;
1.225 +}
1.226 +
1.227 +.indent {
1.228 + -moz-margin-start: 23px;
1.229 +}
1.230 +
1.231 +.box-padded {
1.232 + padding: 5px;
1.233 +}
1.234 +
1.235 +.spaced {
1.236 + margin: 3px 5px 4px;
1.237 +}
1.238 +
1.239 +.wizard-box {
1.240 + padding: 20px 44px 10px;
1.241 +}
1.242 +
1.243 +.text-link {
1.244 + color: -moz-nativehyperlinktext;
1.245 + cursor: pointer;
1.246 +}
1.247 +
1.248 +.text-link:hover {
1.249 + text-decoration: underline;
1.250 +}
1.251 +
1.252 +.text-link:-moz-focusring {
1.253 + box-shadow: @focusRingShadow@;
1.254 +}
1.255 +
1.256 +.toolbar-focustarget {
1.257 + -moz-user-focus: ignore !important;
1.258 +}
1.259 +
1.260 +notification > button {
1.261 + margin: 0 3px;
1.262 + padding: 1px 10px;
1.263 + min-width: 60px;
1.264 + min-height: 16px;
1.265 + -moz-appearance: none;
1.266 + border-radius: 10000px;
1.267 + border: @roundButtonBorder@;
1.268 + text-shadow: @loweredShadow@;
1.269 + background: @roundButtonBackground@;
1.270 + box-shadow: @roundButtonShadow@;
1.271 +}
1.272 +
1.273 +notification > button:active:hover {
1.274 + background: @roundButtonPressedBackground@;
1.275 + box-shadow: @roundButtonPressedShadow@;
1.276 +}
1.277 +
1.278 +notification > button:-moz-focusring {
1.279 + box-shadow: @focusRingShadow@, @roundButtonShadow@;
1.280 +}
1.281 +
1.282 +notification > button:active:hover:-moz-focusring {
1.283 + box-shadow: @focusRingShadow@, @roundButtonPressedShadow@;
1.284 +}
1.285 +
1.286 +notification > button > .button-box > .button-text {
1.287 + margin: 0 !important;
1.288 +}
1.289 +
1.290 +/* :::::: autoscroll popup ::::: */
1.291 +
1.292 +.autoscroller {
1.293 + height: 28px;
1.294 + width: 28px;
1.295 + border: none;
1.296 + margin: -14px;
1.297 + padding: 0;
1.298 + background-image: url("chrome://global/skin/icons/autoscroll.png");
1.299 + background-color: transparent;
1.300 + background-position: right top;
1.301 + -moz-appearance: none;
1.302 + -moz-window-shadow: none;
1.303 +}
1.304 +
1.305 +.autoscroller[scrolldir="NS"] {
1.306 + background-position: right center;
1.307 +}
1.308 +
1.309 +.autoscroller[scrolldir="EW"] {
1.310 + background-position: right bottom;
1.311 +}
1.312 +
1.313 +/* autorepeatbuttons in menus */
1.314 +
1.315 +.popup-internal-box > autorepeatbutton {
1.316 + height: 15px;
1.317 + position: relative;
1.318 + /* Here we're using a little magic.
1.319 + * The arrow button is supposed to overlay the scrollbox, blocking
1.320 + * everything under it from reaching the screen. However, the menu background
1.321 + * is slightly transparent, so how can we block something completely without
1.322 + * messing up the transparency? It's easy: The native theming of the
1.323 + * "menuitem" appearance uses CGContextClearRect before drawing, which
1.324 + * clears everything under it.
1.325 + * Without help from native theming this effect wouldn't be achievable.
1.326 + */
1.327 + -moz-appearance: menuitem;
1.328 +}
1.329 +
1.330 +.popup-internal-box > .autorepeatbutton-up {
1.331 + margin-bottom: -15px;
1.332 +}
1.333 +
1.334 +.popup-internal-box > .autorepeatbutton-down {
1.335 + margin-top: -15px;
1.336 +}
1.337 +
1.338 +.popup-internal-box > autorepeatbutton[disabled="true"] {
1.339 + visibility: collapse;
1.340 +}
1.341 +
1.342 +/* :::::: Close button icons ::::: */
1.343 +
1.344 +.close-icon {
1.345 + list-style-image: url("chrome://global/skin/icons/close.png");
1.346 + -moz-image-region: rect(0, 16px, 16px, 0);
1.347 +}
1.348 +
1.349 +.close-icon:hover {
1.350 + -moz-image-region: rect(0, 32px, 16px, 16px);
1.351 +}
1.352 +
1.353 +.close-icon:hover:active {
1.354 + -moz-image-region: rect(0, 48px, 16px, 32px);
1.355 +}
1.356 +
1.357 +@media (min-resolution: 2dppx) {
1.358 + .close-icon > .button-icon,
1.359 + .close-icon > .toolbarbutton-icon {
1.360 + width: 16px;
1.361 + }
1.362 +
1.363 + .close-icon {
1.364 + list-style-image: url("chrome://global/skin/icons/close@2x.png");
1.365 + -moz-image-region: rect(0, 32px, 32px, 0);
1.366 + }
1.367 +
1.368 + .close-icon:hover {
1.369 + -moz-image-region: rect(0, 64px, 32px, 32px);
1.370 + }
1.371 +
1.372 + .close-icon:hover:active {
1.373 + -moz-image-region: rect(0, 96px, 32px, 64px);
1.374 + }
1.375 +}
