1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/metro/theme/browser.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,1402 @@
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 +%filter substitution
1.9 +%include defines.inc
1.10 +
1.11 +%define forward_transition_length 200ms
1.12 +%define forward_spacing 50px
1.13 +
1.14 +/* Tab/StartUI tray ======================================================== */
1.15 +
1.16 +#tray {
1.17 + transition: transform @metro_animation_duration@ @metro_animation_easing@;
1.18 + transform: translateY(-@tabs_height@);
1.19 + width: 100%;
1.20 +}
1.21 +
1.22 +#tray {
1.23 + position: fixed;
1.24 +}
1.25 +
1.26 +#tray[expanded]:not([viewstate="snapped"]) {
1.27 + transform: none;
1.28 +}
1.29 +
1.30 +/* Tabs -------------------------------------------------------------------- */
1.31 +
1.32 +#tabs-container {
1.33 + background: @panel_dark_color@ @panel_dark_background@;
1.34 + padding: 0;
1.35 + -moz-padding-start: @metro_spacing_normal@;
1.36 + width: 100%;
1.37 +}
1.38 +
1.39 +#tabs {
1.40 + -moz-padding-start: 0;
1.41 +}
1.42 +
1.43 +#tabs .tabs-list {
1.44 + display: block;
1.45 + -moz-user-focus: ignore;
1.46 + padding: 0;
1.47 + background-color: transparent;
1.48 + margin: 0;
1.49 + overflow: auto;
1.50 +}
1.51 +
1.52 +.tabs-scrollbox > .scrollbutton-up[collapsed],
1.53 +.tabs-scrollbox > .scrollbutton-down[collapsed],
1.54 +#tabs[input="imprecise"] > .tabs-scrollbox > .scrollbutton-up,
1.55 +#tabs[input="imprecise"] > .tabs-scrollbox > .scrollbutton-down {
1.56 + visibility: hidden !important;
1.57 + pointer-events: none;
1.58 +}
1.59 +
1.60 +#tabs > .tabs-scrollbox > .scrollbutton-down:-moz-locale-dir(rtl),
1.61 +#tabs > .tabs-scrollbox > .scrollbutton-up {
1.62 + list-style-image: url("images/tab-arrows.png") !important;
1.63 + -moz-image-region: rect(15px 58px 63px 14px) !important;
1.64 + padding-right: 15px;
1.65 + width: @tabs_scrollarrow_width@;
1.66 +}
1.67 +#tabs > .tabs-scrollbox > .scrollbutton-down:hover:-moz-locale-dir(rtl),
1.68 +#tabs > .tabs-scrollbox > .scrollbutton-up:hover {
1.69 + -moz-image-region: rect(14px 102px 62px 58px) !important;
1.70 +}
1.71 +#tabs > .tabs-scrollbox > .scrollbutton-down:active:-moz-locale-dir(rtl),
1.72 +#tabs > .tabs-scrollbox > .scrollbutton-up:active {
1.73 + -moz-image-region: rect(14px 152px 62px 108px) !important;
1.74 +}
1.75 +#tabs > .tabs-scrollbox > .scrollbutton-down[disabled]:-moz-locale-dir(rtl),
1.76 +#tabs > .tabs-scrollbox > .scrollbutton-up[disabled] {
1.77 + -moz-image-region: rect(15px 196px 63px 152px) !important;
1.78 +}
1.79 +
1.80 +#tabs > .tabs-scrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
1.81 +#tabs > .tabs-scrollbox > .scrollbutton-down {
1.82 + list-style-image: url("images/tab-arrows.png") !important;
1.83 + -moz-image-region: rect(73px 58px 121px 14px) !important;
1.84 + padding-left: 15px;
1.85 + width: @tabs_scrollarrow_width@;
1.86 +}
1.87 +#tabs > .tabs-scrollbox > .scrollbutton-up:hover:-moz-locale-dir(rtl),
1.88 +#tabs > .tabs-scrollbox > .scrollbutton-down:hover {
1.89 + -moz-image-region: rect(72px 102px 120px 58px) !important;
1.90 +}
1.91 +#tabs > .tabs-scrollbox > .scrollbutton-up:active:-moz-locale-dir(rtl),
1.92 +#tabs > .tabs-scrollbox > .scrollbutton-down:active {
1.93 + -moz-image-region: rect(72px 152px 120px 108px) !important;
1.94 +}
1.95 +#tabs > .tabs-scrollbox > .scrollbutton-up[disabled]:-moz-locale-dir(rtl),
1.96 +#tabs > .tabs-scrollbox > .scrollbutton-down[disabled] {
1.97 + -moz-image-region: rect(73px 196px 121px 152px) !important;
1.98 +}
1.99 +
1.100 +.tabs-scrollbox > .scrollbutton-up:not([disabled]):not([collapsed]):-moz-locale-dir(rtl)::after {
1.101 + right: calc(@tabs_scrollarrow_width@ + @metro_spacing_normal@);
1.102 +}
1.103 +
1.104 +.tabs-scrollbox > .scrollbutton-down:not([disabled]):not([collapsed]):-moz-locale-dir(rtl)::before {
1.105 + right: auto;
1.106 + left: calc(@tabs_scrollarrow_width@ + @newtab_button_width@);
1.107 +}
1.108 +
1.109 +.tabs-scrollbox > .scrollbutton-up:not([disabled]):not([collapsed])::after {
1.110 + content: "";
1.111 + visibility: visible;
1.112 + display: block;
1.113 + background-color: rgb(90, 91, 95);
1.114 + position: absolute;
1.115 + top: 0;
1.116 + left: calc(@tabs_scrollarrow_width@ + @metro_spacing_normal@); /* .scrollbutton-up width + #tabs-container left padding */
1.117 + width: 1px;
1.118 + height: @tabs_height@;
1.119 +}
1.120 +
1.121 +.tabs-scrollbox > .scrollbutton-down:not([disabled]):not([collapsed])::before {
1.122 + content: "";
1.123 + visibility: visible;
1.124 + display: block;
1.125 + background-color: rgb(90, 91, 95);
1.126 + position: absolute;
1.127 + top: 0;
1.128 + right: calc(@tabs_scrollarrow_width@ + @newtab_button_width@); /* .scrollbutton-down width + #newtab-button width */
1.129 + width: 1px;
1.130 + height: @tabs_height@;
1.131 +}
1.132 +
1.133 +/* Hack for bug 965550 */
1.134 +.tabs-scrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1.135 + -moz-padding-start: calc(2 * @tabs_scrollarrow_width@);
1.136 + -moz-margin-start: calc(-2 * @tabs_scrollarrow_width@);
1.137 +}
1.138 +
1.139 +#tabs-container[viewstate="snapped"] {
1.140 + visibility: hidden;
1.141 +}
1.142 +
1.143 +@-moz-keyframes open-documenttab {
1.144 + 0% {
1.145 + opacity: 0;
1.146 + transform: scale(0, 0);
1.147 + }
1.148 +
1.149 + 100% {
1.150 + opacity: 1;
1.151 + transform: scale(1, 1);
1.152 + }
1.153 +}
1.154 +
1.155 +@-moz-keyframes close-documenttab {
1.156 + 0% {
1.157 + opacity: 1;
1.158 + transform: scale(1, 1);
1.159 + }
1.160 +
1.161 + 100% {
1.162 + opacity: 0;
1.163 + transform: scale(0, 0);
1.164 + }
1.165 +}
1.166 +
1.167 +.documenttab-container {
1.168 + animation: open-documenttab 0.4s ease-out;
1.169 +}
1.170 +
1.171 +documenttab[closing] > .documenttab-container {
1.172 + animation: close-documenttab 0.4s ease-out;
1.173 + animation-fill-mode: forwards;
1.174 +}
1.175 +
1.176 +.documenttab-favicon {
1.177 + visibility: collapse;
1.178 +}
1.179 +
1.180 +.documenttab-thumbnail {
1.181 + margin: @metro_spacing_normal@ @metro_spacing_snormal@;
1.182 + background: white none center top no-repeat;
1.183 + background-size: cover;
1.184 + min-width: @thumbnail_width@;
1.185 + width: @thumbnail_width@;
1.186 + height: @thumbnail_height@;
1.187 +}
1.188 +#tray:not([expanded]) .documenttab-thumbnail {
1.189 + background-image: none!important;
1.190 +}
1.191 +
1.192 +/* TODO: Decide how and where to display private tabs.
1.193 + * For now, display them in the main tab strip but hide the thumbnail. */
1.194 +documenttab[private] .documenttab-thumbnail {
1.195 + background-color: purple;
1.196 +}
1.197 +
1.198 +.documenttab-title {
1.199 + margin: @metro_spacing_normal@ @metro_spacing_snormal@;
1.200 + margin-top: 0;
1.201 + font-size: @metro_font_normal@;
1.202 + width: @thumbnail_width@;
1.203 + padding: 4px @metro_spacing_snormal@ 8px;
1.204 +
1.205 + background: #000;
1.206 + opacity: 0.95;
1.207 + color: #fff;
1.208 + box-shadow: 0 0 @metro_spacing_snormal@ rgba(0, 0, 0, 0.25);
1.209 +}
1.210 +
1.211 +.documenttab-crop {
1.212 + background: transparent url("chrome://browser/skin/images/tab-crop.png") 50% 50% no-repeat;
1.213 +}
1.214 +
1.215 +.documenttab-selection {
1.216 + background: transparent -moz-image-rect(url("chrome://browser/skin/images/tab-overlay.png"), 0%, 100%, 50%, 0%) 50% 50% no-repeat;
1.217 +}
1.218 +
1.219 +documenttab[selected] .documenttab-selection {
1.220 + background: transparent -moz-image-rect(url("chrome://browser/skin/images/tab-overlay.png"), 50%, 100%, 100%, 0%) 50% 50% no-repeat;
1.221 +}
1.222 +
1.223 +.documenttab-crop:-moz-locale-dir(rtl),
1.224 +.documenttab-selection:-moz-locale-dir(rtl),
1.225 +documenttab[selected] .documenttab-selection:-moz-locale-dir(rtl) {
1.226 + transform: scaleX(-1);
1.227 +}
1.228 +
1.229 +.documenttab-close {
1.230 + background: none !important;
1.231 + padding: @metro_spacing_small@ !important;
1.232 + margin-top: @metro_spacing_snormal@;
1.233 + -moz-margin-end: @metro_spacing_xsmall@;
1.234 + border-color: transparent !important;
1.235 + list-style-image: url("chrome://browser/skin/images/closetab-default.png");
1.236 +}
1.237 +
1.238 +.documenttab-close > .button-box > .button-text {
1.239 + display: none;
1.240 +}
1.241 +
1.242 +#tabs-controls {
1.243 + -moz-box-align: start;
1.244 + -moz-box-orient: vertical;
1.245 +}
1.246 +
1.247 +#newtab-button {
1.248 + list-style-image: url(chrome://browser/skin/images/newtab-default.png);
1.249 +
1.250 + /* Add some extra padding for a larger target */
1.251 + padding: 18px 20px 30px 20px;
1.252 + width: @newtab_button_width@;
1.253 +}
1.254 +
1.255 +/* Start UI ----------------------------------------------------------------- */
1.256 +
1.257 +#urlbar-autocomplete[viewstate="snapped"],
1.258 +#urlbar-autocomplete[viewstate="portrait"]{
1.259 + -moz-box-orient: vertical;
1.260 +}
1.261 +
1.262 +#autocomplete-overlay {
1.263 + display: none;
1.264 + background-color: black;
1.265 + opacity: .3;
1.266 + position: fixed;
1.267 + top: 0;
1.268 + left: 0;
1.269 + right: 0;
1.270 + bottom: 0;
1.271 +}
1.272 +
1.273 +#stack[autocomplete] > #page > #content-viewport > #autocomplete-overlay {
1.274 + display: -moz-box;
1.275 +}
1.276 +
1.277 +/* Browser Content Areas ==================================================== */
1.278 +
1.279 +/* a 'margin-top' is applied dynamically in ContentAreaObserver */
1.280 +#browsers {
1.281 + background: white;
1.282 + transition-property: margin-top;
1.283 + transition-duration: .3s;
1.284 + transition-timing-function: ease-in-out;
1.285 +}
1.286 +#browsers browser {
1.287 + /* unset padding-bottom immediately */
1.288 + transition-duration: 0s;
1.289 + transition-delay: 0s;
1.290 + transition-property: padding-bottom;
1.291 +}
1.292 +/* Selection overlay and monocles */
1.293 +#page,
1.294 +.selection-overlay {
1.295 + -moz-stack-sizing: ignore;
1.296 +}
1.297 +
1.298 +.selection-overlay {
1.299 + pointer-events: none;
1.300 +}
1.301 +
1.302 +.selection-overlay:-moz-focusring {
1.303 + outline: 0 !important;
1.304 +}
1.305 +
1.306 +.selection-overlay-hidden {
1.307 + display: none;
1.308 +}
1.309 +
1.310 +.selectionhandle {
1.311 + background-image: url("chrome://browser/skin/images/selection-monocle.png");
1.312 + background-repeat: no-repeat;
1.313 + background-size: 18px 18px;
1.314 + padding: 0px;
1.315 + margin-top: -19px;
1.316 + margin-left: -9px;
1.317 + pointer-events: auto;
1.318 +}
1.319 +
1.320 +@media (min-resolution: @min_res_140pc@) {
1.321 + /* Load 140% image when scaled by 140% */
1.322 + .selectionhandle {
1.323 + background-image: url("chrome://browser/skin/images/selection-monocle@1.4x.png");
1.324 + }
1.325 +}
1.326 +
1.327 +@media (min-resolution: @min_res_180pc@) {
1.328 + /* Load 180% image when scaled by 180% */
1.329 + .selectionhandle {
1.330 + background-image: url("chrome://browser/skin/images/selection-monocle@1.8x.png");
1.331 + }
1.332 +}
1.333 +
1.334 +/* content scrollbars */
1.335 +.scroller {
1.336 + opacity: 0;
1.337 + background-color: rgba(0, 0, 0, 0.4) !important;
1.338 + -moz-border-top-colors: none !important;
1.339 + -moz-border-bottom-colors: none !important;
1.340 + -moz-border-right-colors: none !important;
1.341 + -moz-border-left-colors: none !important;
1.342 + border-radius: @border_radius_tiny@;
1.343 + border: @border_width_tiny@ solid rgba(255, 255, 255, 0.4) !important;
1.344 +}
1.345 +
1.346 +.scroller[panning] {
1.347 + opacity: 1;
1.348 +}
1.349 +
1.350 +.scroller[orient="vertical"] {
1.351 + min-width: @scroller_thickness@;
1.352 + width: @scroller_thickness@;
1.353 + min-height: @scroller_minimum@;
1.354 +}
1.355 +
1.356 +.scroller[orient="horizontal"] {
1.357 + min-height: @scroller_thickness@;
1.358 + height: @scroller_thickness@;
1.359 + min-width: @scroller_minimum@;
1.360 +}
1.361 +
1.362 +/* overlay buttons */
1.363 +
1.364 +.overlay-button {
1.365 + position: fixed;
1.366 + top: 50%;
1.367 + margin-top: -65px;
1.368 + width: 118px;
1.369 + height: 118px;
1.370 + background-color: hsla(210,30%,10%,.2);
1.371 + background-size: 60px;
1.372 + background-repeat: no-repeat;
1.373 + background-origin: padding-box;
1.374 + background-clip: padding-box;
1.375 + border: 6px solid hsla(0,0%,100%,.7);
1.376 + border-radius: 50%;
1.377 + box-shadow: 0 0 0 1px hsla(0,0%,0%,.04),
1.378 + 0 0 9px 0 hsla(0,0%,0%,.1);
1.379 + transition-property: left, right, transform, background-position,
1.380 + background-color, background-size, border-color,
1.381 + visibility, box-shadow, top;
1.382 + transition-duration: 550ms;
1.383 + transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
1.384 +}
1.385 +
1.386 +#overlay-back {
1.387 + background-image: url(chrome://browser/skin/images/overlay-back.png);
1.388 +}
1.389 +
1.390 +#overlay-plus {
1.391 + background-image: url(chrome://browser/skin/images/overlay-plus.png);
1.392 +}
1.393 +
1.394 +@media (min-resolution: @min_res_140pc@) {
1.395 + #overlay-back {
1.396 + background-image: url(chrome://browser/skin/images/overlay-back@1.4x.png);
1.397 + }
1.398 +
1.399 + #overlay-plus {
1.400 + background-image: url(chrome://browser/skin/images/overlay-plus@1.4x.png);
1.401 + }
1.402 +}
1.403 +
1.404 +@media (min-resolution: @min_res_180pc@) {
1.405 + #overlay-back {
1.406 + background-image: url(chrome://browser/skin/images/overlay-back@1.8x.png);
1.407 + }
1.408 +
1.409 + #overlay-plus {
1.410 + background-image: url(chrome://browser/skin/images/overlay-plus@1.8x.png);
1.411 + }
1.412 +}
1.413 +
1.414 +#overlay-back:-moz-locale-dir(ltr),
1.415 +#overlay-plus:-moz-locale-dir(rtl) {
1.416 + left: -70px;
1.417 + background-position: right 6px center;
1.418 +}
1.419 +
1.420 +#overlay-plus:-moz-locale-dir(ltr) {
1.421 + right: -70px;
1.422 + background-position: left 6px center;
1.423 +}
1.424 +
1.425 +#stack[viewstate="snapped"] > .overlay-button,
1.426 +#stack[keyboardVisible] > .overlay-button,
1.427 +#stack[autocomplete] > .overlay-button,
1.428 +#stack[fullscreen] > .overlay-button,
1.429 +#appbar[visible] ~ .overlay-button,
1.430 +.overlay-button[disabled] {
1.431 + box-shadow: none;
1.432 + visibility: collapse;
1.433 +}
1.434 +
1.435 +#stack[keyboardVisible] > #overlay-back:-moz-locale-dir(ltr),
1.436 +#stack[keyboardVisible] > #overlay-plus:-moz-locale-dir(rtl),
1.437 +#stack[autocomplete] > #overlay-back:-moz-locale-dir(ltr),
1.438 +#stack[autocomplete] > #overlay-plus:-moz-locale-dir(rtl),
1.439 +#stack[fullscreen] > #overlay-back:-moz-locale-dir(ltr),
1.440 +#stack[fullscreen] > #overlay-plus:-moz-locale-dir(rtl),
1.441 +#appbar[visible] ~ #overlay-back:-moz-locale-dir(ltr),
1.442 +#appbar[visible] ~ #overlay-plus:-moz-locale-dir(rtl),
1.443 +#overlay-back[disabled]:-moz-locale-dir(ltr),
1.444 +#overlay-plus[disabled]:-moz-locale-dir(rtl) {
1.445 + transform: translateX(-60px);
1.446 +}
1.447 +
1.448 +#stack[keyboardVisible] > #overlay-plus:-moz-locale-dir(ltr),
1.449 +#stack[keyboardVisible] > #overlay-back:-moz-locale-dir(rtl),
1.450 +#stack[autocomplete] > #overlay-plus:-moz-locale-dir(ltr),
1.451 +#stack[autocomplete] > #overlay-back:-moz-locale-dir(rtl),
1.452 +#stack[fullscreen] > #overlay-plus:-moz-locale-dir(ltr),
1.453 +#stack[fullscreen] > #overlay-back:-moz-locale-dir(rtl),
1.454 +#appbar[visible] ~ #overlay-plus:-moz-locale-dir(ltr),
1.455 +#appbar[visible] ~ #overlay-back:-moz-locale-dir(rtl),
1.456 +#overlay-plus[disabled]:-moz-locale-dir(ltr),
1.457 +#overlay-back[disabled]:-moz-locale-dir(rtl) {
1.458 + transform: translateX(60px);
1.459 +}
1.460 +
1.461 +.overlay-button:hover {
1.462 + background-color: hsla(210,30%,10%,.4);
1.463 + background-size: 90px;
1.464 + border-color: hsla(0,0%,100%,.9);
1.465 +}
1.466 +
1.467 +#overlay-back:-moz-locale-dir(ltr):hover,
1.468 +#overlay-plus:-moz-locale-dir(rtl):hover {
1.469 + background-position: right 12px center;
1.470 + transform: translateX(40px) scale(1.2);
1.471 +}
1.472 +
1.473 +#overlay-plus:-moz-locale-dir(ltr):hover {
1.474 + background-position: left 12px center;
1.475 + transform: translateX(-40px) scale(1.2);
1.476 +}
1.477 +
1.478 +#overlay-back:-moz-locale-dir(rtl):hover {
1.479 + transform: translateX(-40px) scale(1.2) scaleX(-1);
1.480 +}
1.481 +
1.482 +#overlay-back:-moz-locale-dir(rtl) {
1.483 + transform: scaleX(-1);
1.484 + right: -70px;
1.485 + background-position: right 9px center;
1.486 +}
1.487 +
1.488 +#overlay-back[mousedrag],
1.489 +#overlay-plus[mousedrag] {
1.490 + transition-property: left, right, transform, background-position,
1.491 + background-color, background-size, border-color,
1.492 + visibility, box-shadow;
1.493 +}
1.494 +
1.495 +/* Navigation bar ========================================================== */
1.496 +
1.497 +/* Most appbars are hidden by default, but we want to keep #navbar visible so
1.498 + * we can show the progress bar at all times. Instead, we hide only the
1.499 + * toolbar portion of the navbar. */
1.500 +#navbar {
1.501 + visibility: visible;
1.502 +}
1.503 +#navbar:not([hiding]):not([visible]) > #toolbar-overlay {
1.504 + visibility: hidden;
1.505 +}
1.506 +
1.507 +#content-viewport[navbar="visible"] .active-tab-notificationbox:not([count="0"]):not([notificationsVisible="false"]) {
1.508 + padding-bottom: @toolbar_height@;
1.509 +}
1.510 +
1.511 +
1.512 +/* Progress meter ---------------------------------------------------------- */
1.513 +
1.514 +#progress-container {
1.515 + display: block;
1.516 + position: absolute;
1.517 + top: -@progress_height@;
1.518 + height: @progress_height@;
1.519 + width: 100%;
1.520 + background-color: hsla(210,5%,80%,1);
1.521 + box-shadow: 0 1px 0 hsla(210,5%,50%,.1) inset;
1.522 + -moz-user-focus: ignore;
1.523 +}
1.524 +#progress-container[startpage] {
1.525 + visibility: collapse;
1.526 +}
1.527 +
1.528 +#progress-control {
1.529 + display: block;
1.530 + height: @progress_height@;
1.531 + background-image: -moz-linear-gradient(left, hsla(200,100%,83%,.5),
1.532 + hsla(200,100%,83%,0)),
1.533 + -moz-linear-gradient(top, #1ab2ff, #0091ff);
1.534 + border-right: 1px solid #0082e5;
1.535 + transition: width .3s ease-in;
1.536 + -moz-user-focus: ignore;
1.537 +}
1.538 +
1.539 +#progress-control:-moz-dir(rtl) {
1.540 + transform: scaleX(-1);
1.541 +}
1.542 +
1.543 +#progress-control[fade] {
1.544 + opacity: 0;
1.545 + transition: width .3s ease-in, .5s opacity ease-in;
1.546 +}
1.547 +
1.548 +/* Toolbar ----------------------------------------------------------------- */
1.549 +
1.550 +#toolbar-overlay {
1.551 + background-color: @panel_light_color@;
1.552 +}
1.553 +
1.554 +#urlbar-autocomplete {
1.555 + padding-top: 0;
1.556 +}
1.557 +
1.558 +#toolbar {
1.559 + padding: 0 @toolbar_horizontal_padding@;
1.560 +}
1.561 +
1.562 +#toolbar[viewstate="snapped"] {
1.563 + padding: 0 @toolbar_snapped_horizontal_padding@;
1.564 +}
1.565 +
1.566 +#toolbar[viewstate="snapped"] > toolbarbutton {
1.567 + margin: 0 @toolbar_snapped_horizontal_spacing@;
1.568 +}
1.569 +
1.570 +/* Combined back/forward buttons */
1.571 +
1.572 +#back-button {
1.573 + list-style-image: url(chrome://browser/skin/images/navbar-back.png);
1.574 + position: relative;
1.575 + z-index: 1;
1.576 + transition: opacity @forward_transition_length@ ease-out;
1.577 +}
1.578 +
1.579 +#back-button:-moz-locale-dir(rtl),
1.580 +#forward-button:-moz-locale-dir(rtl) {
1.581 + transform: scaleX(-1);
1.582 +}
1.583 +
1.584 +#back-button[disabled] {
1.585 + visibility: visible;
1.586 + opacity: 0.5;
1.587 +}
1.588 +
1.589 +#forward-button {
1.590 + list-style-image: url(chrome://browser/skin/images/navbar-forward.png);
1.591 + transition: margin @forward_transition_length@ ease-out,
1.592 + visibility @forward_transition_length@ ease-out,
1.593 + opacity @forward_transition_length@ ease-out;
1.594 +}
1.595 +
1.596 +#forward-button[disabled] {
1.597 + -moz-margin-start: -@forward_spacing@ !important;
1.598 + visibility: hidden;
1.599 + opacity: 0;
1.600 + pointer-events: none;
1.601 +}
1.602 +
1.603 +@media (min-resolution: @min_res_140pc@) {
1.604 + #back-button {
1.605 + list-style-image: url(chrome://browser/skin/images/navbar-back@1.4x.png);
1.606 + }
1.607 +
1.608 + #forward-button {
1.609 + list-style-image: url(chrome://browser/skin/images/navbar-forward@1.4x.png);
1.610 + }
1.611 +}
1.612 +
1.613 +@media (min-resolution: @min_res_180pc@) {
1.614 + #back-button {
1.615 + list-style-image: url(chrome://browser/skin/images/navbar-back@1.8x.png);
1.616 + }
1.617 +
1.618 + #forward-button {
1.619 + list-style-image: url(chrome://browser/skin/images/navbar-forward@1.8x.png);
1.620 + }
1.621 +}
1.622 +
1.623 +/* URL bar */
1.624 +#urlbar {
1.625 + border: @metro_border_thick@ solid @urlbar_border_color@;
1.626 + margin: 0 @toolbar_horizontal_spacing@;
1.627 + padding: 0;
1.628 + background-color: @field_background_color@;
1.629 + overflow: hidden;
1.630 +}
1.631 +
1.632 +#urlbar[editing] {
1.633 + border-color: @metro_orange@;
1.634 +}
1.635 +
1.636 +/* Identity widget */
1.637 +#identity-icon {
1.638 + margin: 0;
1.639 + padding: 0 @metro_spacing_snormal@;
1.640 + list-style-image: url("chrome://browser/skin/images/identity-icons-generic.png");
1.641 +}
1.642 +
1.643 +#identity-box.verifiedDomain > #identity-icon {
1.644 + list-style-image: url("chrome://browser/skin/images/identity-icons-https.png");
1.645 +}
1.646 +
1.647 +#identity-box.verifiedIdentity > #identity-icon {
1.648 + list-style-image: url("chrome://browser/skin/images/identity-icons-https-ev.png");
1.649 +}
1.650 +
1.651 +#toolbar[startpage] > #urlbar:not([autocomplete]) > #identity-box > #identity-icon {
1.652 + list-style-image: url("chrome://browser/skin/images/icons-identity-firefox.png");
1.653 +}
1.654 +
1.655 +#urlbar[autocomplete] > #identity-box > #identity-icon {
1.656 + list-style-image: url("chrome://browser/skin/images/icon-autocomplete-search.png");
1.657 +}
1.658 +
1.659 +/* Main URL textbox */
1.660 +#urlbar-edit {
1.661 + margin: 0 !important;
1.662 + min-height: @urlbar_edit_height@;
1.663 + -moz-appearance: none !important;
1.664 + border-radius: 0;
1.665 + border: 0 none !important;
1.666 + padding: 0 !important;
1.667 +}
1.668 +
1.669 +#urlbar-edit > hbox > .textbox-input-box > .textbox-input:invalid {
1.670 + /* Hide error glow around the address bar that shows by default
1.671 + * when URLs are made invalid by trmming. */
1.672 + box-shadow: none !important;
1.673 +}
1.674 +
1.675 +/* Combined stop-reload button */
1.676 +.urlbar-button {
1.677 + margin: 0;
1.678 + -moz-image-region: rect(0px, 30px, 30px, 0px);
1.679 +}
1.680 +
1.681 +.urlbar-button:hover:not(:active) {
1.682 + -moz-image-region: rect(0px, 60px, 30px, 30px);
1.683 + background-color: #dedfdf;
1.684 +}
1.685 +
1.686 +.urlbar-button:active {
1.687 + -moz-image-region: rect(0px, 90px, 30px, 60px);
1.688 + background-color: #6d7073;
1.689 +}
1.690 +
1.691 +.urlbar-button > .toolbarbutton-icon {
1.692 + width: 30px;
1.693 + height: 30px;
1.694 +}
1.695 +
1.696 +#go-button {
1.697 + list-style-image: url(chrome://browser/skin/images/urlbar-go.png)
1.698 +}
1.699 +
1.700 +#reload-button {
1.701 + list-style-image: url(chrome://browser/skin/images/urlbar-reload.png);
1.702 +}
1.703 +
1.704 +#stop-button {
1.705 + list-style-image: url(chrome://browser/skin/images/urlbar-stop.png);
1.706 +}
1.707 +
1.708 +@media (min-resolution: @min_res_140pc@) {
1.709 + .urlbar-button {
1.710 + -moz-image-region: rect(0px, 42px, 42px, 0px);
1.711 + }
1.712 +
1.713 + .urlbar-button:hover:not(:active) {
1.714 + -moz-image-region: rect(0px, 84px, 42px, 42px);
1.715 + }
1.716 +
1.717 + .urlbar-button:active {
1.718 + -moz-image-region: rect(0px, 126px, 42px, 84px);
1.719 + }
1.720 +
1.721 + #go-button {
1.722 + list-style-image: url(chrome://browser/skin/images/urlbar-go@1.4x.png)
1.723 + }
1.724 +
1.725 + #reload-button {
1.726 + list-style-image: url(chrome://browser/skin/images/urlbar-reload@1.4x.png);
1.727 + }
1.728 +
1.729 + #stop-button {
1.730 + list-style-image: url(chrome://browser/skin/images/urlbar-stop@1.4x.png);
1.731 + }
1.732 +
1.733 + #toolbar[startpage] > #urlbar:not([autocomplete]) > #identity-box > #identity-icon {
1.734 + list-style-image: url("chrome://browser/skin/images/icons-identity-firefox@1.4x.png");
1.735 + }
1.736 +
1.737 + #urlbar[autocomplete] > #identity-box > #identity-icon {
1.738 + list-style-image: url("chrome://browser/skin/images/icon-autocomplete-search@1.4x.png");
1.739 + }
1.740 +}
1.741 +
1.742 +@media (min-resolution: @min_res_180pc@) {
1.743 + .urlbar-button {
1.744 + -moz-image-region: rect(0px, 54px, 54px, 0px);
1.745 + }
1.746 +
1.747 + .urlbar-button:hover:not(:active) {
1.748 + -moz-image-region: rect(0px, 108px, 54px, 54px);
1.749 + }
1.750 +
1.751 + .urlbar-button:active {
1.752 + -moz-image-region: rect(0px, 162px, 54px, 108px);
1.753 + }
1.754 +
1.755 + #go-button {
1.756 + list-style-image: url(chrome://browser/skin/images/urlbar-go@1.8x.png)
1.757 + }
1.758 +
1.759 + #reload-button {
1.760 + list-style-image: url(chrome://browser/skin/images/urlbar-reload@1.8x.png);
1.761 + }
1.762 +
1.763 + #stop-button {
1.764 + list-style-image: url(chrome://browser/skin/images/urlbar-stop@1.8x.png);
1.765 + }
1.766 +
1.767 + #toolbar[startpage] > #urlbar:not([autocomplete]) > #identity-box > #identity-icon {
1.768 + list-style-image: url("chrome://browser/skin/images/icons-identity-firefox@1.8x.png");
1.769 + }
1.770 +
1.771 + #urlbar[autocomplete] > #identity-box > #identity-icon {
1.772 + list-style-image: url("chrome://browser/skin/images/icon-autocomplete-search@1.8x.png");
1.773 + }
1.774 +}
1.775 +
1.776 +/* navbar edit button: one button out of three - when editing: go, when !editing,
1.777 + loading: stop, when !editing, !loading: reload */
1.778 +
1.779 +#go-button, #reload-button, #stop-button {
1.780 + visibility: collapse;
1.781 +}
1.782 +
1.783 +#urlbar[editing] > #go-button,
1.784 +#urlbar:not([editing])[loading] > #stop-button,
1.785 +#urlbar:not([editing]):not([loading]) > #reload-button {
1.786 + visibility: visible;
1.787 +}
1.788 +
1.789 +/* Contextual toolbar controls */
1.790 +
1.791 +#toolbar-context-autocomplete,
1.792 +.hide-on-start,
1.793 +#toolbar-context-page {
1.794 + transition-property: opacity, visibility;
1.795 + transition-duration: @forward_transition_length@;
1.796 + transition-timing-function: @metro_animation_easing@;
1.797 +}
1.798 +
1.799 +#toolbar-contextual:not([autocomplete]) #toolbar-context-autocomplete,
1.800 +#toolbar-contextual[startpage] .hide-on-start,
1.801 +#toolbar-contextual[autocomplete] #toolbar-context-page {
1.802 + opacity: 0;
1.803 + visibility: hidden;
1.804 + pointer-events: none;
1.805 +}
1.806 +
1.807 +#toolbar[viewstate="snapped"] #toolbar-contextual {
1.808 + visibility: collapse;
1.809 +}
1.810 +
1.811 +#download-progress:not([progress]) {
1.812 + visibility: collapse;
1.813 +}
1.814 +
1.815 +#download-progress {
1.816 + list-style-image: url(chrome://browser/skin/images/navbar-download.png);
1.817 +}
1.818 +
1.819 +#download-progress[progress="100"] {
1.820 + list-style-image: url(chrome://browser/skin/images/navbar-download-finished.png);
1.821 +}
1.822 +
1.823 +#pin-button {
1.824 + list-style-image: url(chrome://browser/skin/images/navbar-pin.png);
1.825 +}
1.826 +
1.827 +#star-button {
1.828 + list-style-image: url(chrome://browser/skin/images/navbar-star.png);
1.829 +}
1.830 +
1.831 +#menu-button {
1.832 + list-style-image: url(chrome://browser/skin/images/navbar-menu.png);
1.833 +}
1.834 +
1.835 +#close-button {
1.836 + list-style-image: url(chrome://browser/skin/images/navbar-close.png);
1.837 +}
1.838 +
1.839 +@media (min-resolution: @min_res_140pc@) {
1.840 + #download-progress {
1.841 + list-style-image: url(chrome://browser/skin/images/navbar-download@1.4x.png);
1.842 + }
1.843 +
1.844 + #download-progress[progress="100"] {
1.845 + list-style-image: url(chrome://browser/skin/images/navbar-download-finished@1.4x.png);
1.846 + }
1.847 +
1.848 + #pin-button {
1.849 + list-style-image: url(chrome://browser/skin/images/navbar-pin@1.4x.png);
1.850 + }
1.851 +
1.852 + #star-button {
1.853 + list-style-image: url(chrome://browser/skin/images/navbar-star@1.4x.png);
1.854 + }
1.855 +
1.856 + #menu-button {
1.857 + list-style-image: url(chrome://browser/skin/images/navbar-menu@1.4x.png);
1.858 + }
1.859 +
1.860 + #close-button {
1.861 + list-style-image: url(chrome://browser/skin/images/navbar-close@1.4x.png);
1.862 + }
1.863 +}
1.864 +
1.865 +@media (min-resolution: @min_res_180pc@) {
1.866 + #download-progress {
1.867 + list-style-image: url(chrome://browser/skin/images/navbar-download@1.8x.png);
1.868 + }
1.869 +
1.870 + #download-progress[progress="100"] {
1.871 + list-style-image: url(chrome://browser/skin/images/navbar-download-finished@1.8x.png);
1.872 + }
1.873 +
1.874 + #pin-button {
1.875 + list-style-image: url(chrome://browser/skin/images/navbar-pin@1.8x.png);
1.876 + }
1.877 +
1.878 + #star-button {
1.879 + list-style-image: url(chrome://browser/skin/images/navbar-star@1.8x.png);
1.880 + }
1.881 +
1.882 + #menu-button {
1.883 + list-style-image: url(chrome://browser/skin/images/navbar-menu@1.8x.png);
1.884 + }
1.885 +
1.886 + #close-button {
1.887 + list-style-image: url(chrome://browser/skin/images/navbar-close@1.8x.png);
1.888 + }
1.889 +}
1.890 +
1.891 +/* Panel UI ================================================================ */
1.892 +
1.893 +#panel-container {
1.894 + padding: 60px 40px;
1.895 +}
1.896 +
1.897 +#panel-container[viewstate="snapped"] .canSnapTiles .richgrid-item-content {
1.898 + -moz-box-orient: horizontal;
1.899 +}
1.900 +
1.901 +#panel-close-button {
1.902 + -moz-margin-end: 40px;
1.903 + list-style-image: url(chrome://browser/skin/images/navbar-back.png);
1.904 + -moz-box-pack: center;
1.905 +}
1.906 +
1.907 +#panel-close-button:-moz-locale-dir(rtl) {
1.908 + transform: scaleX(-1);
1.909 +}
1.910 +
1.911 +@media (min-resolution: @min_res_140pc@) {
1.912 + #panel-close-button {
1.913 + list-style-image: url(chrome://browser/skin/images/navbar-back@1.4x.png);
1.914 + }
1.915 +}
1.916 +
1.917 +@media (min-resolution: @min_res_180pc@) {
1.918 + #panel-close-button {
1.919 + list-style-image: url(chrome://browser/skin/images/navbar-back@1.8x.png);
1.920 + }
1.921 +}
1.922 +
1.923 +#panel-items {
1.924 + padding-top: 20px;
1.925 + -moz-padding-start: 88px;
1.926 +}
1.927 +
1.928 +#panel-container[viewstate="snapped"] #panel-items {
1.929 + padding-left: 0px;
1.930 +}
1.931 +
1.932 +/* Console Section - Panel UI ---------------------------------------------- */
1.933 +
1.934 +#console-filter-warnings,
1.935 +#console-filter-messages {
1.936 + visibility: visible;
1.937 +}
1.938 +
1.939 +@media (max-width: 499px) {
1.940 + #console-filter-warnings,
1.941 + #console-filter-messages {
1.942 + visibility: collapse;
1.943 + }
1.944 +}
1.945 +
1.946 +.console-error-msg,
1.947 +.console-msg-text {
1.948 + white-space: pre-wrap;
1.949 +}
1.950 +
1.951 +/* Find bar ================================================================ */
1.952 +
1.953 +#findbar {
1.954 + background-color: @metro_orange@;
1.955 + padding: 0;
1.956 +}
1.957 +
1.958 +#findbar > toolbar {
1.959 + min-height: @findbar_height@ !important;
1.960 +}
1.961 +
1.962 +#findbar-textbox {
1.963 + border: none !important;
1.964 + width: 20em;
1.965 +}
1.966 +
1.967 +/* Override the default box ordering and make the find textbox appear to the
1.968 + right of the icon */
1.969 +#findbar-textbox input {
1.970 + -moz-box-ordinal-group: 2
1.971 +}
1.972 +
1.973 +#findbar-textbox[status="1"] { /* Ci.nsITypeAheadFind.FIND_NOTFOUND */
1.974 + background: rgb(255,200,200);
1.975 +}
1.976 +
1.977 +#findbar-textbox:hover:active {
1.978 + background: #8db8d8;
1.979 +}
1.980 +
1.981 +.textbox-search-icon {
1.982 + list-style-image: url("chrome://browser/skin/images/search-glass-30.png");
1.983 + -moz-image-region: auto;
1.984 +}
1.985 +
1.986 +#findbar-previous-button {
1.987 + -moz-image-region: rect(0px, 400px, 40px, 360px);
1.988 +}
1.989 +
1.990 +#findbar-previous-button:hover:not(:active) {
1.991 + -moz-image-region: rect(40px, 400px, 80px, 360px);
1.992 +}
1.993 +
1.994 +#findbar-previous-button:active {
1.995 + -moz-image-region: rect(80px, 400px, 120px, 360px);
1.996 +}
1.997 +
1.998 +#findbar-next-button {
1.999 + -moz-image-region: rect(0px, 440px, 40px, 400px);
1.1000 +}
1.1001 +
1.1002 +#findbar-next-button:hover:not(:active) {
1.1003 + -moz-image-region: rect(40px, 440px, 80px, 400px);
1.1004 +}
1.1005 +
1.1006 +#findbar-next-button:active {
1.1007 + -moz-image-region: rect(80px, 440px, 120px, 400px);
1.1008 +}
1.1009 +
1.1010 +#findbar-close-button {
1.1011 + -moz-image-region: rect(0px, 480px, 40px, 440px);
1.1012 +}
1.1013 +
1.1014 +#findbar-close-button:hover:not(:active) {
1.1015 + -moz-image-region: rect(40px, 480px, 80px, 440px);
1.1016 +}
1.1017 +
1.1018 +#findbar-close-button:active {
1.1019 + -moz-image-region: rect(80px, 480px, 120px, 440px);
1.1020 +}
1.1021 +
1.1022 +/* Contextual appbar ======================================================= */
1.1023 +
1.1024 +#contextualactions-tray {
1.1025 + background-color: @metro_orange@;
1.1026 +}
1.1027 +
1.1028 +#contextualactions-tray > toolbarbutton {
1.1029 + opacity: 1;
1.1030 +}
1.1031 +#contextualactions-tray > toolbarbutton[fade] {
1.1032 + opacity: 0;
1.1033 +}
1.1034 +#contextualactions-tray > toolbarbutton:not([immediate]) {
1.1035 + transition-property: opacity;
1.1036 + transition-duration: .3s;
1.1037 + transition-timing-function: ease-in;
1.1038 + transition-delay: 80ms;
1.1039 +}
1.1040 +#contextualactions-tray > toolbarbutton > .toolbarbutton-text {
1.1041 + color: white;
1.1042 +}
1.1043 +
1.1044 +#pin-selected-button {
1.1045 + list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin.png);
1.1046 +}
1.1047 +
1.1048 +#unpin-selected-button {
1.1049 + list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin.png);
1.1050 +}
1.1051 +
1.1052 +#hide-selected-button {
1.1053 + list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide.png);
1.1054 +}
1.1055 +
1.1056 +#delete-selected-button {
1.1057 + list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete.png);
1.1058 +}
1.1059 +
1.1060 +#clear-selected-button {
1.1061 + list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear.png);
1.1062 +}
1.1063 +
1.1064 +#restore-selected-button {
1.1065 + list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore.png);
1.1066 +}
1.1067 +
1.1068 +@media (min-resolution: @min_res_140pc@) {
1.1069 + #pin-selected-button {
1.1070 + list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin@1.4x.png);
1.1071 + }
1.1072 +
1.1073 + #unpin-selected-button {
1.1074 + list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin@1.4x.png);
1.1075 + }
1.1076 +
1.1077 + #hide-selected-button {
1.1078 + list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide@1.4x.png);
1.1079 + }
1.1080 +
1.1081 + #delete-selected-button {
1.1082 + list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete@1.4x.png);
1.1083 + }
1.1084 +
1.1085 + #clear-selected-button {
1.1086 + list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear@1.4x.png);
1.1087 + }
1.1088 +
1.1089 + #restore-selected-button {
1.1090 + list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore@1.4x.png);
1.1091 + }
1.1092 +}
1.1093 +
1.1094 +@media (min-resolution: @min_res_180pc@) {
1.1095 + #pin-selected-button {
1.1096 + list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin@1.8x.png);
1.1097 + }
1.1098 +
1.1099 + #unpin-selected-button {
1.1100 + list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin@1.8x.png);
1.1101 + }
1.1102 +
1.1103 + #hide-selected-button {
1.1104 + list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide@1.8x.png);
1.1105 + }
1.1106 +
1.1107 + #delete-selected-button {
1.1108 + list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete@1.8x.png);
1.1109 + }
1.1110 +
1.1111 + #clear-selected-button {
1.1112 + list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear@1.8x.png);
1.1113 + }
1.1114 +
1.1115 + #restore-selected-button {
1.1116 + list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore@1.8x.png);
1.1117 + }
1.1118 +}
1.1119 +
1.1120 +/* Download notifications ======================================================= */
1.1121 +
1.1122 +.download-filename-text {
1.1123 + font-weight: bold;
1.1124 +}
1.1125 +.download-host-text {
1.1126 + font-weight: bold;
1.1127 +}
1.1128 +
1.1129 +/* Autoscroll popup ======================================================== */
1.1130 +
1.1131 +.autoscroller {
1.1132 + height: 28px;
1.1133 + width: 28px;
1.1134 + border: none;
1.1135 + margin: -14px;
1.1136 + padding: 0;
1.1137 + background-image: url("chrome://browser/skin/images/autoscroll.png");
1.1138 + background-color: transparent;
1.1139 + position: fixed;
1.1140 + visibility: hidden;
1.1141 + background-repeat: no-repeat;
1.1142 + background-origin: padding-box;
1.1143 + background-clip: padding-box;
1.1144 + background-position: right top;
1.1145 + -moz-appearance: none;
1.1146 +}
1.1147 +
1.1148 +.autoscroller[scrolldir="NS"] {
1.1149 + background-position: right center;
1.1150 +}
1.1151 +
1.1152 +.autoscroller[scrolldir="EW"] {
1.1153 + background-position: right bottom;
1.1154 +}
1.1155 +
1.1156 +/* Flyouts ================================================================= */
1.1157 +
1.1158 +/* don't add a margin to the very top settings entry in flyouts */
1.1159 +flyoutpanel > settings:first-child {
1.1160 + margin-top: 0px;
1.1161 +}
1.1162 +
1.1163 +/* Sync flyout pane -------------------------------------------------------- */
1.1164 +
1.1165 +#sync-flyoutpanel {
1.1166 + font-size: @metro_font_normal@;
1.1167 + font-weight: 400;
1.1168 +}
1.1169 +
1.1170 +#sync-flyoutpanel button {
1.1171 + font-weight: 700;
1.1172 +}
1.1173 +
1.1174 +#sync-flyoutpanel .syncHeader {
1.1175 + font-weight: 600;
1.1176 +}
1.1177 +
1.1178 +#sync-flyoutpanel .syncSecondaryText {
1.1179 + font-weight: 100;
1.1180 + font-size: @metro_font_snormal@;
1.1181 +}
1.1182 +
1.1183 +#sync-flyoutpanel .syncInstructionText {
1.1184 + font-style: italic;
1.1185 +}
1.1186 +
1.1187 +.syncThrobber .progressBall {
1.1188 + margin: 2px;
1.1189 + width: 22px;
1.1190 + height: 22px;
1.1191 + }
1.1192 +
1.1193 +.syncThrobber .progressBallInner {
1.1194 + width: 5px;
1.1195 + height: 5px;
1.1196 + border-radius: 3px;
1.1197 +}
1.1198 +
1.1199 +#sync-flyoutpanel .syncErrorText {
1.1200 + color: red;
1.1201 +}
1.1202 +
1.1203 +#sync-flyoutpanel textbox {
1.1204 + margin: @metro_spacing_small@;
1.1205 + padding: @metro_spacing_xsmall@ @metro_spacing_snormal@;
1.1206 + background: @field_background_color@;
1.1207 + border: @metro_border_thick@ solid @field_mid_foreground_color@ !important;
1.1208 + color: @field_foreground_color@;
1.1209 +}
1.1210 +
1.1211 +#sync-setup-throbber {
1.1212 + margin-top: 15px;
1.1213 + margin-left: 25px;
1.1214 +}
1.1215 +
1.1216 +#sync-connected-device {
1.1217 + width: 200px;
1.1218 +}
1.1219 +
1.1220 +#sync-manualsetup-failure {
1.1221 + width: 200px;
1.1222 +}
1.1223 +
1.1224 +#sync-flyoutpanel .syncJPAKECode {
1.1225 + margin: @metro_spacing_small@;
1.1226 + padding: @metro_spacing_xsmall@ @metro_spacing_snormal@;
1.1227 + background: @field_background_color@;
1.1228 + border: @metro_border_thick@ solid @field_mid_foreground_color@ !important;
1.1229 + color: @field_foreground_color@;
1.1230 + display: block !important;
1.1231 + font-size: @metro_font_large@ !important;
1.1232 + font-weight: 600;
1.1233 + letter-spacing: 0.4em;
1.1234 + text-align: center;
1.1235 + width: 175px;
1.1236 +}
1.1237 +
1.1238 +#sync-connected-device {
1.1239 + margin-bottom: 0px;
1.1240 + padding-bottom: 0px;
1.1241 +}
1.1242 +
1.1243 +#sync-connected-lastSynced {
1.1244 + margin-top: 0px;
1.1245 + padding-top: 0px;
1.1246 +}
1.1247 +
1.1248 +#sync-connected-throbber {
1.1249 + margin-top: 12px;
1.1250 + margin-left: 15px;
1.1251 +}
1.1252 +
1.1253 +/* About flyout pane ------------------------------------------------------- */
1.1254 +
1.1255 +/* Colors are defined in /browser/branding/<dir>/content/metro-about.css */
1.1256 +
1.1257 +#about-flyoutpanel {
1.1258 + background-image: url('chrome://branding/content/metro-about-footer.png');
1.1259 + background-repeat: no-repeat;
1.1260 + background-attachment: fixed;
1.1261 + background-position: right bottom;
1.1262 +}
1.1263 +
1.1264 +#about-flyoutpanel .text-link {
1.1265 + color: inherit;
1.1266 +}
1.1267 +
1.1268 +#about-flyoutpanel > .flyoutpanel-wrapper > .flyoutpanel-header,
1.1269 +#about-flyoutpanel > .flyoutpanel-wrapper > .flyoutpanel-contents {
1.1270 + background-color: inherit;
1.1271 + border: none;
1.1272 +}
1.1273 +
1.1274 +#about-policy-label {
1.1275 + padding: 1.5em @metro_spacing_large@;
1.1276 + margin: 1em -@metro_spacing_large@;
1.1277 +}
1.1278 +
1.1279 +#about-version-label {
1.1280 + margin-top: 11pt;
1.1281 +}
1.1282 +
1.1283 +#currentChannel {
1.1284 + margin: 0;
1.1285 + padding: 0;
1.1286 + font-weight: bold;
1.1287 +}
1.1288 +
1.1289 +/* Preferences flyout pane ------------------------------------------------- */
1.1290 +
1.1291 +/* Lay out each <setting> in a single row */
1.1292 +setting {
1.1293 + min-height: @touch_row@; /* row size */
1.1294 + -moz-box-align: center;
1.1295 + -moz-box-orient: horizontal;
1.1296 +}
1.1297 +
1.1298 +/* ...except for some exceptions */
1.1299 +.setting-expanded {
1.1300 + -moz-box-align: start;
1.1301 + -moz-box-orient: vertical;
1.1302 +}
1.1303 +
1.1304 +setting > vbox {
1.1305 + -moz-box-flex: 1;
1.1306 +}
1.1307 +
1.1308 +settings {
1.1309 + margin-top: 32px;
1.1310 +}
1.1311 +
1.1312 +.settings-title {
1.1313 + font-weight: bold;
1.1314 +}
1.1315 +
1.1316 +/* <setting> elements that are not in a <settings> group get special treatment */
1.1317 +#prefs-flyoutpanel > setting,
1.1318 +#sync-flyoutpanel > setting {
1.1319 + margin-top: 16px;
1.1320 +}
1.1321 +
1.1322 +#prefs-flyoutpanel > setting .preferences-title {
1.1323 + font-weight: bold;
1.1324 +}
1.1325 +
1.1326 +setting[type="integer"] > .preferences-alignment,
1.1327 +setting[type="string"] > .preferences-alignment {
1.1328 + -moz-box-flex: 3;
1.1329 +}
1.1330 +
1.1331 +setting[type="file"] > .preferences-alignment,
1.1332 +setting[type="directory"] > .preferences-alignment {
1.1333 + -moz-box-align: center;
1.1334 +}
1.1335 +
1.1336 +/* Removes the left side title vbox on radio setting */
1.1337 +setting[type="radio"] > vbox {
1.1338 + display: none;
1.1339 +}
1.1340 +
1.1341 +#prefs-homepage-options, #prefs-homepage-popup {
1.1342 + min-width: 200px;
1.1343 +}
1.1344 +
1.1345 +.options-box {
1.1346 + -moz-margin-start: 28px; /* sized based on the 32px addon image */
1.1347 +}
1.1348 +
1.1349 +.options-box > setting:last-child {
1.1350 + border-bottom: 0;
1.1351 +}
1.1352 +
1.1353 +.preferences-description {
1.1354 + font-size: @font_small@ !important;
1.1355 + color: grey;
1.1356 +}
1.1357 +
1.1358 +.preferences-description:empty {
1.1359 + display: none;
1.1360 +}
1.1361 +
1.1362 +/* Clear private data prefs */
1.1363 +
1.1364 +/* hide subitems when other data checkbox is not checked */
1.1365 +#prefs-privdata-other:not([checked]) + #prefs-privdata-subitems {
1.1366 + display: none;
1.1367 +}
1.1368 +
1.1369 +#prefs-privdata-subitems {
1.1370 + display: block;
1.1371 + padding-left: @metro_spacing_xnormal@;
1.1372 + font-size: @metro_font_snormal@;
1.1373 +}
1.1374 +
1.1375 +/* arrange sub-items in two columns */
1.1376 +.privdata-subitem-item {
1.1377 + display: inline-block;
1.1378 + vertical-align: middle;
1.1379 + margin: 0;
1.1380 + width: 50%;
1.1381 +}
1.1382 +
1.1383 +#clear-notification {
1.1384 + max-height: 25px;
1.1385 +}
1.1386 +
1.1387 +#clearprivacythrobber {
1.1388 + max-width: 25px;
1.1389 + max-height: 25px;
1.1390 +}
1.1391 +
1.1392 +#clearprivacythrobber .progressContainer {
1.1393 + width: 25px;
1.1394 + height: 25px;
1.1395 +}
1.1396 +
1.1397 +#clearprivacythrobber .progressBall {
1.1398 + margin: 2px;
1.1399 + width: 22px;
1.1400 + height: 22px;
1.1401 +}
1.1402 +
1.1403 +#clear-notification-done {
1.1404 + font-weight: bold;
1.1405 +}
