1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/themes/windows/browser.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,2883 @@
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 +@import url("chrome://global/skin/");
1.9 +
1.10 +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
1.11 +@namespace html url("http://www.w3.org/1999/xhtml");
1.12 +@namespace svg url("http://www.w3.org/2000/svg");
1.13 +
1.14 +%include ../shared/browser.inc
1.15 +%include windowsShared.inc
1.16 +%filter substitution
1.17 +%define toolbarShadowColor hsla(209,67%,12%,0.35)
1.18 +%define navbarTextboxCustomBorder border-color: rgba(0,0,0,.32);
1.19 +%define forwardTransitionLength 150ms
1.20 +%define conditionalForwardWithUrlbar window:not([chromehidden~="toolbar"]) #urlbar-wrapper
1.21 +%define conditionalForwardWithUrlbarWidth 30
1.22 +
1.23 +#menubar-items {
1.24 + -moz-box-orient: vertical; /* for flex hack */
1.25 +}
1.26 +
1.27 +#main-menubar {
1.28 + -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
1.29 +}
1.30 +
1.31 +/* Hides the titlebar-placeholder underneath the window caption buttons when we
1.32 + are not autohiding the menubar. */
1.33 +#toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
1.34 + display: none;
1.35 +}
1.36 +
1.37 +/* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
1.38 + toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
1.39 + of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
1.40 +#toolbar-menubar:not([moz-collapsed=true]):not([autohide=true]) ~ #TabsToolbar,
1.41 +#toolbar-menubar:not([moz-collapsed=true])[autohide=true]:not([inactive]) ~ #TabsToolbar {
1.42 + margin-top: 3px;
1.43 +}
1.44 +
1.45 +#main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
1.46 +#main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
1.47 + margin-top: 15px;
1.48 +}
1.49 +
1.50 +#toolbar-menubar:not([autohide="true"]) {
1.51 + -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag");
1.52 +}
1.53 +
1.54 +#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
1.55 +#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
1.56 +#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
1.57 +#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
1.58 + outline-color: CaptionText;
1.59 +}
1.60 +
1.61 +#navigator-toolbox {
1.62 + -moz-appearance: none;
1.63 + background-color: transparent;
1.64 + border-top: none;
1.65 +}
1.66 +
1.67 +#navigator-toolbox::after {
1.68 + content: "";
1.69 + display: -moz-box;
1.70 + -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
1.71 + height: 1px;
1.72 + background-color: ThreeDShadow;
1.73 +}
1.74 +
1.75 +#navigator-toolbox > toolbar:not(:-moz-lwtheme) {
1.76 + -moz-appearance: none;
1.77 + border-style: none;
1.78 + background-color: -moz-Dialog;
1.79 +}
1.80 +
1.81 +%ifdef WINDOWS_AERO
1.82 +@media not all and (-moz-windows-compositor),
1.83 + not all and (-moz-windows-default-theme) {
1.84 +%endif
1.85 + #toolbar-menubar {
1.86 + background-color: transparent !important;
1.87 + }
1.88 +
1.89 + #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
1.90 + #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
1.91 + color: CaptionText;
1.92 + }
1.93 +
1.94 + #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
1.95 + #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
1.96 + color: InactiveCaptionText;
1.97 + }
1.98 +
1.99 + #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
1.100 + color: inherit;
1.101 + }
1.102 +
1.103 + #TabsToolbar:-moz-lwtheme {
1.104 + background: linear-gradient(to top, @toolbarShadowColor@ 2px, transparent 2px);
1.105 + }
1.106 +%ifdef WINDOWS_AERO
1.107 +}
1.108 +%endif
1.109 +
1.110 +%ifdef WINDOWS_AERO
1.111 +@media not all and (-moz-windows-compositor) {
1.112 +%endif
1.113 + #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
1.114 + visibility: hidden;
1.115 + }
1.116 +
1.117 + #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
1.118 + -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
1.119 + visibility: visible;
1.120 + }
1.121 +%ifdef WINDOWS_AERO
1.122 +}
1.123 +%endif
1.124 +
1.125 +/**
1.126 + * In the classic themes, the titlebar has a horizontal gradient, which is
1.127 + * problematic for reading the text of background tabs when they're in the
1.128 + * titlebar. We side-step this issue by layering our own background underneath
1.129 + * the tabs. Unfortunately, this requires a bunch of positioning in order to get
1.130 + * text and icons to not appear fuzzy.
1.131 + */
1.132 +@media (-moz-windows-classic) {
1.133 + /**
1.134 + * We need to bump up the z-index of the tabbrowser-tabs so that they appear
1.135 + * over top of the fog we're applying for classic themes, as well as the nav-bar.
1.136 + */
1.137 + #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #tabbrowser-tabs {
1.138 + position: relative;
1.139 + z-index: 2;
1.140 + }
1.141 +
1.142 + #main-window[tabsintitlebar] #TabsToolbar:not(:-moz-lwtheme) {
1.143 + background-image: none;
1.144 + position: relative;
1.145 + }
1.146 +
1.147 + #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar:not(:-moz-lwtheme)::after {
1.148 + /* Because we use placeholders for window controls etc. in the tabstrip,
1.149 + * and position those with ordinal attributes, and because our layout code
1.150 + * expects :before/:after nodes to come first/last in the frame list,
1.151 + * we have to reorder this element to come last, hence the
1.152 + * ordinal group value (see bug 853415). */
1.153 + -moz-box-ordinal-group: 1001;
1.154 + box-shadow: 0 0 50px 8px ActiveCaption;
1.155 + content: "";
1.156 + display: -moz-box;
1.157 + height: 0;
1.158 + margin: 0 50px;
1.159 + position: absolute;
1.160 + pointer-events: none;
1.161 + top: 100%;
1.162 + width: -moz-available;
1.163 + }
1.164 +
1.165 + #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive::after {
1.166 + box-shadow: 0 0 50px 8px InactiveCaption;
1.167 + }
1.168 +
1.169 + #main-window[tabsintitlebar]:not([sizemode=fullscreen]) toolbar[customindex]:not(:-moz-lwtheme),
1.170 + #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #PersonalToolbar:not(:-moz-lwtheme) {
1.171 + position: relative;
1.172 + }
1.173 +
1.174 + /* Need to constrain the box shadow fade to avoid overlapping layers, see bug 886281. */
1.175 + #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #navigator-toolbox:not(:-moz-lwtheme) {
1.176 + overflow: -moz-hidden-unscrollable;
1.177 + }
1.178 +
1.179 + /**
1.180 + * When the tabstrip is overflowed, pinned tab separators get position: absolute,
1.181 + * which makes the pinned tab separators leak over the nav-bar highlight. Forcing
1.182 + * the element to snap to the bottom of the client rect works around the issue.
1.183 + */
1.184 + #main-window[tabsintitlebar] #tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::before {
1.185 + bottom: 0px;
1.186 + }
1.187 +
1.188 + #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar .toolbarbutton-1 {
1.189 + position: relative;
1.190 + z-index: 1;
1.191 + }
1.192 +
1.193 + /**
1.194 + * With the tabbrowser-tabs element z-index'd above the nav-bar, we now get the
1.195 + * scrollbox button borders leaking over the nav-bar highlight. This transparent bottom
1.196 + * border forces the scrollbox button borders to terminate a pixel early, working
1.197 + * around the issue.
1.198 + */
1.199 + #main-window[tabsintitlebar]:not([sizemode=fullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up,
1.200 + #main-window[tabsintitlebar]:not([sizemode=fullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down {
1.201 + border-bottom: 1px solid transparent;
1.202 + }
1.203 +
1.204 + #main-window[tabsintitlebar][sizemode="normal"] #titlebar-content:-moz-lwtheme {
1.205 + /* Render a window top border: */
1.206 + background-image: linear-gradient(to bottom,
1.207 + ThreeDLightShadow 0, ThreeDLightShadow 1px,
1.208 + ThreeDHighlight 1px, ThreeDHighlight 2px,
1.209 + ActiveBorder 2px, ActiveBorder 4px, transparent 4px);
1.210 + }
1.211 +
1.212 + /* End classic titlebar gradient */
1.213 +
1.214 + #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) toolbarbutton:not(:-moz-lwtheme) {
1.215 + color: inherit;
1.216 + }
1.217 +}
1.218 +
1.219 +/* Render a window top border for lwthemes on WinXP modern themes: */
1.220 +@media (-moz-windows-theme: luna-blue) {
1.221 + #main-window[tabsintitlebar][sizemode="normal"] #titlebar-content:-moz-lwtheme {
1.222 + background-image: linear-gradient(to bottom,
1.223 + rgb(8, 49, 216) 0, rgb(8, 49, 216) 1px,
1.224 + rgb(15, 77, 227) 1px, rgb(15, 77, 227) 2px,
1.225 + rgb(22, 106, 238) 2px, rgb(22, 106, 238) 3px,
1.226 + rgb(8, 85, 221) 3px, rgb(8, 85, 221) 4px,
1.227 + transparent 4px);
1.228 + }
1.229 +
1.230 + #main-window[tabsintitlebar][sizemode="normal"] #titlebar-content:-moz-lwtheme:-moz-window-inactive {
1.231 + background-image: linear-gradient(to bottom,
1.232 + rgb(91, 104, 205) 0, rgb(91, 104, 205) 1px,
1.233 + rgb(116, 128, 220) 1px, rgb(116, 128, 220) 2px,
1.234 + rgb(117, 140, 221) 2px, rgb(117, 140, 221) 4px,
1.235 + transparent 4px);
1.236 + }
1.237 +}
1.238 +
1.239 +@media (-moz-windows-theme: luna-silver) {
1.240 + #main-window[tabsintitlebar][sizemode="normal"] #titlebar-content:-moz-lwtheme {
1.241 + background-image: linear-gradient(to bottom,
1.242 + rgb(102,102,126) 0, rgb(102,102,126) 1px,
1.243 + rgb(168,167,191) 1px, rgb(168,167,191) 2px,
1.244 + white 2px, white 3px,
1.245 + rgb(188,188,207) 3px, rgb(188,188,207) 4px,
1.246 + transparent 4px);
1.247 + }
1.248 +
1.249 + #main-window[tabsintitlebar][sizemode="normal"] #titlebar-content:-moz-lwtheme:-moz-window-inactive {
1.250 + background-image: linear-gradient(to bottom,
1.251 + rgb(186,186,197) 0, rgb(186,186,197) 1px,
1.252 + rgb(236,238,245) 1px, rgb(236,238,245) 2px,
1.253 + white 2px, white 3px,
1.254 + rgb(215,215,227) 3px, rgb(215,215,227) 4px,
1.255 + transparent 4px);
1.256 + }
1.257 +}
1.258 +
1.259 +@media (-moz-windows-theme: luna-olive) {
1.260 + #main-window[tabsintitlebar][sizemode="normal"] #titlebar-content:-moz-lwtheme {
1.261 + background-image: linear-gradient(to bottom,
1.262 + rgb(139,161,105) 0, rgb(139,161,105) 1px,
1.263 + rgb(171, 189, 133) 1px, rgb(171, 189, 133) 2px,
1.264 + rgb(164,178,127) 2px, rgb(164,178,127) 3px,
1.265 + transparent 3px);
1.266 + }
1.267 +
1.268 + #main-window[tabsintitlebar][sizemode="normal"] #titlebar-content:-moz-lwtheme:-moz-window-inactive {
1.269 + background-image: linear-gradient(to bottom,
1.270 + rgb(207, 214, 188) 0, rgb(207, 214, 188) 1px,
1.271 + rgb(224, 226, 200) 1px, rgb(224, 226, 200) 2px,
1.272 + rgb(214, 216, 190) 2px, rgb(214, 216, 190) 3px,
1.273 + transparent 3px);
1.274 + }
1.275 +}
1.276 +
1.277 +#TabsToolbar:not([collapsed="true"]) + #nav-bar {
1.278 + margin-top: -@tabToolbarNavbarOverlap@; /* Move up into the TabsToolbar */
1.279 + /* Position the toolbar above the bottom of background tabs */
1.280 + position: relative;
1.281 + z-index: 1;
1.282 +}
1.283 +
1.284 +#nav-bar {
1.285 + background-image: linear-gradient(@toolbarHighlight@, rgba(255,255,255,0));
1.286 + box-shadow: 0 1px 0 @toolbarHighlight@ inset;
1.287 +}
1.288 +
1.289 +#personal-bookmarks {
1.290 + min-height: 24px;
1.291 +}
1.292 +
1.293 +#print-preview-toolbar:not(:-moz-lwtheme) {
1.294 + -moz-appearance: toolbox;
1.295 +}
1.296 +
1.297 +#browser-bottombox:not(:-moz-lwtheme) {
1.298 + background-color: -moz-dialog;
1.299 +}
1.300 +
1.301 +%ifndef WINDOWS_AERO
1.302 +@media (-moz-windows-default-theme) {
1.303 + #main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar {
1.304 + margin-top: 4px;
1.305 + }
1.306 +}
1.307 +%endif
1.308 +
1.309 +/* ::::: titlebar ::::: */
1.310 +
1.311 +#main-window[sizemode="normal"] > #titlebar {
1.312 + -moz-appearance: -moz-window-titlebar;
1.313 +}
1.314 +
1.315 +#main-window[sizemode="maximized"] > #titlebar {
1.316 + -moz-appearance: -moz-window-titlebar-maximized;
1.317 +}
1.318 +
1.319 +@media (-moz-windows-classic) {
1.320 + #main-window[tabsintitlebar][sizemode="normal"] > #tab-view-deck > #browser-panel > #navigator-toolbox > #toolbar-menubar {
1.321 + margin-top: 4px;
1.322 + }
1.323 +}
1.324 +
1.325 +/* The button box must appear on top of the navigator-toolbox in order for
1.326 + * click and hover mouse events to work properly for the button in the restored
1.327 + * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
1.328 + * can swallow those events. It will also place the buttons above the fog on
1.329 + * themes with Aero Glass.
1.330 + */
1.331 +#titlebar-buttonbox {
1.332 + z-index: 1;
1.333 +}
1.334 +
1.335 +.titlebar-placeholder[type="caption-buttons"] {
1.336 +%ifdef WINDOWS_AERO
1.337 + margin-left: 22px; /* additional space for Aero Snap */
1.338 +%else
1.339 + margin-left: 10px;
1.340 +%endif
1.341 +}
1.342 +
1.343 +/* titlebar command buttons */
1.344 +
1.345 +#titlebar-min {
1.346 + -moz-appearance: -moz-window-button-minimize;
1.347 +}
1.348 +
1.349 +#titlebar-max {
1.350 + -moz-appearance: -moz-window-button-maximize;
1.351 +}
1.352 +
1.353 +#main-window[sizemode="maximized"] #titlebar-max {
1.354 + -moz-appearance: -moz-window-button-restore;
1.355 +}
1.356 +
1.357 +#titlebar-close {
1.358 + -moz-appearance: -moz-window-button-close;
1.359 +}
1.360 +
1.361 +@media not all and (-moz-windows-classic) {
1.362 + #titlebar-min {
1.363 + -moz-margin-end: 2px;
1.364 + }
1.365 +}
1.366 +
1.367 +/* ::::: bookmark buttons ::::: */
1.368 +
1.369 +toolbarbutton.bookmark-item:not(.subviewbutton),
1.370 +#personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
1.371 + margin: 0;
1.372 + padding: 2px 3px;
1.373 +}
1.374 +
1.375 +toolbarbutton.bookmark-item:not([disabled="true"]):not(.subviewbutton):hover:active,
1.376 +toolbarbutton.bookmark-item[open="true"] {
1.377 + padding-top: 3px;
1.378 + padding-bottom: 1px;
1.379 + -moz-padding-start: 4px;
1.380 + -moz-padding-end: 2px;
1.381 +}
1.382 +
1.383 +.bookmark-item > .toolbarbutton-icon,
1.384 +#personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
1.385 + width: 16px;
1.386 + height: 16px;
1.387 +}
1.388 +
1.389 +/* Force the display of the label for bookmarks */
1.390 +.bookmark-item > .toolbarbutton-text,
1.391 +#personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
1.392 + display: -moz-box !important;
1.393 +}
1.394 +
1.395 +.bookmark-item > .toolbarbutton-menu-dropmarker {
1.396 + display: none;
1.397 +}
1.398 +
1.399 +#bookmarks-toolbar-placeholder {
1.400 + list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png") !important;
1.401 +}
1.402 +
1.403 +toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
1.404 +#personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
1.405 + list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
1.406 +}
1.407 +
1.408 +/* ----- BOOKMARK STAR ANIMATION ----- */
1.409 +
1.410 +@keyframes animation-bookmarkAdded {
1.411 + from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
1.412 + 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
1.413 + 80% { opacity: 1; }
1.414 + to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
1.415 +}
1.416 +
1.417 +@keyframes animation-bookmarkPulse {
1.418 + from { transform: scale(1); }
1.419 + 50% { transform: scale(1.3); }
1.420 + to { transform: scale(1); }
1.421 +}
1.422 +
1.423 +#bookmarked-notification-container {
1.424 + min-height: 1px;
1.425 + min-width: 1px;
1.426 + height: 1px;
1.427 + margin-bottom: -1px;
1.428 + z-index: 5;
1.429 + position: relative;
1.430 +}
1.431 +
1.432 +#bookmarked-notification {
1.433 + background-size: 16px;
1.434 + background-position: center;
1.435 + background-repeat: no-repeat;
1.436 + width: 16px;
1.437 + height: 16px;
1.438 + opacity: 0;
1.439 +}
1.440 +
1.441 +#bookmarked-notification-dropmarker-anchor {
1.442 + z-index: -1;
1.443 + position: relative;
1.444 +}
1.445 +
1.446 +#bookmarked-notification-dropmarker-icon {
1.447 + width: 18px;
1.448 + height: 18px;
1.449 + visibility: hidden;
1.450 +}
1.451 +
1.452 +#bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
1.453 + background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
1.454 + animation: animation-bookmarkAdded 800ms;
1.455 + animation-timing-function: ease, ease, ease;
1.456 +}
1.457 +
1.458 +#bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1.459 + list-style-image: none !important;
1.460 +}
1.461 +
1.462 +#bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
1.463 + visibility: visible;
1.464 + animation: animation-bookmarkPulse 300ms;
1.465 + animation-delay: 600ms;
1.466 + animation-timing-function: ease-out;
1.467 +}
1.468 +
1.469 +/* ::::: bookmark menus ::::: */
1.470 +
1.471 +menu.bookmark-item,
1.472 +menuitem.bookmark-item {
1.473 + min-width: 0;
1.474 + max-width: 32em;
1.475 +}
1.476 +
1.477 +.bookmark-item:not(.subviewbutton) > .menu-iconic-left {
1.478 + margin-top: 0;
1.479 + margin-bottom: 0;
1.480 +}
1.481 +
1.482 +.bookmark-item > .menu-iconic-left > .menu-iconic-icon {
1.483 + -moz-padding-start: 0px;
1.484 +}
1.485 +
1.486 +/* ::::: bookmark items ::::: */
1.487 +
1.488 +.bookmark-item {
1.489 + list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
1.490 +}
1.491 +
1.492 +.bookmark-item[container] {
1.493 + list-style-image: url("chrome://global/skin/icons/folder-item.png");
1.494 + -moz-image-region: rect(0px, 32px, 16px, 16px);
1.495 +}
1.496 +
1.497 +.bookmark-item[container][open] {
1.498 + -moz-image-region: rect(16px, 32px, 32px, 16px);
1.499 +}
1.500 +
1.501 +.bookmark-item[container][livemark] {
1.502 + list-style-image: url("chrome://browser/skin/livemark-folder.png");
1.503 + -moz-image-region: auto;
1.504 +}
1.505 +
1.506 +.bookmark-item[container][livemark] .bookmark-item {
1.507 + list-style-image: url("chrome://browser/skin/places/livemark-item.png");
1.508 + -moz-image-region: rect(0px, 16px, 16px, 0px);
1.509 +}
1.510 +
1.511 +.bookmark-item[container][livemark] .bookmark-item[visited] {
1.512 + -moz-image-region: rect(0px, 32px, 16px, 16px);
1.513 +}
1.514 +
1.515 +.bookmark-item[container][query] {
1.516 + list-style-image: url("chrome://browser/skin/places/query.png");
1.517 + -moz-image-region: auto;
1.518 +}
1.519 +
1.520 +.bookmark-item[query][tagContainer] {
1.521 + list-style-image: url("chrome://browser/skin/places/tag.png");
1.522 + -moz-image-region: auto;
1.523 +}
1.524 +
1.525 +.bookmark-item[query][dayContainer] {
1.526 + list-style-image: url("chrome://browser/skin/places/calendar.png");
1.527 + -moz-image-region: auto;
1.528 +}
1.529 +
1.530 +.bookmark-item[query][hostContainer] {
1.531 + list-style-image: url("chrome://global/skin/icons/folder-item.png");
1.532 + -moz-image-region: rect(0px, 32px, 16px, 16px);
1.533 +}
1.534 +
1.535 +.bookmark-item[query][hostContainer][open] {
1.536 + list-style-image: url("chrome://global/skin/icons/folder-item.png");
1.537 + -moz-image-region: rect(16px, 32px, 32px, 16px);
1.538 +}
1.539 +
1.540 +.bookmark-item[cutting] > .toolbarbutton-icon,
1.541 +.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
1.542 + opacity: 0.5;
1.543 +}
1.544 +
1.545 +.bookmark-item[cutting] > .toolbarbutton-text,
1.546 +.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
1.547 + opacity: 0.7;
1.548 +}
1.549 +
1.550 +/* ::::: primary toolbar buttons ::::: */
1.551 +
1.552 +%include ../shared/toolbarbuttons.inc.css
1.553 +%include ../shared/menupanel.inc.css
1.554 +
1.555 +%ifndef WINDOWS_AERO
1.556 +@media (-moz-windows-theme: luna-silver) {
1.557 + :-moz-any(@primaryToolbarButtons@),
1.558 + #bookmarks-menu-button.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1.559 + list-style-image: url("chrome://browser/skin/Toolbar-lunaSilver.png");
1.560 + }
1.561 +}
1.562 +%endif
1.563 +
1.564 +#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1.565 +#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1.566 +#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1.567 +#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1.568 +#main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1.569 + opacity: .4;
1.570 +}
1.571 +
1.572 +.toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1.573 +.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1.574 + list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.png");
1.575 +}
1.576 +
1.577 +toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1.578 +toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1.579 + list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow-inverted.png");
1.580 +}
1.581 +
1.582 +.toolbarbutton-1 > .toolbarbutton-icon,
1.583 +.toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1.584 + -moz-margin-end: 0;
1.585 +}
1.586 +
1.587 +#nav-bar .toolbarbutton-1,
1.588 +#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1.589 + -moz-appearance: none;
1.590 + border: none;
1.591 + padding: 0;
1.592 + background: none;
1.593 +}
1.594 +
1.595 +#nav-bar .toolbarbutton-1:not([type=menu-button]),
1.596 +#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1.597 +#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1.598 + padding: 8px 2px;
1.599 + -moz-box-pack: center;
1.600 +}
1.601 +
1.602 +#nav-bar #PanelUI-menu-button {
1.603 + -moz-padding-start: 7px;
1.604 + -moz-padding-end: 5px;
1.605 +}
1.606 +
1.607 +#nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#social-provider-button):not(#PanelUI-menu-button) {
1.608 + padding-left: 5px;
1.609 + padding-right: 5px;
1.610 +}
1.611 +
1.612 +#nav-bar .toolbarbutton-1 > menupopup {
1.613 + margin-top: -3px;
1.614 +}
1.615 +
1.616 +#nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1.617 + margin-top: -8px;
1.618 +}
1.619 +
1.620 +#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1.621 + -moz-padding-end: 0;
1.622 +}
1.623 +
1.624 +#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1.625 + -moz-padding-start: 0;
1.626 + -moz-box-align: center;
1.627 +}
1.628 +
1.629 +#nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1.630 +#nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1.631 +#nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container,
1.632 +#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1.633 +#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1.634 +@conditionalForwardWithUrlbar@ > .toolbarbutton-1:-moz-any([disabled],:not([open]):not([disabled]):not(:active)) > .toolbarbutton-icon {
1.635 + padding: 2px 6px;
1.636 + border: 1px solid;
1.637 + border-color: transparent;
1.638 + transition-property: background-color, border-color;
1.639 + transition-duration: 150ms;
1.640 +}
1.641 +
1.642 +%ifdef WINDOWS_AERO
1.643 +@media (-moz-os-version: windows-vista),
1.644 + (-moz-os-version: windows-win7) {
1.645 +%endif
1.646 + /* < Win8 */
1.647 + #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1.648 + #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1.649 + #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container,
1.650 + #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1.651 + #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1.652 + background-color: hsla(210,32%,93%,0);
1.653 + background-origin: padding-box;
1.654 + border-radius: 2px;
1.655 + border-color: hsla(210,54%,20%,0) hsla(210,54%,20%,0) hsla(210,54%,20%,0);
1.656 + box-shadow: 0 1px hsla(0,0%,100%,0) inset,
1.657 + 0 1px hsla(210,54%,20%,0),
1.658 + 0 0 2px hsla(210,54%,20%,0);
1.659 + transition-property: background-color, border-color, box-shadow;
1.660 + transition-duration: 150ms;
1.661 + }
1.662 +%ifdef WINDOWS_AERO
1.663 +}
1.664 +%endif
1.665 +
1.666 +#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
1.667 +#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-container,
1.668 +#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1.669 + padding: 3px 7px;
1.670 +}
1.671 +
1.672 +/* Help SDK icons fit: */
1.673 +toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1.674 + width: 16px;
1.675 +}
1.676 +
1.677 +#nav-bar toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1.678 + /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1.679 + width: 32px;
1.680 +}
1.681 +
1.682 +#nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#social-provider-button):not(#PanelUI-menu-button) > .toolbarbutton-icon,
1.683 +#nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1.684 + -moz-padding-end: 17px;
1.685 +}
1.686 +
1.687 +#nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1.688 + -moz-margin-start: -15px;
1.689 +}
1.690 +
1.691 +#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1.692 + -moz-border-end: none;
1.693 +}
1.694 +
1.695 +#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1.696 + padding: 8px 5px 7px;
1.697 +}
1.698 +
1.699 +#nav-bar .toolbaritem-combined-buttons {
1.700 + margin-left: 2px;
1.701 + margin-right: 2px;
1.702 +}
1.703 +
1.704 +#nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1.705 + padding-left: 0;
1.706 + padding-right: 0;
1.707 +}
1.708 +
1.709 +#nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1.710 +#nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true]) + .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true])::before {
1.711 + content: "";
1.712 + display: -moz-box;
1.713 + width: 1px;
1.714 + height: 16px;
1.715 + -moz-margin-end: -1px;
1.716 + background-image: linear-gradient(hsla(210,54%,20%,.2) 0, hsla(210,54%,20%,.2) 16px);
1.717 + background-clip: padding-box;
1.718 + background-position: center;
1.719 + background-repeat: no-repeat;
1.720 + background-size: 1px 16px;
1.721 +}
1.722 +
1.723 +@conditionalForwardWithUrlbar@ > .toolbarbutton-1:-moz-any([disabled],:not([open]):not([disabled]):not(:active)) > .toolbarbutton-icon {
1.724 + border-color: hsla(210,4%,10%,.1);
1.725 +}
1.726 +
1.727 +#nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1.728 +#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1.729 +#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1.730 +#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1.731 +#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1.732 +#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-container,
1.733 +@conditionalForwardWithUrlbar@ > #forward-button:not([open]):not(:active):not([disabled]):hover > .toolbarbutton-icon,
1.734 +#nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon {
1.735 + background-color: hsla(210,4%,10%,.08);
1.736 + border-color: hsla(210,4%,10%,.1);
1.737 +}
1.738 +
1.739 +%ifdef WINDOWS_AERO
1.740 +@media (-moz-os-version: windows-vista),
1.741 + (-moz-os-version: windows-win7) {
1.742 +%endif
1.743 + /* < Win8 */
1.744 + #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1.745 + #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled]) + .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled])::before {
1.746 + content: "";
1.747 + display: -moz-box;
1.748 + width: 1px;
1.749 + height: 18px;
1.750 + -moz-margin-end: -1px;
1.751 + background-image: linear-gradient(hsla(210,54%,20%,.2) 0, hsla(210,54%,20%,.2) 18px);
1.752 + background-clip: padding-box;
1.753 + background-position: center;
1.754 + background-repeat: no-repeat;
1.755 + background-size: 1px 18px;
1.756 + box-shadow: 0 0 0 1px hsla(0,0%,100%,.2);
1.757 + }
1.758 +
1.759 + #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon:-moz-locale-dir(ltr),
1.760 + #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-locale-dir(rtl) {
1.761 + border-top-right-radius: 0;
1.762 + border-bottom-right-radius: 0;
1.763 + }
1.764 +
1.765 + #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon:-moz-locale-dir(rtl),
1.766 + #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-locale-dir(ltr) {
1.767 + border-top-left-radius: 0;
1.768 + border-bottom-left-radius: 0;
1.769 + }
1.770 +
1.771 + #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1.772 + #nav-bar .toolbarbutton-1:not([disabled]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1.773 + #nav-bar .toolbarbutton-1:not([disabled]):hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1.774 + #nav-bar .toolbarbutton-1:not([disabled]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1.775 + #nav-bar .toolbarbutton-1:not([disabled]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1.776 + #nav-bar .toolbarbutton-1:not([disabled]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-container,
1.777 + @conditionalForwardWithUrlbar@ > .toolbarbutton-1:-moz-any([disabled],:not([open]):not([disabled]):not(:active)) > .toolbarbutton-icon {
1.778 + background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1));
1.779 + background-color: transparent;
1.780 + border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.2) hsla(210,54%,20%,.25);
1.781 + box-shadow: 0 1px hsla(0,0%,100%,.3) inset,
1.782 + 0 1px hsla(210,54%,20%,.03),
1.783 + 0 0 2px hsla(210,54%,20%,.1);
1.784 + }
1.785 +
1.786 + #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled]):not([open]):not(:active):hover > .toolbarbutton-icon,
1.787 + #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon,
1.788 + @conditionalForwardWithUrlbar@ > #forward-button:not([open]):not(:active):not([disabled]):hover > .toolbarbutton-icon {
1.789 + border-color: hsla(210,54%,20%,.3) hsla(210,54%,20%,.35) hsla(210,54%,20%,.4);
1.790 + background-color: hsla(210,48%,96%,.75);
1.791 + box-shadow: 0 0 1px hsla(210,54%,20%,.03),
1.792 + 0 0 2px hsla(210,54%,20%,.1);
1.793 + }
1.794 +%ifdef WINDOWS_AERO
1.795 +}
1.796 +%endif
1.797 +
1.798 +#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1.799 +#nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1.800 +#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1.801 +#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1.802 +#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-container {
1.803 + background-color: hsla(210,4%,10%,.12);
1.804 + border-top-color: hsla(210,4%,10%,.2);
1.805 + box-shadow: 0 1px 0 0 hsla(210,4%,10%,.1) inset;
1.806 + transition-duration: 10ms;
1.807 +}
1.808 +
1.809 +%ifdef WINDOWS_AERO
1.810 +@media (-moz-os-version: windows-vista),
1.811 + (-moz-os-version: windows-win7) {
1.812 +%endif
1.813 + /* < Win8 */
1.814 + #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1.815 + #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon,
1.816 + #nav-bar .toolbarbutton-1:not([disabled]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1.817 + #nav-bar .toolbarbutton-1:not([disabled]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1.818 + #nav-bar .toolbarbutton-1:not([disabled]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-container {
1.819 + background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1));
1.820 + background-color: hsla(210,54%,20%,.15);
1.821 + border-color: hsla(210,54%,20%,.3) hsla(210,54%,20%,.35) hsla(210,54%,20%,.4);
1.822 + box-shadow: 0 1px 1px hsla(210,54%,20%,.1) inset,
1.823 + 0 0 1px hsla(210,54%,20%,.2) inset,
1.824 + /* allows keyhole-forward-clip-path to be used for non-hover as well as hover: */
1.825 + 0 1px 0 hsla(210,54%,20%,0),
1.826 + 0 0 2px hsla(210,54%,20%,0);
1.827 + text-shadow: none;
1.828 + transition: none;
1.829 + }
1.830 +
1.831 + #nav-bar .toolbarbutton-1:-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon {
1.832 + -moz-border-start-color: hsla(210,54%,20%,.35);
1.833 + }
1.834 +
1.835 + #nav-bar .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon {
1.836 + background-color: rgba(90%,90%,90%,.4);
1.837 + transition: background-color .4s;
1.838 + }
1.839 +%ifdef WINDOWS_AERO
1.840 +}
1.841 +%endif
1.842 +
1.843 +#TabsToolbar .toolbarbutton-1,
1.844 +#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1.845 +.tabbrowser-arrowscrollbox > .scrollbutton-up,
1.846 +.tabbrowser-arrowscrollbox > .scrollbutton-down {
1.847 + -moz-appearance: none;
1.848 + border-style: none;
1.849 + padding: 0 3px;
1.850 +}
1.851 +
1.852 +#TabsToolbar .toolbarbutton-1 {
1.853 + margin-bottom: @tabToolbarNavbarOverlap@;
1.854 +}
1.855 +
1.856 +#TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1.857 +#TabsToolbar .toolbarbutton-1[open],
1.858 +#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1.859 +.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1.860 +.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1.861 + background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.5)),
1.862 + linear-gradient(transparent, rgba(0,0,0,.25) 30%),
1.863 + linear-gradient(transparent, rgba(0,0,0,.25) 30%);
1.864 + background-position: 1px -1px, 0 -1px, 100% -1px;
1.865 + background-size: calc(100% - 2px) 100%, 1px 100%, 1px 100%;
1.866 + background-repeat: no-repeat;
1.867 +}
1.868 +
1.869 +/* unified back/forward button */
1.870 +
1.871 +#forward-button {
1.872 + -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1.873 + padding: 0 !important;
1.874 +}
1.875 +
1.876 +#forward-button > menupopup {
1.877 + margin-top: 1px !important;
1.878 +}
1.879 +
1.880 +#forward-button > .toolbarbutton-icon {
1.881 + background-clip: padding-box !important;
1.882 + border-left-style: none !important;
1.883 + border-radius: 0 !important;
1.884 + padding-left: 9px !important;
1.885 + padding-right: 3px !important;
1.886 +}
1.887 +
1.888 +@conditionalForwardWithUrlbar@:not([switchingtabs]) > #forward-button {
1.889 + transition: margin-left @forwardTransitionLength@ ease-out;
1.890 +}
1.891 +
1.892 +@conditionalForwardWithUrlbar@ > #forward-button[disabled] {
1.893 + margin-left: -@conditionalForwardWithUrlbarWidth@px;
1.894 +}
1.895 +
1.896 +@conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] {
1.897 + /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1.898 + transition-delay: 100s;
1.899 +}
1.900 +
1.901 +@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] {
1.902 + /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1.903 + margin-left: -@conditionalForwardWithUrlbarWidth@.01px;
1.904 +}
1.905 +
1.906 +#back-button {
1.907 + padding-top: 3px !important;
1.908 + padding-bottom: 3px !important;
1.909 + -moz-padding-start: 5px !important;
1.910 + -moz-padding-end: 0 !important;
1.911 + position: relative !important;
1.912 + z-index: 1 !important;
1.913 + border-radius: 0 10000px 10000px 0 !important;
1.914 +}
1.915 +
1.916 +#back-button:-moz-locale-dir(rtl) {
1.917 + border-radius: 10000px 0 0 10000px !important;
1.918 +}
1.919 +
1.920 +#back-button > menupopup {
1.921 + margin-top: -1px !important;
1.922 +}
1.923 +
1.924 +#back-button > .toolbarbutton-icon {
1.925 + border-radius: 10000px !important;
1.926 + background-clip: padding-box !important;
1.927 + background-color: hsla(210,25%,98%,.08) !important;
1.928 + padding: 6px !important;
1.929 + border-style: none !important;
1.930 + box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1.931 + 0 0 0 1px hsla(210,4%,10%,.25);
1.932 + transition-property: background-color, box-shadow !important;
1.933 + transition-duration: 250ms !important;
1.934 +}
1.935 +
1.936 +#back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1.937 + background-color: hsla(210,4%,10%,.08) !important;
1.938 +}
1.939 +
1.940 +#back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1.941 +#back-button[open="true"] > .toolbarbutton-icon {
1.942 + background-color: hsla(210,4%,10%,.12) !important;
1.943 + box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1.944 + 0 0 0 1px hsla(210,4%,10%,.25),
1.945 + 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;
1.946 +}
1.947 +
1.948 +%ifdef WINDOWS_AERO
1.949 +@media (-moz-os-version: windows-vista),
1.950 + (-moz-os-version: windows-win7) {
1.951 +%endif
1.952 + #back-button > .toolbarbutton-icon {
1.953 + background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1)) !important;
1.954 + box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset,
1.955 + 0 0 0 1px hsla(0,0%,100%,.3) inset,
1.956 + 0 0 0 1px hsla(210,54%,20%,.25),
1.957 + 0 1px 0 hsla(210,54%,20%,.35) !important;
1.958 + }
1.959 +
1.960 + #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1.961 + background-color: hsla(210,48%,96%,.75) !important;
1.962 + box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset,
1.963 + 0 0 0 1px hsla(0,0%,100%,.3) inset,
1.964 + 0 0 0 1px hsla(210,54%,20%,.3),
1.965 + 0 1px 0 hsla(210,54%,20%,.4),
1.966 + 0 0 4px hsla(210,54%,20%,.2) !important;
1.967 + }
1.968 +
1.969 + #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1.970 + #back-button[open="true"] > .toolbarbutton-icon {
1.971 + background-color: hsla(210,54%,20%,.15) !important;
1.972 + box-shadow: 0 1px 1px hsla(210,54%,20%,.1) inset,
1.973 + 0 0 1px hsla(210,54%,20%,.2) inset,
1.974 + 0 0 0 1px hsla(210,54%,20%,.4),
1.975 + 0 1px 0 hsla(210,54%,20%,.2) !important;
1.976 + transition: none;
1.977 + }
1.978 +
1.979 + #main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon {
1.980 + box-shadow: 0 0 0 1px hsla(210,54%,20%,.55),
1.981 + 0 1px 0 hsla(210,54%,20%,.65) !important;
1.982 + transition: none;
1.983 + }
1.984 +%ifdef WINDOWS_AERO
1.985 +}
1.986 +%endif
1.987 +
1.988 +#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1.989 + transform: scaleX(-1);
1.990 +}
1.991 +
1.992 +.unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1.993 +.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1.994 + list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1.995 +}
1.996 +
1.997 +.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1.998 +.unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1.999 + list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1.1000 +}
1.1001 +
1.1002 +/* tabview button & menu item */
1.1003 +
1.1004 +#menu_tabview {
1.1005 + list-style-image: url(chrome://browser/skin/tabview/tabview.png);
1.1006 + -moz-image-region: rect(1px, 89px, 17px, 73px);
1.1007 +}
1.1008 +
1.1009 +#menu_tabview[groups="0"] {
1.1010 + -moz-image-region: rect(1px, 17px, 17px, 1px);
1.1011 +}
1.1012 +
1.1013 +#menu_tabview[groups="1"] {
1.1014 + -moz-image-region: rect(1px, 35px, 17px, 19px);
1.1015 +}
1.1016 +
1.1017 +#menu_tabview[groups="2"] {
1.1018 + -moz-image-region: rect(1px, 53px, 17px, 37px);
1.1019 +}
1.1020 +
1.1021 +#menu_tabview[groups="3"] {
1.1022 + -moz-image-region: rect(1px, 71px, 17px, 55px);
1.1023 +}
1.1024 +
1.1025 +/* zoom control text (reset) button special case: */
1.1026 +
1.1027 +#nav-bar #zoom-reset-button > .toolbarbutton-text {
1.1028 + /* To make this line up with the icons, it needs the same height (18px) +
1.1029 + * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1.1030 + * increase in text sizes would break things...
1.1031 + */
1.1032 + min-height: 24px;
1.1033 +}
1.1034 +
1.1035 +/* ::::: fullscreen window controls ::::: */
1.1036 +
1.1037 +#window-controls {
1.1038 + -moz-margin-start: 4px;
1.1039 +}
1.1040 +
1.1041 +#minimize-button,
1.1042 +#restore-button,
1.1043 +#close-button {
1.1044 + list-style-image: url("chrome://global/skin/icons/windowControls.png");
1.1045 + padding: 0;
1.1046 +}
1.1047 +
1.1048 +#minimize-button {
1.1049 + -moz-image-region: rect(0, 16px, 16px, 0);
1.1050 +}
1.1051 +#minimize-button:hover {
1.1052 + -moz-image-region: rect(16px, 16px, 32px, 0);
1.1053 +}
1.1054 +#minimize-button:hover:active {
1.1055 + -moz-image-region: rect(32px, 16px, 48px, 0);
1.1056 +}
1.1057 +#restore-button {
1.1058 + -moz-image-region: rect(0, 32px, 16px, 16px);
1.1059 +}
1.1060 +#restore-button:hover {
1.1061 + -moz-image-region: rect(16px, 32px, 32px, 16px);
1.1062 +}
1.1063 +#restore-button:hover:active {
1.1064 + -moz-image-region: rect(32px, 32px, 48px, 16px);
1.1065 +}
1.1066 +#close-button {
1.1067 + -moz-image-region: rect(0, 48px, 16px, 32px);
1.1068 + -moz-appearance: none;
1.1069 + border-style: none;
1.1070 + margin: 2px;
1.1071 +}
1.1072 +#close-button:hover {
1.1073 + -moz-image-region: rect(16px, 48px, 32px, 32px);
1.1074 +}
1.1075 +#close-button:hover:active {
1.1076 + -moz-image-region: rect(32px, 48px, 48px, 32px);
1.1077 +}
1.1078 +
1.1079 +/* ::::: Location Bar ::::: */
1.1080 +
1.1081 +#urlbar,
1.1082 +.searchbar-textbox {
1.1083 + -moz-appearance: none;
1.1084 + margin: 0 3px;
1.1085 + padding: 0;
1.1086 + background-clip: padding-box;
1.1087 + border: 1px solid ThreeDShadow;
1.1088 +}
1.1089 +
1.1090 +%ifdef WINDOWS_AERO
1.1091 +@media (-moz-os-version: windows-vista),
1.1092 + (-moz-os-version: windows-win7) {
1.1093 +%endif
1.1094 + /* < Win8 */
1.1095 + #urlbar,
1.1096 + .searchbar-textbox {
1.1097 + border-radius: 2px;
1.1098 + }
1.1099 +%ifdef WINDOWS_AERO
1.1100 +}
1.1101 +%endif
1.1102 +
1.1103 +#urlbar {
1.1104 + -moz-padding-end: 2px;
1.1105 +}
1.1106 +
1.1107 +@media (-moz-windows-default-theme) {
1.1108 + #urlbar,
1.1109 + .searchbar-textbox {
1.1110 + @navbarTextboxCustomBorder@
1.1111 + }
1.1112 +}
1.1113 +
1.1114 +#urlbar:-moz-lwtheme,
1.1115 +.searchbar-textbox:-moz-lwtheme {
1.1116 + background-color: rgba(255,255,255,.8);
1.1117 + @navbarTextboxCustomBorder@
1.1118 + color: black;
1.1119 +}
1.1120 +
1.1121 +#urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1.1122 +.searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1.1123 + background-color: rgba(255,255,255,.9);
1.1124 +}
1.1125 +
1.1126 +#urlbar:-moz-lwtheme[focused]:not([readonly]),
1.1127 +.searchbar-textbox:-moz-lwtheme[focused] {
1.1128 + background-color: white;
1.1129 +}
1.1130 +
1.1131 +@conditionalForwardWithUrlbar@ > #urlbar {
1.1132 + -moz-border-start: none;
1.1133 + margin-left: 0;
1.1134 +}
1.1135 +
1.1136 +@conditionalForwardWithUrlbar@ > #urlbar:-moz-locale-dir(ltr) {
1.1137 + border-top-left-radius: 0;
1.1138 + border-bottom-left-radius: 0;
1.1139 +}
1.1140 +
1.1141 +@conditionalForwardWithUrlbar@ > #urlbar:-moz-locale-dir(rtl) {
1.1142 + border-top-right-radius: 0;
1.1143 + border-bottom-right-radius: 0;
1.1144 +}
1.1145 +
1.1146 +@conditionalForwardWithUrlbar@ {
1.1147 + clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");
1.1148 + -moz-margin-start: -5px;
1.1149 +}
1.1150 +
1.1151 +@conditionalForwardWithUrlbar@:-moz-locale-dir(rtl),
1.1152 +@conditionalForwardWithUrlbar@ > #urlbar:-moz-locale-dir(rtl) {
1.1153 + /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1.1154 + transform: scaleX(-1);
1.1155 +}
1.1156 +
1.1157 +@conditionalForwardWithUrlbar@:-moz-locale-dir(rtl) {
1.1158 + -moz-box-direction: reverse;
1.1159 +}
1.1160 +
1.1161 +html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1.1162 +.searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1.1163 + opacity: 1.0;
1.1164 + color: #777;
1.1165 +}
1.1166 +
1.1167 +#urlbar-container {
1.1168 + -moz-box-align: center;
1.1169 +}
1.1170 +
1.1171 +.urlbar-textbox-container {
1.1172 + -moz-box-align: stretch;
1.1173 +}
1.1174 +
1.1175 +.urlbar-input-box {
1.1176 + -moz-margin-start: 0;
1.1177 +}
1.1178 +
1.1179 +#urlbar-icons {
1.1180 + -moz-box-align: center;
1.1181 +}
1.1182 +
1.1183 +.urlbar-icon {
1.1184 + padding: 0 3px;
1.1185 +}
1.1186 +
1.1187 +.searchbar-engine-button,
1.1188 +.search-go-container {
1.1189 + padding: 2px 2px;
1.1190 +}
1.1191 +
1.1192 +.urlbar-icon:hover {
1.1193 + background-image: radial-gradient(circle closest-side, hsla(200,100%,70%,.3), hsla(200,100%,70%,0));
1.1194 +}
1.1195 +
1.1196 +.urlbar-icon[open="true"],
1.1197 +.urlbar-icon:hover:active {
1.1198 + background-image: radial-gradient(circle closest-side, hsla(200,100%,70%,.1), hsla(200,100%,70%,0));
1.1199 +}
1.1200 +
1.1201 +#urlbar-search-splitter {
1.1202 + min-width: 6px;
1.1203 + -moz-margin-start: -3px;
1.1204 + border: none;
1.1205 + background: transparent;
1.1206 +}
1.1207 +
1.1208 +#urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1.1209 + -moz-margin-start: 0;
1.1210 +}
1.1211 +
1.1212 +#urlbar-display-box {
1.1213 + -moz-border-end: 1px solid #AAA;
1.1214 + -moz-margin-end: 3px;
1.1215 +}
1.1216 +
1.1217 +#urlbar-display {
1.1218 + margin-top: 0;
1.1219 + margin-bottom: 0;
1.1220 + -moz-margin-start: 0;
1.1221 + color: GrayText;
1.1222 +}
1.1223 +
1.1224 +#search-container {
1.1225 + min-width: calc(54px + 11ch);
1.1226 +}
1.1227 +
1.1228 +/* identity box */
1.1229 +
1.1230 +#identity-box {
1.1231 + padding: 2px;
1.1232 + font-size: .9em;
1.1233 +}
1.1234 +
1.1235 +#identity-box:-moz-locale-dir(ltr) {
1.1236 + border-top-left-radius: 1.5px;
1.1237 + border-bottom-left-radius: 1.5px;
1.1238 +}
1.1239 +
1.1240 +#identity-box:-moz-locale-dir(rtl) {
1.1241 + border-top-right-radius: 1.5px;
1.1242 + border-bottom-right-radius: 1.5px;
1.1243 +}
1.1244 +
1.1245 +#notification-popup-box:not([hidden]) + #identity-box {
1.1246 + -moz-padding-start: 10px;
1.1247 + border-radius: 0;
1.1248 +}
1.1249 +
1.1250 +@conditionalForwardWithUrlbar@ > #urlbar > #identity-box {
1.1251 + border-radius: 0;
1.1252 +}
1.1253 +
1.1254 +@conditionalForwardWithUrlbar@:not([switchingtabs]) > #urlbar > #identity-box {
1.1255 + transition: padding-left, padding-right;
1.1256 +}
1.1257 +
1.1258 +@conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
1.1259 + padding-left: 5px;
1.1260 +}
1.1261 +
1.1262 +@conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
1.1263 + padding-right: 5px;
1.1264 +}
1.1265 +
1.1266 +@conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box {
1.1267 + /* forward button hiding is delayed when hovered */
1.1268 + transition-delay: 100s;
1.1269 +}
1.1270 +
1.1271 +@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
1.1272 + /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
1.1273 + padding-left: 5.01px;
1.1274 +}
1.1275 +
1.1276 +@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
1.1277 + /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
1.1278 + padding-right: 5.01px;
1.1279 +}
1.1280 +
1.1281 +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
1.1282 +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1.1283 + -moz-margin-end: 4px;
1.1284 +}
1.1285 +
1.1286 +#identity-box.verifiedIdentity:not(:-moz-lwtheme) {
1.1287 + background-color: #fff;
1.1288 +}
1.1289 +
1.1290 +#identity-box:-moz-focusring {
1.1291 + outline: 1px dotted #000;
1.1292 + outline-offset: -3px;
1.1293 +}
1.1294 +
1.1295 +#identity-icon-labels {
1.1296 + -moz-padding-start: 2px;
1.1297 + -moz-padding-end: 5px;
1.1298 +}
1.1299 +
1.1300 +/* Location bar dropmarker */
1.1301 +
1.1302 +.urlbar-history-dropmarker {
1.1303 + -moz-appearance: none;
1.1304 + padding: 0 3px;
1.1305 + background-color: transparent;
1.1306 + border: none;
1.1307 + width: auto;
1.1308 + list-style-image: url("chrome://browser/skin/urlbar-history-dropmarker.png");
1.1309 + -moz-image-region: rect(0px, 11px, 14px, 0px);
1.1310 +}
1.1311 +
1.1312 +.urlbar-history-dropmarker:hover {
1.1313 + background-image: radial-gradient(circle closest-side, hsla(205,100%,70%,.3), hsla(205,100%,70%,0));
1.1314 + -moz-image-region: rect(0px, 22px, 14px, 11px);
1.1315 +}
1.1316 +
1.1317 +.urlbar-history-dropmarker:hover:active,
1.1318 +.urlbar-history-dropmarker[open="true"] {
1.1319 + background-image: radial-gradient(circle closest-side, hsla(205,100%,70%,.1), hsla(205,100%,70%,0));
1.1320 + -moz-image-region: rect(0px, 33px, 14px, 22px);
1.1321 +}
1.1322 +
1.1323 +/* page proxy icon */
1.1324 +
1.1325 +%include ../shared/identity-block.inc.css
1.1326 +
1.1327 +#page-proxy-favicon {
1.1328 + margin-top: 1px;
1.1329 + margin-bottom: 1px;
1.1330 + -moz-margin-start: 3px;
1.1331 + -moz-margin-end: 1px;
1.1332 + -moz-image-region: rect(0, 16px, 16px, 0);
1.1333 +}
1.1334 +
1.1335 +#identity-box:hover > #page-proxy-favicon {
1.1336 + -moz-image-region: rect(0, 32px, 16px, 16px);
1.1337 +}
1.1338 +
1.1339 +#identity-box:hover:active > #page-proxy-favicon,
1.1340 +#identity-box[open=true] > #page-proxy-favicon {
1.1341 + -moz-image-region: rect(0, 48px, 16px, 32px);
1.1342 +}
1.1343 +
1.1344 +/* autocomplete */
1.1345 +
1.1346 +#treecolAutoCompleteImage {
1.1347 + max-width: 36px;
1.1348 +}
1.1349 +
1.1350 +.ac-result-type-bookmark,
1.1351 +.autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
1.1352 + list-style-image: url("chrome://browser/skin/places/bookmark.png");
1.1353 + -moz-image-region: rect(0px 32px 16px 16px);
1.1354 + width: 16px;
1.1355 + height: 16px;
1.1356 +}
1.1357 +
1.1358 +richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
1.1359 +.autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
1.1360 + -moz-image-region: rect(0px 48px 16px 32px);
1.1361 +}
1.1362 +
1.1363 +.ac-result-type-keyword,
1.1364 +.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
1.1365 + list-style-image: url(chrome://global/skin/icons/Search-glass.png);
1.1366 + -moz-image-region: rect(0px 32px 16px 16px);
1.1367 + width: 16px;
1.1368 + height: 16px;
1.1369 +}
1.1370 +
1.1371 +.ac-result-type-tag,
1.1372 +.autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
1.1373 + list-style-image: url("chrome://browser/skin/places/tag.png");
1.1374 + width: 16px;
1.1375 + height: 16px;
1.1376 +}
1.1377 +
1.1378 +.ac-comment {
1.1379 + font-size: 1.06em;
1.1380 +}
1.1381 +
1.1382 +.ac-extra > .ac-comment {
1.1383 + font-size: 1em;
1.1384 +}
1.1385 +
1.1386 +.ac-url-text,
1.1387 +.ac-action-text {
1.1388 + font-size: 1em;
1.1389 + color: -moz-nativehyperlinktext;
1.1390 +}
1.1391 +
1.1392 +%ifndef WINDOWS_AERO
1.1393 +@media (-moz-windows-default-theme) {
1.1394 + .ac-url-text:not([selected="true"]),
1.1395 + .ac-action-text:not([selected="true"]) {
1.1396 + color: #008800;
1.1397 + }
1.1398 +}
1.1399 +%endif
1.1400 +
1.1401 +richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
1.1402 + list-style-image: url("chrome://browser/skin/actionicon-tab.png");
1.1403 + -moz-image-region: rect(0, 16px, 11px, 0);
1.1404 + padding: 0 3px;
1.1405 +}
1.1406 +
1.1407 +%ifdef WINDOWS_AERO
1.1408 +@media not all and (-moz-windows-default-theme) {
1.1409 +%endif
1.1410 + richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
1.1411 + -moz-image-region: rect(11px, 16px, 22px, 0);
1.1412 + }
1.1413 +
1.1414 + .ac-comment[selected="true"],
1.1415 + .ac-url-text[selected="true"],
1.1416 + .ac-action-text[selected="true"] {
1.1417 + color: inherit !important;
1.1418 + }
1.1419 +%ifdef WINDOWS_AERO
1.1420 +}
1.1421 +%endif
1.1422 +
1.1423 +.autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
1.1424 + color: GrayText;
1.1425 +}
1.1426 +
1.1427 +.autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
1.1428 +.autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
1.1429 +{
1.1430 + color: GrayText;
1.1431 + font-size: smaller;
1.1432 +}
1.1433 +
1.1434 +.autocomplete-treebody::-moz-tree-cell(suggesthint) {
1.1435 + border-top: 1px solid GrayText;
1.1436 +}
1.1437 +
1.1438 +/* combined go/reload/stop button in location bar */
1.1439 +
1.1440 +#urlbar > toolbarbutton {
1.1441 + -moz-appearance: none;
1.1442 + padding: 0 2px;
1.1443 + background-origin: border-box;
1.1444 + border: none;
1.1445 + list-style-image: url("chrome://browser/skin/reload-stop-go.png");
1.1446 +}
1.1447 +
1.1448 +#urlbar-reload-button {
1.1449 + -moz-image-region: rect(0, 14px, 14px, 0);
1.1450 +}
1.1451 +
1.1452 +#urlbar-reload-button:not([disabled]):hover {
1.1453 + background-image: radial-gradient(circle closest-side, hsla(200,100%,70%,.2), hsla(200,100%,70%,0));
1.1454 + -moz-image-region: rect(14px, 14px, 28px, 0);
1.1455 +}
1.1456 +
1.1457 +#urlbar-reload-button:not([disabled]):hover:active {
1.1458 + background-image: radial-gradient(circle closest-side, hsla(200,100%,60%,.1), hsla(200,100%,60%,0));
1.1459 + -moz-image-region: rect(28px, 14px, 42px, 0);
1.1460 +}
1.1461 +
1.1462 +#urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1.1463 + transform: scaleX(-1);
1.1464 +}
1.1465 +
1.1466 +#urlbar-go-button {
1.1467 + -moz-image-region: rect(0, 42px, 14px, 28px);
1.1468 +}
1.1469 +
1.1470 +#urlbar-go-button:hover {
1.1471 + background-image: radial-gradient(circle closest-side, hsla(110,70%,50%,.2), hsla(110,70%,50%,0));
1.1472 + -moz-image-region: rect(14px, 42px, 28px, 28px);
1.1473 +}
1.1474 +
1.1475 +#urlbar-go-button:hover:active {
1.1476 + background-image: radial-gradient(circle closest-side, hsla(110,70%,50%,.1), hsla(110,70%,50%,0));
1.1477 + -moz-image-region: rect(28px, 42px, 42px, 28px);
1.1478 +}
1.1479 +
1.1480 +#urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1.1481 + transform: scaleX(-1);
1.1482 +}
1.1483 +
1.1484 +#urlbar-stop-button {
1.1485 + -moz-image-region: rect(0, 28px, 14px, 14px);
1.1486 +}
1.1487 +
1.1488 +#urlbar-stop-button:not([disabled]):hover {
1.1489 + background-image: radial-gradient(circle closest-side, hsla(5,100%,75%,.3), hsla(5,100%,75%,0));
1.1490 + -moz-image-region: rect(14px, 28px, 28px, 14px);
1.1491 +}
1.1492 +
1.1493 +#urlbar-stop-button:hover:active {
1.1494 + background-image: radial-gradient(circle closest-side, hsla(5,100%,75%,.1), hsla(5,100%,75%,0));
1.1495 + -moz-image-region: rect(28px, 28px, 42px, 14px);
1.1496 +}
1.1497 +
1.1498 +/* popup blocker button */
1.1499 +
1.1500 +#page-report-button {
1.1501 + list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
1.1502 + -moz-image-region: rect(0, 16px, 16px, 0);
1.1503 +}
1.1504 +
1.1505 +#page-report-button:hover {
1.1506 + -moz-image-region: rect(0, 32px, 16px, 16px);
1.1507 +}
1.1508 +
1.1509 +#page-report-button:hover:active,
1.1510 +#page-report-button[open="true"] {
1.1511 + -moz-image-region: rect(0, 48px, 16px, 32px);
1.1512 +}
1.1513 +
1.1514 +
1.1515 +/* social share panel */
1.1516 +
1.1517 +#social-share-panel > iframe {
1.1518 + background: linear-gradient(to bottom, #f0f4f7, #fafbfc);
1.1519 + width: 300px;
1.1520 + height: 150px;
1.1521 +}
1.1522 +
1.1523 +.social-share-toolbar {
1.1524 + border-right: 1px solid #e2e5e8;
1.1525 + background: linear-gradient(to bottom, #ffffff, #f5f7fa);
1.1526 +}
1.1527 +
1.1528 +#social-share-provider-buttons {
1.1529 + padding: 6px;
1.1530 +}
1.1531 +
1.1532 +#social-share-provider-buttons > .share-provider-button {
1.1533 + -moz-appearance: none;
1.1534 + padding: 5px;
1.1535 + margin: 1px;
1.1536 + border: none;
1.1537 + background: none;
1.1538 + border-radius: 2px;
1.1539 +}
1.1540 +
1.1541 +#social-share-provider-buttons > .share-provider-button[checked="true"]:not([disabled="true"]),
1.1542 +#social-share-provider-buttons > .share-provider-button:hover,
1.1543 +#social-share-provider-buttons > .share-provider-button:active {
1.1544 + padding: 4px;
1.1545 + border: 1px solid #aeb8c1;
1.1546 + box-shadow: inset 1px 1px 1px rgba(10, 31, 51, 0.1);
1.1547 +}
1.1548 +
1.1549 +#social-share-provider-buttons > .share-provider-button[checked="true"]:not([disabled="true"]) {
1.1550 + background: linear-gradient(to bottom, rgba(230,232,234,.65), #d2d5d9);
1.1551 +}
1.1552 +
1.1553 +#social-share-provider-buttons > .share-provider-button > .toolbarbutton-text {
1.1554 + display: none;
1.1555 +}
1.1556 +#social-share-provider-buttons > .share-provider-button > .toolbarbutton-icon {
1.1557 + width: 16px;
1.1558 + min-height: 16px;
1.1559 + max-height: 16px;
1.1560 +}
1.1561 +
1.1562 +
1.1563 +toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
1.1564 + width: auto;
1.1565 + height: auto;
1.1566 + max-width: 32px;
1.1567 + max-height: 24px;
1.1568 +}
1.1569 +
1.1570 +/* fixup corners for share panel */
1.1571 +.social-panel > .social-panel-frame {
1.1572 + border-radius: inherit;
1.1573 +}
1.1574 +
1.1575 +#social-share-panel {
1.1576 + max-height: 600px;
1.1577 + min-height: 100px;
1.1578 + max-width: 800px;
1.1579 + min-width: 300px;
1.1580 +}
1.1581 +
1.1582 +.social-share-frame {
1.1583 + background: linear-gradient(to bottom, #f0f4f7, #fafbfc);
1.1584 + width: 330px;
1.1585 + height: 150px;
1.1586 + /* we resize our panels dynamically, make it look nice */
1.1587 + transition: height 100ms ease-out, width 100ms ease-out;
1.1588 +}
1.1589 +
1.1590 +.social-share-frame:-moz-locale-dir(ltr) {
1.1591 + border-top-left-radius: 0;
1.1592 + border-bottom-left-radius: 0;
1.1593 + border-top-right-radius: inherit;
1.1594 + border-bottom-right-radius: inherit;
1.1595 +}
1.1596 +
1.1597 +.social-share-frame:-moz-locale-dir(rtl) {
1.1598 + border-top-left-radius: inherit;
1.1599 + border-bottom-left-radius: inherit;
1.1600 + border-top-right-radius: 0;
1.1601 + border-bottom-right-radius: 0;
1.1602 +}
1.1603 +
1.1604 +#social-share-panel > .social-share-toolbar:-moz-locale-dir(ltr) {
1.1605 + border-top-left-radius: inherit;
1.1606 + border-bottom-left-radius: inherit;
1.1607 +}
1.1608 +
1.1609 +#social-share-panel > .social-share-toolbar:-moz-locale-dir(rtl) {
1.1610 + border-top-right-radius: inherit;
1.1611 + border-bottom-right-radius: inherit;
1.1612 +}
1.1613 +
1.1614 +#social-share-provider-buttons:-moz-locale-dir(ltr) {
1.1615 + border-top-left-radius: inherit;
1.1616 + border-bottom-left-radius: inherit;
1.1617 +}
1.1618 +
1.1619 +#social-share-provider-buttons:-moz-locale-dir(rtl) {
1.1620 + border-top-right-radius: inherit;
1.1621 + border-bottom-right-radius: inherit;
1.1622 +}
1.1623 +
1.1624 +/* social recommending panel */
1.1625 +
1.1626 +#social-mark-button {
1.1627 + -moz-image-region: rect(0, 16px, 16px, 0);
1.1628 +}
1.1629 +
1.1630 +/* bookmarks menu-button */
1.1631 +
1.1632 +#bookmarks-menu-button.bookmark-item {
1.1633 + list-style-image: url("chrome://browser/skin/places/bookmark.png");
1.1634 + -moz-image-region: rect(0px 16px 16px 0px);
1.1635 +}
1.1636 +
1.1637 +#bookmarks-menu-button.bookmark-item[starred] {
1.1638 + -moz-image-region: rect(0px 32px 16px 16px);
1.1639 +}
1.1640 +
1.1641 +#bookmarks-menu-button.bookmark-item > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1.1642 + -moz-margin-start: 5px;
1.1643 +}
1.1644 +
1.1645 +#bookmarks-menu-button[cui-areatype="toolbar"]:not(.bookmark-item):not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1.1646 + padding-top: 2px;
1.1647 + padding-bottom: 2px;
1.1648 +}
1.1649 +
1.1650 +#BMB_bookmarksPopup[side="top"],
1.1651 +#BMB_bookmarksPopup[side="bottom"] {
1.1652 + margin-left: -20px;
1.1653 + margin-right: -20px;
1.1654 +}
1.1655 +
1.1656 +#BMB_bookmarksPopup[side="left"],
1.1657 +#BMB_bookmarksPopup[side="right"] {
1.1658 + margin-top: -20px;
1.1659 + margin-bottom: -20px;
1.1660 +}
1.1661 +
1.1662 +/* bookmarking panel */
1.1663 +
1.1664 +#editBookmarkPanelStarIcon {
1.1665 + list-style-image: url("chrome://browser/skin/places/starred48.png");
1.1666 + width: 48px;
1.1667 + height: 48px;
1.1668 +}
1.1669 +
1.1670 +#editBookmarkPanelStarIcon[unstarred] {
1.1671 + list-style-image: url("chrome://browser/skin/places/unstarred48.png");
1.1672 +}
1.1673 +
1.1674 +#editBookmarkPanelTitle {
1.1675 + font-size: 130%;
1.1676 +}
1.1677 +
1.1678 +#editBookmarkPanelHeader,
1.1679 +#editBookmarkPanelContent {
1.1680 + margin-bottom: .5em;
1.1681 +}
1.1682 +
1.1683 +/* Implements editBookmarkPanel resizing on folderTree un-collapse. */
1.1684 +#editBMPanel_folderTree {
1.1685 + min-width: 27em;
1.1686 +}
1.1687 +
1.1688 +.panel-promo-box {
1.1689 + margin: 10px -10px -10px;
1.1690 + padding: 8px 10px;
1.1691 + border-top: 1px solid ThreeDShadow;
1.1692 + background-image: linear-gradient(hsla(0,0%,0%,.15), hsla(0,0%,0%,.08) 6px);
1.1693 + border-bottom-left-radius: 3px;
1.1694 + border-bottom-right-radius: 3px;
1.1695 +}
1.1696 +
1.1697 +@media (-moz-windows-default-theme) {
1.1698 + .panel-promo-box {
1.1699 + border-top-style: none;
1.1700 + background: #f1f5fb;
1.1701 + color: GrayText;
1.1702 + box-shadow: 0px 1px 2px rgb(204,214,234) inset;
1.1703 + }
1.1704 +}
1.1705 +
1.1706 +.panel-promo-icon {
1.1707 + list-style-image: url("chrome://browser/skin/sync-notification-24.png");
1.1708 + -moz-margin-end: 10px;
1.1709 + vertical-align: middle;
1.1710 +}
1.1711 +
1.1712 +.panel-promo-closebutton {
1.1713 + -moz-appearance: none;
1.1714 + border: none;
1.1715 + -moz-margin-end: -10px;
1.1716 + margin-top: -5px;
1.1717 +}
1.1718 +
1.1719 +.panel-promo-closebutton > .toolbarbutton-text {
1.1720 + padding: 0;
1.1721 + margin: 0;
1.1722 +}
1.1723 +
1.1724 +/* ::::: content area ::::: */
1.1725 +
1.1726 +#sidebar {
1.1727 + background-color: Window;
1.1728 +}
1.1729 +
1.1730 +#sidebar-title {
1.1731 + -moz-padding-start: 0px;
1.1732 +}
1.1733 +
1.1734 +#sidebar-header > .close-icon {
1.1735 + -moz-appearance: none;
1.1736 + padding: 4px 2px;
1.1737 + margin: 0;
1.1738 + border: none;
1.1739 +}
1.1740 +
1.1741 +.browserContainer > findbar {
1.1742 + background-color: -moz-dialog;
1.1743 + color: -moz-DialogText;
1.1744 + text-shadow: none;
1.1745 +}
1.1746 +
1.1747 +/* Tabstrip */
1.1748 +
1.1749 +#TabsToolbar {
1.1750 + min-height: 0;
1.1751 + padding: 0;
1.1752 +}
1.1753 +
1.1754 +#main-window:not([customizing]) #TabsToolbar:not(:-moz-lwtheme) {
1.1755 + background-image: linear-gradient(to top, @toolbarShadowColor@ 2px, rgba(0,0,0,.05) 2px, transparent 50%);
1.1756 +}
1.1757 +
1.1758 +#main-window[tabsintitlebar] #TabsToolbar {
1.1759 + background-color: transparent;
1.1760 +}
1.1761 +
1.1762 +%ifndef WINDOWS_AERO
1.1763 +@media (-moz-windows-default-theme) {
1.1764 + #main-window[sizemode=normal] #TabsToolbar {
1.1765 + padding-left: 2px;
1.1766 + padding-right: 2px;
1.1767 + }
1.1768 +}
1.1769 +%endif
1.1770 +
1.1771 +%include ../shared/tabs.inc.css
1.1772 +
1.1773 +@media (min-resolution: 1.25dppx) {
1.1774 + /* image preloading hack from shared/tabs.inc.css */
1.1775 + #tabbrowser-tabs::before {
1.1776 + background-image:
1.1777 + url(chrome://browser/skin/tabbrowser/tab-background-end@2x.png),
1.1778 + url(chrome://browser/skin/tabbrowser/tab-background-middle@2x.png),
1.1779 + url(chrome://browser/skin/tabbrowser/tab-background-start@2x.png);
1.1780 + }
1.1781 +
1.1782 + .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
1.1783 + .tabs-newtab-button:hover {
1.1784 + background-image: url(chrome://browser/skin/tabbrowser/tab-background-start@2x.png),
1.1785 + url(chrome://browser/skin/tabbrowser/tab-background-middle@2x.png),
1.1786 + url(chrome://browser/skin/tabbrowser/tab-background-end@2x.png);
1.1787 + }
1.1788 +
1.1789 + .tab-background-middle[selected=true] {
1.1790 + background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle@2x.png),
1.1791 + @fgTabTexture@,
1.1792 + none;
1.1793 + }
1.1794 +
1.1795 + .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
1.1796 + .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
1.1797 + background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-start@2x.png);
1.1798 + }
1.1799 +
1.1800 + .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
1.1801 + .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
1.1802 + background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-end@2x.png);
1.1803 + }
1.1804 +}
1.1805 +
1.1806 +%ifndef WINDOWS_AERO
1.1807 +/* Use lighter colors of buttons and text in the titlebar on luna-blue */
1.1808 +@media (-moz-windows-theme: luna-blue) {
1.1809 + #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
1.1810 + .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
1.1811 + #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
1.1812 + background-image: url("chrome://browser/skin/tabbrowser/tab-separator-luna-blue.png");
1.1813 + }
1.1814 +}
1.1815 +%endif
1.1816 +
1.1817 +#TabsToolbar[brighttext] .tab-close-button:not(:hover):not([selected="true"]) {
1.1818 + -moz-image-region: rect(0, 64px, 16px, 48px) !important;
1.1819 +}
1.1820 +
1.1821 +/* tabbrowser-tab focus ring */
1.1822 +.tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label {
1.1823 + outline: 1px dotted;
1.1824 +}
1.1825 +
1.1826 +/* Background tabs:
1.1827 + *
1.1828 + * Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
1.1829 + * of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
1.1830 + * the titlebar. We don't need this in fullscreen since window dragging is not an issue there.
1.1831 + */
1.1832 +#main-window[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar .tab-background-middle:not([selected=true]) {
1.1833 + clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path);
1.1834 +}
1.1835 +
1.1836 +/* Tab DnD indicator */
1.1837 +.tab-drop-indicator {
1.1838 + list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator.png);
1.1839 + margin-bottom: -9px;
1.1840 + z-index: 3;
1.1841 +}
1.1842 +
1.1843 +/* Tab close button */
1.1844 +.tab-close-button {
1.1845 + -moz-appearance: none;
1.1846 + border: none;
1.1847 +}
1.1848 +
1.1849 +/* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
1.1850 +
1.1851 +.tabbrowser-arrowscrollbox > .scrollbutton-up,
1.1852 +.tabbrowser-arrowscrollbox > .scrollbutton-down {
1.1853 + list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-left.png");
1.1854 + margin: 0 0 @tabToolbarNavbarOverlap@;
1.1855 + padding-right: 2px;
1.1856 + border-right: 2px solid transparent;
1.1857 + background-origin: border-box;
1.1858 +}
1.1859 +
1.1860 +#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .scrollbutton-up,
1.1861 +#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .scrollbutton-down {
1.1862 + list-style-image: url(chrome://browser/skin/tabbrowser/tab-arrow-left-inverted.png);
1.1863 +}
1.1864 +
1.1865 +.tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
1.1866 +.tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
1.1867 + opacity: .4;
1.1868 +}
1.1869 +
1.1870 +.tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
1.1871 +.tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
1.1872 + transform: scaleX(-1);
1.1873 +}
1.1874 +
1.1875 +.tabbrowser-arrowscrollbox > .scrollbutton-down {
1.1876 + transition: 1s background-color ease-out;
1.1877 +}
1.1878 +
1.1879 +.tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
1.1880 + background-color: Highlight;
1.1881 + transition: none;
1.1882 +}
1.1883 +
1.1884 +.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
1.1885 +.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
1.1886 + border-width: 0 2px 0 0;
1.1887 + border-style: solid;
1.1888 + border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;
1.1889 +}
1.1890 +
1.1891 +.tabs-newtab-button > .toolbarbutton-icon {
1.1892 + margin-top: -1px;
1.1893 + margin-bottom: -1px;
1.1894 +}
1.1895 +
1.1896 +.tabs-newtab-button,
1.1897 +#TabsToolbar > #new-tab-button,
1.1898 +#TabsToolbar > toolbarpaletteitem > #new-tab-button {
1.1899 + list-style-image: url(chrome://browser/skin/tabbrowser/newtab.png);
1.1900 + -moz-image-region: auto;
1.1901 +}
1.1902 +
1.1903 +#TabsToolbar[brighttext] .tabs-newtab-button,
1.1904 +#TabsToolbar[brighttext] > #new-tab-button,
1.1905 +#TabsToolbar[brighttext] > toolbarpaletteitem > #new-tab-button {
1.1906 + list-style-image: url(chrome://browser/skin/tabbrowser/newtab-inverted.png);
1.1907 +}
1.1908 +
1.1909 +#TabsToolbar > #new-tab-button {
1.1910 + width: 26px;
1.1911 +}
1.1912 +
1.1913 +#alltabs-button {
1.1914 + list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.png");
1.1915 +}
1.1916 +
1.1917 +#TabsToolbar[brighttext] > #alltabs-button,
1.1918 +#TabsToolbar[brighttext] > toolbarpaletteitem > #alltabs-button {
1.1919 + list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow-inverted.png");
1.1920 +}
1.1921 +
1.1922 +#alltabs-button > .toolbarbutton-icon {
1.1923 + margin: 0 2px;
1.1924 +}
1.1925 +
1.1926 +#alltabs-button > .toolbarbutton-menu-dropmarker {
1.1927 + display: none;
1.1928 +}
1.1929 +
1.1930 +/* All tabs menupopup */
1.1931 +.alltabs-item > .menu-iconic-left > .menu-iconic-icon {
1.1932 + list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
1.1933 +}
1.1934 +
1.1935 +.alltabs-item[selected="true"] {
1.1936 + font-weight: bold;
1.1937 +}
1.1938 +
1.1939 +.alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
1.1940 + list-style-image: url("chrome://global/skin/icons/loading_16.png");
1.1941 +}
1.1942 +
1.1943 +.alltabs-item[tabIsVisible] {
1.1944 + /* box-shadow instead of background-color to work around native styling */
1.1945 + box-shadow: inset -5px 0 ThreeDShadow;
1.1946 +}
1.1947 +
1.1948 +toolbarbutton.chevron {
1.1949 + list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
1.1950 +}
1.1951 +
1.1952 +toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1.1953 + transform: scaleX(-1);
1.1954 +}
1.1955 +
1.1956 +toolbarbutton.chevron > .toolbarbutton-text,
1.1957 +toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
1.1958 + display: none;
1.1959 +}
1.1960 +
1.1961 +toolbarbutton.chevron > .toolbarbutton-icon {
1.1962 + margin: 0;
1.1963 +}
1.1964 +
1.1965 +#sidebar-throbber[loading="true"] {
1.1966 + list-style-image: url("chrome://global/skin/icons/loading_16.png");
1.1967 + -moz-margin-end: 4px;
1.1968 +}
1.1969 +
1.1970 +/* Bookmarks toolbar */
1.1971 +#PlacesToolbarDropIndicator {
1.1972 + list-style-image: url(chrome://browser/skin/places/toolbarDropMarker.png);
1.1973 +}
1.1974 +
1.1975 +toolbarbutton.bookmark-item[dragover="true"][open="true"] {
1.1976 + -moz-appearance: none;
1.1977 + background: Highlight !important;
1.1978 + color: HighlightText !important;
1.1979 +}
1.1980 +
1.1981 +/* rules for menupopup drop indicators */
1.1982 +.menupopup-drop-indicator-bar {
1.1983 + position: relative;
1.1984 + /* these two margins must together compensate the indicator's height */
1.1985 + margin-top: -1px;
1.1986 + margin-bottom: -1px;
1.1987 +}
1.1988 +
1.1989 +.menupopup-drop-indicator {
1.1990 + list-style-image: none;
1.1991 + height: 2px;
1.1992 + -moz-margin-end: -4em;
1.1993 + background-color: Highlight;
1.1994 +}
1.1995 +
1.1996 +/* ::::: Identity Indicator Styling ::::: */
1.1997 +
1.1998 +/* Popup Icons */
1.1999 +#identity-popup-icon {
1.2000 + height: 64px;
1.2001 + width: 64px;
1.2002 + padding: 0;
1.2003 + list-style-image: url("chrome://browser/skin/identity.png");
1.2004 + -moz-image-region: rect(0px, 64px, 64px, 0px);
1.2005 +}
1.2006 +
1.2007 +#identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon {
1.2008 + -moz-image-region: rect(64px, 64px, 128px, 0px);
1.2009 +}
1.2010 +
1.2011 +#identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon {
1.2012 + -moz-image-region: rect(128px, 64px, 192px, 0px);
1.2013 +}
1.2014 +
1.2015 +/* Popup Body Text */
1.2016 +.identity-popup-description {
1.2017 + white-space: pre-wrap;
1.2018 + -moz-padding-start: 15px;
1.2019 + margin: 2px 0 4px;
1.2020 +}
1.2021 +
1.2022 +.identity-popup-label {
1.2023 + white-space: pre-wrap;
1.2024 + -moz-padding-start: 15px;
1.2025 + margin: 0;
1.2026 +}
1.2027 +
1.2028 +#identity-popup-content-host,
1.2029 +#identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner {
1.2030 + font-size: 1.2em;
1.2031 +}
1.2032 +
1.2033 +#identity-popup-content-host {
1.2034 + margin-top: 3px;
1.2035 + margin-bottom: 5px;
1.2036 + font-weight: bold;
1.2037 + max-width: 300px;
1.2038 +}
1.2039 +
1.2040 +#identity-popup-content-owner {
1.2041 + margin-top: 4px;
1.2042 + margin-bottom: 0 !important;
1.2043 + font-weight: bold;
1.2044 + max-width: 300px;
1.2045 +}
1.2046 +
1.2047 +.verifiedDomain > #identity-popup-content-owner {
1.2048 + font-weight: normal;
1.2049 +}
1.2050 +
1.2051 +#identity-popup-content-verifier {
1.2052 + margin: 4px 0 2px;
1.2053 +}
1.2054 +
1.2055 +#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption ,
1.2056 +#identity-popup-content-box.verifiedDomain > #identity-popup-encryption {
1.2057 + margin-top: 10px;
1.2058 + -moz-margin-start: -24px;
1.2059 +}
1.2060 +
1.2061 +#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon ,
1.2062 +#identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon {
1.2063 + list-style-image: url("chrome://browser/skin/Secure24.png");
1.2064 +}
1.2065 +
1.2066 +#identity-popup-help-icon {
1.2067 + -moz-appearance: none;
1.2068 + border: none;
1.2069 + margin: 7px 0 0 -3px;
1.2070 + background: none;
1.2071 + min-width: 0;
1.2072 + list-style-image: url("chrome://global/skin/icons/question-16.png");
1.2073 + cursor: pointer;
1.2074 +}
1.2075 +
1.2076 +#identity-popup-help-icon > .button-box > .button-text {
1.2077 + display: none;
1.2078 +}
1.2079 +
1.2080 +#identity-popup-help-icon > .button-box > .button-icon {
1.2081 + height: 16px;
1.2082 + width: 16px;
1.2083 +}
1.2084 +
1.2085 +#identity-popup-more-info-button {
1.2086 + margin-top: 6px;
1.2087 + margin-bottom: 0;
1.2088 + -moz-margin-end: 0;
1.2089 +}
1.2090 +
1.2091 +#identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
1.2092 + padding: 0;
1.2093 +}
1.2094 +
1.2095 +#identity-popup-container {
1.2096 + min-width: 280px;
1.2097 + padding: 10px;
1.2098 +}
1.2099 +
1.2100 +#identity-popup-button-container {
1.2101 + background: linear-gradient(to bottom, rgba(0,0,0,0.04) 60%, transparent);
1.2102 + padding: 10px;
1.2103 + margin-top: 5px;
1.2104 +}
1.2105 +
1.2106 +.popup-notification-icon {
1.2107 + width: 64px;
1.2108 + height: 64px;
1.2109 + -moz-margin-end: 10px;
1.2110 +}
1.2111 +
1.2112 +.popup-notification-icon[popupid="geolocation"] {
1.2113 + list-style-image: url(chrome://browser/skin/Geolocation-64.png);
1.2114 +}
1.2115 +
1.2116 +.popup-notification-icon[popupid="xpinstall-disabled"],
1.2117 +.popup-notification-icon[popupid="addon-progress"],
1.2118 +.popup-notification-icon[popupid="addon-install-cancelled"],
1.2119 +.popup-notification-icon[popupid="addon-install-blocked"],
1.2120 +.popup-notification-icon[popupid="addon-install-failed"],
1.2121 +.popup-notification-icon[popupid="addon-install-complete"] {
1.2122 + list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png);
1.2123 + width: 32px;
1.2124 + height: 32px;
1.2125 +}
1.2126 +
1.2127 +.popup-notification-icon[popupid="click-to-play-plugins"] {
1.2128 + list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
1.2129 +}
1.2130 +
1.2131 +.popup-notification-icon[popupid="plugins-not-found"] {
1.2132 + list-style-image: url(chrome://browser/skin/pluginInstall-64.png);
1.2133 +}
1.2134 +
1.2135 +.popup-notification-icon[popupid="web-notifications"] {
1.2136 + list-style-image: url(chrome://browser/skin/notification-64.png);
1.2137 +}
1.2138 +
1.2139 +.addon-progress-description {
1.2140 + width: 350px;
1.2141 + max-width: 350px;
1.2142 +}
1.2143 +
1.2144 +.popup-progress-label,
1.2145 +.popup-progress-meter {
1.2146 + -moz-margin-start: 0;
1.2147 + -moz-margin-end: 0;
1.2148 +}
1.2149 +
1.2150 +.popup-progress-cancel {
1.2151 + -moz-appearance: none;
1.2152 + background: transparent;
1.2153 + border: none;
1.2154 + padding: 0;
1.2155 + margin: 0;
1.2156 + min-height: 0;
1.2157 + min-width: 0;
1.2158 + list-style-image: url(chrome://mozapps/skin/downloads/downloadButtons.png);
1.2159 + -moz-image-region: rect(0px, 32px, 16px, 16px);
1.2160 +}
1.2161 +
1.2162 +.popup-progress-cancel:hover {
1.2163 + -moz-image-region: rect(16px, 32px, 32px, 16px);
1.2164 +}
1.2165 +
1.2166 +.popup-progress-cancel:active {
1.2167 + -moz-image-region: rect(32px, 32px, 48px, 16px);
1.2168 +}
1.2169 +
1.2170 +.popup-notification-icon[popupid="canvas-permissions-prompt"] {
1.2171 + list-style-image: url(chrome://browser/skin/canvas-popup.svg);
1.2172 +}
1.2173 +
1.2174 +.popup-notification-icon[popupid="indexedDB-permissions-prompt"],
1.2175 +.popup-notification-icon[popupid="indexedDB-quota-prompt"],
1.2176 +.popup-notification-icon[popupid*="offline-app-requested"],
1.2177 +.popup-notification-icon[popupid="offline-app-usage"] {
1.2178 + list-style-image: url(chrome://global/skin/icons/question-64.png);
1.2179 +}
1.2180 +
1.2181 +.popup-notification-icon[popupid="password-save"],
1.2182 +.popup-notification-icon[popupid="password-change"] {
1.2183 + list-style-image: url(chrome://mozapps/skin/passwordmgr/key-64.png);
1.2184 +}
1.2185 +
1.2186 +.popup-notification-icon[popupid="webapps-install-progress"],
1.2187 +.popup-notification-icon[popupid="webapps-install"] {
1.2188 + list-style-image: url(chrome://global/skin/icons/webapps-64.png);
1.2189 +}
1.2190 +
1.2191 +.popup-notification-icon[popupid="mixed-content-blocked"] {
1.2192 + list-style-image: url(chrome://browser/skin/mixed-content-blocked-64.png);
1.2193 +}
1.2194 +
1.2195 +.popup-notification-icon[popupid="webRTC-sharingDevices"],
1.2196 +.popup-notification-icon[popupid="webRTC-shareDevices"] {
1.2197 + list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png);
1.2198 +}
1.2199 +
1.2200 +.popup-notification-icon[popupid="webRTC-sharingMicrophone"],
1.2201 +.popup-notification-icon[popupid="webRTC-shareMicrophone"] {
1.2202 + list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64.png);
1.2203 +}
1.2204 +
1.2205 +.popup-notification-icon[popupid="pointerLock"] {
1.2206 + list-style-image: url(chrome://browser/skin/pointerLock-64.png);
1.2207 +}
1.2208 +
1.2209 +/* Notification icon box */
1.2210 +#notification-popup-box {
1.2211 + position: relative;
1.2212 + background-color: #fff;
1.2213 + background-clip: padding-box;
1.2214 + padding-left: 3px;
1.2215 + border-radius: 2.5px 0 0 2.5px;
1.2216 + border-width: 0 8px 0 0;
1.2217 + border-style: solid;
1.2218 + border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 fill;
1.2219 + -moz-margin-end: -8px;
1.2220 +}
1.2221 +
1.2222 +@conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box {
1.2223 + padding-left: 7px;
1.2224 +}
1.2225 +
1.2226 +#notification-popup-box:-moz-locale-dir(rtl),
1.2227 +.notification-anchor-icon:-moz-locale-dir(rtl) {
1.2228 + transform: scaleX(-1);
1.2229 +}
1.2230 +
1.2231 +.notification-anchor-icon {
1.2232 + width: 16px;
1.2233 + height: 16px;
1.2234 + margin: 0 2px;
1.2235 +}
1.2236 +
1.2237 +.notification-anchor-icon:-moz-focusring {
1.2238 + outline: 1px dotted -moz-DialogText;
1.2239 + outline-offset: -3px;
1.2240 +}
1.2241 +
1.2242 +.default-notification-icon,
1.2243 +#default-notification-icon {
1.2244 + list-style-image: url(chrome://global/skin/icons/information-16.png);
1.2245 +}
1.2246 +
1.2247 +.identity-notification-icon,
1.2248 +#identity-notification-icon {
1.2249 + list-style-image: url(chrome://mozapps/skin/profile/profileicon.png);
1.2250 +}
1.2251 +
1.2252 +.geo-notification-icon,
1.2253 +#geo-notification-icon {
1.2254 + list-style-image: url(chrome://browser/skin/Geolocation-16.png);
1.2255 +}
1.2256 +
1.2257 +#addons-notification-icon {
1.2258 + list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png);
1.2259 +}
1.2260 +
1.2261 +#canvas-notification-icon {
1.2262 + list-style-image: url(chrome://browser/skin/canvas-popup.svg);
1.2263 +}
1.2264 +
1.2265 +.indexedDB-notification-icon,
1.2266 +#indexedDB-notification-icon {
1.2267 + list-style-image: url(chrome://global/skin/icons/question-16.png);
1.2268 +}
1.2269 +
1.2270 +#password-notification-icon {
1.2271 + list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
1.2272 +}
1.2273 +
1.2274 +#webapps-notification-icon {
1.2275 + list-style-image: url(chrome://global/skin/icons/webapps-16.png);
1.2276 +}
1.2277 +
1.2278 +#plugins-notification-icon {
1.2279 + list-style-image: url(chrome://browser/skin/notification-pluginNormal.png);
1.2280 +}
1.2281 +#plugins-notification-icon.plugin-hidden {
1.2282 + list-style-image: url(chrome://browser/skin/notification-pluginAlert.png);
1.2283 +}
1.2284 +
1.2285 +#plugins-notification-icon.plugin-blocked {
1.2286 + list-style-image: url(chrome://browser/skin/notification-pluginBlocked.png);
1.2287 +}
1.2288 +
1.2289 +#plugins-notification-icon {
1.2290 + -moz-image-region: rect(0, 16px, 16px, 0);
1.2291 +}
1.2292 +
1.2293 +#plugins-notification-icon:hover {
1.2294 + -moz-image-region: rect(0, 32px, 16px, 16px);
1.2295 +}
1.2296 +
1.2297 +#plugins-notification-icon:active {
1.2298 + -moz-image-region: rect(0, 48px, 16px, 32px);
1.2299 +}
1.2300 +
1.2301 +#plugin-install-notification-icon {
1.2302 + list-style-image: url(chrome://browser/skin/pluginInstall-16.png);
1.2303 +}
1.2304 +
1.2305 +#notification-popup-box[hidden] {
1.2306 + /* Override display:none to make the pluginBlockedNotification animation work
1.2307 + when showing the notification repeatedly. */
1.2308 + display: -moz-box;
1.2309 + visibility: collapse;
1.2310 +}
1.2311 +
1.2312 +#plugins-notification-icon.plugin-blocked[showing] {
1.2313 + animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
1.2314 +}
1.2315 +
1.2316 +@keyframes pluginBlockedNotification {
1.2317 + from {
1.2318 + opacity: 0;
1.2319 + }
1.2320 + to {
1.2321 + opacity: 1;
1.2322 + }
1.2323 +}
1.2324 +
1.2325 +.mixed-content-blocked-notification-icon,
1.2326 +#mixed-content-blocked-notification-icon {
1.2327 + list-style-image: url(chrome://browser/skin/mixed-content-blocked-16.png);
1.2328 +}
1.2329 +
1.2330 +.webRTC-shareDevices-notification-icon,
1.2331 +#webRTC-shareDevices-notification-icon {
1.2332 + list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16.png);
1.2333 +}
1.2334 +
1.2335 +.webRTC-sharingDevices-notification-icon,
1.2336 +#webRTC-sharingDevices-notification-icon {
1.2337 + list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16.png);
1.2338 +}
1.2339 +
1.2340 +.webRTC-shareMicrophone-notification-icon,
1.2341 +#webRTC-shareMicrophone-notification-icon {
1.2342 + list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16.png);
1.2343 +}
1.2344 +
1.2345 +.webRTC-sharingMicrophone-notification-icon,
1.2346 +#webRTC-sharingMicrophone-notification-icon {
1.2347 + list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16.png);
1.2348 +}
1.2349 +
1.2350 +.web-notifications-notification-icon,
1.2351 +#web-notifications-notification-icon {
1.2352 + list-style-image: url(chrome://browser/skin/notification-16.png);
1.2353 +}
1.2354 +
1.2355 +#pointerLock-notification-icon {
1.2356 + list-style-image: url(chrome://browser/skin/pointerLock-16.png);
1.2357 +}
1.2358 +#pointerLock-cancel {
1.2359 + margin: 0px;
1.2360 +}
1.2361 +
1.2362 +.translate-notification-icon,
1.2363 +#translate-notification-icon {
1.2364 + list-style-image: url(chrome://browser/skin/translation-16.png);
1.2365 + -moz-image-region: rect(0px, 16px, 16px, 0px);
1.2366 +}
1.2367 +
1.2368 +.translated-notification-icon,
1.2369 +#translated-notification-icon {
1.2370 + list-style-image: url(chrome://browser/skin/translation-16.png);
1.2371 + -moz-image-region: rect(0px, 32px, 16px, 16px);
1.2372 +}
1.2373 +
1.2374 +/* Bookmarks roots menu-items */
1.2375 +#subscribeToPageMenuitem:not([disabled]),
1.2376 +#subscribeToPageMenupopup,
1.2377 +#BMB_subscribeToPageMenuitem:not([disabled]),
1.2378 +#BMB_subscribeToPageMenupopup {
1.2379 + list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
1.2380 +}
1.2381 +
1.2382 +#bookmarksToolbarFolderMenu,
1.2383 +#BMB_bookmarksToolbar,
1.2384 +#panelMenu_bookmarksToolbar {
1.2385 + list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png");
1.2386 + -moz-image-region: auto;
1.2387 +}
1.2388 +
1.2389 +#BMB_unsortedBookmarks,
1.2390 +#panelMenu_unsortedBookmarks {
1.2391 + list-style-image: url("chrome://browser/skin/places/unsortedBookmarks.png");
1.2392 + -moz-image-region: auto;
1.2393 +}
1.2394 +
1.2395 +/* ::::: Keyboard UI Panel ::::: */
1.2396 +
1.2397 +.KUI-panel {
1.2398 + -moz-appearance: none;
1.2399 + background: rgba(27%,27%,27%,.9) url(KUI-background.png) repeat-x;
1.2400 + color: white;
1.2401 + border-style: none;
1.2402 + border-radius: 20px;
1.2403 +}
1.2404 +
1.2405 +.KUI-panel[level="top"] {
1.2406 + background-color: rgba(27%,27%,27%,.65);
1.2407 +}
1.2408 +
1.2409 +/* Ctrl-Tab */
1.2410 +
1.2411 +#ctrlTab-panel {
1.2412 + padding: 20px 10px 10px;
1.2413 + font-weight: bold;
1.2414 + text-shadow: 0 0 1px rgb(27%,27%,27%), 0 0 2px rgb(27%,27%,27%);
1.2415 +}
1.2416 +
1.2417 +.ctrlTab-favicon[src] {
1.2418 + background-color: white;
1.2419 + width: 20px;
1.2420 + height: 20px;
1.2421 + padding: 2px;
1.2422 +}
1.2423 +
1.2424 +.ctrlTab-preview-inner > .tabPreview-canvas {
1.2425 + box-shadow: 1px 1px 2px rgb(12%,12%,12%);
1.2426 +}
1.2427 +
1.2428 +.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
1.2429 + margin-bottom: 2px;
1.2430 +}
1.2431 +
1.2432 +.ctrlTab-preview-inner {
1.2433 + padding-bottom: 10px;
1.2434 +}
1.2435 +
1.2436 +#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
1.2437 + padding: 10px;
1.2438 + background-color: rgba(255,255,255,.2);
1.2439 + border-radius: .5em;
1.2440 +}
1.2441 +
1.2442 +.ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
1.2443 + color: white;
1.2444 + background-color: rgba(0,0,0,.6);
1.2445 + text-shadow: none;
1.2446 + padding: 8px;
1.2447 + border: 2px solid white;
1.2448 + border-radius: .5em;
1.2449 +}
1.2450 +
1.2451 +.ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
1.2452 + margin: -10px -10px 0;
1.2453 +}
1.2454 +
1.2455 +#ctrlTab-showAll {
1.2456 + margin-top: .5em;
1.2457 +}
1.2458 +
1.2459 +/* Sync Panel */
1.2460 +
1.2461 +.sync-panel-icon {
1.2462 + height:32px;
1.2463 + width: 32px;
1.2464 + background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
1.2465 +}
1.2466 +
1.2467 +.sync-panel-inner {
1.2468 + width: 0;
1.2469 + padding-left: 10px;
1.2470 +}
1.2471 +
1.2472 +.sync-panel-button-box {
1.2473 + margin-top: 1em;
1.2474 +}
1.2475 +
1.2476 +#sync-error-panel-title,
1.2477 +#sync-start-panel-title {
1.2478 + font-size: 120%;
1.2479 + font-weight: bold;
1.2480 + margin-bottom: 5px;
1.2481 +}
1.2482 +
1.2483 +#sync-start-panel-subtitle,
1.2484 +#sync-error-panel-subtitle {
1.2485 + margin: 0;
1.2486 +}
1.2487 +
1.2488 +/* Status panel */
1.2489 +
1.2490 +.statuspanel-label {
1.2491 + margin: 0;
1.2492 + padding: 2px 4px;
1.2493 + background: linear-gradient(#fff, #ddd);
1.2494 + border: 1px none #ccc;
1.2495 + border-top-style: solid;
1.2496 + color: #333;
1.2497 + text-shadow: none;
1.2498 +}
1.2499 +
1.2500 +.statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
1.2501 +.statuspanel-label:-moz-locale-dir(rtl)[mirror] {
1.2502 + border-right-style: solid;
1.2503 + /* disabled for triggering grayscale AA (bug 659213)
1.2504 + border-top-right-radius: .3em;
1.2505 + */
1.2506 + margin-right: 1em;
1.2507 +}
1.2508 +
1.2509 +.statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
1.2510 +.statuspanel-label:-moz-locale-dir(ltr)[mirror] {
1.2511 + border-left-style: solid;
1.2512 + /* disabled for triggering grayscale AA (bug 659213)
1.2513 + border-top-left-radius: .3em;
1.2514 + */
1.2515 + margin-left: 1em;
1.2516 +}
1.2517 +
1.2518 +#full-screen-warning-message {
1.2519 + background-image: url("chrome://browser/skin/fullscreen-darknoise.png");
1.2520 + color: white;
1.2521 + border-radius: 4px;
1.2522 + margin-top: 30px;
1.2523 + padding: 30px 50px;
1.2524 + box-shadow: 0 0 2px white;
1.2525 +}
1.2526 +
1.2527 +#full-screen-warning-container[obscure-browser] {
1.2528 + background-color: rgba(0,0,0,0.3);
1.2529 +}
1.2530 +
1.2531 +.full-screen-description {
1.2532 + font-size: 150%;
1.2533 +}
1.2534 +
1.2535 +#full-screen-domain-text {
1.2536 + font-size: 300%;
1.2537 +}
1.2538 +
1.2539 +.full-screen-approval-button,
1.2540 +#full-screen-remember-decision {
1.2541 + font-size: 120%;
1.2542 +}
1.2543 +
1.2544 +%include ../shared/devtools/responsivedesign.inc.css
1.2545 +%include ../shared/devtools/highlighter.inc.css
1.2546 +%include ../shared/devtools/commandline.inc.css
1.2547 +%include ../shared/plugin-doorhanger.inc.css
1.2548 +
1.2549 +%include downloads/indicator.css
1.2550 +
1.2551 +/* Error counter */
1.2552 +
1.2553 +#developer-toolbar-toolbox-button[error-count]:before {
1.2554 + color: #FDF3DE;
1.2555 + min-width: 16px;
1.2556 + text-shadow: none;
1.2557 + background-image: linear-gradient(#B4211B, #8A1915);
1.2558 + border-radius: 1px;
1.2559 + -moz-margin-end: 5px;
1.2560 +}
1.2561 +
1.2562 +/* Social toolbar item */
1.2563 +
1.2564 +#social-provider-button {
1.2565 + -moz-image-region: rect(0, 16px, 16px, 0);
1.2566 + list-style-image: url(chrome://browser/skin/social/services-16.png);
1.2567 +}
1.2568 +
1.2569 +#social-provider-button > .toolbarbutton-menu-dropmarker {
1.2570 + display: none;
1.2571 +}
1.2572 +
1.2573 +#switch-to-metro-button[cui-areatype="toolbar"] {
1.2574 + list-style-image: url(chrome://browser/skin/Metro_Glyph.png);
1.2575 +}
1.2576 +
1.2577 +toolbar[brighttext] #switch-to-metro-button[cui-areatype="toolbar"] {
1.2578 + list-style-image: url(chrome://browser/skin/Metro_Glyph-inverted.png);
1.2579 +}
1.2580 +
1.2581 +#switch-to-metro-button[cui-areatype="menu-panel"],
1.2582 +toolbarpaletteitem[place="palette"] > #switch-to-metro-button {
1.2583 + list-style-image: url(chrome://browser/skin/Metro_Glyph-menuPanel.png);
1.2584 +}
1.2585 +
1.2586 +.toolbarbutton-badge-container {
1.2587 + margin: 0;
1.2588 + padding: 0;
1.2589 + position: relative;
1.2590 +}
1.2591 +
1.2592 +#nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container {
1.2593 + padding: 2px 5px;
1.2594 +}
1.2595 +
1.2596 +.toolbarbutton-1 > .toolbarbutton-badge-container > .toolbar-icon {
1.2597 + position: absolute;
1.2598 + top: 2px;
1.2599 + right: 2px;
1.2600 +}
1.2601 +
1.2602 +.toolbarbutton-badge-container > .toolbarbutton-icon[label]:not([label=""]) {
1.2603 + -moz-margin-end: 0;
1.2604 +}
1.2605 +
1.2606 +.toolbarbutton-badge[badge=""] {
1.2607 + display: none;
1.2608 +}
1.2609 +.toolbarbutton-badge[badge]:not([badge=""])::after {
1.2610 + /* The |content| property is set in the content stylesheet. */
1.2611 + font-size: 9px;
1.2612 + font-weight: bold;
1.2613 + padding: 0 1px;
1.2614 + color: #fff;
1.2615 + background-color: rgb(240,61,37);
1.2616 + border: 1px solid rgb(216,55,34);
1.2617 + border-radius: 2px;
1.2618 + box-shadow: 0 1px 0 rgba(0,39,121,0.77);
1.2619 + position: absolute;
1.2620 + top: 0;
1.2621 + right: 0;
1.2622 +}
1.2623 +
1.2624 +#nav-bar .toolbarbutton-badge[badge]:not([badge=""])::after {
1.2625 + top: 1px;
1.2626 + right: 1px;
1.2627 +}
1.2628 +
1.2629 +.toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
1.2630 + left: 0;
1.2631 + right: auto;
1.2632 +}
1.2633 +
1.2634 +#nav-bar .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
1.2635 + left: 1px;
1.2636 + right: auto;
1.2637 +}
1.2638 +
1.2639 +.popup-notification-icon[popupid="servicesInstall"] {
1.2640 + list-style-image: url(chrome://browser/skin/social/services-64.png);
1.2641 +}
1.2642 +#servicesInstall-notification-icon {
1.2643 + list-style-image: url(chrome://browser/skin/social/services-16.png);
1.2644 +}
1.2645 +#social-undoactivation-button {
1.2646 + -moz-margin-start: 0; /* override default label margin to match description margin */
1.2647 +}
1.2648 +
1.2649 +#socialActivatedNotification .popup-notification-button-container {
1.2650 + margin-left: 6px;
1.2651 +}
1.2652 +
1.2653 +.social-activation-icon {
1.2654 + width: auto;
1.2655 + height: auto;
1.2656 + max-height: 64px;
1.2657 + max-width: 64px;
1.2658 +}
1.2659 +
1.2660 +#social-activation-message {
1.2661 + max-width: 250px;
1.2662 +}
1.2663 +
1.2664 +#social-activation-message > label {
1.2665 + margin: 0;
1.2666 +}
1.2667 +
1.2668 +/* social toolbar provider menu */
1.2669 +.social-statusarea-popup {
1.2670 + margin-top: 0;
1.2671 + margin-left: -12px;
1.2672 + margin-right: -12px;
1.2673 +}
1.2674 +
1.2675 +.social-statusarea-user {
1.2676 + -moz-appearance: none;
1.2677 + border-bottom: 1px solid rgb(221,221,221);
1.2678 + background-color: -moz-Dialog;
1.2679 + position: relative;
1.2680 + cursor: pointer;
1.2681 + list-style-image:url("chrome://global/skin/icons/information-32.png");
1.2682 +}
1.2683 +
1.2684 +.social-statusarea-user-portrait {
1.2685 + width: 32px;
1.2686 + height: 32px;
1.2687 + border-radius: 2px;
1.2688 + margin: 10px;
1.2689 +}
1.2690 +
1.2691 +.social-statusarea-loggedInStatus {
1.2692 + -moz-appearance: none;
1.2693 + background: transparent;
1.2694 + border: none;
1.2695 + color: -moz-nativehyperlinktext;
1.2696 + min-width: 0;
1.2697 + margin: 0 6px;
1.2698 + list-style-image: none;
1.2699 +}
1.2700 +
1.2701 +.social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
1.2702 + text-decoration: underline;
1.2703 +}
1.2704 +
1.2705 +.social-panel > .panel-arrowcontainer > .panel-arrowcontent {
1.2706 + padding: 0;
1.2707 +}
1.2708 +
1.2709 +.social-panel-frame {
1.2710 + border-radius: inherit;
1.2711 +}
1.2712 +
1.2713 +%include ../shared/social/chat.inc.css
1.2714 +
1.2715 +.chat-titlebar {
1.2716 + background-color: #c4cfde;
1.2717 + background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
1.2718 +}
1.2719 +
1.2720 +.chat-titlebar[selected] {
1.2721 + background-color: #dae3f0;
1.2722 +}
1.2723 +
1.2724 +.chatbar-button {
1.2725 + -moz-appearance: none;
1.2726 + background-color: #c4cfde;
1.2727 + background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
1.2728 +}
1.2729 +
1.2730 +.chatbar-button > .toolbarbutton-icon {
1.2731 + -moz-margin-end: 0;
1.2732 +}
1.2733 +
1.2734 +.chatbar-button:hover,
1.2735 +.chatbar-button[open="true"] {
1.2736 + background-color: #dae3f0;
1.2737 +}
1.2738 +
1.2739 +.chatbar-button[activity]:not([open="true"]) {
1.2740 + background-image: radial-gradient(circle farthest-corner at center 3px, rgb(255,255,255) 3%, rgba(186,221,251,0.75) 40%, rgba(127,179,255,0.5) 80%, rgba(127,179,255,0.25));
1.2741 +}
1.2742 +
1.2743 +chatbox {
1.2744 + border-top-left-radius: 2.5px;
1.2745 + border-top-right-radius: 2.5px;
1.2746 +}
1.2747 +
1.2748 +/* Customization mode */
1.2749 +
1.2750 +%include ../shared/customizableui/customizeMode.inc.css
1.2751 +
1.2752 +/**
1.2753 + * This next rule is a hack to disable subpixel anti-aliasing on all
1.2754 + * labels during the customize mode transition. Subpixel anti-aliasing
1.2755 + * on Windows with Direct2D layers acceleration is particularly slow to
1.2756 + * paint, so this hack is how we sidestep that performance bottleneck.
1.2757 + */
1.2758 +#main-window:-moz-any([customize-entering],[customize-exiting]) label {
1.2759 + transform: perspective(0.01px);
1.2760 +}
1.2761 +
1.2762 +#main-window[customize-entered] {
1.2763 + background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
1.2764 + background-attachment: fixed;
1.2765 +}
1.2766 +
1.2767 +#main-window[customize-entered] #browser-bottombox,
1.2768 +#main-window[customize-entered] #customization-container {
1.2769 + border-left: 1px solid @toolbarShadowColor@;
1.2770 + border-right: 1px solid @toolbarShadowColor@;
1.2771 + background-clip: padding-box;
1.2772 +}
1.2773 +
1.2774 +#main-window[customize-entered] #browser-bottombox {
1.2775 + border-bottom: 1px solid @toolbarShadowColor@;
1.2776 +}
1.2777 +
1.2778 +#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
1.2779 + margin-right: -2px;
1.2780 +}
1.2781 +
1.2782 +#customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
1.2783 + margin-left: -2px;
1.2784 +}
1.2785 +
1.2786 +/* End customization mode */
1.2787 +
1.2788 +/* Private browsing indicators */
1.2789 +
1.2790 +/**
1.2791 + * Currently, we have two places where we put private browsing indicators on
1.2792 + * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
1.2793 + * When tabsintitlebar is disabled, we draw the indicator at the end of the
1.2794 + * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
1.2795 + * want the bottom border of the image to line up with the bottom of the window
1.2796 + * caption buttons. That's why there's so much special-casing going on in here.
1.2797 + */
1.2798 +.private-browsing-indicator {
1.2799 + display: none;
1.2800 + pointer-events: none;
1.2801 +}
1.2802 +
1.2803 +#private-browsing-indicator-titlebar {
1.2804 + display: block;
1.2805 + position: absolute;
1.2806 +}
1.2807 +
1.2808 +#main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
1.2809 + display: block;
1.2810 +}
1.2811 +
1.2812 +#main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
1.2813 + display: -moz-box;
1.2814 +}
1.2815 +
1.2816 +#TabsToolbar > .private-browsing-indicator {
1.2817 + background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
1.2818 + -moz-margin-start: 4px;
1.2819 + width: 48px;
1.2820 +}
1.2821 +
1.2822 +/* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
1.2823 + * mode, since the tabstrip "mimics" the titlebar in that case with its own
1.2824 + * min/max/close window buttons.
1.2825 + */
1.2826 +#private-browsing-indicator-titlebar > .private-browsing-indicator,
1.2827 +#main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
1.2828 + background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
1.2829 + -moz-margin-end: 4px;
1.2830 + width: 40px;
1.2831 + height: 20px;
1.2832 + position: relative;
1.2833 +}
1.2834 +
1.2835 +%ifndef WINDOWS_AERO
1.2836 +#TabsToolbar > .private-browsing-indicator {
1.2837 + background-image: url("chrome://browser/skin/privatebrowsing-mask-tabstrip-XPVista7.png");
1.2838 +}
1.2839 +
1.2840 +@media not all and (-moz-windows-classic) {
1.2841 + #private-browsing-indicator-titlebar > .private-browsing-indicator {
1.2842 + background-image: url("chrome://browser/skin/privatebrowsing-mask-titlebar-XPVista7-tall.png");
1.2843 + height: 28px;
1.2844 + }
1.2845 +
1.2846 + /* We're intentionally using the titlebar asset here for fullscreen mode.
1.2847 + * See bug 1008183.
1.2848 + */
1.2849 + #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
1.2850 + background-image: url("chrome://browser/skin/privatebrowsing-mask-titlebar-XPVista7.png");
1.2851 + }
1.2852 +
1.2853 + #main-window[sizemode="maximized"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator {
1.2854 + top: -5px;
1.2855 + }
1.2856 + #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator {
1.2857 + top: -1px;
1.2858 + }
1.2859 +}
1.2860 +%endif
1.2861 +
1.2862 +@media (-moz-windows-classic) {
1.2863 + /* We're intentionally using the titlebar asset here for fullscreen mode.
1.2864 + * See bug 1008183.
1.2865 + */
1.2866 + #private-browsing-indicator-titlebar > .private-browsing-indicator,
1.2867 + #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
1.2868 + background-image: url("chrome://browser/skin/privatebrowsing-mask-titlebar-XPVista7.png");
1.2869 + }
1.2870 + /**
1.2871 + * We have to use top instead of background-position in this case, otherwise
1.2872 + * the bottom of the indicator would get cut off by the bounds of the
1.2873 + * private-browsing-indicator element.
1.2874 + */
1.2875 + #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator {
1.2876 + top: 4px;
1.2877 + }
1.2878 +}
1.2879 +
1.2880 +/* End private browsing indicators */
1.2881 +
1.2882 +%include ../shared/UITour.inc.css
1.2883 +
1.2884 +#UITourTooltipButtons {
1.2885 + margin: 24px -4px -4px;
1.2886 +}
