browser/themes/windows/browser.css

Wed, 31 Dec 2014 06:09:35 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 06:09:35 +0100
changeset 0
6474c204b198
permissions
-rw-r--r--

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

michael@0 1 /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0 2 * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0 4
michael@0 5 @import url("chrome://global/skin/");
michael@0 6
michael@0 7 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
michael@0 8 @namespace html url("http://www.w3.org/1999/xhtml");
michael@0 9 @namespace svg url("http://www.w3.org/2000/svg");
michael@0 10
michael@0 11 %include ../shared/browser.inc
michael@0 12 %include windowsShared.inc
michael@0 13 %filter substitution
michael@0 14 %define toolbarShadowColor hsla(209,67%,12%,0.35)
michael@0 15 %define navbarTextboxCustomBorder border-color: rgba(0,0,0,.32);
michael@0 16 %define forwardTransitionLength 150ms
michael@0 17 %define conditionalForwardWithUrlbar window:not([chromehidden~="toolbar"]) #urlbar-wrapper
michael@0 18 %define conditionalForwardWithUrlbarWidth 30
michael@0 19
michael@0 20 #menubar-items {
michael@0 21 -moz-box-orient: vertical; /* for flex hack */
michael@0 22 }
michael@0 23
michael@0 24 #main-menubar {
michael@0 25 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
michael@0 26 }
michael@0 27
michael@0 28 /* Hides the titlebar-placeholder underneath the window caption buttons when we
michael@0 29 are not autohiding the menubar. */
michael@0 30 #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
michael@0 31 display: none;
michael@0 32 }
michael@0 33
michael@0 34 /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
michael@0 35 toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
michael@0 36 of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
michael@0 37 #toolbar-menubar:not([moz-collapsed=true]):not([autohide=true]) ~ #TabsToolbar,
michael@0 38 #toolbar-menubar:not([moz-collapsed=true])[autohide=true]:not([inactive]) ~ #TabsToolbar {
michael@0 39 margin-top: 3px;
michael@0 40 }
michael@0 41
michael@0 42 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
michael@0 43 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
michael@0 44 margin-top: 15px;
michael@0 45 }
michael@0 46
michael@0 47 #toolbar-menubar:not([autohide="true"]) {
michael@0 48 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag");
michael@0 49 }
michael@0 50
michael@0 51 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
michael@0 52 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
michael@0 53 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
michael@0 54 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
michael@0 55 outline-color: CaptionText;
michael@0 56 }
michael@0 57
michael@0 58 #navigator-toolbox {
michael@0 59 -moz-appearance: none;
michael@0 60 background-color: transparent;
michael@0 61 border-top: none;
michael@0 62 }
michael@0 63
michael@0 64 #navigator-toolbox::after {
michael@0 65 content: "";
michael@0 66 display: -moz-box;
michael@0 67 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
michael@0 68 height: 1px;
michael@0 69 background-color: ThreeDShadow;
michael@0 70 }
michael@0 71
michael@0 72 #navigator-toolbox > toolbar:not(:-moz-lwtheme) {
michael@0 73 -moz-appearance: none;
michael@0 74 border-style: none;
michael@0 75 background-color: -moz-Dialog;
michael@0 76 }
michael@0 77
michael@0 78 %ifdef WINDOWS_AERO
michael@0 79 @media not all and (-moz-windows-compositor),
michael@0 80 not all and (-moz-windows-default-theme) {
michael@0 81 %endif
michael@0 82 #toolbar-menubar {
michael@0 83 background-color: transparent !important;
michael@0 84 }
michael@0 85
michael@0 86 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
michael@0 87 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
michael@0 88 color: CaptionText;
michael@0 89 }
michael@0 90
michael@0 91 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
michael@0 92 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
michael@0 93 color: InactiveCaptionText;
michael@0 94 }
michael@0 95
michael@0 96 #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
michael@0 97 color: inherit;
michael@0 98 }
michael@0 99
michael@0 100 #TabsToolbar:-moz-lwtheme {
michael@0 101 background: linear-gradient(to top, @toolbarShadowColor@ 2px, transparent 2px);
michael@0 102 }
michael@0 103 %ifdef WINDOWS_AERO
michael@0 104 }
michael@0 105 %endif
michael@0 106
michael@0 107 %ifdef WINDOWS_AERO
michael@0 108 @media not all and (-moz-windows-compositor) {
michael@0 109 %endif
michael@0 110 #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
michael@0 111 visibility: hidden;
michael@0 112 }
michael@0 113
michael@0 114 #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
michael@0 115 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
michael@0 116 visibility: visible;
michael@0 117 }
michael@0 118 %ifdef WINDOWS_AERO
michael@0 119 }
michael@0 120 %endif
michael@0 121
michael@0 122 /**
michael@0 123 * In the classic themes, the titlebar has a horizontal gradient, which is
michael@0 124 * problematic for reading the text of background tabs when they're in the
michael@0 125 * titlebar. We side-step this issue by layering our own background underneath
michael@0 126 * the tabs. Unfortunately, this requires a bunch of positioning in order to get
michael@0 127 * text and icons to not appear fuzzy.
michael@0 128 */
michael@0 129 @media (-moz-windows-classic) {
michael@0 130 /**
michael@0 131 * We need to bump up the z-index of the tabbrowser-tabs so that they appear
michael@0 132 * over top of the fog we're applying for classic themes, as well as the nav-bar.
michael@0 133 */
michael@0 134 #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #tabbrowser-tabs {
michael@0 135 position: relative;
michael@0 136 z-index: 2;
michael@0 137 }
michael@0 138
michael@0 139 #main-window[tabsintitlebar] #TabsToolbar:not(:-moz-lwtheme) {
michael@0 140 background-image: none;
michael@0 141 position: relative;
michael@0 142 }
michael@0 143
michael@0 144 #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar:not(:-moz-lwtheme)::after {
michael@0 145 /* Because we use placeholders for window controls etc. in the tabstrip,
michael@0 146 * and position those with ordinal attributes, and because our layout code
michael@0 147 * expects :before/:after nodes to come first/last in the frame list,
michael@0 148 * we have to reorder this element to come last, hence the
michael@0 149 * ordinal group value (see bug 853415). */
michael@0 150 -moz-box-ordinal-group: 1001;
michael@0 151 box-shadow: 0 0 50px 8px ActiveCaption;
michael@0 152 content: "";
michael@0 153 display: -moz-box;
michael@0 154 height: 0;
michael@0 155 margin: 0 50px;
michael@0 156 position: absolute;
michael@0 157 pointer-events: none;
michael@0 158 top: 100%;
michael@0 159 width: -moz-available;
michael@0 160 }
michael@0 161
michael@0 162 #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive::after {
michael@0 163 box-shadow: 0 0 50px 8px InactiveCaption;
michael@0 164 }
michael@0 165
michael@0 166 #main-window[tabsintitlebar]:not([sizemode=fullscreen]) toolbar[customindex]:not(:-moz-lwtheme),
michael@0 167 #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #PersonalToolbar:not(:-moz-lwtheme) {
michael@0 168 position: relative;
michael@0 169 }
michael@0 170
michael@0 171 /* Need to constrain the box shadow fade to avoid overlapping layers, see bug 886281. */
michael@0 172 #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #navigator-toolbox:not(:-moz-lwtheme) {
michael@0 173 overflow: -moz-hidden-unscrollable;
michael@0 174 }
michael@0 175
michael@0 176 /**
michael@0 177 * When the tabstrip is overflowed, pinned tab separators get position: absolute,
michael@0 178 * which makes the pinned tab separators leak over the nav-bar highlight. Forcing
michael@0 179 * the element to snap to the bottom of the client rect works around the issue.
michael@0 180 */
michael@0 181 #main-window[tabsintitlebar] #tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::before {
michael@0 182 bottom: 0px;
michael@0 183 }
michael@0 184
michael@0 185 #main-window[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar .toolbarbutton-1 {
michael@0 186 position: relative;
michael@0 187 z-index: 1;
michael@0 188 }
michael@0 189
michael@0 190 /**
michael@0 191 * With the tabbrowser-tabs element z-index'd above the nav-bar, we now get the
michael@0 192 * scrollbox button borders leaking over the nav-bar highlight. This transparent bottom
michael@0 193 * border forces the scrollbox button borders to terminate a pixel early, working
michael@0 194 * around the issue.
michael@0 195 */
michael@0 196 #main-window[tabsintitlebar]:not([sizemode=fullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up,
michael@0 197 #main-window[tabsintitlebar]:not([sizemode=fullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down {
michael@0 198 border-bottom: 1px solid transparent;
michael@0 199 }
michael@0 200
michael@0 201 #main-window[tabsintitlebar][sizemode="normal"] #titlebar-content:-moz-lwtheme {
michael@0 202 /* Render a window top border: */
michael@0 203 background-image: linear-gradient(to bottom,
michael@0 204 ThreeDLightShadow 0, ThreeDLightShadow 1px,
michael@0 205 ThreeDHighlight 1px, ThreeDHighlight 2px,
michael@0 206 ActiveBorder 2px, ActiveBorder 4px, transparent 4px);
michael@0 207 }
michael@0 208
michael@0 209 /* End classic titlebar gradient */
michael@0 210
michael@0 211 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) toolbarbutton:not(:-moz-lwtheme) {
michael@0 212 color: inherit;
michael@0 213 }
michael@0 214 }
michael@0 215
michael@0 216 /* Render a window top border for lwthemes on WinXP modern themes: */
michael@0 217 @media (-moz-windows-theme: luna-blue) {
michael@0 218 #main-window[tabsintitlebar][sizemode="normal"] #titlebar-content:-moz-lwtheme {
michael@0 219 background-image: linear-gradient(to bottom,
michael@0 220 rgb(8, 49, 216) 0, rgb(8, 49, 216) 1px,
michael@0 221 rgb(15, 77, 227) 1px, rgb(15, 77, 227) 2px,
michael@0 222 rgb(22, 106, 238) 2px, rgb(22, 106, 238) 3px,
michael@0 223 rgb(8, 85, 221) 3px, rgb(8, 85, 221) 4px,
michael@0 224 transparent 4px);
michael@0 225 }
michael@0 226
michael@0 227 #main-window[tabsintitlebar][sizemode="normal"] #titlebar-content:-moz-lwtheme:-moz-window-inactive {
michael@0 228 background-image: linear-gradient(to bottom,
michael@0 229 rgb(91, 104, 205) 0, rgb(91, 104, 205) 1px,
michael@0 230 rgb(116, 128, 220) 1px, rgb(116, 128, 220) 2px,
michael@0 231 rgb(117, 140, 221) 2px, rgb(117, 140, 221) 4px,
michael@0 232 transparent 4px);
michael@0 233 }
michael@0 234 }
michael@0 235
michael@0 236 @media (-moz-windows-theme: luna-silver) {
michael@0 237 #main-window[tabsintitlebar][sizemode="normal"] #titlebar-content:-moz-lwtheme {
michael@0 238 background-image: linear-gradient(to bottom,
michael@0 239 rgb(102,102,126) 0, rgb(102,102,126) 1px,
michael@0 240 rgb(168,167,191) 1px, rgb(168,167,191) 2px,
michael@0 241 white 2px, white 3px,
michael@0 242 rgb(188,188,207) 3px, rgb(188,188,207) 4px,
michael@0 243 transparent 4px);
michael@0 244 }
michael@0 245
michael@0 246 #main-window[tabsintitlebar][sizemode="normal"] #titlebar-content:-moz-lwtheme:-moz-window-inactive {
michael@0 247 background-image: linear-gradient(to bottom,
michael@0 248 rgb(186,186,197) 0, rgb(186,186,197) 1px,
michael@0 249 rgb(236,238,245) 1px, rgb(236,238,245) 2px,
michael@0 250 white 2px, white 3px,
michael@0 251 rgb(215,215,227) 3px, rgb(215,215,227) 4px,
michael@0 252 transparent 4px);
michael@0 253 }
michael@0 254 }
michael@0 255
michael@0 256 @media (-moz-windows-theme: luna-olive) {
michael@0 257 #main-window[tabsintitlebar][sizemode="normal"] #titlebar-content:-moz-lwtheme {
michael@0 258 background-image: linear-gradient(to bottom,
michael@0 259 rgb(139,161,105) 0, rgb(139,161,105) 1px,
michael@0 260 rgb(171, 189, 133) 1px, rgb(171, 189, 133) 2px,
michael@0 261 rgb(164,178,127) 2px, rgb(164,178,127) 3px,
michael@0 262 transparent 3px);
michael@0 263 }
michael@0 264
michael@0 265 #main-window[tabsintitlebar][sizemode="normal"] #titlebar-content:-moz-lwtheme:-moz-window-inactive {
michael@0 266 background-image: linear-gradient(to bottom,
michael@0 267 rgb(207, 214, 188) 0, rgb(207, 214, 188) 1px,
michael@0 268 rgb(224, 226, 200) 1px, rgb(224, 226, 200) 2px,
michael@0 269 rgb(214, 216, 190) 2px, rgb(214, 216, 190) 3px,
michael@0 270 transparent 3px);
michael@0 271 }
michael@0 272 }
michael@0 273
michael@0 274 #TabsToolbar:not([collapsed="true"]) + #nav-bar {
michael@0 275 margin-top: -@tabToolbarNavbarOverlap@; /* Move up into the TabsToolbar */
michael@0 276 /* Position the toolbar above the bottom of background tabs */
michael@0 277 position: relative;
michael@0 278 z-index: 1;
michael@0 279 }
michael@0 280
michael@0 281 #nav-bar {
michael@0 282 background-image: linear-gradient(@toolbarHighlight@, rgba(255,255,255,0));
michael@0 283 box-shadow: 0 1px 0 @toolbarHighlight@ inset;
michael@0 284 }
michael@0 285
michael@0 286 #personal-bookmarks {
michael@0 287 min-height: 24px;
michael@0 288 }
michael@0 289
michael@0 290 #print-preview-toolbar:not(:-moz-lwtheme) {
michael@0 291 -moz-appearance: toolbox;
michael@0 292 }
michael@0 293
michael@0 294 #browser-bottombox:not(:-moz-lwtheme) {
michael@0 295 background-color: -moz-dialog;
michael@0 296 }
michael@0 297
michael@0 298 %ifndef WINDOWS_AERO
michael@0 299 @media (-moz-windows-default-theme) {
michael@0 300 #main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar {
michael@0 301 margin-top: 4px;
michael@0 302 }
michael@0 303 }
michael@0 304 %endif
michael@0 305
michael@0 306 /* ::::: titlebar ::::: */
michael@0 307
michael@0 308 #main-window[sizemode="normal"] > #titlebar {
michael@0 309 -moz-appearance: -moz-window-titlebar;
michael@0 310 }
michael@0 311
michael@0 312 #main-window[sizemode="maximized"] > #titlebar {
michael@0 313 -moz-appearance: -moz-window-titlebar-maximized;
michael@0 314 }
michael@0 315
michael@0 316 @media (-moz-windows-classic) {
michael@0 317 #main-window[tabsintitlebar][sizemode="normal"] > #tab-view-deck > #browser-panel > #navigator-toolbox > #toolbar-menubar {
michael@0 318 margin-top: 4px;
michael@0 319 }
michael@0 320 }
michael@0 321
michael@0 322 /* The button box must appear on top of the navigator-toolbox in order for
michael@0 323 * click and hover mouse events to work properly for the button in the restored
michael@0 324 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
michael@0 325 * can swallow those events. It will also place the buttons above the fog on
michael@0 326 * themes with Aero Glass.
michael@0 327 */
michael@0 328 #titlebar-buttonbox {
michael@0 329 z-index: 1;
michael@0 330 }
michael@0 331
michael@0 332 .titlebar-placeholder[type="caption-buttons"] {
michael@0 333 %ifdef WINDOWS_AERO
michael@0 334 margin-left: 22px; /* additional space for Aero Snap */
michael@0 335 %else
michael@0 336 margin-left: 10px;
michael@0 337 %endif
michael@0 338 }
michael@0 339
michael@0 340 /* titlebar command buttons */
michael@0 341
michael@0 342 #titlebar-min {
michael@0 343 -moz-appearance: -moz-window-button-minimize;
michael@0 344 }
michael@0 345
michael@0 346 #titlebar-max {
michael@0 347 -moz-appearance: -moz-window-button-maximize;
michael@0 348 }
michael@0 349
michael@0 350 #main-window[sizemode="maximized"] #titlebar-max {
michael@0 351 -moz-appearance: -moz-window-button-restore;
michael@0 352 }
michael@0 353
michael@0 354 #titlebar-close {
michael@0 355 -moz-appearance: -moz-window-button-close;
michael@0 356 }
michael@0 357
michael@0 358 @media not all and (-moz-windows-classic) {
michael@0 359 #titlebar-min {
michael@0 360 -moz-margin-end: 2px;
michael@0 361 }
michael@0 362 }
michael@0 363
michael@0 364 /* ::::: bookmark buttons ::::: */
michael@0 365
michael@0 366 toolbarbutton.bookmark-item:not(.subviewbutton),
michael@0 367 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
michael@0 368 margin: 0;
michael@0 369 padding: 2px 3px;
michael@0 370 }
michael@0 371
michael@0 372 toolbarbutton.bookmark-item:not([disabled="true"]):not(.subviewbutton):hover:active,
michael@0 373 toolbarbutton.bookmark-item[open="true"] {
michael@0 374 padding-top: 3px;
michael@0 375 padding-bottom: 1px;
michael@0 376 -moz-padding-start: 4px;
michael@0 377 -moz-padding-end: 2px;
michael@0 378 }
michael@0 379
michael@0 380 .bookmark-item > .toolbarbutton-icon,
michael@0 381 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
michael@0 382 width: 16px;
michael@0 383 height: 16px;
michael@0 384 }
michael@0 385
michael@0 386 /* Force the display of the label for bookmarks */
michael@0 387 .bookmark-item > .toolbarbutton-text,
michael@0 388 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
michael@0 389 display: -moz-box !important;
michael@0 390 }
michael@0 391
michael@0 392 .bookmark-item > .toolbarbutton-menu-dropmarker {
michael@0 393 display: none;
michael@0 394 }
michael@0 395
michael@0 396 #bookmarks-toolbar-placeholder {
michael@0 397 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png") !important;
michael@0 398 }
michael@0 399
michael@0 400 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
michael@0 401 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
michael@0 402 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
michael@0 403 }
michael@0 404
michael@0 405 /* ----- BOOKMARK STAR ANIMATION ----- */
michael@0 406
michael@0 407 @keyframes animation-bookmarkAdded {
michael@0 408 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
michael@0 409 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
michael@0 410 80% { opacity: 1; }
michael@0 411 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
michael@0 412 }
michael@0 413
michael@0 414 @keyframes animation-bookmarkPulse {
michael@0 415 from { transform: scale(1); }
michael@0 416 50% { transform: scale(1.3); }
michael@0 417 to { transform: scale(1); }
michael@0 418 }
michael@0 419
michael@0 420 #bookmarked-notification-container {
michael@0 421 min-height: 1px;
michael@0 422 min-width: 1px;
michael@0 423 height: 1px;
michael@0 424 margin-bottom: -1px;
michael@0 425 z-index: 5;
michael@0 426 position: relative;
michael@0 427 }
michael@0 428
michael@0 429 #bookmarked-notification {
michael@0 430 background-size: 16px;
michael@0 431 background-position: center;
michael@0 432 background-repeat: no-repeat;
michael@0 433 width: 16px;
michael@0 434 height: 16px;
michael@0 435 opacity: 0;
michael@0 436 }
michael@0 437
michael@0 438 #bookmarked-notification-dropmarker-anchor {
michael@0 439 z-index: -1;
michael@0 440 position: relative;
michael@0 441 }
michael@0 442
michael@0 443 #bookmarked-notification-dropmarker-icon {
michael@0 444 width: 18px;
michael@0 445 height: 18px;
michael@0 446 visibility: hidden;
michael@0 447 }
michael@0 448
michael@0 449 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
michael@0 450 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
michael@0 451 animation: animation-bookmarkAdded 800ms;
michael@0 452 animation-timing-function: ease, ease, ease;
michael@0 453 }
michael@0 454
michael@0 455 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
michael@0 456 list-style-image: none !important;
michael@0 457 }
michael@0 458
michael@0 459 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
michael@0 460 visibility: visible;
michael@0 461 animation: animation-bookmarkPulse 300ms;
michael@0 462 animation-delay: 600ms;
michael@0 463 animation-timing-function: ease-out;
michael@0 464 }
michael@0 465
michael@0 466 /* ::::: bookmark menus ::::: */
michael@0 467
michael@0 468 menu.bookmark-item,
michael@0 469 menuitem.bookmark-item {
michael@0 470 min-width: 0;
michael@0 471 max-width: 32em;
michael@0 472 }
michael@0 473
michael@0 474 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
michael@0 475 margin-top: 0;
michael@0 476 margin-bottom: 0;
michael@0 477 }
michael@0 478
michael@0 479 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
michael@0 480 -moz-padding-start: 0px;
michael@0 481 }
michael@0 482
michael@0 483 /* ::::: bookmark items ::::: */
michael@0 484
michael@0 485 .bookmark-item {
michael@0 486 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
michael@0 487 }
michael@0 488
michael@0 489 .bookmark-item[container] {
michael@0 490 list-style-image: url("chrome://global/skin/icons/folder-item.png");
michael@0 491 -moz-image-region: rect(0px, 32px, 16px, 16px);
michael@0 492 }
michael@0 493
michael@0 494 .bookmark-item[container][open] {
michael@0 495 -moz-image-region: rect(16px, 32px, 32px, 16px);
michael@0 496 }
michael@0 497
michael@0 498 .bookmark-item[container][livemark] {
michael@0 499 list-style-image: url("chrome://browser/skin/livemark-folder.png");
michael@0 500 -moz-image-region: auto;
michael@0 501 }
michael@0 502
michael@0 503 .bookmark-item[container][livemark] .bookmark-item {
michael@0 504 list-style-image: url("chrome://browser/skin/places/livemark-item.png");
michael@0 505 -moz-image-region: rect(0px, 16px, 16px, 0px);
michael@0 506 }
michael@0 507
michael@0 508 .bookmark-item[container][livemark] .bookmark-item[visited] {
michael@0 509 -moz-image-region: rect(0px, 32px, 16px, 16px);
michael@0 510 }
michael@0 511
michael@0 512 .bookmark-item[container][query] {
michael@0 513 list-style-image: url("chrome://browser/skin/places/query.png");
michael@0 514 -moz-image-region: auto;
michael@0 515 }
michael@0 516
michael@0 517 .bookmark-item[query][tagContainer] {
michael@0 518 list-style-image: url("chrome://browser/skin/places/tag.png");
michael@0 519 -moz-image-region: auto;
michael@0 520 }
michael@0 521
michael@0 522 .bookmark-item[query][dayContainer] {
michael@0 523 list-style-image: url("chrome://browser/skin/places/calendar.png");
michael@0 524 -moz-image-region: auto;
michael@0 525 }
michael@0 526
michael@0 527 .bookmark-item[query][hostContainer] {
michael@0 528 list-style-image: url("chrome://global/skin/icons/folder-item.png");
michael@0 529 -moz-image-region: rect(0px, 32px, 16px, 16px);
michael@0 530 }
michael@0 531
michael@0 532 .bookmark-item[query][hostContainer][open] {
michael@0 533 list-style-image: url("chrome://global/skin/icons/folder-item.png");
michael@0 534 -moz-image-region: rect(16px, 32px, 32px, 16px);
michael@0 535 }
michael@0 536
michael@0 537 .bookmark-item[cutting] > .toolbarbutton-icon,
michael@0 538 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
michael@0 539 opacity: 0.5;
michael@0 540 }
michael@0 541
michael@0 542 .bookmark-item[cutting] > .toolbarbutton-text,
michael@0 543 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
michael@0 544 opacity: 0.7;
michael@0 545 }
michael@0 546
michael@0 547 /* ::::: primary toolbar buttons ::::: */
michael@0 548
michael@0 549 %include ../shared/toolbarbuttons.inc.css
michael@0 550 %include ../shared/menupanel.inc.css
michael@0 551
michael@0 552 %ifndef WINDOWS_AERO
michael@0 553 @media (-moz-windows-theme: luna-silver) {
michael@0 554 :-moz-any(@primaryToolbarButtons@),
michael@0 555 #bookmarks-menu-button.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
michael@0 556 list-style-image: url("chrome://browser/skin/Toolbar-lunaSilver.png");
michael@0 557 }
michael@0 558 }
michael@0 559 %endif
michael@0 560
michael@0 561 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
michael@0 562 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
michael@0 563 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
michael@0 564 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
michael@0 565 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
michael@0 566 opacity: .4;
michael@0 567 }
michael@0 568
michael@0 569 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
michael@0 570 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
michael@0 571 list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.png");
michael@0 572 }
michael@0 573
michael@0 574 toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
michael@0 575 toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
michael@0 576 list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow-inverted.png");
michael@0 577 }
michael@0 578
michael@0 579 .toolbarbutton-1 > .toolbarbutton-icon,
michael@0 580 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
michael@0 581 -moz-margin-end: 0;
michael@0 582 }
michael@0 583
michael@0 584 #nav-bar .toolbarbutton-1,
michael@0 585 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
michael@0 586 -moz-appearance: none;
michael@0 587 border: none;
michael@0 588 padding: 0;
michael@0 589 background: none;
michael@0 590 }
michael@0 591
michael@0 592 #nav-bar .toolbarbutton-1:not([type=menu-button]),
michael@0 593 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
michael@0 594 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
michael@0 595 padding: 8px 2px;
michael@0 596 -moz-box-pack: center;
michael@0 597 }
michael@0 598
michael@0 599 #nav-bar #PanelUI-menu-button {
michael@0 600 -moz-padding-start: 7px;
michael@0 601 -moz-padding-end: 5px;
michael@0 602 }
michael@0 603
michael@0 604 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#social-provider-button):not(#PanelUI-menu-button) {
michael@0 605 padding-left: 5px;
michael@0 606 padding-right: 5px;
michael@0 607 }
michael@0 608
michael@0 609 #nav-bar .toolbarbutton-1 > menupopup {
michael@0 610 margin-top: -3px;
michael@0 611 }
michael@0 612
michael@0 613 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
michael@0 614 margin-top: -8px;
michael@0 615 }
michael@0 616
michael@0 617 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
michael@0 618 -moz-padding-end: 0;
michael@0 619 }
michael@0 620
michael@0 621 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
michael@0 622 -moz-padding-start: 0;
michael@0 623 -moz-box-align: center;
michael@0 624 }
michael@0 625
michael@0 626 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
michael@0 627 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
michael@0 628 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container,
michael@0 629 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
michael@0 630 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
michael@0 631 @conditionalForwardWithUrlbar@ > .toolbarbutton-1:-moz-any([disabled],:not([open]):not([disabled]):not(:active)) > .toolbarbutton-icon {
michael@0 632 padding: 2px 6px;
michael@0 633 border: 1px solid;
michael@0 634 border-color: transparent;
michael@0 635 transition-property: background-color, border-color;
michael@0 636 transition-duration: 150ms;
michael@0 637 }
michael@0 638
michael@0 639 %ifdef WINDOWS_AERO
michael@0 640 @media (-moz-os-version: windows-vista),
michael@0 641 (-moz-os-version: windows-win7) {
michael@0 642 %endif
michael@0 643 /* < Win8 */
michael@0 644 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
michael@0 645 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
michael@0 646 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container,
michael@0 647 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
michael@0 648 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
michael@0 649 background-color: hsla(210,32%,93%,0);
michael@0 650 background-origin: padding-box;
michael@0 651 border-radius: 2px;
michael@0 652 border-color: hsla(210,54%,20%,0) hsla(210,54%,20%,0) hsla(210,54%,20%,0);
michael@0 653 box-shadow: 0 1px hsla(0,0%,100%,0) inset,
michael@0 654 0 1px hsla(210,54%,20%,0),
michael@0 655 0 0 2px hsla(210,54%,20%,0);
michael@0 656 transition-property: background-color, border-color, box-shadow;
michael@0 657 transition-duration: 150ms;
michael@0 658 }
michael@0 659 %ifdef WINDOWS_AERO
michael@0 660 }
michael@0 661 %endif
michael@0 662
michael@0 663 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
michael@0 664 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-container,
michael@0 665 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
michael@0 666 padding: 3px 7px;
michael@0 667 }
michael@0 668
michael@0 669 /* Help SDK icons fit: */
michael@0 670 toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
michael@0 671 width: 16px;
michael@0 672 }
michael@0 673
michael@0 674 #nav-bar toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
michael@0 675 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
michael@0 676 width: 32px;
michael@0 677 }
michael@0 678
michael@0 679 #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,
michael@0 680 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
michael@0 681 -moz-padding-end: 17px;
michael@0 682 }
michael@0 683
michael@0 684 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
michael@0 685 -moz-margin-start: -15px;
michael@0 686 }
michael@0 687
michael@0 688 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
michael@0 689 -moz-border-end: none;
michael@0 690 }
michael@0 691
michael@0 692 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
michael@0 693 padding: 8px 5px 7px;
michael@0 694 }
michael@0 695
michael@0 696 #nav-bar .toolbaritem-combined-buttons {
michael@0 697 margin-left: 2px;
michael@0 698 margin-right: 2px;
michael@0 699 }
michael@0 700
michael@0 701 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
michael@0 702 padding-left: 0;
michael@0 703 padding-right: 0;
michael@0 704 }
michael@0 705
michael@0 706 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
michael@0 707 #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 {
michael@0 708 content: "";
michael@0 709 display: -moz-box;
michael@0 710 width: 1px;
michael@0 711 height: 16px;
michael@0 712 -moz-margin-end: -1px;
michael@0 713 background-image: linear-gradient(hsla(210,54%,20%,.2) 0, hsla(210,54%,20%,.2) 16px);
michael@0 714 background-clip: padding-box;
michael@0 715 background-position: center;
michael@0 716 background-repeat: no-repeat;
michael@0 717 background-size: 1px 16px;
michael@0 718 }
michael@0 719
michael@0 720 @conditionalForwardWithUrlbar@ > .toolbarbutton-1:-moz-any([disabled],:not([open]):not([disabled]):not(:active)) > .toolbarbutton-icon {
michael@0 721 border-color: hsla(210,4%,10%,.1);
michael@0 722 }
michael@0 723
michael@0 724 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
michael@0 725 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
michael@0 726 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
michael@0 727 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
michael@0 728 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
michael@0 729 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-container,
michael@0 730 @conditionalForwardWithUrlbar@ > #forward-button:not([open]):not(:active):not([disabled]):hover > .toolbarbutton-icon,
michael@0 731 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon {
michael@0 732 background-color: hsla(210,4%,10%,.08);
michael@0 733 border-color: hsla(210,4%,10%,.1);
michael@0 734 }
michael@0 735
michael@0 736 %ifdef WINDOWS_AERO
michael@0 737 @media (-moz-os-version: windows-vista),
michael@0 738 (-moz-os-version: windows-win7) {
michael@0 739 %endif
michael@0 740 /* < Win8 */
michael@0 741 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
michael@0 742 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled]) + .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled])::before {
michael@0 743 content: "";
michael@0 744 display: -moz-box;
michael@0 745 width: 1px;
michael@0 746 height: 18px;
michael@0 747 -moz-margin-end: -1px;
michael@0 748 background-image: linear-gradient(hsla(210,54%,20%,.2) 0, hsla(210,54%,20%,.2) 18px);
michael@0 749 background-clip: padding-box;
michael@0 750 background-position: center;
michael@0 751 background-repeat: no-repeat;
michael@0 752 background-size: 1px 18px;
michael@0 753 box-shadow: 0 0 0 1px hsla(0,0%,100%,.2);
michael@0 754 }
michael@0 755
michael@0 756 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon:-moz-locale-dir(ltr),
michael@0 757 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-locale-dir(rtl) {
michael@0 758 border-top-right-radius: 0;
michael@0 759 border-bottom-right-radius: 0;
michael@0 760 }
michael@0 761
michael@0 762 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon:-moz-locale-dir(rtl),
michael@0 763 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-locale-dir(ltr) {
michael@0 764 border-top-left-radius: 0;
michael@0 765 border-bottom-left-radius: 0;
michael@0 766 }
michael@0 767
michael@0 768 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
michael@0 769 #nav-bar .toolbarbutton-1:not([disabled]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
michael@0 770 #nav-bar .toolbarbutton-1:not([disabled]):hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
michael@0 771 #nav-bar .toolbarbutton-1:not([disabled]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
michael@0 772 #nav-bar .toolbarbutton-1:not([disabled]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
michael@0 773 #nav-bar .toolbarbutton-1:not([disabled]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-container,
michael@0 774 @conditionalForwardWithUrlbar@ > .toolbarbutton-1:-moz-any([disabled],:not([open]):not([disabled]):not(:active)) > .toolbarbutton-icon {
michael@0 775 background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1));
michael@0 776 background-color: transparent;
michael@0 777 border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.2) hsla(210,54%,20%,.25);
michael@0 778 box-shadow: 0 1px hsla(0,0%,100%,.3) inset,
michael@0 779 0 1px hsla(210,54%,20%,.03),
michael@0 780 0 0 2px hsla(210,54%,20%,.1);
michael@0 781 }
michael@0 782
michael@0 783 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled]):not([open]):not(:active):hover > .toolbarbutton-icon,
michael@0 784 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon,
michael@0 785 @conditionalForwardWithUrlbar@ > #forward-button:not([open]):not(:active):not([disabled]):hover > .toolbarbutton-icon {
michael@0 786 border-color: hsla(210,54%,20%,.3) hsla(210,54%,20%,.35) hsla(210,54%,20%,.4);
michael@0 787 background-color: hsla(210,48%,96%,.75);
michael@0 788 box-shadow: 0 0 1px hsla(210,54%,20%,.03),
michael@0 789 0 0 2px hsla(210,54%,20%,.1);
michael@0 790 }
michael@0 791 %ifdef WINDOWS_AERO
michael@0 792 }
michael@0 793 %endif
michael@0 794
michael@0 795 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
michael@0 796 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
michael@0 797 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
michael@0 798 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
michael@0 799 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-container {
michael@0 800 background-color: hsla(210,4%,10%,.12);
michael@0 801 border-top-color: hsla(210,4%,10%,.2);
michael@0 802 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.1) inset;
michael@0 803 transition-duration: 10ms;
michael@0 804 }
michael@0 805
michael@0 806 %ifdef WINDOWS_AERO
michael@0 807 @media (-moz-os-version: windows-vista),
michael@0 808 (-moz-os-version: windows-win7) {
michael@0 809 %endif
michael@0 810 /* < Win8 */
michael@0 811 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
michael@0 812 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon,
michael@0 813 #nav-bar .toolbarbutton-1:not([disabled]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
michael@0 814 #nav-bar .toolbarbutton-1:not([disabled]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
michael@0 815 #nav-bar .toolbarbutton-1:not([disabled]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-container {
michael@0 816 background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1));
michael@0 817 background-color: hsla(210,54%,20%,.15);
michael@0 818 border-color: hsla(210,54%,20%,.3) hsla(210,54%,20%,.35) hsla(210,54%,20%,.4);
michael@0 819 box-shadow: 0 1px 1px hsla(210,54%,20%,.1) inset,
michael@0 820 0 0 1px hsla(210,54%,20%,.2) inset,
michael@0 821 /* allows keyhole-forward-clip-path to be used for non-hover as well as hover: */
michael@0 822 0 1px 0 hsla(210,54%,20%,0),
michael@0 823 0 0 2px hsla(210,54%,20%,0);
michael@0 824 text-shadow: none;
michael@0 825 transition: none;
michael@0 826 }
michael@0 827
michael@0 828 #nav-bar .toolbarbutton-1:-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon {
michael@0 829 -moz-border-start-color: hsla(210,54%,20%,.35);
michael@0 830 }
michael@0 831
michael@0 832 #nav-bar .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon {
michael@0 833 background-color: rgba(90%,90%,90%,.4);
michael@0 834 transition: background-color .4s;
michael@0 835 }
michael@0 836 %ifdef WINDOWS_AERO
michael@0 837 }
michael@0 838 %endif
michael@0 839
michael@0 840 #TabsToolbar .toolbarbutton-1,
michael@0 841 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
michael@0 842 .tabbrowser-arrowscrollbox > .scrollbutton-up,
michael@0 843 .tabbrowser-arrowscrollbox > .scrollbutton-down {
michael@0 844 -moz-appearance: none;
michael@0 845 border-style: none;
michael@0 846 padding: 0 3px;
michael@0 847 }
michael@0 848
michael@0 849 #TabsToolbar .toolbarbutton-1 {
michael@0 850 margin-bottom: @tabToolbarNavbarOverlap@;
michael@0 851 }
michael@0 852
michael@0 853 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
michael@0 854 #TabsToolbar .toolbarbutton-1[open],
michael@0 855 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
michael@0 856 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
michael@0 857 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
michael@0 858 background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.5)),
michael@0 859 linear-gradient(transparent, rgba(0,0,0,.25) 30%),
michael@0 860 linear-gradient(transparent, rgba(0,0,0,.25) 30%);
michael@0 861 background-position: 1px -1px, 0 -1px, 100% -1px;
michael@0 862 background-size: calc(100% - 2px) 100%, 1px 100%, 1px 100%;
michael@0 863 background-repeat: no-repeat;
michael@0 864 }
michael@0 865
michael@0 866 /* unified back/forward button */
michael@0 867
michael@0 868 #forward-button {
michael@0 869 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
michael@0 870 padding: 0 !important;
michael@0 871 }
michael@0 872
michael@0 873 #forward-button > menupopup {
michael@0 874 margin-top: 1px !important;
michael@0 875 }
michael@0 876
michael@0 877 #forward-button > .toolbarbutton-icon {
michael@0 878 background-clip: padding-box !important;
michael@0 879 border-left-style: none !important;
michael@0 880 border-radius: 0 !important;
michael@0 881 padding-left: 9px !important;
michael@0 882 padding-right: 3px !important;
michael@0 883 }
michael@0 884
michael@0 885 @conditionalForwardWithUrlbar@:not([switchingtabs]) > #forward-button {
michael@0 886 transition: margin-left @forwardTransitionLength@ ease-out;
michael@0 887 }
michael@0 888
michael@0 889 @conditionalForwardWithUrlbar@ > #forward-button[disabled] {
michael@0 890 margin-left: -@conditionalForwardWithUrlbarWidth@px;
michael@0 891 }
michael@0 892
michael@0 893 @conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] {
michael@0 894 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
michael@0 895 transition-delay: 100s;
michael@0 896 }
michael@0 897
michael@0 898 @conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] {
michael@0 899 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
michael@0 900 margin-left: -@conditionalForwardWithUrlbarWidth@.01px;
michael@0 901 }
michael@0 902
michael@0 903 #back-button {
michael@0 904 padding-top: 3px !important;
michael@0 905 padding-bottom: 3px !important;
michael@0 906 -moz-padding-start: 5px !important;
michael@0 907 -moz-padding-end: 0 !important;
michael@0 908 position: relative !important;
michael@0 909 z-index: 1 !important;
michael@0 910 border-radius: 0 10000px 10000px 0 !important;
michael@0 911 }
michael@0 912
michael@0 913 #back-button:-moz-locale-dir(rtl) {
michael@0 914 border-radius: 10000px 0 0 10000px !important;
michael@0 915 }
michael@0 916
michael@0 917 #back-button > menupopup {
michael@0 918 margin-top: -1px !important;
michael@0 919 }
michael@0 920
michael@0 921 #back-button > .toolbarbutton-icon {
michael@0 922 border-radius: 10000px !important;
michael@0 923 background-clip: padding-box !important;
michael@0 924 background-color: hsla(210,25%,98%,.08) !important;
michael@0 925 padding: 6px !important;
michael@0 926 border-style: none !important;
michael@0 927 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
michael@0 928 0 0 0 1px hsla(210,4%,10%,.25);
michael@0 929 transition-property: background-color, box-shadow !important;
michael@0 930 transition-duration: 250ms !important;
michael@0 931 }
michael@0 932
michael@0 933 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
michael@0 934 background-color: hsla(210,4%,10%,.08) !important;
michael@0 935 }
michael@0 936
michael@0 937 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
michael@0 938 #back-button[open="true"] > .toolbarbutton-icon {
michael@0 939 background-color: hsla(210,4%,10%,.12) !important;
michael@0 940 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
michael@0 941 0 0 0 1px hsla(210,4%,10%,.25),
michael@0 942 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;
michael@0 943 }
michael@0 944
michael@0 945 %ifdef WINDOWS_AERO
michael@0 946 @media (-moz-os-version: windows-vista),
michael@0 947 (-moz-os-version: windows-win7) {
michael@0 948 %endif
michael@0 949 #back-button > .toolbarbutton-icon {
michael@0 950 background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1)) !important;
michael@0 951 box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset,
michael@0 952 0 0 0 1px hsla(0,0%,100%,.3) inset,
michael@0 953 0 0 0 1px hsla(210,54%,20%,.25),
michael@0 954 0 1px 0 hsla(210,54%,20%,.35) !important;
michael@0 955 }
michael@0 956
michael@0 957 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
michael@0 958 background-color: hsla(210,48%,96%,.75) !important;
michael@0 959 box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset,
michael@0 960 0 0 0 1px hsla(0,0%,100%,.3) inset,
michael@0 961 0 0 0 1px hsla(210,54%,20%,.3),
michael@0 962 0 1px 0 hsla(210,54%,20%,.4),
michael@0 963 0 0 4px hsla(210,54%,20%,.2) !important;
michael@0 964 }
michael@0 965
michael@0 966 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
michael@0 967 #back-button[open="true"] > .toolbarbutton-icon {
michael@0 968 background-color: hsla(210,54%,20%,.15) !important;
michael@0 969 box-shadow: 0 1px 1px hsla(210,54%,20%,.1) inset,
michael@0 970 0 0 1px hsla(210,54%,20%,.2) inset,
michael@0 971 0 0 0 1px hsla(210,54%,20%,.4),
michael@0 972 0 1px 0 hsla(210,54%,20%,.2) !important;
michael@0 973 transition: none;
michael@0 974 }
michael@0 975
michael@0 976 #main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon {
michael@0 977 box-shadow: 0 0 0 1px hsla(210,54%,20%,.55),
michael@0 978 0 1px 0 hsla(210,54%,20%,.65) !important;
michael@0 979 transition: none;
michael@0 980 }
michael@0 981 %ifdef WINDOWS_AERO
michael@0 982 }
michael@0 983 %endif
michael@0 984
michael@0 985 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
michael@0 986 transform: scaleX(-1);
michael@0 987 }
michael@0 988
michael@0 989 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
michael@0 990 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
michael@0 991 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
michael@0 992 }
michael@0 993
michael@0 994 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
michael@0 995 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
michael@0 996 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
michael@0 997 }
michael@0 998
michael@0 999 /* tabview button & menu item */
michael@0 1000
michael@0 1001 #menu_tabview {
michael@0 1002 list-style-image: url(chrome://browser/skin/tabview/tabview.png);
michael@0 1003 -moz-image-region: rect(1px, 89px, 17px, 73px);
michael@0 1004 }
michael@0 1005
michael@0 1006 #menu_tabview[groups="0"] {
michael@0 1007 -moz-image-region: rect(1px, 17px, 17px, 1px);
michael@0 1008 }
michael@0 1009
michael@0 1010 #menu_tabview[groups="1"] {
michael@0 1011 -moz-image-region: rect(1px, 35px, 17px, 19px);
michael@0 1012 }
michael@0 1013
michael@0 1014 #menu_tabview[groups="2"] {
michael@0 1015 -moz-image-region: rect(1px, 53px, 17px, 37px);
michael@0 1016 }
michael@0 1017
michael@0 1018 #menu_tabview[groups="3"] {
michael@0 1019 -moz-image-region: rect(1px, 71px, 17px, 55px);
michael@0 1020 }
michael@0 1021
michael@0 1022 /* zoom control text (reset) button special case: */
michael@0 1023
michael@0 1024 #nav-bar #zoom-reset-button > .toolbarbutton-text {
michael@0 1025 /* To make this line up with the icons, it needs the same height (18px) +
michael@0 1026 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
michael@0 1027 * increase in text sizes would break things...
michael@0 1028 */
michael@0 1029 min-height: 24px;
michael@0 1030 }
michael@0 1031
michael@0 1032 /* ::::: fullscreen window controls ::::: */
michael@0 1033
michael@0 1034 #window-controls {
michael@0 1035 -moz-margin-start: 4px;
michael@0 1036 }
michael@0 1037
michael@0 1038 #minimize-button,
michael@0 1039 #restore-button,
michael@0 1040 #close-button {
michael@0 1041 list-style-image: url("chrome://global/skin/icons/windowControls.png");
michael@0 1042 padding: 0;
michael@0 1043 }
michael@0 1044
michael@0 1045 #minimize-button {
michael@0 1046 -moz-image-region: rect(0, 16px, 16px, 0);
michael@0 1047 }
michael@0 1048 #minimize-button:hover {
michael@0 1049 -moz-image-region: rect(16px, 16px, 32px, 0);
michael@0 1050 }
michael@0 1051 #minimize-button:hover:active {
michael@0 1052 -moz-image-region: rect(32px, 16px, 48px, 0);
michael@0 1053 }
michael@0 1054 #restore-button {
michael@0 1055 -moz-image-region: rect(0, 32px, 16px, 16px);
michael@0 1056 }
michael@0 1057 #restore-button:hover {
michael@0 1058 -moz-image-region: rect(16px, 32px, 32px, 16px);
michael@0 1059 }
michael@0 1060 #restore-button:hover:active {
michael@0 1061 -moz-image-region: rect(32px, 32px, 48px, 16px);
michael@0 1062 }
michael@0 1063 #close-button {
michael@0 1064 -moz-image-region: rect(0, 48px, 16px, 32px);
michael@0 1065 -moz-appearance: none;
michael@0 1066 border-style: none;
michael@0 1067 margin: 2px;
michael@0 1068 }
michael@0 1069 #close-button:hover {
michael@0 1070 -moz-image-region: rect(16px, 48px, 32px, 32px);
michael@0 1071 }
michael@0 1072 #close-button:hover:active {
michael@0 1073 -moz-image-region: rect(32px, 48px, 48px, 32px);
michael@0 1074 }
michael@0 1075
michael@0 1076 /* ::::: Location Bar ::::: */
michael@0 1077
michael@0 1078 #urlbar,
michael@0 1079 .searchbar-textbox {
michael@0 1080 -moz-appearance: none;
michael@0 1081 margin: 0 3px;
michael@0 1082 padding: 0;
michael@0 1083 background-clip: padding-box;
michael@0 1084 border: 1px solid ThreeDShadow;
michael@0 1085 }
michael@0 1086
michael@0 1087 %ifdef WINDOWS_AERO
michael@0 1088 @media (-moz-os-version: windows-vista),
michael@0 1089 (-moz-os-version: windows-win7) {
michael@0 1090 %endif
michael@0 1091 /* < Win8 */
michael@0 1092 #urlbar,
michael@0 1093 .searchbar-textbox {
michael@0 1094 border-radius: 2px;
michael@0 1095 }
michael@0 1096 %ifdef WINDOWS_AERO
michael@0 1097 }
michael@0 1098 %endif
michael@0 1099
michael@0 1100 #urlbar {
michael@0 1101 -moz-padding-end: 2px;
michael@0 1102 }
michael@0 1103
michael@0 1104 @media (-moz-windows-default-theme) {
michael@0 1105 #urlbar,
michael@0 1106 .searchbar-textbox {
michael@0 1107 @navbarTextboxCustomBorder@
michael@0 1108 }
michael@0 1109 }
michael@0 1110
michael@0 1111 #urlbar:-moz-lwtheme,
michael@0 1112 .searchbar-textbox:-moz-lwtheme {
michael@0 1113 background-color: rgba(255,255,255,.8);
michael@0 1114 @navbarTextboxCustomBorder@
michael@0 1115 color: black;
michael@0 1116 }
michael@0 1117
michael@0 1118 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
michael@0 1119 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
michael@0 1120 background-color: rgba(255,255,255,.9);
michael@0 1121 }
michael@0 1122
michael@0 1123 #urlbar:-moz-lwtheme[focused]:not([readonly]),
michael@0 1124 .searchbar-textbox:-moz-lwtheme[focused] {
michael@0 1125 background-color: white;
michael@0 1126 }
michael@0 1127
michael@0 1128 @conditionalForwardWithUrlbar@ > #urlbar {
michael@0 1129 -moz-border-start: none;
michael@0 1130 margin-left: 0;
michael@0 1131 }
michael@0 1132
michael@0 1133 @conditionalForwardWithUrlbar@ > #urlbar:-moz-locale-dir(ltr) {
michael@0 1134 border-top-left-radius: 0;
michael@0 1135 border-bottom-left-radius: 0;
michael@0 1136 }
michael@0 1137
michael@0 1138 @conditionalForwardWithUrlbar@ > #urlbar:-moz-locale-dir(rtl) {
michael@0 1139 border-top-right-radius: 0;
michael@0 1140 border-bottom-right-radius: 0;
michael@0 1141 }
michael@0 1142
michael@0 1143 @conditionalForwardWithUrlbar@ {
michael@0 1144 clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");
michael@0 1145 -moz-margin-start: -5px;
michael@0 1146 }
michael@0 1147
michael@0 1148 @conditionalForwardWithUrlbar@:-moz-locale-dir(rtl),
michael@0 1149 @conditionalForwardWithUrlbar@ > #urlbar:-moz-locale-dir(rtl) {
michael@0 1150 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
michael@0 1151 transform: scaleX(-1);
michael@0 1152 }
michael@0 1153
michael@0 1154 @conditionalForwardWithUrlbar@:-moz-locale-dir(rtl) {
michael@0 1155 -moz-box-direction: reverse;
michael@0 1156 }
michael@0 1157
michael@0 1158 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
michael@0 1159 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
michael@0 1160 opacity: 1.0;
michael@0 1161 color: #777;
michael@0 1162 }
michael@0 1163
michael@0 1164 #urlbar-container {
michael@0 1165 -moz-box-align: center;
michael@0 1166 }
michael@0 1167
michael@0 1168 .urlbar-textbox-container {
michael@0 1169 -moz-box-align: stretch;
michael@0 1170 }
michael@0 1171
michael@0 1172 .urlbar-input-box {
michael@0 1173 -moz-margin-start: 0;
michael@0 1174 }
michael@0 1175
michael@0 1176 #urlbar-icons {
michael@0 1177 -moz-box-align: center;
michael@0 1178 }
michael@0 1179
michael@0 1180 .urlbar-icon {
michael@0 1181 padding: 0 3px;
michael@0 1182 }
michael@0 1183
michael@0 1184 .searchbar-engine-button,
michael@0 1185 .search-go-container {
michael@0 1186 padding: 2px 2px;
michael@0 1187 }
michael@0 1188
michael@0 1189 .urlbar-icon:hover {
michael@0 1190 background-image: radial-gradient(circle closest-side, hsla(200,100%,70%,.3), hsla(200,100%,70%,0));
michael@0 1191 }
michael@0 1192
michael@0 1193 .urlbar-icon[open="true"],
michael@0 1194 .urlbar-icon:hover:active {
michael@0 1195 background-image: radial-gradient(circle closest-side, hsla(200,100%,70%,.1), hsla(200,100%,70%,0));
michael@0 1196 }
michael@0 1197
michael@0 1198 #urlbar-search-splitter {
michael@0 1199 min-width: 6px;
michael@0 1200 -moz-margin-start: -3px;
michael@0 1201 border: none;
michael@0 1202 background: transparent;
michael@0 1203 }
michael@0 1204
michael@0 1205 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
michael@0 1206 -moz-margin-start: 0;
michael@0 1207 }
michael@0 1208
michael@0 1209 #urlbar-display-box {
michael@0 1210 -moz-border-end: 1px solid #AAA;
michael@0 1211 -moz-margin-end: 3px;
michael@0 1212 }
michael@0 1213
michael@0 1214 #urlbar-display {
michael@0 1215 margin-top: 0;
michael@0 1216 margin-bottom: 0;
michael@0 1217 -moz-margin-start: 0;
michael@0 1218 color: GrayText;
michael@0 1219 }
michael@0 1220
michael@0 1221 #search-container {
michael@0 1222 min-width: calc(54px + 11ch);
michael@0 1223 }
michael@0 1224
michael@0 1225 /* identity box */
michael@0 1226
michael@0 1227 #identity-box {
michael@0 1228 padding: 2px;
michael@0 1229 font-size: .9em;
michael@0 1230 }
michael@0 1231
michael@0 1232 #identity-box:-moz-locale-dir(ltr) {
michael@0 1233 border-top-left-radius: 1.5px;
michael@0 1234 border-bottom-left-radius: 1.5px;
michael@0 1235 }
michael@0 1236
michael@0 1237 #identity-box:-moz-locale-dir(rtl) {
michael@0 1238 border-top-right-radius: 1.5px;
michael@0 1239 border-bottom-right-radius: 1.5px;
michael@0 1240 }
michael@0 1241
michael@0 1242 #notification-popup-box:not([hidden]) + #identity-box {
michael@0 1243 -moz-padding-start: 10px;
michael@0 1244 border-radius: 0;
michael@0 1245 }
michael@0 1246
michael@0 1247 @conditionalForwardWithUrlbar@ > #urlbar > #identity-box {
michael@0 1248 border-radius: 0;
michael@0 1249 }
michael@0 1250
michael@0 1251 @conditionalForwardWithUrlbar@:not([switchingtabs]) > #urlbar > #identity-box {
michael@0 1252 transition: padding-left, padding-right;
michael@0 1253 }
michael@0 1254
michael@0 1255 @conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
michael@0 1256 padding-left: 5px;
michael@0 1257 }
michael@0 1258
michael@0 1259 @conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
michael@0 1260 padding-right: 5px;
michael@0 1261 }
michael@0 1262
michael@0 1263 @conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box {
michael@0 1264 /* forward button hiding is delayed when hovered */
michael@0 1265 transition-delay: 100s;
michael@0 1266 }
michael@0 1267
michael@0 1268 @conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
michael@0 1269 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
michael@0 1270 padding-left: 5.01px;
michael@0 1271 }
michael@0 1272
michael@0 1273 @conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
michael@0 1274 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
michael@0 1275 padding-right: 5.01px;
michael@0 1276 }
michael@0 1277
michael@0 1278 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
michael@0 1279 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
michael@0 1280 -moz-margin-end: 4px;
michael@0 1281 }
michael@0 1282
michael@0 1283 #identity-box.verifiedIdentity:not(:-moz-lwtheme) {
michael@0 1284 background-color: #fff;
michael@0 1285 }
michael@0 1286
michael@0 1287 #identity-box:-moz-focusring {
michael@0 1288 outline: 1px dotted #000;
michael@0 1289 outline-offset: -3px;
michael@0 1290 }
michael@0 1291
michael@0 1292 #identity-icon-labels {
michael@0 1293 -moz-padding-start: 2px;
michael@0 1294 -moz-padding-end: 5px;
michael@0 1295 }
michael@0 1296
michael@0 1297 /* Location bar dropmarker */
michael@0 1298
michael@0 1299 .urlbar-history-dropmarker {
michael@0 1300 -moz-appearance: none;
michael@0 1301 padding: 0 3px;
michael@0 1302 background-color: transparent;
michael@0 1303 border: none;
michael@0 1304 width: auto;
michael@0 1305 list-style-image: url("chrome://browser/skin/urlbar-history-dropmarker.png");
michael@0 1306 -moz-image-region: rect(0px, 11px, 14px, 0px);
michael@0 1307 }
michael@0 1308
michael@0 1309 .urlbar-history-dropmarker:hover {
michael@0 1310 background-image: radial-gradient(circle closest-side, hsla(205,100%,70%,.3), hsla(205,100%,70%,0));
michael@0 1311 -moz-image-region: rect(0px, 22px, 14px, 11px);
michael@0 1312 }
michael@0 1313
michael@0 1314 .urlbar-history-dropmarker:hover:active,
michael@0 1315 .urlbar-history-dropmarker[open="true"] {
michael@0 1316 background-image: radial-gradient(circle closest-side, hsla(205,100%,70%,.1), hsla(205,100%,70%,0));
michael@0 1317 -moz-image-region: rect(0px, 33px, 14px, 22px);
michael@0 1318 }
michael@0 1319
michael@0 1320 /* page proxy icon */
michael@0 1321
michael@0 1322 %include ../shared/identity-block.inc.css
michael@0 1323
michael@0 1324 #page-proxy-favicon {
michael@0 1325 margin-top: 1px;
michael@0 1326 margin-bottom: 1px;
michael@0 1327 -moz-margin-start: 3px;
michael@0 1328 -moz-margin-end: 1px;
michael@0 1329 -moz-image-region: rect(0, 16px, 16px, 0);
michael@0 1330 }
michael@0 1331
michael@0 1332 #identity-box:hover > #page-proxy-favicon {
michael@0 1333 -moz-image-region: rect(0, 32px, 16px, 16px);
michael@0 1334 }
michael@0 1335
michael@0 1336 #identity-box:hover:active > #page-proxy-favicon,
michael@0 1337 #identity-box[open=true] > #page-proxy-favicon {
michael@0 1338 -moz-image-region: rect(0, 48px, 16px, 32px);
michael@0 1339 }
michael@0 1340
michael@0 1341 /* autocomplete */
michael@0 1342
michael@0 1343 #treecolAutoCompleteImage {
michael@0 1344 max-width: 36px;
michael@0 1345 }
michael@0 1346
michael@0 1347 .ac-result-type-bookmark,
michael@0 1348 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
michael@0 1349 list-style-image: url("chrome://browser/skin/places/bookmark.png");
michael@0 1350 -moz-image-region: rect(0px 32px 16px 16px);
michael@0 1351 width: 16px;
michael@0 1352 height: 16px;
michael@0 1353 }
michael@0 1354
michael@0 1355 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
michael@0 1356 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
michael@0 1357 -moz-image-region: rect(0px 48px 16px 32px);
michael@0 1358 }
michael@0 1359
michael@0 1360 .ac-result-type-keyword,
michael@0 1361 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
michael@0 1362 list-style-image: url(chrome://global/skin/icons/Search-glass.png);
michael@0 1363 -moz-image-region: rect(0px 32px 16px 16px);
michael@0 1364 width: 16px;
michael@0 1365 height: 16px;
michael@0 1366 }
michael@0 1367
michael@0 1368 .ac-result-type-tag,
michael@0 1369 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
michael@0 1370 list-style-image: url("chrome://browser/skin/places/tag.png");
michael@0 1371 width: 16px;
michael@0 1372 height: 16px;
michael@0 1373 }
michael@0 1374
michael@0 1375 .ac-comment {
michael@0 1376 font-size: 1.06em;
michael@0 1377 }
michael@0 1378
michael@0 1379 .ac-extra > .ac-comment {
michael@0 1380 font-size: 1em;
michael@0 1381 }
michael@0 1382
michael@0 1383 .ac-url-text,
michael@0 1384 .ac-action-text {
michael@0 1385 font-size: 1em;
michael@0 1386 color: -moz-nativehyperlinktext;
michael@0 1387 }
michael@0 1388
michael@0 1389 %ifndef WINDOWS_AERO
michael@0 1390 @media (-moz-windows-default-theme) {
michael@0 1391 .ac-url-text:not([selected="true"]),
michael@0 1392 .ac-action-text:not([selected="true"]) {
michael@0 1393 color: #008800;
michael@0 1394 }
michael@0 1395 }
michael@0 1396 %endif
michael@0 1397
michael@0 1398 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
michael@0 1399 list-style-image: url("chrome://browser/skin/actionicon-tab.png");
michael@0 1400 -moz-image-region: rect(0, 16px, 11px, 0);
michael@0 1401 padding: 0 3px;
michael@0 1402 }
michael@0 1403
michael@0 1404 %ifdef WINDOWS_AERO
michael@0 1405 @media not all and (-moz-windows-default-theme) {
michael@0 1406 %endif
michael@0 1407 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
michael@0 1408 -moz-image-region: rect(11px, 16px, 22px, 0);
michael@0 1409 }
michael@0 1410
michael@0 1411 .ac-comment[selected="true"],
michael@0 1412 .ac-url-text[selected="true"],
michael@0 1413 .ac-action-text[selected="true"] {
michael@0 1414 color: inherit !important;
michael@0 1415 }
michael@0 1416 %ifdef WINDOWS_AERO
michael@0 1417 }
michael@0 1418 %endif
michael@0 1419
michael@0 1420 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
michael@0 1421 color: GrayText;
michael@0 1422 }
michael@0 1423
michael@0 1424 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
michael@0 1425 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
michael@0 1426 {
michael@0 1427 color: GrayText;
michael@0 1428 font-size: smaller;
michael@0 1429 }
michael@0 1430
michael@0 1431 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
michael@0 1432 border-top: 1px solid GrayText;
michael@0 1433 }
michael@0 1434
michael@0 1435 /* combined go/reload/stop button in location bar */
michael@0 1436
michael@0 1437 #urlbar > toolbarbutton {
michael@0 1438 -moz-appearance: none;
michael@0 1439 padding: 0 2px;
michael@0 1440 background-origin: border-box;
michael@0 1441 border: none;
michael@0 1442 list-style-image: url("chrome://browser/skin/reload-stop-go.png");
michael@0 1443 }
michael@0 1444
michael@0 1445 #urlbar-reload-button {
michael@0 1446 -moz-image-region: rect(0, 14px, 14px, 0);
michael@0 1447 }
michael@0 1448
michael@0 1449 #urlbar-reload-button:not([disabled]):hover {
michael@0 1450 background-image: radial-gradient(circle closest-side, hsla(200,100%,70%,.2), hsla(200,100%,70%,0));
michael@0 1451 -moz-image-region: rect(14px, 14px, 28px, 0);
michael@0 1452 }
michael@0 1453
michael@0 1454 #urlbar-reload-button:not([disabled]):hover:active {
michael@0 1455 background-image: radial-gradient(circle closest-side, hsla(200,100%,60%,.1), hsla(200,100%,60%,0));
michael@0 1456 -moz-image-region: rect(28px, 14px, 42px, 0);
michael@0 1457 }
michael@0 1458
michael@0 1459 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
michael@0 1460 transform: scaleX(-1);
michael@0 1461 }
michael@0 1462
michael@0 1463 #urlbar-go-button {
michael@0 1464 -moz-image-region: rect(0, 42px, 14px, 28px);
michael@0 1465 }
michael@0 1466
michael@0 1467 #urlbar-go-button:hover {
michael@0 1468 background-image: radial-gradient(circle closest-side, hsla(110,70%,50%,.2), hsla(110,70%,50%,0));
michael@0 1469 -moz-image-region: rect(14px, 42px, 28px, 28px);
michael@0 1470 }
michael@0 1471
michael@0 1472 #urlbar-go-button:hover:active {
michael@0 1473 background-image: radial-gradient(circle closest-side, hsla(110,70%,50%,.1), hsla(110,70%,50%,0));
michael@0 1474 -moz-image-region: rect(28px, 42px, 42px, 28px);
michael@0 1475 }
michael@0 1476
michael@0 1477 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
michael@0 1478 transform: scaleX(-1);
michael@0 1479 }
michael@0 1480
michael@0 1481 #urlbar-stop-button {
michael@0 1482 -moz-image-region: rect(0, 28px, 14px, 14px);
michael@0 1483 }
michael@0 1484
michael@0 1485 #urlbar-stop-button:not([disabled]):hover {
michael@0 1486 background-image: radial-gradient(circle closest-side, hsla(5,100%,75%,.3), hsla(5,100%,75%,0));
michael@0 1487 -moz-image-region: rect(14px, 28px, 28px, 14px);
michael@0 1488 }
michael@0 1489
michael@0 1490 #urlbar-stop-button:hover:active {
michael@0 1491 background-image: radial-gradient(circle closest-side, hsla(5,100%,75%,.1), hsla(5,100%,75%,0));
michael@0 1492 -moz-image-region: rect(28px, 28px, 42px, 14px);
michael@0 1493 }
michael@0 1494
michael@0 1495 /* popup blocker button */
michael@0 1496
michael@0 1497 #page-report-button {
michael@0 1498 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
michael@0 1499 -moz-image-region: rect(0, 16px, 16px, 0);
michael@0 1500 }
michael@0 1501
michael@0 1502 #page-report-button:hover {
michael@0 1503 -moz-image-region: rect(0, 32px, 16px, 16px);
michael@0 1504 }
michael@0 1505
michael@0 1506 #page-report-button:hover:active,
michael@0 1507 #page-report-button[open="true"] {
michael@0 1508 -moz-image-region: rect(0, 48px, 16px, 32px);
michael@0 1509 }
michael@0 1510
michael@0 1511
michael@0 1512 /* social share panel */
michael@0 1513
michael@0 1514 #social-share-panel > iframe {
michael@0 1515 background: linear-gradient(to bottom, #f0f4f7, #fafbfc);
michael@0 1516 width: 300px;
michael@0 1517 height: 150px;
michael@0 1518 }
michael@0 1519
michael@0 1520 .social-share-toolbar {
michael@0 1521 border-right: 1px solid #e2e5e8;
michael@0 1522 background: linear-gradient(to bottom, #ffffff, #f5f7fa);
michael@0 1523 }
michael@0 1524
michael@0 1525 #social-share-provider-buttons {
michael@0 1526 padding: 6px;
michael@0 1527 }
michael@0 1528
michael@0 1529 #social-share-provider-buttons > .share-provider-button {
michael@0 1530 -moz-appearance: none;
michael@0 1531 padding: 5px;
michael@0 1532 margin: 1px;
michael@0 1533 border: none;
michael@0 1534 background: none;
michael@0 1535 border-radius: 2px;
michael@0 1536 }
michael@0 1537
michael@0 1538 #social-share-provider-buttons > .share-provider-button[checked="true"]:not([disabled="true"]),
michael@0 1539 #social-share-provider-buttons > .share-provider-button:hover,
michael@0 1540 #social-share-provider-buttons > .share-provider-button:active {
michael@0 1541 padding: 4px;
michael@0 1542 border: 1px solid #aeb8c1;
michael@0 1543 box-shadow: inset 1px 1px 1px rgba(10, 31, 51, 0.1);
michael@0 1544 }
michael@0 1545
michael@0 1546 #social-share-provider-buttons > .share-provider-button[checked="true"]:not([disabled="true"]) {
michael@0 1547 background: linear-gradient(to bottom, rgba(230,232,234,.65), #d2d5d9);
michael@0 1548 }
michael@0 1549
michael@0 1550 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-text {
michael@0 1551 display: none;
michael@0 1552 }
michael@0 1553 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-icon {
michael@0 1554 width: 16px;
michael@0 1555 min-height: 16px;
michael@0 1556 max-height: 16px;
michael@0 1557 }
michael@0 1558
michael@0 1559
michael@0 1560 toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
michael@0 1561 width: auto;
michael@0 1562 height: auto;
michael@0 1563 max-width: 32px;
michael@0 1564 max-height: 24px;
michael@0 1565 }
michael@0 1566
michael@0 1567 /* fixup corners for share panel */
michael@0 1568 .social-panel > .social-panel-frame {
michael@0 1569 border-radius: inherit;
michael@0 1570 }
michael@0 1571
michael@0 1572 #social-share-panel {
michael@0 1573 max-height: 600px;
michael@0 1574 min-height: 100px;
michael@0 1575 max-width: 800px;
michael@0 1576 min-width: 300px;
michael@0 1577 }
michael@0 1578
michael@0 1579 .social-share-frame {
michael@0 1580 background: linear-gradient(to bottom, #f0f4f7, #fafbfc);
michael@0 1581 width: 330px;
michael@0 1582 height: 150px;
michael@0 1583 /* we resize our panels dynamically, make it look nice */
michael@0 1584 transition: height 100ms ease-out, width 100ms ease-out;
michael@0 1585 }
michael@0 1586
michael@0 1587 .social-share-frame:-moz-locale-dir(ltr) {
michael@0 1588 border-top-left-radius: 0;
michael@0 1589 border-bottom-left-radius: 0;
michael@0 1590 border-top-right-radius: inherit;
michael@0 1591 border-bottom-right-radius: inherit;
michael@0 1592 }
michael@0 1593
michael@0 1594 .social-share-frame:-moz-locale-dir(rtl) {
michael@0 1595 border-top-left-radius: inherit;
michael@0 1596 border-bottom-left-radius: inherit;
michael@0 1597 border-top-right-radius: 0;
michael@0 1598 border-bottom-right-radius: 0;
michael@0 1599 }
michael@0 1600
michael@0 1601 #social-share-panel > .social-share-toolbar:-moz-locale-dir(ltr) {
michael@0 1602 border-top-left-radius: inherit;
michael@0 1603 border-bottom-left-radius: inherit;
michael@0 1604 }
michael@0 1605
michael@0 1606 #social-share-panel > .social-share-toolbar:-moz-locale-dir(rtl) {
michael@0 1607 border-top-right-radius: inherit;
michael@0 1608 border-bottom-right-radius: inherit;
michael@0 1609 }
michael@0 1610
michael@0 1611 #social-share-provider-buttons:-moz-locale-dir(ltr) {
michael@0 1612 border-top-left-radius: inherit;
michael@0 1613 border-bottom-left-radius: inherit;
michael@0 1614 }
michael@0 1615
michael@0 1616 #social-share-provider-buttons:-moz-locale-dir(rtl) {
michael@0 1617 border-top-right-radius: inherit;
michael@0 1618 border-bottom-right-radius: inherit;
michael@0 1619 }
michael@0 1620
michael@0 1621 /* social recommending panel */
michael@0 1622
michael@0 1623 #social-mark-button {
michael@0 1624 -moz-image-region: rect(0, 16px, 16px, 0);
michael@0 1625 }
michael@0 1626
michael@0 1627 /* bookmarks menu-button */
michael@0 1628
michael@0 1629 #bookmarks-menu-button.bookmark-item {
michael@0 1630 list-style-image: url("chrome://browser/skin/places/bookmark.png");
michael@0 1631 -moz-image-region: rect(0px 16px 16px 0px);
michael@0 1632 }
michael@0 1633
michael@0 1634 #bookmarks-menu-button.bookmark-item[starred] {
michael@0 1635 -moz-image-region: rect(0px 32px 16px 16px);
michael@0 1636 }
michael@0 1637
michael@0 1638 #bookmarks-menu-button.bookmark-item > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
michael@0 1639 -moz-margin-start: 5px;
michael@0 1640 }
michael@0 1641
michael@0 1642 #bookmarks-menu-button[cui-areatype="toolbar"]:not(.bookmark-item):not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
michael@0 1643 padding-top: 2px;
michael@0 1644 padding-bottom: 2px;
michael@0 1645 }
michael@0 1646
michael@0 1647 #BMB_bookmarksPopup[side="top"],
michael@0 1648 #BMB_bookmarksPopup[side="bottom"] {
michael@0 1649 margin-left: -20px;
michael@0 1650 margin-right: -20px;
michael@0 1651 }
michael@0 1652
michael@0 1653 #BMB_bookmarksPopup[side="left"],
michael@0 1654 #BMB_bookmarksPopup[side="right"] {
michael@0 1655 margin-top: -20px;
michael@0 1656 margin-bottom: -20px;
michael@0 1657 }
michael@0 1658
michael@0 1659 /* bookmarking panel */
michael@0 1660
michael@0 1661 #editBookmarkPanelStarIcon {
michael@0 1662 list-style-image: url("chrome://browser/skin/places/starred48.png");
michael@0 1663 width: 48px;
michael@0 1664 height: 48px;
michael@0 1665 }
michael@0 1666
michael@0 1667 #editBookmarkPanelStarIcon[unstarred] {
michael@0 1668 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
michael@0 1669 }
michael@0 1670
michael@0 1671 #editBookmarkPanelTitle {
michael@0 1672 font-size: 130%;
michael@0 1673 }
michael@0 1674
michael@0 1675 #editBookmarkPanelHeader,
michael@0 1676 #editBookmarkPanelContent {
michael@0 1677 margin-bottom: .5em;
michael@0 1678 }
michael@0 1679
michael@0 1680 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
michael@0 1681 #editBMPanel_folderTree {
michael@0 1682 min-width: 27em;
michael@0 1683 }
michael@0 1684
michael@0 1685 .panel-promo-box {
michael@0 1686 margin: 10px -10px -10px;
michael@0 1687 padding: 8px 10px;
michael@0 1688 border-top: 1px solid ThreeDShadow;
michael@0 1689 background-image: linear-gradient(hsla(0,0%,0%,.15), hsla(0,0%,0%,.08) 6px);
michael@0 1690 border-bottom-left-radius: 3px;
michael@0 1691 border-bottom-right-radius: 3px;
michael@0 1692 }
michael@0 1693
michael@0 1694 @media (-moz-windows-default-theme) {
michael@0 1695 .panel-promo-box {
michael@0 1696 border-top-style: none;
michael@0 1697 background: #f1f5fb;
michael@0 1698 color: GrayText;
michael@0 1699 box-shadow: 0px 1px 2px rgb(204,214,234) inset;
michael@0 1700 }
michael@0 1701 }
michael@0 1702
michael@0 1703 .panel-promo-icon {
michael@0 1704 list-style-image: url("chrome://browser/skin/sync-notification-24.png");
michael@0 1705 -moz-margin-end: 10px;
michael@0 1706 vertical-align: middle;
michael@0 1707 }
michael@0 1708
michael@0 1709 .panel-promo-closebutton {
michael@0 1710 -moz-appearance: none;
michael@0 1711 border: none;
michael@0 1712 -moz-margin-end: -10px;
michael@0 1713 margin-top: -5px;
michael@0 1714 }
michael@0 1715
michael@0 1716 .panel-promo-closebutton > .toolbarbutton-text {
michael@0 1717 padding: 0;
michael@0 1718 margin: 0;
michael@0 1719 }
michael@0 1720
michael@0 1721 /* ::::: content area ::::: */
michael@0 1722
michael@0 1723 #sidebar {
michael@0 1724 background-color: Window;
michael@0 1725 }
michael@0 1726
michael@0 1727 #sidebar-title {
michael@0 1728 -moz-padding-start: 0px;
michael@0 1729 }
michael@0 1730
michael@0 1731 #sidebar-header > .close-icon {
michael@0 1732 -moz-appearance: none;
michael@0 1733 padding: 4px 2px;
michael@0 1734 margin: 0;
michael@0 1735 border: none;
michael@0 1736 }
michael@0 1737
michael@0 1738 .browserContainer > findbar {
michael@0 1739 background-color: -moz-dialog;
michael@0 1740 color: -moz-DialogText;
michael@0 1741 text-shadow: none;
michael@0 1742 }
michael@0 1743
michael@0 1744 /* Tabstrip */
michael@0 1745
michael@0 1746 #TabsToolbar {
michael@0 1747 min-height: 0;
michael@0 1748 padding: 0;
michael@0 1749 }
michael@0 1750
michael@0 1751 #main-window:not([customizing]) #TabsToolbar:not(:-moz-lwtheme) {
michael@0 1752 background-image: linear-gradient(to top, @toolbarShadowColor@ 2px, rgba(0,0,0,.05) 2px, transparent 50%);
michael@0 1753 }
michael@0 1754
michael@0 1755 #main-window[tabsintitlebar] #TabsToolbar {
michael@0 1756 background-color: transparent;
michael@0 1757 }
michael@0 1758
michael@0 1759 %ifndef WINDOWS_AERO
michael@0 1760 @media (-moz-windows-default-theme) {
michael@0 1761 #main-window[sizemode=normal] #TabsToolbar {
michael@0 1762 padding-left: 2px;
michael@0 1763 padding-right: 2px;
michael@0 1764 }
michael@0 1765 }
michael@0 1766 %endif
michael@0 1767
michael@0 1768 %include ../shared/tabs.inc.css
michael@0 1769
michael@0 1770 @media (min-resolution: 1.25dppx) {
michael@0 1771 /* image preloading hack from shared/tabs.inc.css */
michael@0 1772 #tabbrowser-tabs::before {
michael@0 1773 background-image:
michael@0 1774 url(chrome://browser/skin/tabbrowser/tab-background-end@2x.png),
michael@0 1775 url(chrome://browser/skin/tabbrowser/tab-background-middle@2x.png),
michael@0 1776 url(chrome://browser/skin/tabbrowser/tab-background-start@2x.png);
michael@0 1777 }
michael@0 1778
michael@0 1779 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
michael@0 1780 .tabs-newtab-button:hover {
michael@0 1781 background-image: url(chrome://browser/skin/tabbrowser/tab-background-start@2x.png),
michael@0 1782 url(chrome://browser/skin/tabbrowser/tab-background-middle@2x.png),
michael@0 1783 url(chrome://browser/skin/tabbrowser/tab-background-end@2x.png);
michael@0 1784 }
michael@0 1785
michael@0 1786 .tab-background-middle[selected=true] {
michael@0 1787 background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle@2x.png),
michael@0 1788 @fgTabTexture@,
michael@0 1789 none;
michael@0 1790 }
michael@0 1791
michael@0 1792 .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
michael@0 1793 .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
michael@0 1794 background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-start@2x.png);
michael@0 1795 }
michael@0 1796
michael@0 1797 .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
michael@0 1798 .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
michael@0 1799 background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-end@2x.png);
michael@0 1800 }
michael@0 1801 }
michael@0 1802
michael@0 1803 %ifndef WINDOWS_AERO
michael@0 1804 /* Use lighter colors of buttons and text in the titlebar on luna-blue */
michael@0 1805 @media (-moz-windows-theme: luna-blue) {
michael@0 1806 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
michael@0 1807 .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
michael@0 1808 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
michael@0 1809 background-image: url("chrome://browser/skin/tabbrowser/tab-separator-luna-blue.png");
michael@0 1810 }
michael@0 1811 }
michael@0 1812 %endif
michael@0 1813
michael@0 1814 #TabsToolbar[brighttext] .tab-close-button:not(:hover):not([selected="true"]) {
michael@0 1815 -moz-image-region: rect(0, 64px, 16px, 48px) !important;
michael@0 1816 }
michael@0 1817
michael@0 1818 /* tabbrowser-tab focus ring */
michael@0 1819 .tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label {
michael@0 1820 outline: 1px dotted;
michael@0 1821 }
michael@0 1822
michael@0 1823 /* Background tabs:
michael@0 1824 *
michael@0 1825 * Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
michael@0 1826 * of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
michael@0 1827 * the titlebar. We don't need this in fullscreen since window dragging is not an issue there.
michael@0 1828 */
michael@0 1829 #main-window[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar .tab-background-middle:not([selected=true]) {
michael@0 1830 clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path);
michael@0 1831 }
michael@0 1832
michael@0 1833 /* Tab DnD indicator */
michael@0 1834 .tab-drop-indicator {
michael@0 1835 list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator.png);
michael@0 1836 margin-bottom: -9px;
michael@0 1837 z-index: 3;
michael@0 1838 }
michael@0 1839
michael@0 1840 /* Tab close button */
michael@0 1841 .tab-close-button {
michael@0 1842 -moz-appearance: none;
michael@0 1843 border: none;
michael@0 1844 }
michael@0 1845
michael@0 1846 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
michael@0 1847
michael@0 1848 .tabbrowser-arrowscrollbox > .scrollbutton-up,
michael@0 1849 .tabbrowser-arrowscrollbox > .scrollbutton-down {
michael@0 1850 list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-left.png");
michael@0 1851 margin: 0 0 @tabToolbarNavbarOverlap@;
michael@0 1852 padding-right: 2px;
michael@0 1853 border-right: 2px solid transparent;
michael@0 1854 background-origin: border-box;
michael@0 1855 }
michael@0 1856
michael@0 1857 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .scrollbutton-up,
michael@0 1858 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .scrollbutton-down {
michael@0 1859 list-style-image: url(chrome://browser/skin/tabbrowser/tab-arrow-left-inverted.png);
michael@0 1860 }
michael@0 1861
michael@0 1862 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
michael@0 1863 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
michael@0 1864 opacity: .4;
michael@0 1865 }
michael@0 1866
michael@0 1867 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
michael@0 1868 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
michael@0 1869 transform: scaleX(-1);
michael@0 1870 }
michael@0 1871
michael@0 1872 .tabbrowser-arrowscrollbox > .scrollbutton-down {
michael@0 1873 transition: 1s background-color ease-out;
michael@0 1874 }
michael@0 1875
michael@0 1876 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
michael@0 1877 background-color: Highlight;
michael@0 1878 transition: none;
michael@0 1879 }
michael@0 1880
michael@0 1881 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
michael@0 1882 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
michael@0 1883 border-width: 0 2px 0 0;
michael@0 1884 border-style: solid;
michael@0 1885 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;
michael@0 1886 }
michael@0 1887
michael@0 1888 .tabs-newtab-button > .toolbarbutton-icon {
michael@0 1889 margin-top: -1px;
michael@0 1890 margin-bottom: -1px;
michael@0 1891 }
michael@0 1892
michael@0 1893 .tabs-newtab-button,
michael@0 1894 #TabsToolbar > #new-tab-button,
michael@0 1895 #TabsToolbar > toolbarpaletteitem > #new-tab-button {
michael@0 1896 list-style-image: url(chrome://browser/skin/tabbrowser/newtab.png);
michael@0 1897 -moz-image-region: auto;
michael@0 1898 }
michael@0 1899
michael@0 1900 #TabsToolbar[brighttext] .tabs-newtab-button,
michael@0 1901 #TabsToolbar[brighttext] > #new-tab-button,
michael@0 1902 #TabsToolbar[brighttext] > toolbarpaletteitem > #new-tab-button {
michael@0 1903 list-style-image: url(chrome://browser/skin/tabbrowser/newtab-inverted.png);
michael@0 1904 }
michael@0 1905
michael@0 1906 #TabsToolbar > #new-tab-button {
michael@0 1907 width: 26px;
michael@0 1908 }
michael@0 1909
michael@0 1910 #alltabs-button {
michael@0 1911 list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.png");
michael@0 1912 }
michael@0 1913
michael@0 1914 #TabsToolbar[brighttext] > #alltabs-button,
michael@0 1915 #TabsToolbar[brighttext] > toolbarpaletteitem > #alltabs-button {
michael@0 1916 list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow-inverted.png");
michael@0 1917 }
michael@0 1918
michael@0 1919 #alltabs-button > .toolbarbutton-icon {
michael@0 1920 margin: 0 2px;
michael@0 1921 }
michael@0 1922
michael@0 1923 #alltabs-button > .toolbarbutton-menu-dropmarker {
michael@0 1924 display: none;
michael@0 1925 }
michael@0 1926
michael@0 1927 /* All tabs menupopup */
michael@0 1928 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
michael@0 1929 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
michael@0 1930 }
michael@0 1931
michael@0 1932 .alltabs-item[selected="true"] {
michael@0 1933 font-weight: bold;
michael@0 1934 }
michael@0 1935
michael@0 1936 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
michael@0 1937 list-style-image: url("chrome://global/skin/icons/loading_16.png");
michael@0 1938 }
michael@0 1939
michael@0 1940 .alltabs-item[tabIsVisible] {
michael@0 1941 /* box-shadow instead of background-color to work around native styling */
michael@0 1942 box-shadow: inset -5px 0 ThreeDShadow;
michael@0 1943 }
michael@0 1944
michael@0 1945 toolbarbutton.chevron {
michael@0 1946 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
michael@0 1947 }
michael@0 1948
michael@0 1949 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon {
michael@0 1950 transform: scaleX(-1);
michael@0 1951 }
michael@0 1952
michael@0 1953 toolbarbutton.chevron > .toolbarbutton-text,
michael@0 1954 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
michael@0 1955 display: none;
michael@0 1956 }
michael@0 1957
michael@0 1958 toolbarbutton.chevron > .toolbarbutton-icon {
michael@0 1959 margin: 0;
michael@0 1960 }
michael@0 1961
michael@0 1962 #sidebar-throbber[loading="true"] {
michael@0 1963 list-style-image: url("chrome://global/skin/icons/loading_16.png");
michael@0 1964 -moz-margin-end: 4px;
michael@0 1965 }
michael@0 1966
michael@0 1967 /* Bookmarks toolbar */
michael@0 1968 #PlacesToolbarDropIndicator {
michael@0 1969 list-style-image: url(chrome://browser/skin/places/toolbarDropMarker.png);
michael@0 1970 }
michael@0 1971
michael@0 1972 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
michael@0 1973 -moz-appearance: none;
michael@0 1974 background: Highlight !important;
michael@0 1975 color: HighlightText !important;
michael@0 1976 }
michael@0 1977
michael@0 1978 /* rules for menupopup drop indicators */
michael@0 1979 .menupopup-drop-indicator-bar {
michael@0 1980 position: relative;
michael@0 1981 /* these two margins must together compensate the indicator's height */
michael@0 1982 margin-top: -1px;
michael@0 1983 margin-bottom: -1px;
michael@0 1984 }
michael@0 1985
michael@0 1986 .menupopup-drop-indicator {
michael@0 1987 list-style-image: none;
michael@0 1988 height: 2px;
michael@0 1989 -moz-margin-end: -4em;
michael@0 1990 background-color: Highlight;
michael@0 1991 }
michael@0 1992
michael@0 1993 /* ::::: Identity Indicator Styling ::::: */
michael@0 1994
michael@0 1995 /* Popup Icons */
michael@0 1996 #identity-popup-icon {
michael@0 1997 height: 64px;
michael@0 1998 width: 64px;
michael@0 1999 padding: 0;
michael@0 2000 list-style-image: url("chrome://browser/skin/identity.png");
michael@0 2001 -moz-image-region: rect(0px, 64px, 64px, 0px);
michael@0 2002 }
michael@0 2003
michael@0 2004 #identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon {
michael@0 2005 -moz-image-region: rect(64px, 64px, 128px, 0px);
michael@0 2006 }
michael@0 2007
michael@0 2008 #identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon {
michael@0 2009 -moz-image-region: rect(128px, 64px, 192px, 0px);
michael@0 2010 }
michael@0 2011
michael@0 2012 /* Popup Body Text */
michael@0 2013 .identity-popup-description {
michael@0 2014 white-space: pre-wrap;
michael@0 2015 -moz-padding-start: 15px;
michael@0 2016 margin: 2px 0 4px;
michael@0 2017 }
michael@0 2018
michael@0 2019 .identity-popup-label {
michael@0 2020 white-space: pre-wrap;
michael@0 2021 -moz-padding-start: 15px;
michael@0 2022 margin: 0;
michael@0 2023 }
michael@0 2024
michael@0 2025 #identity-popup-content-host,
michael@0 2026 #identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner {
michael@0 2027 font-size: 1.2em;
michael@0 2028 }
michael@0 2029
michael@0 2030 #identity-popup-content-host {
michael@0 2031 margin-top: 3px;
michael@0 2032 margin-bottom: 5px;
michael@0 2033 font-weight: bold;
michael@0 2034 max-width: 300px;
michael@0 2035 }
michael@0 2036
michael@0 2037 #identity-popup-content-owner {
michael@0 2038 margin-top: 4px;
michael@0 2039 margin-bottom: 0 !important;
michael@0 2040 font-weight: bold;
michael@0 2041 max-width: 300px;
michael@0 2042 }
michael@0 2043
michael@0 2044 .verifiedDomain > #identity-popup-content-owner {
michael@0 2045 font-weight: normal;
michael@0 2046 }
michael@0 2047
michael@0 2048 #identity-popup-content-verifier {
michael@0 2049 margin: 4px 0 2px;
michael@0 2050 }
michael@0 2051
michael@0 2052 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption ,
michael@0 2053 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption {
michael@0 2054 margin-top: 10px;
michael@0 2055 -moz-margin-start: -24px;
michael@0 2056 }
michael@0 2057
michael@0 2058 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon ,
michael@0 2059 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon {
michael@0 2060 list-style-image: url("chrome://browser/skin/Secure24.png");
michael@0 2061 }
michael@0 2062
michael@0 2063 #identity-popup-help-icon {
michael@0 2064 -moz-appearance: none;
michael@0 2065 border: none;
michael@0 2066 margin: 7px 0 0 -3px;
michael@0 2067 background: none;
michael@0 2068 min-width: 0;
michael@0 2069 list-style-image: url("chrome://global/skin/icons/question-16.png");
michael@0 2070 cursor: pointer;
michael@0 2071 }
michael@0 2072
michael@0 2073 #identity-popup-help-icon > .button-box > .button-text {
michael@0 2074 display: none;
michael@0 2075 }
michael@0 2076
michael@0 2077 #identity-popup-help-icon > .button-box > .button-icon {
michael@0 2078 height: 16px;
michael@0 2079 width: 16px;
michael@0 2080 }
michael@0 2081
michael@0 2082 #identity-popup-more-info-button {
michael@0 2083 margin-top: 6px;
michael@0 2084 margin-bottom: 0;
michael@0 2085 -moz-margin-end: 0;
michael@0 2086 }
michael@0 2087
michael@0 2088 #identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
michael@0 2089 padding: 0;
michael@0 2090 }
michael@0 2091
michael@0 2092 #identity-popup-container {
michael@0 2093 min-width: 280px;
michael@0 2094 padding: 10px;
michael@0 2095 }
michael@0 2096
michael@0 2097 #identity-popup-button-container {
michael@0 2098 background: linear-gradient(to bottom, rgba(0,0,0,0.04) 60%, transparent);
michael@0 2099 padding: 10px;
michael@0 2100 margin-top: 5px;
michael@0 2101 }
michael@0 2102
michael@0 2103 .popup-notification-icon {
michael@0 2104 width: 64px;
michael@0 2105 height: 64px;
michael@0 2106 -moz-margin-end: 10px;
michael@0 2107 }
michael@0 2108
michael@0 2109 .popup-notification-icon[popupid="geolocation"] {
michael@0 2110 list-style-image: url(chrome://browser/skin/Geolocation-64.png);
michael@0 2111 }
michael@0 2112
michael@0 2113 .popup-notification-icon[popupid="xpinstall-disabled"],
michael@0 2114 .popup-notification-icon[popupid="addon-progress"],
michael@0 2115 .popup-notification-icon[popupid="addon-install-cancelled"],
michael@0 2116 .popup-notification-icon[popupid="addon-install-blocked"],
michael@0 2117 .popup-notification-icon[popupid="addon-install-failed"],
michael@0 2118 .popup-notification-icon[popupid="addon-install-complete"] {
michael@0 2119 list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png);
michael@0 2120 width: 32px;
michael@0 2121 height: 32px;
michael@0 2122 }
michael@0 2123
michael@0 2124 .popup-notification-icon[popupid="click-to-play-plugins"] {
michael@0 2125 list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
michael@0 2126 }
michael@0 2127
michael@0 2128 .popup-notification-icon[popupid="plugins-not-found"] {
michael@0 2129 list-style-image: url(chrome://browser/skin/pluginInstall-64.png);
michael@0 2130 }
michael@0 2131
michael@0 2132 .popup-notification-icon[popupid="web-notifications"] {
michael@0 2133 list-style-image: url(chrome://browser/skin/notification-64.png);
michael@0 2134 }
michael@0 2135
michael@0 2136 .addon-progress-description {
michael@0 2137 width: 350px;
michael@0 2138 max-width: 350px;
michael@0 2139 }
michael@0 2140
michael@0 2141 .popup-progress-label,
michael@0 2142 .popup-progress-meter {
michael@0 2143 -moz-margin-start: 0;
michael@0 2144 -moz-margin-end: 0;
michael@0 2145 }
michael@0 2146
michael@0 2147 .popup-progress-cancel {
michael@0 2148 -moz-appearance: none;
michael@0 2149 background: transparent;
michael@0 2150 border: none;
michael@0 2151 padding: 0;
michael@0 2152 margin: 0;
michael@0 2153 min-height: 0;
michael@0 2154 min-width: 0;
michael@0 2155 list-style-image: url(chrome://mozapps/skin/downloads/downloadButtons.png);
michael@0 2156 -moz-image-region: rect(0px, 32px, 16px, 16px);
michael@0 2157 }
michael@0 2158
michael@0 2159 .popup-progress-cancel:hover {
michael@0 2160 -moz-image-region: rect(16px, 32px, 32px, 16px);
michael@0 2161 }
michael@0 2162
michael@0 2163 .popup-progress-cancel:active {
michael@0 2164 -moz-image-region: rect(32px, 32px, 48px, 16px);
michael@0 2165 }
michael@0 2166
michael@0 2167 .popup-notification-icon[popupid="canvas-permissions-prompt"] {
michael@0 2168 list-style-image: url(chrome://browser/skin/canvas-popup.svg);
michael@0 2169 }
michael@0 2170
michael@0 2171 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
michael@0 2172 .popup-notification-icon[popupid="indexedDB-quota-prompt"],
michael@0 2173 .popup-notification-icon[popupid*="offline-app-requested"],
michael@0 2174 .popup-notification-icon[popupid="offline-app-usage"] {
michael@0 2175 list-style-image: url(chrome://global/skin/icons/question-64.png);
michael@0 2176 }
michael@0 2177
michael@0 2178 .popup-notification-icon[popupid="password-save"],
michael@0 2179 .popup-notification-icon[popupid="password-change"] {
michael@0 2180 list-style-image: url(chrome://mozapps/skin/passwordmgr/key-64.png);
michael@0 2181 }
michael@0 2182
michael@0 2183 .popup-notification-icon[popupid="webapps-install-progress"],
michael@0 2184 .popup-notification-icon[popupid="webapps-install"] {
michael@0 2185 list-style-image: url(chrome://global/skin/icons/webapps-64.png);
michael@0 2186 }
michael@0 2187
michael@0 2188 .popup-notification-icon[popupid="mixed-content-blocked"] {
michael@0 2189 list-style-image: url(chrome://browser/skin/mixed-content-blocked-64.png);
michael@0 2190 }
michael@0 2191
michael@0 2192 .popup-notification-icon[popupid="webRTC-sharingDevices"],
michael@0 2193 .popup-notification-icon[popupid="webRTC-shareDevices"] {
michael@0 2194 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png);
michael@0 2195 }
michael@0 2196
michael@0 2197 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
michael@0 2198 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
michael@0 2199 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64.png);
michael@0 2200 }
michael@0 2201
michael@0 2202 .popup-notification-icon[popupid="pointerLock"] {
michael@0 2203 list-style-image: url(chrome://browser/skin/pointerLock-64.png);
michael@0 2204 }
michael@0 2205
michael@0 2206 /* Notification icon box */
michael@0 2207 #notification-popup-box {
michael@0 2208 position: relative;
michael@0 2209 background-color: #fff;
michael@0 2210 background-clip: padding-box;
michael@0 2211 padding-left: 3px;
michael@0 2212 border-radius: 2.5px 0 0 2.5px;
michael@0 2213 border-width: 0 8px 0 0;
michael@0 2214 border-style: solid;
michael@0 2215 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 fill;
michael@0 2216 -moz-margin-end: -8px;
michael@0 2217 }
michael@0 2218
michael@0 2219 @conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box {
michael@0 2220 padding-left: 7px;
michael@0 2221 }
michael@0 2222
michael@0 2223 #notification-popup-box:-moz-locale-dir(rtl),
michael@0 2224 .notification-anchor-icon:-moz-locale-dir(rtl) {
michael@0 2225 transform: scaleX(-1);
michael@0 2226 }
michael@0 2227
michael@0 2228 .notification-anchor-icon {
michael@0 2229 width: 16px;
michael@0 2230 height: 16px;
michael@0 2231 margin: 0 2px;
michael@0 2232 }
michael@0 2233
michael@0 2234 .notification-anchor-icon:-moz-focusring {
michael@0 2235 outline: 1px dotted -moz-DialogText;
michael@0 2236 outline-offset: -3px;
michael@0 2237 }
michael@0 2238
michael@0 2239 .default-notification-icon,
michael@0 2240 #default-notification-icon {
michael@0 2241 list-style-image: url(chrome://global/skin/icons/information-16.png);
michael@0 2242 }
michael@0 2243
michael@0 2244 .identity-notification-icon,
michael@0 2245 #identity-notification-icon {
michael@0 2246 list-style-image: url(chrome://mozapps/skin/profile/profileicon.png);
michael@0 2247 }
michael@0 2248
michael@0 2249 .geo-notification-icon,
michael@0 2250 #geo-notification-icon {
michael@0 2251 list-style-image: url(chrome://browser/skin/Geolocation-16.png);
michael@0 2252 }
michael@0 2253
michael@0 2254 #addons-notification-icon {
michael@0 2255 list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png);
michael@0 2256 }
michael@0 2257
michael@0 2258 #canvas-notification-icon {
michael@0 2259 list-style-image: url(chrome://browser/skin/canvas-popup.svg);
michael@0 2260 }
michael@0 2261
michael@0 2262 .indexedDB-notification-icon,
michael@0 2263 #indexedDB-notification-icon {
michael@0 2264 list-style-image: url(chrome://global/skin/icons/question-16.png);
michael@0 2265 }
michael@0 2266
michael@0 2267 #password-notification-icon {
michael@0 2268 list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
michael@0 2269 }
michael@0 2270
michael@0 2271 #webapps-notification-icon {
michael@0 2272 list-style-image: url(chrome://global/skin/icons/webapps-16.png);
michael@0 2273 }
michael@0 2274
michael@0 2275 #plugins-notification-icon {
michael@0 2276 list-style-image: url(chrome://browser/skin/notification-pluginNormal.png);
michael@0 2277 }
michael@0 2278 #plugins-notification-icon.plugin-hidden {
michael@0 2279 list-style-image: url(chrome://browser/skin/notification-pluginAlert.png);
michael@0 2280 }
michael@0 2281
michael@0 2282 #plugins-notification-icon.plugin-blocked {
michael@0 2283 list-style-image: url(chrome://browser/skin/notification-pluginBlocked.png);
michael@0 2284 }
michael@0 2285
michael@0 2286 #plugins-notification-icon {
michael@0 2287 -moz-image-region: rect(0, 16px, 16px, 0);
michael@0 2288 }
michael@0 2289
michael@0 2290 #plugins-notification-icon:hover {
michael@0 2291 -moz-image-region: rect(0, 32px, 16px, 16px);
michael@0 2292 }
michael@0 2293
michael@0 2294 #plugins-notification-icon:active {
michael@0 2295 -moz-image-region: rect(0, 48px, 16px, 32px);
michael@0 2296 }
michael@0 2297
michael@0 2298 #plugin-install-notification-icon {
michael@0 2299 list-style-image: url(chrome://browser/skin/pluginInstall-16.png);
michael@0 2300 }
michael@0 2301
michael@0 2302 #notification-popup-box[hidden] {
michael@0 2303 /* Override display:none to make the pluginBlockedNotification animation work
michael@0 2304 when showing the notification repeatedly. */
michael@0 2305 display: -moz-box;
michael@0 2306 visibility: collapse;
michael@0 2307 }
michael@0 2308
michael@0 2309 #plugins-notification-icon.plugin-blocked[showing] {
michael@0 2310 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
michael@0 2311 }
michael@0 2312
michael@0 2313 @keyframes pluginBlockedNotification {
michael@0 2314 from {
michael@0 2315 opacity: 0;
michael@0 2316 }
michael@0 2317 to {
michael@0 2318 opacity: 1;
michael@0 2319 }
michael@0 2320 }
michael@0 2321
michael@0 2322 .mixed-content-blocked-notification-icon,
michael@0 2323 #mixed-content-blocked-notification-icon {
michael@0 2324 list-style-image: url(chrome://browser/skin/mixed-content-blocked-16.png);
michael@0 2325 }
michael@0 2326
michael@0 2327 .webRTC-shareDevices-notification-icon,
michael@0 2328 #webRTC-shareDevices-notification-icon {
michael@0 2329 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16.png);
michael@0 2330 }
michael@0 2331
michael@0 2332 .webRTC-sharingDevices-notification-icon,
michael@0 2333 #webRTC-sharingDevices-notification-icon {
michael@0 2334 list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16.png);
michael@0 2335 }
michael@0 2336
michael@0 2337 .webRTC-shareMicrophone-notification-icon,
michael@0 2338 #webRTC-shareMicrophone-notification-icon {
michael@0 2339 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16.png);
michael@0 2340 }
michael@0 2341
michael@0 2342 .webRTC-sharingMicrophone-notification-icon,
michael@0 2343 #webRTC-sharingMicrophone-notification-icon {
michael@0 2344 list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16.png);
michael@0 2345 }
michael@0 2346
michael@0 2347 .web-notifications-notification-icon,
michael@0 2348 #web-notifications-notification-icon {
michael@0 2349 list-style-image: url(chrome://browser/skin/notification-16.png);
michael@0 2350 }
michael@0 2351
michael@0 2352 #pointerLock-notification-icon {
michael@0 2353 list-style-image: url(chrome://browser/skin/pointerLock-16.png);
michael@0 2354 }
michael@0 2355 #pointerLock-cancel {
michael@0 2356 margin: 0px;
michael@0 2357 }
michael@0 2358
michael@0 2359 .translate-notification-icon,
michael@0 2360 #translate-notification-icon {
michael@0 2361 list-style-image: url(chrome://browser/skin/translation-16.png);
michael@0 2362 -moz-image-region: rect(0px, 16px, 16px, 0px);
michael@0 2363 }
michael@0 2364
michael@0 2365 .translated-notification-icon,
michael@0 2366 #translated-notification-icon {
michael@0 2367 list-style-image: url(chrome://browser/skin/translation-16.png);
michael@0 2368 -moz-image-region: rect(0px, 32px, 16px, 16px);
michael@0 2369 }
michael@0 2370
michael@0 2371 /* Bookmarks roots menu-items */
michael@0 2372 #subscribeToPageMenuitem:not([disabled]),
michael@0 2373 #subscribeToPageMenupopup,
michael@0 2374 #BMB_subscribeToPageMenuitem:not([disabled]),
michael@0 2375 #BMB_subscribeToPageMenupopup {
michael@0 2376 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
michael@0 2377 }
michael@0 2378
michael@0 2379 #bookmarksToolbarFolderMenu,
michael@0 2380 #BMB_bookmarksToolbar,
michael@0 2381 #panelMenu_bookmarksToolbar {
michael@0 2382 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png");
michael@0 2383 -moz-image-region: auto;
michael@0 2384 }
michael@0 2385
michael@0 2386 #BMB_unsortedBookmarks,
michael@0 2387 #panelMenu_unsortedBookmarks {
michael@0 2388 list-style-image: url("chrome://browser/skin/places/unsortedBookmarks.png");
michael@0 2389 -moz-image-region: auto;
michael@0 2390 }
michael@0 2391
michael@0 2392 /* ::::: Keyboard UI Panel ::::: */
michael@0 2393
michael@0 2394 .KUI-panel {
michael@0 2395 -moz-appearance: none;
michael@0 2396 background: rgba(27%,27%,27%,.9) url(KUI-background.png) repeat-x;
michael@0 2397 color: white;
michael@0 2398 border-style: none;
michael@0 2399 border-radius: 20px;
michael@0 2400 }
michael@0 2401
michael@0 2402 .KUI-panel[level="top"] {
michael@0 2403 background-color: rgba(27%,27%,27%,.65);
michael@0 2404 }
michael@0 2405
michael@0 2406 /* Ctrl-Tab */
michael@0 2407
michael@0 2408 #ctrlTab-panel {
michael@0 2409 padding: 20px 10px 10px;
michael@0 2410 font-weight: bold;
michael@0 2411 text-shadow: 0 0 1px rgb(27%,27%,27%), 0 0 2px rgb(27%,27%,27%);
michael@0 2412 }
michael@0 2413
michael@0 2414 .ctrlTab-favicon[src] {
michael@0 2415 background-color: white;
michael@0 2416 width: 20px;
michael@0 2417 height: 20px;
michael@0 2418 padding: 2px;
michael@0 2419 }
michael@0 2420
michael@0 2421 .ctrlTab-preview-inner > .tabPreview-canvas {
michael@0 2422 box-shadow: 1px 1px 2px rgb(12%,12%,12%);
michael@0 2423 }
michael@0 2424
michael@0 2425 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
michael@0 2426 margin-bottom: 2px;
michael@0 2427 }
michael@0 2428
michael@0 2429 .ctrlTab-preview-inner {
michael@0 2430 padding-bottom: 10px;
michael@0 2431 }
michael@0 2432
michael@0 2433 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
michael@0 2434 padding: 10px;
michael@0 2435 background-color: rgba(255,255,255,.2);
michael@0 2436 border-radius: .5em;
michael@0 2437 }
michael@0 2438
michael@0 2439 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
michael@0 2440 color: white;
michael@0 2441 background-color: rgba(0,0,0,.6);
michael@0 2442 text-shadow: none;
michael@0 2443 padding: 8px;
michael@0 2444 border: 2px solid white;
michael@0 2445 border-radius: .5em;
michael@0 2446 }
michael@0 2447
michael@0 2448 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
michael@0 2449 margin: -10px -10px 0;
michael@0 2450 }
michael@0 2451
michael@0 2452 #ctrlTab-showAll {
michael@0 2453 margin-top: .5em;
michael@0 2454 }
michael@0 2455
michael@0 2456 /* Sync Panel */
michael@0 2457
michael@0 2458 .sync-panel-icon {
michael@0 2459 height:32px;
michael@0 2460 width: 32px;
michael@0 2461 background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
michael@0 2462 }
michael@0 2463
michael@0 2464 .sync-panel-inner {
michael@0 2465 width: 0;
michael@0 2466 padding-left: 10px;
michael@0 2467 }
michael@0 2468
michael@0 2469 .sync-panel-button-box {
michael@0 2470 margin-top: 1em;
michael@0 2471 }
michael@0 2472
michael@0 2473 #sync-error-panel-title,
michael@0 2474 #sync-start-panel-title {
michael@0 2475 font-size: 120%;
michael@0 2476 font-weight: bold;
michael@0 2477 margin-bottom: 5px;
michael@0 2478 }
michael@0 2479
michael@0 2480 #sync-start-panel-subtitle,
michael@0 2481 #sync-error-panel-subtitle {
michael@0 2482 margin: 0;
michael@0 2483 }
michael@0 2484
michael@0 2485 /* Status panel */
michael@0 2486
michael@0 2487 .statuspanel-label {
michael@0 2488 margin: 0;
michael@0 2489 padding: 2px 4px;
michael@0 2490 background: linear-gradient(#fff, #ddd);
michael@0 2491 border: 1px none #ccc;
michael@0 2492 border-top-style: solid;
michael@0 2493 color: #333;
michael@0 2494 text-shadow: none;
michael@0 2495 }
michael@0 2496
michael@0 2497 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
michael@0 2498 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
michael@0 2499 border-right-style: solid;
michael@0 2500 /* disabled for triggering grayscale AA (bug 659213)
michael@0 2501 border-top-right-radius: .3em;
michael@0 2502 */
michael@0 2503 margin-right: 1em;
michael@0 2504 }
michael@0 2505
michael@0 2506 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
michael@0 2507 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
michael@0 2508 border-left-style: solid;
michael@0 2509 /* disabled for triggering grayscale AA (bug 659213)
michael@0 2510 border-top-left-radius: .3em;
michael@0 2511 */
michael@0 2512 margin-left: 1em;
michael@0 2513 }
michael@0 2514
michael@0 2515 #full-screen-warning-message {
michael@0 2516 background-image: url("chrome://browser/skin/fullscreen-darknoise.png");
michael@0 2517 color: white;
michael@0 2518 border-radius: 4px;
michael@0 2519 margin-top: 30px;
michael@0 2520 padding: 30px 50px;
michael@0 2521 box-shadow: 0 0 2px white;
michael@0 2522 }
michael@0 2523
michael@0 2524 #full-screen-warning-container[obscure-browser] {
michael@0 2525 background-color: rgba(0,0,0,0.3);
michael@0 2526 }
michael@0 2527
michael@0 2528 .full-screen-description {
michael@0 2529 font-size: 150%;
michael@0 2530 }
michael@0 2531
michael@0 2532 #full-screen-domain-text {
michael@0 2533 font-size: 300%;
michael@0 2534 }
michael@0 2535
michael@0 2536 .full-screen-approval-button,
michael@0 2537 #full-screen-remember-decision {
michael@0 2538 font-size: 120%;
michael@0 2539 }
michael@0 2540
michael@0 2541 %include ../shared/devtools/responsivedesign.inc.css
michael@0 2542 %include ../shared/devtools/highlighter.inc.css
michael@0 2543 %include ../shared/devtools/commandline.inc.css
michael@0 2544 %include ../shared/plugin-doorhanger.inc.css
michael@0 2545
michael@0 2546 %include downloads/indicator.css
michael@0 2547
michael@0 2548 /* Error counter */
michael@0 2549
michael@0 2550 #developer-toolbar-toolbox-button[error-count]:before {
michael@0 2551 color: #FDF3DE;
michael@0 2552 min-width: 16px;
michael@0 2553 text-shadow: none;
michael@0 2554 background-image: linear-gradient(#B4211B, #8A1915);
michael@0 2555 border-radius: 1px;
michael@0 2556 -moz-margin-end: 5px;
michael@0 2557 }
michael@0 2558
michael@0 2559 /* Social toolbar item */
michael@0 2560
michael@0 2561 #social-provider-button {
michael@0 2562 -moz-image-region: rect(0, 16px, 16px, 0);
michael@0 2563 list-style-image: url(chrome://browser/skin/social/services-16.png);
michael@0 2564 }
michael@0 2565
michael@0 2566 #social-provider-button > .toolbarbutton-menu-dropmarker {
michael@0 2567 display: none;
michael@0 2568 }
michael@0 2569
michael@0 2570 #switch-to-metro-button[cui-areatype="toolbar"] {
michael@0 2571 list-style-image: url(chrome://browser/skin/Metro_Glyph.png);
michael@0 2572 }
michael@0 2573
michael@0 2574 toolbar[brighttext] #switch-to-metro-button[cui-areatype="toolbar"] {
michael@0 2575 list-style-image: url(chrome://browser/skin/Metro_Glyph-inverted.png);
michael@0 2576 }
michael@0 2577
michael@0 2578 #switch-to-metro-button[cui-areatype="menu-panel"],
michael@0 2579 toolbarpaletteitem[place="palette"] > #switch-to-metro-button {
michael@0 2580 list-style-image: url(chrome://browser/skin/Metro_Glyph-menuPanel.png);
michael@0 2581 }
michael@0 2582
michael@0 2583 .toolbarbutton-badge-container {
michael@0 2584 margin: 0;
michael@0 2585 padding: 0;
michael@0 2586 position: relative;
michael@0 2587 }
michael@0 2588
michael@0 2589 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container {
michael@0 2590 padding: 2px 5px;
michael@0 2591 }
michael@0 2592
michael@0 2593 .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbar-icon {
michael@0 2594 position: absolute;
michael@0 2595 top: 2px;
michael@0 2596 right: 2px;
michael@0 2597 }
michael@0 2598
michael@0 2599 .toolbarbutton-badge-container > .toolbarbutton-icon[label]:not([label=""]) {
michael@0 2600 -moz-margin-end: 0;
michael@0 2601 }
michael@0 2602
michael@0 2603 .toolbarbutton-badge[badge=""] {
michael@0 2604 display: none;
michael@0 2605 }
michael@0 2606 .toolbarbutton-badge[badge]:not([badge=""])::after {
michael@0 2607 /* The |content| property is set in the content stylesheet. */
michael@0 2608 font-size: 9px;
michael@0 2609 font-weight: bold;
michael@0 2610 padding: 0 1px;
michael@0 2611 color: #fff;
michael@0 2612 background-color: rgb(240,61,37);
michael@0 2613 border: 1px solid rgb(216,55,34);
michael@0 2614 border-radius: 2px;
michael@0 2615 box-shadow: 0 1px 0 rgba(0,39,121,0.77);
michael@0 2616 position: absolute;
michael@0 2617 top: 0;
michael@0 2618 right: 0;
michael@0 2619 }
michael@0 2620
michael@0 2621 #nav-bar .toolbarbutton-badge[badge]:not([badge=""])::after {
michael@0 2622 top: 1px;
michael@0 2623 right: 1px;
michael@0 2624 }
michael@0 2625
michael@0 2626 .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
michael@0 2627 left: 0;
michael@0 2628 right: auto;
michael@0 2629 }
michael@0 2630
michael@0 2631 #nav-bar .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
michael@0 2632 left: 1px;
michael@0 2633 right: auto;
michael@0 2634 }
michael@0 2635
michael@0 2636 .popup-notification-icon[popupid="servicesInstall"] {
michael@0 2637 list-style-image: url(chrome://browser/skin/social/services-64.png);
michael@0 2638 }
michael@0 2639 #servicesInstall-notification-icon {
michael@0 2640 list-style-image: url(chrome://browser/skin/social/services-16.png);
michael@0 2641 }
michael@0 2642 #social-undoactivation-button {
michael@0 2643 -moz-margin-start: 0; /* override default label margin to match description margin */
michael@0 2644 }
michael@0 2645
michael@0 2646 #socialActivatedNotification .popup-notification-button-container {
michael@0 2647 margin-left: 6px;
michael@0 2648 }
michael@0 2649
michael@0 2650 .social-activation-icon {
michael@0 2651 width: auto;
michael@0 2652 height: auto;
michael@0 2653 max-height: 64px;
michael@0 2654 max-width: 64px;
michael@0 2655 }
michael@0 2656
michael@0 2657 #social-activation-message {
michael@0 2658 max-width: 250px;
michael@0 2659 }
michael@0 2660
michael@0 2661 #social-activation-message > label {
michael@0 2662 margin: 0;
michael@0 2663 }
michael@0 2664
michael@0 2665 /* social toolbar provider menu */
michael@0 2666 .social-statusarea-popup {
michael@0 2667 margin-top: 0;
michael@0 2668 margin-left: -12px;
michael@0 2669 margin-right: -12px;
michael@0 2670 }
michael@0 2671
michael@0 2672 .social-statusarea-user {
michael@0 2673 -moz-appearance: none;
michael@0 2674 border-bottom: 1px solid rgb(221,221,221);
michael@0 2675 background-color: -moz-Dialog;
michael@0 2676 position: relative;
michael@0 2677 cursor: pointer;
michael@0 2678 list-style-image:url("chrome://global/skin/icons/information-32.png");
michael@0 2679 }
michael@0 2680
michael@0 2681 .social-statusarea-user-portrait {
michael@0 2682 width: 32px;
michael@0 2683 height: 32px;
michael@0 2684 border-radius: 2px;
michael@0 2685 margin: 10px;
michael@0 2686 }
michael@0 2687
michael@0 2688 .social-statusarea-loggedInStatus {
michael@0 2689 -moz-appearance: none;
michael@0 2690 background: transparent;
michael@0 2691 border: none;
michael@0 2692 color: -moz-nativehyperlinktext;
michael@0 2693 min-width: 0;
michael@0 2694 margin: 0 6px;
michael@0 2695 list-style-image: none;
michael@0 2696 }
michael@0 2697
michael@0 2698 .social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
michael@0 2699 text-decoration: underline;
michael@0 2700 }
michael@0 2701
michael@0 2702 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
michael@0 2703 padding: 0;
michael@0 2704 }
michael@0 2705
michael@0 2706 .social-panel-frame {
michael@0 2707 border-radius: inherit;
michael@0 2708 }
michael@0 2709
michael@0 2710 %include ../shared/social/chat.inc.css
michael@0 2711
michael@0 2712 .chat-titlebar {
michael@0 2713 background-color: #c4cfde;
michael@0 2714 background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
michael@0 2715 }
michael@0 2716
michael@0 2717 .chat-titlebar[selected] {
michael@0 2718 background-color: #dae3f0;
michael@0 2719 }
michael@0 2720
michael@0 2721 .chatbar-button {
michael@0 2722 -moz-appearance: none;
michael@0 2723 background-color: #c4cfde;
michael@0 2724 background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
michael@0 2725 }
michael@0 2726
michael@0 2727 .chatbar-button > .toolbarbutton-icon {
michael@0 2728 -moz-margin-end: 0;
michael@0 2729 }
michael@0 2730
michael@0 2731 .chatbar-button:hover,
michael@0 2732 .chatbar-button[open="true"] {
michael@0 2733 background-color: #dae3f0;
michael@0 2734 }
michael@0 2735
michael@0 2736 .chatbar-button[activity]:not([open="true"]) {
michael@0 2737 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));
michael@0 2738 }
michael@0 2739
michael@0 2740 chatbox {
michael@0 2741 border-top-left-radius: 2.5px;
michael@0 2742 border-top-right-radius: 2.5px;
michael@0 2743 }
michael@0 2744
michael@0 2745 /* Customization mode */
michael@0 2746
michael@0 2747 %include ../shared/customizableui/customizeMode.inc.css
michael@0 2748
michael@0 2749 /**
michael@0 2750 * This next rule is a hack to disable subpixel anti-aliasing on all
michael@0 2751 * labels during the customize mode transition. Subpixel anti-aliasing
michael@0 2752 * on Windows with Direct2D layers acceleration is particularly slow to
michael@0 2753 * paint, so this hack is how we sidestep that performance bottleneck.
michael@0 2754 */
michael@0 2755 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
michael@0 2756 transform: perspective(0.01px);
michael@0 2757 }
michael@0 2758
michael@0 2759 #main-window[customize-entered] {
michael@0 2760 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
michael@0 2761 background-attachment: fixed;
michael@0 2762 }
michael@0 2763
michael@0 2764 #main-window[customize-entered] #browser-bottombox,
michael@0 2765 #main-window[customize-entered] #customization-container {
michael@0 2766 border-left: 1px solid @toolbarShadowColor@;
michael@0 2767 border-right: 1px solid @toolbarShadowColor@;
michael@0 2768 background-clip: padding-box;
michael@0 2769 }
michael@0 2770
michael@0 2771 #main-window[customize-entered] #browser-bottombox {
michael@0 2772 border-bottom: 1px solid @toolbarShadowColor@;
michael@0 2773 }
michael@0 2774
michael@0 2775 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
michael@0 2776 margin-right: -2px;
michael@0 2777 }
michael@0 2778
michael@0 2779 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
michael@0 2780 margin-left: -2px;
michael@0 2781 }
michael@0 2782
michael@0 2783 /* End customization mode */
michael@0 2784
michael@0 2785 /* Private browsing indicators */
michael@0 2786
michael@0 2787 /**
michael@0 2788 * Currently, we have two places where we put private browsing indicators on
michael@0 2789 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
michael@0 2790 * When tabsintitlebar is disabled, we draw the indicator at the end of the
michael@0 2791 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
michael@0 2792 * want the bottom border of the image to line up with the bottom of the window
michael@0 2793 * caption buttons. That's why there's so much special-casing going on in here.
michael@0 2794 */
michael@0 2795 .private-browsing-indicator {
michael@0 2796 display: none;
michael@0 2797 pointer-events: none;
michael@0 2798 }
michael@0 2799
michael@0 2800 #private-browsing-indicator-titlebar {
michael@0 2801 display: block;
michael@0 2802 position: absolute;
michael@0 2803 }
michael@0 2804
michael@0 2805 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
michael@0 2806 display: block;
michael@0 2807 }
michael@0 2808
michael@0 2809 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
michael@0 2810 display: -moz-box;
michael@0 2811 }
michael@0 2812
michael@0 2813 #TabsToolbar > .private-browsing-indicator {
michael@0 2814 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
michael@0 2815 -moz-margin-start: 4px;
michael@0 2816 width: 48px;
michael@0 2817 }
michael@0 2818
michael@0 2819 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
michael@0 2820 * mode, since the tabstrip "mimics" the titlebar in that case with its own
michael@0 2821 * min/max/close window buttons.
michael@0 2822 */
michael@0 2823 #private-browsing-indicator-titlebar > .private-browsing-indicator,
michael@0 2824 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
michael@0 2825 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
michael@0 2826 -moz-margin-end: 4px;
michael@0 2827 width: 40px;
michael@0 2828 height: 20px;
michael@0 2829 position: relative;
michael@0 2830 }
michael@0 2831
michael@0 2832 %ifndef WINDOWS_AERO
michael@0 2833 #TabsToolbar > .private-browsing-indicator {
michael@0 2834 background-image: url("chrome://browser/skin/privatebrowsing-mask-tabstrip-XPVista7.png");
michael@0 2835 }
michael@0 2836
michael@0 2837 @media not all and (-moz-windows-classic) {
michael@0 2838 #private-browsing-indicator-titlebar > .private-browsing-indicator {
michael@0 2839 background-image: url("chrome://browser/skin/privatebrowsing-mask-titlebar-XPVista7-tall.png");
michael@0 2840 height: 28px;
michael@0 2841 }
michael@0 2842
michael@0 2843 /* We're intentionally using the titlebar asset here for fullscreen mode.
michael@0 2844 * See bug 1008183.
michael@0 2845 */
michael@0 2846 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
michael@0 2847 background-image: url("chrome://browser/skin/privatebrowsing-mask-titlebar-XPVista7.png");
michael@0 2848 }
michael@0 2849
michael@0 2850 #main-window[sizemode="maximized"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator {
michael@0 2851 top: -5px;
michael@0 2852 }
michael@0 2853 #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator {
michael@0 2854 top: -1px;
michael@0 2855 }
michael@0 2856 }
michael@0 2857 %endif
michael@0 2858
michael@0 2859 @media (-moz-windows-classic) {
michael@0 2860 /* We're intentionally using the titlebar asset here for fullscreen mode.
michael@0 2861 * See bug 1008183.
michael@0 2862 */
michael@0 2863 #private-browsing-indicator-titlebar > .private-browsing-indicator,
michael@0 2864 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
michael@0 2865 background-image: url("chrome://browser/skin/privatebrowsing-mask-titlebar-XPVista7.png");
michael@0 2866 }
michael@0 2867 /**
michael@0 2868 * We have to use top instead of background-position in this case, otherwise
michael@0 2869 * the bottom of the indicator would get cut off by the bounds of the
michael@0 2870 * private-browsing-indicator element.
michael@0 2871 */
michael@0 2872 #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator {
michael@0 2873 top: 4px;
michael@0 2874 }
michael@0 2875 }
michael@0 2876
michael@0 2877 /* End private browsing indicators */
michael@0 2878
michael@0 2879 %include ../shared/UITour.inc.css
michael@0 2880
michael@0 2881 #UITourTooltipButtons {
michael@0 2882 margin: 24px -4px -4px;
michael@0 2883 }

mercurial