The Tor Browser / file comparison
comparison: browser/themes/osx/browser.css
browser/themes/osx/browser.css
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:226e5250b0a8 |
|---|---|
| 1 /* This Source Code Form is subject to the terms of the Mozilla Public | |
| 2 * License, v. 2.0. If a copy of the MPL was not distributed with this | |
| 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
| 4 | |
| 5 @import url("chrome://global/skin/"); | |
| 6 | |
| 7 %include shared.inc | |
| 8 %filter substitution | |
| 9 %define forwardTransitionLength 150ms | |
| 10 %define conditionalForwardWithUrlbar window:not([chromehidden~="toolbar"]) #urlbar-wrapper | |
| 11 %define conditionalForwardWithUrlbarWidth 32 | |
| 12 %define spaceAboveTabbar 9px | |
| 13 %define toolbarButtonPressed :hover:active:not([disabled="true"]):not([cui-areatype="menu-panel"]) | |
| 14 %define windowButtonMarginTop 11px | |
| 15 | |
| 16 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); | |
| 17 @namespace html url("http://www.w3.org/1999/xhtml"); | |
| 18 @namespace svg url("http://www.w3.org/2000/svg"); | |
| 19 | |
| 20 #urlbar:-moz-lwtheme:not([focused="true"]), | |
| 21 .searchbar-textbox:-moz-lwtheme:not([focused="true"]) { | |
| 22 opacity: .9; | |
| 23 } | |
| 24 | |
| 25 #navigator-toolbox::after { | |
| 26 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */ | |
| 27 background-image: linear-gradient(to top, hsla(0,0%,0%,.15), hsla(0,0%,0%,.15) 1px, hsla(0,0%,100%,.15) 1px, hsla(0,0%,100%,.15) 2px, transparent 3px); | |
| 28 content: ""; | |
| 29 display: -moz-box; | |
| 30 height: 2px; | |
| 31 margin-top: -2px; | |
| 32 position: relative; | |
| 33 z-index: 2; /* navbar is at 1 */ | |
| 34 } | |
| 35 | |
| 36 #navigator-toolbox toolbarbutton:-moz-lwtheme { | |
| 37 color: inherit; | |
| 38 text-shadow: inherit; | |
| 39 } | |
| 40 | |
| 41 #main-window { | |
| 42 -moz-appearance: none; | |
| 43 background-color: #eeeeee; | |
| 44 } | |
| 45 | |
| 46 /** Begin titlebar **/ | |
| 47 | |
| 48 #titlebar-buttonbox > .titlebar-button { | |
| 49 display: none; | |
| 50 } | |
| 51 | |
| 52 /* NB: these would be -moz-margin-start/end if it wasn't for the fact that OS X | |
| 53 * doesn't reverse the order of the items in the titlebar in RTL mode. */ | |
| 54 .titlebar-placeholder[type="caption-buttons"], | |
| 55 #titlebar-buttonbox { | |
| 56 margin-left: 7px; | |
| 57 } | |
| 58 | |
| 59 @media (-moz-mac-lion-theme) { | |
| 60 .titlebar-placeholder[type="fullscreen-button"], | |
| 61 #titlebar-secondary-buttonbox { | |
| 62 margin-right: 7px; | |
| 63 margin-left: 7px; | |
| 64 } | |
| 65 } | |
| 66 | |
| 67 #main-window:not(:-moz-lwtheme) > #titlebar { | |
| 68 -moz-appearance: -moz-window-titlebar; | |
| 69 } | |
| 70 | |
| 71 #main-window:not([tabsintitlebar]) > #titlebar { | |
| 72 height: 22px; /* The native titlebar on OS X is 22px tall. */ | |
| 73 } | |
| 74 | |
| 75 /** | |
| 76 * For tabs in titlebar on OS X, we stretch the titlebar down so that the | |
| 77 * tabstrip can overlap it. | |
| 78 */ | |
| 79 #main-window[tabsintitlebar] > #titlebar { | |
| 80 min-height: calc(@tabMinHeight@ + @spaceAboveTabbar@ - @tabToolbarNavbarOverlap@); | |
| 81 } | |
| 82 | |
| 83 /** | |
| 84 * We also vertically center the window buttons. | |
| 85 */ | |
| 86 #main-window[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-buttonbox-container, | |
| 87 #main-window[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > #titlebar-fullscreen-button { | |
| 88 margin-top: @windowButtonMarginTop@; | |
| 89 } | |
| 90 | |
| 91 #main-window[customize-entered] > #titlebar { | |
| 92 -moz-appearance: none; | |
| 93 } | |
| 94 | |
| 95 /** End titlebar **/ | |
| 96 | |
| 97 #main-window[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] { | |
| 98 border-top: 1px solid rgba(0,0,0,0.65); | |
| 99 } | |
| 100 | |
| 101 /* Because of -moz-box-align: center above, separators will be invisible unless | |
| 102 we set their min-height. See bug 583510 for more information. */ | |
| 103 toolbarseparator { | |
| 104 min-height: 22px; | |
| 105 } | |
| 106 | |
| 107 #navigator-toolbox > toolbar:not(#TabsToolbar):not(#nav-bar):not(:-moz-lwtheme) { | |
| 108 -moz-appearance: none; | |
| 109 background: url(chrome://browser/skin/Toolbar-background-noise.png) hsl(0,0%,83%); | |
| 110 } | |
| 111 | |
| 112 #TabsToolbar:not([collapsed="true"]) + #nav-bar { | |
| 113 margin-top: -@tabToolbarNavbarOverlap@; /* Move up into the TabsToolbar */ | |
| 114 /* Position the toolbar above the bottom of background tabs */ | |
| 115 position: relative; | |
| 116 z-index: 1; | |
| 117 } | |
| 118 | |
| 119 #nav-bar { | |
| 120 -moz-appearance: none; | |
| 121 background: url(chrome://browser/skin/Toolbar-background-noise.png), | |
| 122 linear-gradient(hsl(0,0%,93%), hsl(0,0%,83%)); | |
| 123 background-clip: border-box; | |
| 124 background-origin: border-box !important; | |
| 125 | |
| 126 /* Move the noise texture out of the top 1px strip because that overlaps | |
| 127 with the tabbar and we don't want to repaint it when animating tabs. | |
| 128 The noise image is at least 100px high, so repeating it only horizontally | |
| 129 is enough. */ | |
| 130 background-repeat: repeat-x, no-repeat; | |
| 131 background-position: 0 1px, 0 0; | |
| 132 | |
| 133 box-shadow: inset 0 1px 0 hsla(0,0%,100%,.4); | |
| 134 } | |
| 135 | |
| 136 @media (min-resolution: 2dppx) { | |
| 137 #nav-bar { | |
| 138 background-size: 100px 100px, auto; | |
| 139 } | |
| 140 } | |
| 141 | |
| 142 #nav-bar-customization-target { | |
| 143 padding: 4px; | |
| 144 } | |
| 145 | |
| 146 #PersonalToolbar { | |
| 147 padding: 0 4px 4px; | |
| 148 /* 4px padding ^ plus 19px personal-bookmarks (see below) */ | |
| 149 min-height: 23px; | |
| 150 } | |
| 151 | |
| 152 #navigator-toolbox > toolbar:not(#TabsToolbar):-moz-lwtheme { | |
| 153 background-color: @toolbarColorLWT@; | |
| 154 background-image: url(chrome://browser/skin/Toolbar-background-noise.png); | |
| 155 } | |
| 156 | |
| 157 #PersonalToolbar:not(:-moz-lwtheme):-moz-window-inactive, | |
| 158 #nav-bar:not(:-moz-lwtheme):-moz-window-inactive { | |
| 159 background-color: -moz-mac-chrome-inactive; | |
| 160 } | |
| 161 | |
| 162 /* ----- BOOKMARK TOOLBAR ----- */ | |
| 163 | |
| 164 #personal-bookmarks { | |
| 165 min-height: 19px; /* 16px button height + 2px padding + 1px margin-bottom */ | |
| 166 } | |
| 167 | |
| 168 toolbarbutton.chevron { | |
| 169 list-style-image: url("chrome://global/skin/icons/chevron.png"); | |
| 170 margin: 1px 0 0; | |
| 171 padding: 0; | |
| 172 } | |
| 173 | |
| 174 toolbarbutton.chevron > .toolbarbutton-text { | |
| 175 display: none; | |
| 176 } | |
| 177 | |
| 178 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon { | |
| 179 transform: scaleX(-1); | |
| 180 } | |
| 181 | |
| 182 @media (min-resolution: 2dppx) { | |
| 183 toolbarbutton.chevron { | |
| 184 list-style-image: url("chrome://global/skin/icons/chevron@2x.png"); | |
| 185 } | |
| 186 | |
| 187 toolbarbutton.chevron > .toolbarbutton-icon { | |
| 188 width: 13px; | |
| 189 } | |
| 190 } | |
| 191 | |
| 192 /* ----- BOOKMARK BUTTONS ----- */ | |
| 193 | |
| 194 toolbarbutton.bookmark-item:not(.subviewbutton):not(#bookmarks-menu-button), | |
| 195 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder { | |
| 196 border: 0; | |
| 197 border-radius: 10000px; | |
| 198 padding: 1px 8px; | |
| 199 margin: 0 0 1px; | |
| 200 } | |
| 201 | |
| 202 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder { | |
| 203 -moz-box-orient: horizontal; | |
| 204 } | |
| 205 | |
| 206 .bookmark-item > .toolbarbutton-menu-dropmarker { | |
| 207 list-style-image: url("chrome://browser/skin/places/folderDropArrow.png"); | |
| 208 -moz-image-region: rect(0, 7px, 5px, 0); | |
| 209 margin-top: 1px; | |
| 210 -moz-margin-start: 3px; | |
| 211 -moz-margin-end: -2px; | |
| 212 } | |
| 213 | |
| 214 @media (min-resolution: 2dppx) { | |
| 215 .bookmark-item > .toolbarbutton-menu-dropmarker { | |
| 216 list-style-image: url("chrome://browser/skin/places/folderDropArrow@2x.png"); | |
| 217 -moz-image-region: rect(0, 14px, 10px, 0); | |
| 218 } | |
| 219 | |
| 220 .bookmark-item > .toolbarbutton-menu-dropmarker > .dropmarker-icon { | |
| 221 width: 7px; | |
| 222 } | |
| 223 } | |
| 224 | |
| 225 .bookmark-item > .toolbarbutton-text, | |
| 226 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text { | |
| 227 display: -moz-box !important; /* Force the display of the label for bookmarks */ | |
| 228 margin: 0 !important; | |
| 229 } | |
| 230 | |
| 231 toolbarbutton.bookmark-item:not(.subviewbutton):not(#bookmarks-menu-button):hover { | |
| 232 background-color: rgba(0, 0, 0, .205); | |
| 233 } | |
| 234 | |
| 235 toolbarbutton.bookmark-item:hover:not(.subviewbutton), | |
| 236 toolbarbutton.bookmark-item[open="true"]:not(.subviewbutton) { | |
| 237 color: #FFF !important; | |
| 238 text-shadow: 0 1px rgba(0, 0, 0, .4) !important; | |
| 239 } | |
| 240 | |
| 241 .bookmark-item:hover > .toolbarbutton-menu-dropmarker, | |
| 242 .bookmark-item[open="true"] > .toolbarbutton-menu-dropmarker { | |
| 243 -moz-image-region: rect(5px, 7px, 10px, 0); | |
| 244 } | |
| 245 | |
| 246 @media (min-resolution: 2dppx) { | |
| 247 .bookmark-item:hover > .toolbarbutton-menu-dropmarker, | |
| 248 .bookmark-item[open="true"] > .toolbarbutton-menu-dropmarker { | |
| 249 -moz-image-region: rect(10px, 14px, 20px, 0); | |
| 250 } | |
| 251 } | |
| 252 | |
| 253 toolbarbutton.bookmark-item:not(.subviewbutton):not(#bookmarks-menu-button):active:hover, | |
| 254 toolbarbutton.bookmark-item:not(.subviewbutton):not(#bookmarks-menu-button)[open="true"] { | |
| 255 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.4); | |
| 256 background-color: rgba(0, 0, 0, .5); | |
| 257 } | |
| 258 | |
| 259 toolbarbutton.bookmark-item > menupopup { | |
| 260 margin-top: 2px; | |
| 261 -moz-margin-start: 3px; | |
| 262 } | |
| 263 | |
| 264 .bookmark-item:not(#home-button) > .toolbarbutton-icon, | |
| 265 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon { | |
| 266 width: 16px; | |
| 267 min-height: 16px; | |
| 268 max-height: 16px; | |
| 269 } | |
| 270 | |
| 271 .bookmark-item > .toolbarbutton-icon[label]:not([label=""]), | |
| 272 .bookmark-item > .toolbarbutton-icon[type="menu"], | |
| 273 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon[label]:not([label=""]) { | |
| 274 -moz-margin-end: 5px; | |
| 275 } | |
| 276 | |
| 277 .bookmark-item[container] { | |
| 278 list-style-image: url("chrome://global/skin/tree/folder.png"); | |
| 279 } | |
| 280 | |
| 281 .bookmark-item[container][livemark] { | |
| 282 list-style-image: url("chrome://browser/skin/page-livemarks.png"); | |
| 283 } | |
| 284 | |
| 285 .bookmark-item[container][livemark] .bookmark-item { | |
| 286 list-style-image: url("chrome://browser/skin/places/livemark-item.png"); | |
| 287 -moz-image-region: rect(0px, 16px, 16px, 0px); | |
| 288 } | |
| 289 | |
| 290 .bookmark-item[container][livemark] .bookmark-item[visited] { | |
| 291 -moz-image-region: rect(0px, 32px, 16px, 16px); | |
| 292 } | |
| 293 | |
| 294 .bookmark-item[container][query] { | |
| 295 list-style-image: url("chrome://browser/skin/places/query.png"); | |
| 296 } | |
| 297 | |
| 298 .bookmark-item[query][tagContainer] { | |
| 299 list-style-image: url("chrome://browser/skin/places/tag.png"); | |
| 300 } | |
| 301 | |
| 302 .bookmark-item[query][dayContainer] { | |
| 303 list-style-image: url("chrome://browser/skin/places/history.png"); | |
| 304 } | |
| 305 | |
| 306 .bookmark-item[query][hostContainer] { | |
| 307 list-style-image: url("chrome://global/skin/tree/folder.png"); | |
| 308 } | |
| 309 | |
| 310 .bookmark-item[query][hostContainer][open] { | |
| 311 list-style-image: url("chrome://global/skin/tree/folder.png"); | |
| 312 } | |
| 313 | |
| 314 @media (min-resolution: 2dppx) { | |
| 315 .bookmark-item[container] { | |
| 316 list-style-image: url("chrome://global/skin/tree/folder@2x.png"); | |
| 317 } | |
| 318 | |
| 319 .bookmark-item[container][livemark] { | |
| 320 list-style-image: url("chrome://browser/skin/page-livemarks@2x.png"); | |
| 321 } | |
| 322 | |
| 323 .bookmark-item[container][livemark] .bookmark-item { | |
| 324 list-style-image: url("chrome://browser/skin/places/livemark-item.png"); | |
| 325 } | |
| 326 | |
| 327 .bookmark-item[container][query] { | |
| 328 list-style-image: url("chrome://browser/skin/places/query@2x.png"); | |
| 329 } | |
| 330 | |
| 331 .bookmark-item[query][tagContainer] { | |
| 332 list-style-image: url("chrome://browser/skin/places/tag@2x.png"); | |
| 333 } | |
| 334 | |
| 335 .bookmark-item[query][dayContainer] { | |
| 336 list-style-image: url("chrome://browser/skin/places/history@2x.png"); | |
| 337 } | |
| 338 | |
| 339 .bookmark-item[query][hostContainer] { | |
| 340 list-style-image: url("chrome://global/skin/tree/folder@2x.png"); | |
| 341 } | |
| 342 | |
| 343 .bookmark-item[query][hostContainer][open] { | |
| 344 list-style-image: url("chrome://global/skin/tree/folder@2x.png"); | |
| 345 } | |
| 346 } | |
| 347 | |
| 348 /* Workaround for native menubar inheritance */ | |
| 349 .openintabs-menuitem, | |
| 350 .openlivemarksite-menuitem, | |
| 351 .livemarkstatus-menuitem { | |
| 352 list-style-image: none; | |
| 353 } | |
| 354 | |
| 355 .bookmark-item[cutting] > .toolbarbutton-icon, | |
| 356 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon { | |
| 357 opacity: 0.5; | |
| 358 } | |
| 359 | |
| 360 .bookmark-item[cutting] > .toolbarbutton-text, | |
| 361 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text { | |
| 362 opacity: 0.7; | |
| 363 } | |
| 364 | |
| 365 @media (min-resolution: 2dppx) { | |
| 366 .bookmark-item > .toolbarbutton-icon, | |
| 367 .bookmark-item > .menu-iconic-left > .menu-iconic-icon, | |
| 368 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon { | |
| 369 image-rendering: -moz-crisp-edges; | |
| 370 } | |
| 371 } | |
| 372 | |
| 373 #bookmarks-toolbar-placeholder { | |
| 374 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png") !important; | |
| 375 } | |
| 376 | |
| 377 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder, | |
| 378 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder { | |
| 379 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important; | |
| 380 } | |
| 381 | |
| 382 @media (min-resolution: 2dppx) { | |
| 383 #bookmarks-toolbar-placeholder { | |
| 384 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar@2x.png") !important; | |
| 385 } | |
| 386 | |
| 387 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder, | |
| 388 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder { | |
| 389 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel@2x.png") !important; | |
| 390 } | |
| 391 | |
| 392 #bookmarks-toolbar-placeholder > .toolbarbutton-icon { | |
| 393 width: 16px; | |
| 394 } | |
| 395 } | |
| 396 | |
| 397 /* ----- BOOKMARK STAR ANIMATION ----- */ | |
| 398 | |
| 399 @keyframes animation-bookmarkAdded { | |
| 400 from { transform: rotate(0deg) translateX(-14px) rotate(0deg) scale(1); opacity: 0; } | |
| 401 60% { transform: rotate(180deg) translateX(-14px) rotate(-180deg) scale(2.2); opacity: 1; } | |
| 402 80% { opacity: 1; } | |
| 403 to { transform: rotate(180deg) translateX(-14px) rotate(-180deg) scale(1); opacity: 0; } | |
| 404 } | |
| 405 | |
| 406 @keyframes animation-bookmarkPulse { | |
| 407 from { transform: scale(1); } | |
| 408 50% { transform: scale(1.3); } | |
| 409 to { transform: scale(1); } | |
| 410 } | |
| 411 | |
| 412 #bookmarked-notification-container { | |
| 413 min-height: 1px; | |
| 414 min-width: 1px; | |
| 415 height: 1px; | |
| 416 margin-bottom: -1px; | |
| 417 z-index: 5; | |
| 418 position: relative; | |
| 419 } | |
| 420 | |
| 421 #bookmarked-notification { | |
| 422 background-size: 16px; | |
| 423 background-position: center; | |
| 424 background-repeat: no-repeat; | |
| 425 width: 16px; | |
| 426 height: 16px; | |
| 427 opacity: 0; | |
| 428 } | |
| 429 | |
| 430 #bookmarked-notification-dropmarker-anchor { | |
| 431 z-index: -1; | |
| 432 position: relative; | |
| 433 } | |
| 434 | |
| 435 #bookmarked-notification-dropmarker-icon { | |
| 436 width: 18px; | |
| 437 height: 18px; | |
| 438 visibility: hidden; | |
| 439 } | |
| 440 | |
| 441 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification { | |
| 442 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png"); | |
| 443 animation: animation-bookmarkAdded 800ms; | |
| 444 animation-timing-function: ease, ease, ease; | |
| 445 } | |
| 446 | |
| 447 @media (min-resolution: 2dppx) { | |
| 448 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification { | |
| 449 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish@2x.png"); | |
| 450 } | |
| 451 } | |
| 452 | |
| 453 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { | |
| 454 list-style-image: none !important; | |
| 455 } | |
| 456 | |
| 457 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon { | |
| 458 visibility: visible; | |
| 459 animation: animation-bookmarkPulse 300ms; | |
| 460 animation-delay: 600ms; | |
| 461 animation-timing-function: ease-out; | |
| 462 } | |
| 463 | |
| 464 /* ----- BOOKMARK MENUS ----- */ | |
| 465 | |
| 466 .bookmark-item > .menu-iconic-left > .menu-iconic-icon { | |
| 467 width: 16px; | |
| 468 height: 16px; | |
| 469 } | |
| 470 | |
| 471 #bookmarksToolbarFolderMenu, | |
| 472 #BMB_bookmarksToolbar, | |
| 473 #panelMenu_bookmarksToolbar { | |
| 474 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png"); | |
| 475 } | |
| 476 | |
| 477 #BMB_unsortedBookmarks, | |
| 478 #panelMenu_unsortedBookmarks { | |
| 479 list-style-image: url("chrome://browser/skin/places/unfiledBookmarks.png"); | |
| 480 } | |
| 481 | |
| 482 @media (min-resolution: 2dppx) { | |
| 483 #bookmarksToolbarFolderMenu, | |
| 484 #BMB_bookmarksToolbar { | |
| 485 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar@2x.png"); | |
| 486 } | |
| 487 | |
| 488 #BMB_unsortedBookmarks { | |
| 489 list-style-image: url("chrome://browser/skin/places/unfiledBookmarks@2x.png"); | |
| 490 } | |
| 491 } | |
| 492 | |
| 493 /* ----- PRIMARY TOOLBAR BUTTONS ----- */ | |
| 494 | |
| 495 toolbar .toolbarbutton-1:not([type="menu-button"]), | |
| 496 .toolbarbutton-1 > .toolbarbutton-menubutton-button, | |
| 497 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { | |
| 498 -moz-box-orient: vertical; | |
| 499 height: 24px; | |
| 500 padding: 0; | |
| 501 border: 0; | |
| 502 } | |
| 503 | |
| 504 toolbar .toolbarbutton-1:not(:-moz-any([type="menu-button"],#back-button,#forward-button)), | |
| 505 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button, | |
| 506 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { | |
| 507 border: 1px solid transparent; | |
| 508 border-radius: @toolbarbuttonCornerRadius@; | |
| 509 transition-property: background, border-color; | |
| 510 transition-duration: 250ms; | |
| 511 } | |
| 512 | |
| 513 toolbar .toolbarbutton-1:not(:-moz-any([type="menu-button"],#back-button,#forward-button)) { | |
| 514 padding: 0 4px; | |
| 515 } | |
| 516 | |
| 517 toolbar .toolbarbutton-1:not(:-moz-any([type="menu-button"],[disabled],[open],#back-button,#forward-button)):hover, | |
| 518 toolbar .toolbarbutton-1[type="menu-button"]:not([disabled]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker, | |
| 519 toolbar .toolbarbutton-1[type="menu-button"]:not([disabled]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button, | |
| 520 toolbar .toolbarbutton-1[type="menu-button"]:not([disabled]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker, | |
| 521 toolbar .toolbaritem-combined-buttons:hover > .toolbarbutton-combined { | |
| 522 border-color: hsla(0,0%,0%,.2); | |
| 523 box-shadow: 0 1px 0 hsla(0,0%,100%,.5), | |
| 524 0 1px 0 hsla(0,0%,100%,.5) inset; | |
| 525 } | |
| 526 | |
| 527 toolbar .toolbarbutton-1:not(:-moz-any([type="menu-button"],[disabled],[open],#back-button,#forward-button)):hover, | |
| 528 toolbar .toolbarbutton-1[type="menu-button"]:not(:-moz-any([disabled],[open]))[buttonover] > .toolbarbutton-menubutton-button, | |
| 529 toolbar .toolbarbutton-1[type="menu-button"]:not(:-moz-any([disabled],[open],[buttonover])):hover > .toolbarbutton-menubutton-dropmarker { | |
| 530 background: hsla(0,0%,100%,.1) linear-gradient(hsla(0,0%,100%,.3), hsla(0,0%,100%,.1)) padding-box; | |
| 531 } | |
| 532 | |
| 533 toolbar .toolbarbutton-1:not(:-moz-any([type="menu-button"],[disabled],#back-button,#forward-button)):-moz-any(:hover:active,[open],[checked]), | |
| 534 toolbar .toolbarbutton-1[type="menu-button"]:not([disabled]) > .toolbarbutton-menubutton-button[open], | |
| 535 toolbar .toolbarbutton-1[type="menu-button"]:not(:-moz-any([disabled],[open]))[buttonover]:active > .toolbarbutton-menubutton-button, | |
| 536 toolbar .toolbarbutton-1[type="menu-button"]:not(:-moz-any([disabled],[open],[buttonover])):hover:active > .toolbarbutton-menubutton-dropmarker, | |
| 537 toolbar .toolbarbutton-1[type="menu-button"][open]:not([disabled]) > .toolbarbutton-menubutton-dropmarker { | |
| 538 background: hsla(0,0%,0%,.02) linear-gradient(hsla(0,0%,0%,.12), hsla(0,0%,0%,0)) border-box; | |
| 539 border-color: hsla(0,0%,0%,.3); | |
| 540 box-shadow: 0 1px 0 hsla(0,0%,100%,.5), | |
| 541 0 1px 0 hsla(0,0%,0%,.05) inset, | |
| 542 0 1px 1px hsla(0,0%,0%,.2) inset; | |
| 543 transition-duration: 10ms; | |
| 544 } | |
| 545 | |
| 546 toolbar .toolbarbutton-1[checked]:not(:active):hover { | |
| 547 background-color: hsla(0,0%,0%,.09); | |
| 548 transition: background-color 250ms; | |
| 549 } | |
| 550 | |
| 551 .toolbarbutton-1[type="menu-button"]:not([overflowedItem=true]) { | |
| 552 padding: 0; | |
| 553 } | |
| 554 | |
| 555 toolbar .toolbarbutton-1[type="menu-button"] { | |
| 556 margin: 0; | |
| 557 } | |
| 558 | |
| 559 .toolbarbutton-1 > .toolbarbutton-menubutton-button, | |
| 560 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { | |
| 561 margin: 0; | |
| 562 } | |
| 563 | |
| 564 .toolbarbutton-1 { | |
| 565 margin: 0 4px; | |
| 566 } | |
| 567 | |
| 568 toolbar .toolbarbutton-1:not([type="menu-button"]) { | |
| 569 margin: 0 2px; | |
| 570 } | |
| 571 | |
| 572 /** | |
| 573 * Draw seperators before toolbar button dropmarkers, as well as between | |
| 574 * consecutive toolbarbutton-1's within a toolbaritem. | |
| 575 */ | |
| 576 toolbar .toolbaritem-combined-buttons > separator, | |
| 577 toolbar .toolbarbutton-1:not(:-moz-any([open],:hover)) > .toolbarbutton-menubutton-dropmarker::before { | |
| 578 content: ""; | |
| 579 display: -moz-box; | |
| 580 position: relative; | |
| 581 top: calc(50% - 9px); | |
| 582 width: 1px; | |
| 583 height: 18px; | |
| 584 -moz-margin-start: -1px; | |
| 585 background-image: linear-gradient(hsla(0,0%,0%,.15) 0, hsla(0,0%,0%,.15) 18px); | |
| 586 background-clip: padding-box; | |
| 587 background-position: center; | |
| 588 background-repeat: no-repeat; | |
| 589 background-size: 1px 18px; | |
| 590 box-shadow: 0 0 0 1px hsla(0,0%,100%,.15); | |
| 591 } | |
| 592 | |
| 593 toolbar .toolbaritem-combined-buttons:hover > separator { | |
| 594 display: none; | |
| 595 } | |
| 596 | |
| 597 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { | |
| 598 -moz-box-orient: horizontal; | |
| 599 } | |
| 600 | |
| 601 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, | |
| 602 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { | |
| 603 margin: 0 4px; | |
| 604 } | |
| 605 | |
| 606 #nav-bar .toolbarbutton-1:not(#back-button):not(#forward-button) { | |
| 607 margin-top: 4px; | |
| 608 margin-bottom: 4px; | |
| 609 } | |
| 610 | |
| 611 #nav-bar #PanelUI-button { | |
| 612 -moz-box-align: center; | |
| 613 } | |
| 614 | |
| 615 #nav-bar #PanelUI-menu-button { | |
| 616 margin-top: 0; | |
| 617 margin-bottom: 0; | |
| 618 padding-top: 1px; | |
| 619 padding-bottom: 1px; | |
| 620 -moz-margin-start: 9px; | |
| 621 -moz-margin-end: 7px; | |
| 622 } | |
| 623 | |
| 624 @media not all and (min-resolution: 2dppx) { | |
| 625 %include ../shared/toolbarbuttons.inc.css | |
| 626 %include ../shared/menupanel.inc.css | |
| 627 | |
| 628 #back-button:hover:active:not([disabled="true"]) { | |
| 629 -moz-image-region: rect(18px, 36px, 36px, 18px); | |
| 630 } | |
| 631 | |
| 632 #forward-button:hover:active:not([disabled="true"]) { | |
| 633 -moz-image-region: rect(18px, 72px, 36px, 54px); | |
| 634 } | |
| 635 | |
| 636 #home-button@toolbarButtonPressed@ { | |
| 637 -moz-image-region: rect(18px, 126px, 36px, 108px); | |
| 638 } | |
| 639 | |
| 640 #bookmarks-menu-button[buttonover]@toolbarButtonPressed@ { | |
| 641 -moz-image-region: rect(18px, 144px, 36px, 126px); | |
| 642 } | |
| 643 | |
| 644 #bookmarks-menu-button[starred][buttonover]@toolbarButtonPressed@ { | |
| 645 -moz-image-region: rect(18px, 162px, 36px, 144px); | |
| 646 } | |
| 647 | |
| 648 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { | |
| 649 -moz-image-region: rect(0px, 630px, 18px, 612px); | |
| 650 } | |
| 651 | |
| 652 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker:hover:active:not([disabled="true"]) > .dropmarker-icon { | |
| 653 -moz-image-region: rect(18px, 630px, 36px, 612px); | |
| 654 } | |
| 655 | |
| 656 #history-panelmenu@toolbarButtonPressed@ { | |
| 657 -moz-image-region: rect(18px, 180px, 36px, 162px); | |
| 658 } | |
| 659 | |
| 660 #downloads-button@toolbarButtonPressed@ { | |
| 661 -moz-image-region: rect(18px, 198px, 36px, 180px); | |
| 662 } | |
| 663 | |
| 664 #add-ons-button@toolbarButtonPressed@ { | |
| 665 -moz-image-region: rect(18px, 216px, 36px, 198px); | |
| 666 } | |
| 667 | |
| 668 #open-file-button@toolbarButtonPressed@ { | |
| 669 -moz-image-region: rect(18px, 234px, 36px, 216px); | |
| 670 } | |
| 671 | |
| 672 #save-page-button@toolbarButtonPressed@ { | |
| 673 -moz-image-region: rect(18px, 252px, 36px, 234px); | |
| 674 } | |
| 675 | |
| 676 #sync-button@toolbarButtonPressed@ { | |
| 677 -moz-image-region: rect(18px, 270px, 36px, 252px); | |
| 678 } | |
| 679 | |
| 680 #feed-button@toolbarButtonPressed@ { | |
| 681 -moz-image-region: rect(18px, 288px, 36px, 270px); | |
| 682 } | |
| 683 | |
| 684 #social-share-button@toolbarButtonPressed@ { | |
| 685 -moz-image-region: rect(18px, 306px, 36px, 288px); | |
| 686 } | |
| 687 | |
| 688 #characterencoding-button@toolbarButtonPressed@ { | |
| 689 -moz-image-region: rect(18px, 324px, 36px, 306px); | |
| 690 } | |
| 691 | |
| 692 #new-window-button@toolbarButtonPressed@ { | |
| 693 -moz-image-region: rect(18px, 342px, 36px, 324px); | |
| 694 } | |
| 695 | |
| 696 #e10s-button@toolbarButtonPressed@ { | |
| 697 -moz-image-region: rect(18px, 342px, 36px, 324px); | |
| 698 } | |
| 699 | |
| 700 #new-tab-button@toolbarButtonPressed@ { | |
| 701 -moz-image-region: rect(18px, 360px, 36px, 342px); | |
| 702 } | |
| 703 | |
| 704 #privatebrowsing-button@toolbarButtonPressed@ { | |
| 705 -moz-image-region: rect(18px, 378px, 36px, 360px); | |
| 706 } | |
| 707 | |
| 708 #find-button@toolbarButtonPressed@ { | |
| 709 -moz-image-region: rect(18px, 396px, 36px, 378px); | |
| 710 } | |
| 711 | |
| 712 #print-button@toolbarButtonPressed@ { | |
| 713 -moz-image-region: rect(18px, 414px, 36px, 396px); | |
| 714 } | |
| 715 | |
| 716 #restore-button@toolbarButtonPressed@, | |
| 717 #fullscreen-button@toolbarButtonPressed@ { | |
| 718 -moz-image-region: rect(18px, 432px, 36px, 414px); | |
| 719 } | |
| 720 | |
| 721 #developer-button@toolbarButtonPressed@ { | |
| 722 -moz-image-region: rect(18px, 450px, 36px, 432px); | |
| 723 } | |
| 724 | |
| 725 #preferences-button@toolbarButtonPressed@ { | |
| 726 -moz-image-region: rect(18px, 468px, 36px, 450px); | |
| 727 } | |
| 728 | |
| 729 #PanelUI-menu-button@toolbarButtonPressed@ { | |
| 730 -moz-image-region: rect(18px, 486px, 36px, 468px); | |
| 731 } | |
| 732 | |
| 733 #cut-button@toolbarButtonPressed@ { | |
| 734 -moz-image-region: rect(18px, 504px, 36px, 486px); | |
| 735 } | |
| 736 | |
| 737 #copy-button@toolbarButtonPressed@ { | |
| 738 -moz-image-region: rect(18px, 522px, 36px, 504px); | |
| 739 } | |
| 740 | |
| 741 #paste-button@toolbarButtonPressed@ { | |
| 742 -moz-image-region: rect(18px, 540px, 36px, 522px); | |
| 743 } | |
| 744 | |
| 745 #zoom-out-button@toolbarButtonPressed@ { | |
| 746 -moz-image-region: rect(18px, 558px, 36px, 540px); | |
| 747 } | |
| 748 | |
| 749 #zoom-in-button@toolbarButtonPressed@ { | |
| 750 -moz-image-region: rect(18px, 576px, 36px, 558px); | |
| 751 } | |
| 752 | |
| 753 #webrtc-status-button@toolbarButtonPressed@ { | |
| 754 -moz-image-region: rect(18px, 594px, 36px, 576px); | |
| 755 } | |
| 756 | |
| 757 #nav-bar-overflow-button@toolbarButtonPressed@ { | |
| 758 -moz-image-region: rect(18px, 612px, 36px, 594px); | |
| 759 } | |
| 760 | |
| 761 #tabview-button@toolbarButtonPressed@ { | |
| 762 -moz-image-region: rect(18px, 648px, 36px, 630px); | |
| 763 } | |
| 764 | |
| 765 #email-link-button@toolbarButtonPressed@ { | |
| 766 -moz-image-region: rect(18px, 666px, 36px, 648px); | |
| 767 } | |
| 768 | |
| 769 #sidebar-button@toolbarButtonPressed@ { | |
| 770 -moz-image-region: rect(18px, 684px, 36px, 666px); | |
| 771 } | |
| 772 | |
| 773 /** | |
| 774 * OSX has a unique set of icons when fullscreen is in the checked state. | |
| 775 */ | |
| 776 | |
| 777 #fullscreen-button[checked="true"]:not([cui-areatype="menu-panel"]) { | |
| 778 -moz-image-region: rect(36px, 432px, 54px, 414px); | |
| 779 } | |
| 780 | |
| 781 #fullscreen-button[checked="true"]@toolbarButtonPressed@ { | |
| 782 -moz-image-region: rect(54px, 432px, 72px, 414px); | |
| 783 } | |
| 784 } | |
| 785 | |
| 786 @media (min-resolution: 2dppx) { | |
| 787 /* Whitelist built-in buttons, instead of .toolbarbutton-1, | |
| 788 to avoid potentially breaking add-on toolbar buttons. */ | |
| 789 | |
| 790 :-moz-any(@primaryToolbarButtons@), | |
| 791 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { | |
| 792 list-style-image: url("chrome://browser/skin/Toolbar@2x.png"); | |
| 793 } | |
| 794 | |
| 795 toolbar[brighttext] :-moz-any(@primaryToolbarButtons@), | |
| 796 toolbar[brighttext] #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { | |
| 797 list-style-image: url("chrome://browser/skin/Toolbar-inverted@2x.png"); | |
| 798 } | |
| 799 | |
| 800 #back-button { | |
| 801 -moz-image-region: rect(0, 72px, 36px, 36px); | |
| 802 } | |
| 803 | |
| 804 #back-button:hover:active:not([disabled="true"]) { | |
| 805 -moz-image-region: rect(36px, 72px, 72px, 36px); | |
| 806 } | |
| 807 | |
| 808 #forward-button { | |
| 809 -moz-image-region: rect(0, 144px, 36px, 108px); | |
| 810 } | |
| 811 | |
| 812 #forward-button:hover:active:not([disabled="true"]) { | |
| 813 -moz-image-region: rect(36px, 144px, 72px, 108px); | |
| 814 } | |
| 815 | |
| 816 #home-button[cui-areatype="toolbar"] { | |
| 817 -moz-image-region: rect(0, 252px, 36px, 216px); | |
| 818 } | |
| 819 | |
| 820 #home-button[cui-areatype="toolbar"]:hover:active { | |
| 821 -moz-image-region: rect(36px, 252px, 72px, 216px); | |
| 822 } | |
| 823 | |
| 824 #bookmarks-menu-button[cui-areatype="toolbar"] { | |
| 825 -moz-image-region: rect(0, 288px, 36px, 252px); | |
| 826 } | |
| 827 | |
| 828 #bookmarks-menu-button[cui-areatype="toolbar"][buttonover]:hover:active:not([disabled="true"]) { | |
| 829 -moz-image-region: rect(36px, 288px, 72px, 252px); | |
| 830 } | |
| 831 | |
| 832 #bookmarks-menu-button[cui-areatype="toolbar"][starred] { | |
| 833 -moz-image-region: rect(0, 324px, 36px, 288px); | |
| 834 } | |
| 835 | |
| 836 #bookmarks-menu-button[cui-areatype="toolbar"][starred][buttonover]:hover:active:not([disabled="true"]) { | |
| 837 -moz-image-region: rect(36px, 324px, 72px, 288px); | |
| 838 } | |
| 839 | |
| 840 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { | |
| 841 -moz-image-region: rect(0px, 1260px, 36px, 1224px); | |
| 842 } | |
| 843 | |
| 844 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker:hover:active:not([disabled="true"]) > .dropmarker-icon { | |
| 845 -moz-image-region: rect(36px, 1260px, 72px, 1224px); | |
| 846 } | |
| 847 | |
| 848 #history-panelmenu[cui-areatype="toolbar"] { | |
| 849 -moz-image-region: rect(0, 360px, 36px, 324px); | |
| 850 } | |
| 851 | |
| 852 #history-panelmenu[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) { | |
| 853 -moz-image-region: rect(36px, 360px, 72px, 324px); | |
| 854 } | |
| 855 | |
| 856 #downloads-button[cui-areatype="toolbar"] { | |
| 857 -moz-image-region: rect(0, 396px, 36px, 360px); | |
| 858 } | |
| 859 | |
| 860 #downloads-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) { | |
| 861 -moz-image-region: rect(36px, 396px, 72px, 360px); | |
| 862 } | |
| 863 | |
| 864 #add-ons-button[cui-areatype="toolbar"] { | |
| 865 -moz-image-region: rect(0, 432px, 36px, 396px); | |
| 866 } | |
| 867 | |
| 868 #add-ons-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) { | |
| 869 -moz-image-region: rect(36px, 432px, 72px, 396px); | |
| 870 } | |
| 871 | |
| 872 #open-file-button[cui-areatype="toolbar"] { | |
| 873 -moz-image-region: rect(0, 468px, 36px, 432px); | |
| 874 } | |
| 875 | |
| 876 #open-file-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) { | |
| 877 -moz-image-region: rect(36px, 468px, 72px, 432px); | |
| 878 } | |
| 879 | |
| 880 #save-page-button[cui-areatype="toolbar"] { | |
| 881 -moz-image-region: rect(0, 504px, 36px, 468px); | |
| 882 } | |
| 883 | |
| 884 #save-page-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) { | |
| 885 -moz-image-region: rect(36px, 504px, 72px, 468px); | |
| 886 } | |
| 887 | |
| 888 #sync-button[cui-areatype="toolbar"] { | |
| 889 -moz-image-region: rect(0, 540px, 36px, 504px); | |
| 890 } | |
| 891 | |
| 892 #sync-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) { | |
| 893 -moz-image-region: rect(36px, 540px, 72px, 504px); | |
| 894 } | |
| 895 | |
| 896 #sync-button[cui-areatype="toolbar"][status="active"], | |
| 897 #sync-button[cui-areatype="toolbar"][status="active"]:hover:active:not([disabled="true"]) { | |
| 898 list-style-image: url("chrome://browser/skin/syncProgress-toolbar@2x.png"); | |
| 899 -moz-image-region: rect(0, 36px, 36px, 0px); | |
| 900 } | |
| 901 | |
| 902 toolbar[brighttext] #sync-button[cui-areatype="toolbar"][status="active"], | |
| 903 toolbar[brighttext] #sync-button[cui-areatype="toolbar"][status="active"]:hover:active:not([disabled="true"]) { | |
| 904 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted@2x.png"); | |
| 905 } | |
| 906 | |
| 907 #feed-button[cui-areatype="toolbar"] { | |
| 908 -moz-image-region: rect(0, 576px, 36px, 540px); | |
| 909 } | |
| 910 | |
| 911 #feed-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) { | |
| 912 -moz-image-region: rect(36px, 576px, 72px, 540px); | |
| 913 } | |
| 914 | |
| 915 #social-share-button[cui-areatype="toolbar"] { | |
| 916 -moz-image-region: rect(0, 612px, 36px, 576px); | |
| 917 } | |
| 918 | |
| 919 #social-share-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) { | |
| 920 -moz-image-region: rect(36px, 612px, 72px, 576px); | |
| 921 } | |
| 922 | |
| 923 #characterencoding-button[cui-areatype="toolbar"] { | |
| 924 -moz-image-region: rect(0, 648px, 36px, 612px); | |
| 925 } | |
| 926 | |
| 927 #characterencoding-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) { | |
| 928 -moz-image-region: rect(36px, 648px, 72px, 612px); | |
| 929 } | |
| 930 | |
| 931 #new-window-button[cui-areatype="toolbar"] { | |
| 932 -moz-image-region: rect(0, 684px, 36px, 648px); | |
| 933 } | |
| 934 | |
| 935 #new-window-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) { | |
| 936 -moz-image-region: rect(36px, 684px, 72px, 648px); | |
| 937 } | |
| 938 | |
| 939 #e10s-button[cui-areatype="toolbar"] { | |
| 940 -moz-image-region: rect(0, 684px, 36px, 648px); | |
| 941 } | |
| 942 | |
| 943 #e10s-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) { | |
| 944 -moz-image-region: rect(36px, 684px, 72px, 648px); | |
| 945 } | |
| 946 | |
| 947 #e10s-button > .toolbarbutton-icon { | |
| 948 transform: scaleY(-1); | |
| 949 } | |
| 950 | |
| 951 #new-tab-button[cui-areatype="toolbar"] { | |
| 952 -moz-image-region: rect(0, 720px, 36px, 684px); | |
| 953 } | |
| 954 | |
| 955 #new-tab-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) { | |
| 956 -moz-image-region: rect(36px, 720px, 72px, 684px); | |
| 957 } | |
| 958 | |
| 959 #privatebrowsing-button[cui-areatype="toolbar"] { | |
| 960 -moz-image-region: rect(0, 756px, 36px, 720px); | |
| 961 } | |
| 962 | |
| 963 #privatebrowsing-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) { | |
| 964 -moz-image-region: rect(36px, 756px, 72px, 720px); | |
| 965 } | |
| 966 | |
| 967 #find-button[cui-areatype="toolbar"] { | |
| 968 -moz-image-region: rect(0, 792px, 36px, 756px); | |
| 969 } | |
| 970 | |
| 971 #find-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) { | |
| 972 -moz-image-region: rect(36px, 792px, 72px, 756px); | |
| 973 } | |
| 974 | |
| 975 #print-button[cui-areatype="toolbar"] { | |
| 976 -moz-image-region: rect(0, 828px, 36px, 792px); | |
| 977 } | |
| 978 | |
| 979 #print-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) { | |
| 980 -moz-image-region: rect(36px, 828px, 72px, 792px); | |
| 981 } | |
| 982 | |
| 983 #restore-button, | |
| 984 #fullscreen-button[cui-areatype="toolbar"] { | |
| 985 -moz-image-region: rect(0, 864px, 36px, 828px); | |
| 986 } | |
| 987 | |
| 988 #restore-button:hover:active:not([disabled="true"]), | |
| 989 #fullscreen-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) { | |
| 990 -moz-image-region: rect(36px, 864px, 72px, 828px); | |
| 991 } | |
| 992 | |
| 993 #fullscreen-button[cui-areatype="toolbar"][checked="true"] { | |
| 994 -moz-image-region: rect(72px, 864px, 108px, 828px); | |
| 995 } | |
| 996 | |
| 997 #fullscreen-button[cui-areatype="toolbar"][checked="true"]:hover:active:not([disabled="true"]) { | |
| 998 -moz-image-region: rect(108px, 864px, 144px, 828px); | |
| 999 } | |
| 1000 | |
| 1001 #developer-button[cui-areatype="toolbar"] { | |
| 1002 -moz-image-region: rect(0, 900px, 36px, 864px); | |
| 1003 } | |
| 1004 | |
| 1005 #developer-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) { | |
| 1006 -moz-image-region: rect(36px, 900px, 72px, 864px); | |
| 1007 } | |
| 1008 | |
| 1009 #preferences-button[cui-areatype="toolbar"] { | |
| 1010 -moz-image-region: rect(0, 936px, 36px, 900px); | |
| 1011 } | |
| 1012 | |
| 1013 #preferences-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) { | |
| 1014 -moz-image-region: rect(36px, 936px, 72px, 900px); | |
| 1015 } | |
| 1016 | |
| 1017 #PanelUI-menu-button { | |
| 1018 -moz-image-region: rect(0, 972px, 36px, 936px); | |
| 1019 } | |
| 1020 | |
| 1021 #PanelUI-menu-button:hover:active:not([disabled="true"]) { | |
| 1022 -moz-image-region: rect(36px, 972px, 72px, 936px); | |
| 1023 } | |
| 1024 | |
| 1025 #edit-controls[cui-areatype="toolbar"] > #cut-button { | |
| 1026 -moz-image-region: rect(0, 1008px, 36px, 972px); | |
| 1027 } | |
| 1028 | |
| 1029 #edit-controls[cui-areatype="toolbar"] > #cut-button:hover:active:not([disabled="true"]) { | |
| 1030 -moz-image-region: rect(36px, 1008px, 72px, 972px); | |
| 1031 } | |
| 1032 | |
| 1033 #edit-controls[cui-areatype="toolbar"] > #copy-button { | |
| 1034 -moz-image-region: rect(0, 1044px, 36px, 1008px); | |
| 1035 } | |
| 1036 | |
| 1037 #edit-controls[cui-areatype="toolbar"] > #copy-button:hover:active:not([disabled="true"]) { | |
| 1038 -moz-image-region: rect(36px, 1044px, 72px, 1008px); | |
| 1039 } | |
| 1040 | |
| 1041 #edit-controls[cui-areatype="toolbar"] > #paste-button { | |
| 1042 -moz-image-region: rect(0, 1080px, 36px, 1044px); | |
| 1043 } | |
| 1044 | |
| 1045 #edit-controls[cui-areatype="toolbar"] > #paste-button:hover:active:not([disabled="true"]) { | |
| 1046 -moz-image-region: rect(36px, 1080px, 72px, 1044px); | |
| 1047 } | |
| 1048 | |
| 1049 #zoom-controls[cui-areatype="toolbar"] > #zoom-out-button { | |
| 1050 -moz-image-region: rect(0, 1116px, 36px, 1080px); | |
| 1051 } | |
| 1052 | |
| 1053 #zoom-controls[cui-areatype="toolbar"] > #zoom-out-button:hover:active:not([disabled="true"]) { | |
| 1054 -moz-image-region: rect(36px, 1116px, 72px, 1080px); | |
| 1055 } | |
| 1056 | |
| 1057 #zoom-controls[cui-areatype="toolbar"] > #zoom-in-button { | |
| 1058 -moz-image-region: rect(0, 1152px, 36px, 1116px); | |
| 1059 } | |
| 1060 | |
| 1061 #zoom-controls[cui-areatype="toolbar"] > #zoom-in-button:hover:active:not([disabled="true"]) { | |
| 1062 -moz-image-region: rect(36px, 1152px, 72px, 1116px); | |
| 1063 } | |
| 1064 | |
| 1065 #webrtc-status-button[cui-areatype="toolbar"] { | |
| 1066 -moz-image-region: rect(0, 1188px, 36px, 1152px); | |
| 1067 } | |
| 1068 | |
| 1069 #webrtc-status-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) { | |
| 1070 -moz-image-region: rect(36px, 1188px, 72px, 1152px); | |
| 1071 } | |
| 1072 | |
| 1073 #nav-bar-overflow-button { | |
| 1074 -moz-image-region: rect(0, 1224px, 36px, 1188px); | |
| 1075 } | |
| 1076 | |
| 1077 #nav-bar-overflow-button:hover:active:not([disabled="true"]) { | |
| 1078 -moz-image-region: rect(36px, 1224px, 72px, 1188px); | |
| 1079 } | |
| 1080 | |
| 1081 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { | |
| 1082 transform: scaleX(-1); | |
| 1083 } | |
| 1084 | |
| 1085 #tabview-button { | |
| 1086 -moz-image-region: rect(0, 1296px, 36px, 1260px); | |
| 1087 } | |
| 1088 | |
| 1089 #tabview-button@toolbarButtonPressed@ { | |
| 1090 -moz-image-region: rect(36px, 1296px, 72px, 1260px); | |
| 1091 } | |
| 1092 | |
| 1093 #email-link-button[cui-areatype="toolbar"] { | |
| 1094 -moz-image-region: rect(0, 1332px, 36px, 1296px); | |
| 1095 } | |
| 1096 | |
| 1097 #email-link-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) { | |
| 1098 -moz-image-region: rect(36px, 1332px, 72px, 1296px); | |
| 1099 } | |
| 1100 | |
| 1101 #sidebar-button[cui-areatype="toolbar"] { | |
| 1102 -moz-image-region: rect(0, 1368px, 36px, 1332px); | |
| 1103 } | |
| 1104 | |
| 1105 #sidebar-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) { | |
| 1106 -moz-image-region: rect(36px, 1368px, 72px, 1332px); | |
| 1107 } | |
| 1108 | |
| 1109 :-moz-any(@primaryToolbarButtons@) > .toolbarbutton-icon, | |
| 1110 :-moz-any(@primaryToolbarButtons@) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { | |
| 1111 width: 18px; | |
| 1112 } | |
| 1113 | |
| 1114 /* Menu panel and palette styles */ | |
| 1115 | |
| 1116 toolbaritem[sdkstylewidget="true"] > toolbarbutton, | |
| 1117 :-moz-any(@primaryToolbarButtons@)[cui-areatype="menu-panel"], | |
| 1118 toolbarpaletteitem[place="palette"] > :-moz-any(@primaryToolbarButtons@) { | |
| 1119 list-style-image: url(chrome://browser/skin/menuPanel@2x.png); | |
| 1120 } | |
| 1121 | |
| 1122 #home-button[cui-areatype="menu-panel"], | |
| 1123 toolbarpaletteitem[place="palette"] > #home-button { | |
| 1124 -moz-image-region: rect(0px, 256px, 64px, 192px); | |
| 1125 } | |
| 1126 | |
| 1127 #bookmarks-menu-button[cui-areatype="menu-panel"], | |
| 1128 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { | |
| 1129 -moz-image-region: rect(0px, 384px, 64px, 320px); | |
| 1130 } | |
| 1131 | |
| 1132 #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { | |
| 1133 -moz-image-region: rect(64px, 384px, 128px, 320px); | |
| 1134 } | |
| 1135 | |
| 1136 #history-panelmenu[cui-areatype="menu-panel"], | |
| 1137 toolbarpaletteitem[place="palette"] > #history-panelmenu { | |
| 1138 -moz-image-region: rect(0px, 448px, 64px, 384px); | |
| 1139 } | |
| 1140 | |
| 1141 #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { | |
| 1142 -moz-image-region: rect(64px, 448px, 128px, 384px); | |
| 1143 } | |
| 1144 | |
| 1145 #downloads-button[cui-areatype="menu-panel"], | |
| 1146 toolbarpaletteitem[place="palette"] > #downloads-button { | |
| 1147 -moz-image-region: rect(0px, 512px, 64px, 448px); | |
| 1148 } | |
| 1149 | |
| 1150 #add-ons-button[cui-areatype="menu-panel"], | |
| 1151 toolbarpaletteitem[place="palette"] > #add-ons-button { | |
| 1152 -moz-image-region: rect(0px, 576px, 64px, 512px); | |
| 1153 } | |
| 1154 | |
| 1155 #open-file-button[cui-areatype="menu-panel"], | |
| 1156 toolbarpaletteitem[place="palette"] > #open-file-button { | |
| 1157 -moz-image-region: rect(0px, 640px, 64px, 576px); | |
| 1158 } | |
| 1159 | |
| 1160 #save-page-button[cui-areatype="menu-panel"], | |
| 1161 toolbarpaletteitem[place="palette"] > #save-page-button { | |
| 1162 -moz-image-region: rect(0px, 704px, 64px, 640px); | |
| 1163 } | |
| 1164 | |
| 1165 #sync-button[cui-areatype="menu-panel"], | |
| 1166 toolbarpaletteitem[place="palette"] > #sync-button { | |
| 1167 -moz-image-region: rect(0px, 768px, 64px, 704px); | |
| 1168 } | |
| 1169 | |
| 1170 #sync-button[cui-areatype="menu-panel"][status="active"] { | |
| 1171 list-style-image: url(chrome://browser/skin/syncProgress-menuPanel@2x.png); | |
| 1172 -moz-image-region: rect(0px, 64px, 64px, 0px); | |
| 1173 } | |
| 1174 | |
| 1175 #feed-button[cui-areatype="menu-panel"], | |
| 1176 toolbarpaletteitem[place="palette"] > #feed-button { | |
| 1177 -moz-image-region: rect(0px, 832px, 64px, 768px); | |
| 1178 } | |
| 1179 | |
| 1180 #social-share-button[cui-areatype="menu-panel"], | |
| 1181 toolbarpaletteitem[place="palette"] > #social-share-button { | |
| 1182 -moz-image-region: rect(0px, 896px, 64px, 832px); | |
| 1183 } | |
| 1184 | |
| 1185 #characterencoding-button[cui-areatype="menu-panel"], | |
| 1186 toolbarpaletteitem[place="palette"] > #characterencoding-button { | |
| 1187 -moz-image-region: rect(0, 960px, 64px, 896px); | |
| 1188 } | |
| 1189 | |
| 1190 #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { | |
| 1191 -moz-image-region: rect(64px, 960px, 128px, 896px); | |
| 1192 } | |
| 1193 | |
| 1194 #new-window-button[cui-areatype="menu-panel"], | |
| 1195 toolbarpaletteitem[place="palette"] > #new-window-button { | |
| 1196 -moz-image-region: rect(0px, 1024px, 64px, 960px); | |
| 1197 } | |
| 1198 | |
| 1199 #e10s-button[cui-areatype="menu-panel"], | |
| 1200 toolbarpaletteitem[place="palette"] > #e10s-button { | |
| 1201 -moz-image-region: rect(0px, 1024px, 64px, 960px); | |
| 1202 } | |
| 1203 | |
| 1204 #new-tab-button[cui-areatype="menu-panel"], | |
| 1205 toolbarpaletteitem[place="palette"] > #new-tab-button { | |
| 1206 -moz-image-region: rect(0px, 1088px, 64px, 1024px); | |
| 1207 } | |
| 1208 | |
| 1209 #privatebrowsing-button[cui-areatype="menu-panel"], | |
| 1210 toolbarpaletteitem[place="palette"] > #privatebrowsing-button { | |
| 1211 -moz-image-region: rect(0px, 1152px, 64px, 1088px); | |
| 1212 } | |
| 1213 | |
| 1214 #tabview-button[cui-areatype="menu-panel"], | |
| 1215 toolbarpaletteitem[place="palette"] > #tabview-button { | |
| 1216 -moz-image-region: rect(0px, 1216px, 64px, 1152px); | |
| 1217 } | |
| 1218 | |
| 1219 #find-button[cui-areatype="menu-panel"], | |
| 1220 toolbarpaletteitem[place="palette"] > #find-button { | |
| 1221 -moz-image-region: rect(0px, 1280px, 64px, 1216px); | |
| 1222 } | |
| 1223 | |
| 1224 #print-button[cui-areatype="menu-panel"], | |
| 1225 toolbarpaletteitem[place="palette"] > #print-button { | |
| 1226 -moz-image-region: rect(0px, 1344px, 64px, 1280px); | |
| 1227 } | |
| 1228 | |
| 1229 #fullscreen-button[cui-areatype="menu-panel"], | |
| 1230 toolbarpaletteitem[place="palette"] > #fullscreen-button { | |
| 1231 -moz-image-region: rect(0px, 1408px, 64px, 1344px); | |
| 1232 } | |
| 1233 | |
| 1234 #developer-button[cui-areatype="menu-panel"], | |
| 1235 toolbarpaletteitem[place="palette"] > #developer-button { | |
| 1236 -moz-image-region: rect(0px, 1472px, 64px, 1408px); | |
| 1237 } | |
| 1238 | |
| 1239 #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { | |
| 1240 -moz-image-region: rect(64px, 1472px, 128px, 1408px); | |
| 1241 } | |
| 1242 | |
| 1243 #preferences-button[cui-areatype="menu-panel"], | |
| 1244 toolbarpaletteitem[place="palette"] > #preferences-button { | |
| 1245 -moz-image-region: rect(0px, 1536px, 64px, 1472px); | |
| 1246 } | |
| 1247 | |
| 1248 #email-link-button[cui-areatype="menu-panel"], | |
| 1249 toolbarpaletteitem[place="palette"] > #email-link-button { | |
| 1250 -moz-image-region: rect(0px, 1600px, 64px, 1536px); | |
| 1251 } | |
| 1252 | |
| 1253 #sidebar-button[cui-areatype="menu-panel"], | |
| 1254 toolbarpaletteitem[place="palette"] > #sidebar-button { | |
| 1255 -moz-image-region: rect(0px, 1728px, 64px, 1664px); | |
| 1256 } | |
| 1257 | |
| 1258 toolbaritem[sdkstylewidget="true"] > toolbarbutton { | |
| 1259 -moz-image-region: rect(0, 1664px, 64px, 1600px); | |
| 1260 } | |
| 1261 | |
| 1262 /* Footer and wide panel control icons */ | |
| 1263 #edit-controls@inAnyPanel@ > toolbarbutton, | |
| 1264 #zoom-controls@inAnyPanel@ > toolbarbutton, | |
| 1265 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, | |
| 1266 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { | |
| 1267 list-style-image: url(chrome://browser/skin/menuPanel-small@2x.png); | |
| 1268 } | |
| 1269 | |
| 1270 /* Wide items like the Cut/Copy/Paste and Zoom controls are special in that their icons | |
| 1271 are 16x16 when in the panel, but 18x18 when in a toolbar. */ | |
| 1272 #edit-controls@inAnyPanel@ > toolbarbutton > .toolbarbutton-icon, | |
| 1273 #zoom-controls@inAnyPanel@ > toolbarbutton > .toolbarbutton-icon, | |
| 1274 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon, | |
| 1275 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon { | |
| 1276 width: 16px; | |
| 1277 } | |
| 1278 | |
| 1279 #edit-controls@inAnyPanel@ > #cut-button, | |
| 1280 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { | |
| 1281 -moz-image-region: rect(0px, 64px, 32px, 32px); | |
| 1282 } | |
| 1283 | |
| 1284 #edit-controls@inAnyPanel@ > #copy-button, | |
| 1285 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { | |
| 1286 -moz-image-region: rect(0px, 96px, 32px, 64px); | |
| 1287 } | |
| 1288 | |
| 1289 #edit-controls@inAnyPanel@ > #paste-button, | |
| 1290 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { | |
| 1291 -moz-image-region: rect(0px, 128px, 32px, 96px); | |
| 1292 } | |
| 1293 | |
| 1294 #zoom-controls@inAnyPanel@ > #zoom-out-button, | |
| 1295 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { | |
| 1296 -moz-image-region: rect(0px, 160px, 32px, 128px); | |
| 1297 } | |
| 1298 | |
| 1299 #zoom-controls@inAnyPanel@ > #zoom-in-button, | |
| 1300 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { | |
| 1301 -moz-image-region: rect(0px, 192px, 32px, 160px); | |
| 1302 } | |
| 1303 | |
| 1304 #PanelUI-fxa-status > .toolbarbutton-icon, | |
| 1305 #PanelUI-quit > .toolbarbutton-icon, | |
| 1306 #PanelUI-customize > .toolbarbutton-icon, | |
| 1307 #PanelUI-help > .toolbarbutton-icon { | |
| 1308 width: 16px; | |
| 1309 } | |
| 1310 } | |
| 1311 | |
| 1312 toolbar .toolbarbutton-1:not([type="menu-button"]), | |
| 1313 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button { | |
| 1314 min-width: 28px; | |
| 1315 } | |
| 1316 | |
| 1317 /* Help 16px icons fit: */ | |
| 1318 .toolbarbutton-1[cui-areatype="toolbar"]:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon { | |
| 1319 margin: 2px; | |
| 1320 } | |
| 1321 | |
| 1322 /* Help SDK icons fit: */ | |
| 1323 toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { | |
| 1324 width: 16px; | |
| 1325 } | |
| 1326 | |
| 1327 #main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-icon, | |
| 1328 #main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-badge-container > .toolbarbutton-icon, | |
| 1329 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled="true"] > .toolbarbutton-icon { | |
| 1330 opacity: .4; | |
| 1331 } | |
| 1332 | |
| 1333 @media (-moz-mac-lion-theme) { | |
| 1334 #main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-icon, | |
| 1335 #main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-badge-container > .toolbarbutton-icon, | |
| 1336 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled="true"] > .toolbarbutton-icon, | |
| 1337 #main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-menu-dropmarker, | |
| 1338 #main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-menubutton-dropmarker, | |
| 1339 .toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-icon, | |
| 1340 .toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-text, | |
| 1341 .toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-badge-container > .toolbarbutton-icon, | |
| 1342 .toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-menu-dropmarker, | |
| 1343 .toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, | |
| 1344 .toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-menubutton-button > .toolbarbutton-icon { | |
| 1345 opacity: .5; | |
| 1346 } | |
| 1347 | |
| 1348 #main-window:not([customizing]) .toolbarbutton-1:-moz-window-inactive[disabled="true"] > .toolbarbutton-icon, | |
| 1349 #main-window:not([customizing]) .toolbarbutton-1:-moz-window-inactive[disabled="true"] > .toolbarbutton-badge-container > .toolbarbutton-icon, | |
| 1350 #main-window:not([customizing]) .toolbarbutton-1:-moz-window-inactive > .toolbarbutton-menubutton-button[disabled="true"] > .toolbarbutton-icon { | |
| 1351 opacity: .25; | |
| 1352 } | |
| 1353 } | |
| 1354 | |
| 1355 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker, | |
| 1356 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { | |
| 1357 list-style-image: url(chrome://browser/skin/toolbarbutton-dropmarker.png); | |
| 1358 } | |
| 1359 | |
| 1360 @media (min-resolution: 2dppx) { | |
| 1361 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker, | |
| 1362 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { | |
| 1363 list-style-image: url(chrome://browser/skin/toolbarbutton-dropmarker@2x.png); | |
| 1364 } | |
| 1365 | |
| 1366 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker > .dropmarker-icon, | |
| 1367 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { | |
| 1368 width: 7px; | |
| 1369 } | |
| 1370 } | |
| 1371 | |
| 1372 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker { | |
| 1373 -moz-margin-end: 1px; | |
| 1374 } | |
| 1375 | |
| 1376 .toolbarbutton-1 > .toolbarbutton-menubutton-button { | |
| 1377 -moz-border-end: none !important; | |
| 1378 } | |
| 1379 | |
| 1380 .toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-locale-dir(rtl), | |
| 1381 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(ltr) { | |
| 1382 border-top-left-radius: 0; | |
| 1383 border-bottom-left-radius: 0; | |
| 1384 } | |
| 1385 | |
| 1386 .toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-locale-dir(ltr), | |
| 1387 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) { | |
| 1388 border-top-right-radius: 0; | |
| 1389 border-bottom-right-radius: 0; | |
| 1390 } | |
| 1391 | |
| 1392 .toolbarbutton-1 > .toolbarbutton-text, | |
| 1393 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text { | |
| 1394 margin: 2px 0 0; | |
| 1395 } | |
| 1396 | |
| 1397 .toolbarbutton-1 > menupopup { | |
| 1398 margin-top: 1px; | |
| 1399 } | |
| 1400 | |
| 1401 .toolbarbutton-1 > menupopup.cui-widget-panel { | |
| 1402 margin-top: -5px; | |
| 1403 } | |
| 1404 | |
| 1405 /* Common back and forward button styles */ | |
| 1406 | |
| 1407 #back-button, | |
| 1408 #forward-button { | |
| 1409 background: linear-gradient(rgba(255,255,255,0.5), | |
| 1410 rgba(255,255,255,0.2) 50%, | |
| 1411 rgba(255,255,255,0.1) 50%, | |
| 1412 rgba(255,255,255,0.2)) repeat-x; | |
| 1413 } | |
| 1414 | |
| 1415 #back-button:-moz-lwtheme, | |
| 1416 #forward-button:-moz-lwtheme { | |
| 1417 background-origin: border-box; | |
| 1418 border: 1px solid rgba(0,0,0,0.4); | |
| 1419 box-shadow: inset 0 1px rgba(255,255,255,0.3), 0 1px rgba(255,255,255,0.2); | |
| 1420 } | |
| 1421 | |
| 1422 #back-button:active:hover:-moz-lwtheme, | |
| 1423 #forward-button:active:hover:-moz-lwtheme { | |
| 1424 background-color: rgba(0,0,0,0.2); | |
| 1425 box-shadow: inset 0 2px 5px rgba(0,0,0,0.6), 0 1px rgba(255,255,255,0.2); | |
| 1426 } | |
| 1427 | |
| 1428 #back-button:-moz-window-inactive, | |
| 1429 #forward-button:-moz-window-inactive { | |
| 1430 background-color: rgba(0,0,0,0.04); | |
| 1431 border-color: rgba(0,0,0,0.2); | |
| 1432 } | |
| 1433 | |
| 1434 #back-button:-moz-locale-dir(rtl) { | |
| 1435 transform: scaleX(-1); | |
| 1436 } | |
| 1437 | |
| 1438 /* Back button styles */ | |
| 1439 | |
| 1440 #back-button { | |
| 1441 width: 32px; | |
| 1442 height: 32px; | |
| 1443 padding: 4px 5px 4px 3px; | |
| 1444 -moz-margin-end: 0; | |
| 1445 border-radius: 10000px; | |
| 1446 } | |
| 1447 | |
| 1448 #back-button:not(:-moz-lwtheme) { | |
| 1449 height: 33px; | |
| 1450 padding: 4px 5px 5px 3px; | |
| 1451 margin-bottom: -1px; | |
| 1452 background: url(chrome://browser/skin/keyhole-circle.png) 0 0 no-repeat; | |
| 1453 } | |
| 1454 | |
| 1455 @media (min-resolution: 2dppx) { | |
| 1456 #back-button:not(:-moz-lwtheme) { | |
| 1457 background-image: url(chrome://browser/skin/keyhole-circle@2x.png); | |
| 1458 background-size: 96px; | |
| 1459 } | |
| 1460 } | |
| 1461 | |
| 1462 #back-button:-moz-window-inactive:not(:-moz-lwtheme) { | |
| 1463 background-position: -64px 0; | |
| 1464 } | |
| 1465 | |
| 1466 #back-button:not([disabled="true"]):active:hover:not(:-moz-lwtheme), | |
| 1467 #back-button[open="true"]:not(:-moz-lwtheme) { | |
| 1468 background-position: -32px 0; | |
| 1469 } | |
| 1470 | |
| 1471 /* Forward button styles */ | |
| 1472 | |
| 1473 #forward-button { | |
| 1474 margin-left: -2px; | |
| 1475 margin-right: 0; | |
| 1476 padding-left: 2px; | |
| 1477 width: 32px; | |
| 1478 } | |
| 1479 | |
| 1480 #forward-button > .toolbarbutton-icon { | |
| 1481 /* shift the icon away from the back button */ | |
| 1482 margin-left: 3px; | |
| 1483 margin-right: -1px; | |
| 1484 } | |
| 1485 | |
| 1486 #forward-button:not(:-moz-lwtheme) { | |
| 1487 background: linear-gradient(hsl(0,0%,99%), hsl(0,0%,67%)) padding-box; | |
| 1488 border: 1px solid; | |
| 1489 border-color: hsl(0,0%,31%) hsla(0,0%,29%,.6) hsl(0,0%,27%); | |
| 1490 box-shadow: inset 0 1px 0 hsla(0,0%,100%,.35), | |
| 1491 0 1px 0 hsla(0,0%,100%,.2); | |
| 1492 } | |
| 1493 | |
| 1494 #forward-button:hover:active:not(:-moz-lwtheme) { | |
| 1495 background-image: linear-gradient(hsl(0,0%,74%), hsl(0,0%,61%)); | |
| 1496 box-shadow: inset rgba(0,0,0,.3) 0 -6px 10px, | |
| 1497 inset #000 0 1px 3px, | |
| 1498 inset rgba(0,0,0,.2) 0 1px 3px, | |
| 1499 0 1px 0 hsla(0,0%,100%,.2); | |
| 1500 } | |
| 1501 | |
| 1502 #forward-button:-moz-window-inactive:not(:-moz-lwtheme) { | |
| 1503 border-color: hsl(0,0%,64%) hsl(0,0%,65%) hsl(0,0%,66%); | |
| 1504 background-image: linear-gradient(hsl(0,0%,99%), hsl(0,0%,82%)); | |
| 1505 box-shadow: inset 0 1px 0 hsla(0,0%,100%,.35); | |
| 1506 } | |
| 1507 | |
| 1508 @media (-moz-mac-lion-theme) { | |
| 1509 #forward-button:not(:-moz-lwtheme) { | |
| 1510 background-image: linear-gradient(hsla(0,0%,100%,.73), hsla(0,0%,100%,.05) 85%); | |
| 1511 border-color: hsla(0,0%,0%,.35) hsla(0,0%,0%,.25) hsla(0,0%,0%,.2); | |
| 1512 box-shadow: inset 0 1px 0 hsla(0,0%,100%,.2), | |
| 1513 inset 0 0 1px hsla(0,0%,100%,.1), | |
| 1514 0 1px 0 hsla(0,0%,100%,.2); | |
| 1515 } | |
| 1516 | |
| 1517 #forward-button:hover:active:not(:-moz-lwtheme) { | |
| 1518 background-image: linear-gradient(hsla(0,0%,60%,.37), hsla(0,0%,100%,.35) 95%); | |
| 1519 border-color: hsla(0,0%,0%,.43) hsla(0,0%,0%,.25) hsla(0,0%,0%,.37); | |
| 1520 box-shadow: inset 0 1px 0 hsla(0,0%,0%,.02), | |
| 1521 inset 0 1px 2px hsla(0,0%,0%,.2), | |
| 1522 0 1px 0 hsla(0,0%,100%,.2); | |
| 1523 } | |
| 1524 | |
| 1525 #forward-button:-moz-window-inactive:not(:-moz-lwtheme) { | |
| 1526 background-image: none; | |
| 1527 border-color: hsla(0,0%,0%,.2); | |
| 1528 } | |
| 1529 } | |
| 1530 | |
| 1531 @conditionalForwardWithUrlbar@:not([switchingtabs]) > #forward-button { | |
| 1532 transition: margin-left @forwardTransitionLength@ ease-out; | |
| 1533 } | |
| 1534 | |
| 1535 @conditionalForwardWithUrlbar@ > #forward-button[disabled] { | |
| 1536 margin-left: -@conditionalForwardWithUrlbarWidth@px; | |
| 1537 } | |
| 1538 | |
| 1539 @conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] { | |
| 1540 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */ | |
| 1541 transition-delay: 100s; | |
| 1542 } | |
| 1543 | |
| 1544 @conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] { | |
| 1545 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */ | |
| 1546 margin-left: -@conditionalForwardWithUrlbarWidth@.01px; | |
| 1547 } | |
| 1548 | |
| 1549 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr), | |
| 1550 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) { | |
| 1551 list-style-image: url("chrome://browser/skin/menu-back.png") !important; | |
| 1552 } | |
| 1553 | |
| 1554 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr), | |
| 1555 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) { | |
| 1556 list-style-image: url("chrome://browser/skin/menu-forward.png") !important; | |
| 1557 } | |
| 1558 | |
| 1559 /* home button */ | |
| 1560 | |
| 1561 #home-button.bookmark-item { | |
| 1562 /* We need to use !important here, because other selectors that apply padding | |
| 1563 are more specific. */ | |
| 1564 padding-top: 0 !important; | |
| 1565 padding-bottom: 0 !important; | |
| 1566 } | |
| 1567 | |
| 1568 #home-button.bookmark-item > .toolbarbutton-icon { | |
| 1569 display: -moz-box !important; | |
| 1570 -moz-margin-start: -2px; | |
| 1571 -moz-margin-end: 3px; | |
| 1572 } | |
| 1573 | |
| 1574 /* tabview menu item */ | |
| 1575 | |
| 1576 #menu_tabview { | |
| 1577 list-style-image: url(chrome://browser/skin/tabview/tabview.png); | |
| 1578 } | |
| 1579 | |
| 1580 #menu_tabview { | |
| 1581 -moz-image-region: rect(2px, 98px, 18px, 82px); | |
| 1582 } | |
| 1583 | |
| 1584 #menu_tabview[groups="0"] { | |
| 1585 -moz-image-region: rect(2px, 18px, 18px, 2px); | |
| 1586 } | |
| 1587 | |
| 1588 #menu_tabview[groups="1"] { | |
| 1589 -moz-image-region: rect(2px, 38px, 18px, 22px); | |
| 1590 } | |
| 1591 | |
| 1592 #menu_tabview[groups="2"] { | |
| 1593 -moz-image-region: rect(2px, 58px, 18px, 42px); | |
| 1594 } | |
| 1595 | |
| 1596 #menu_tabview[groups="3"] { | |
| 1597 -moz-image-region: rect(2px, 78px, 18px, 62px); | |
| 1598 } | |
| 1599 | |
| 1600 #cut-button { | |
| 1601 -moz-margin-end: 0; | |
| 1602 } | |
| 1603 | |
| 1604 #edit-controls[cui-areatype="toolbar"] > #cut-button { | |
| 1605 -moz-border-end: 0; | |
| 1606 } | |
| 1607 | |
| 1608 #paste-button { | |
| 1609 -moz-border-start: none; | |
| 1610 -moz-margin-start: 0; | |
| 1611 } | |
| 1612 | |
| 1613 #cut-button:-moz-locale-dir(ltr), | |
| 1614 #paste-button:-moz-locale-dir(rtl) { | |
| 1615 border-top-right-radius: 0; | |
| 1616 border-bottom-right-radius: 0; | |
| 1617 } | |
| 1618 | |
| 1619 #cut-button:-moz-locale-dir(rtl), | |
| 1620 #paste-button:-moz-locale-dir(ltr) { | |
| 1621 border-top-left-radius: 0; | |
| 1622 border-bottom-left-radius: 0; | |
| 1623 } | |
| 1624 | |
| 1625 #copy-button { | |
| 1626 border-radius: 0; | |
| 1627 margin-right: 0; | |
| 1628 margin-left: 0; | |
| 1629 } | |
| 1630 | |
| 1631 /* zoom controls */ | |
| 1632 | |
| 1633 #zoom-out-button { | |
| 1634 -moz-margin-end: 0; | |
| 1635 } | |
| 1636 | |
| 1637 #zoom-in-button { | |
| 1638 -moz-margin-start: 0; | |
| 1639 -moz-border-start: 0; | |
| 1640 } | |
| 1641 | |
| 1642 #zoom-controls[cui-areatype="toolbar"] > #zoom-out-button { | |
| 1643 -moz-border-end: 0; | |
| 1644 } | |
| 1645 | |
| 1646 #zoom-controls[cui-areatype="toolbar"] > #zoom-in-button { | |
| 1647 -moz-border-start-width: 1px; | |
| 1648 } | |
| 1649 | |
| 1650 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button { | |
| 1651 border-radius: 0; | |
| 1652 } | |
| 1653 | |
| 1654 #zoom-out-button:-moz-locale-dir(ltr), | |
| 1655 #zoom-in-button:-moz-locale-dir(rtl) { | |
| 1656 border-top-right-radius: 0; | |
| 1657 border-bottom-right-radius: 0; | |
| 1658 } | |
| 1659 | |
| 1660 #zoom-out-button:-moz-locale-dir(rtl), | |
| 1661 #zoom-in-button:-moz-locale-dir(ltr) { | |
| 1662 border-top-left-radius: 0; | |
| 1663 border-bottom-left-radius: 0; | |
| 1664 } | |
| 1665 | |
| 1666 #zoom-controls[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zoom-reset-button { | |
| 1667 min-width: 0; | |
| 1668 margin: 0; | |
| 1669 -moz-box-orient: horizontal; | |
| 1670 -moz-box-align: center; | |
| 1671 } | |
| 1672 | |
| 1673 #zoom-controls[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zoom-reset-button > .toolbarbutton-text { | |
| 1674 margin-top: 0; | |
| 1675 } | |
| 1676 | |
| 1677 /* ----- FULLSCREEN WINDOW CONTROLS ----- */ | |
| 1678 | |
| 1679 #minimize-button, | |
| 1680 #close-button, | |
| 1681 #fullscreen-button ~ #window-controls > #restore-button { | |
| 1682 display: none; | |
| 1683 } | |
| 1684 | |
| 1685 /* ::::: nav-bar-inner ::::: */ | |
| 1686 | |
| 1687 #urlbar, | |
| 1688 .searchbar-textbox { | |
| 1689 font: icon; | |
| 1690 -moz-appearance: none; | |
| 1691 box-shadow: 0 1px rgba(255, 255, 255, 0.2), inset 0 1px hsla(0,0%,0%,.05); | |
| 1692 margin: 0 4px; | |
| 1693 padding: 1px 0; | |
| 1694 border: 1px solid; | |
| 1695 border-color: #626262 #787878 #8c8c8c; | |
| 1696 background-clip: padding-box; | |
| 1697 } | |
| 1698 | |
| 1699 @media (-moz-mac-lion-theme) { | |
| 1700 #urlbar, | |
| 1701 .searchbar-textbox { | |
| 1702 background-image: linear-gradient(hsl(0,0%,97%), hsl(0,0%,100%)); | |
| 1703 border-color: hsla(0,0%,0%,.35) hsla(0,0%,0%,.25) hsla(0,0%,0%,.15); | |
| 1704 box-shadow: 0 1px 0 hsla(0,0%,100%,.2), | |
| 1705 inset 0 0 1px hsla(0,0%,0%,.05), | |
| 1706 inset 0 1px 2px hsla(0,0%,0%,.1); | |
| 1707 } | |
| 1708 } | |
| 1709 | |
| 1710 @media not all and (-moz-mac-lion-theme) { | |
| 1711 #urlbar:-moz-window-inactive, | |
| 1712 .searchbar-textbox:-moz-window-inactive { | |
| 1713 border-color: @toolbarbuttonInactiveBorderColor@; | |
| 1714 } | |
| 1715 } | |
| 1716 | |
| 1717 #urlbar[focused="true"], | |
| 1718 .searchbar-textbox[focused="true"] { | |
| 1719 border-color: -moz-mac-focusring; | |
| 1720 box-shadow: @focusRingShadow@; | |
| 1721 } | |
| 1722 | |
| 1723 #urlbar-container { | |
| 1724 -moz-box-align: center; | |
| 1725 } | |
| 1726 | |
| 1727 #urlbar { | |
| 1728 -moz-padding-end: 4px; | |
| 1729 border-radius: @toolbarbuttonCornerRadius@; | |
| 1730 } | |
| 1731 | |
| 1732 @conditionalForwardWithUrlbar@ > #urlbar { | |
| 1733 -moz-border-start: none; | |
| 1734 margin-left: 0; | |
| 1735 } | |
| 1736 | |
| 1737 @conditionalForwardWithUrlbar@ > #urlbar:-moz-locale-dir(ltr) { | |
| 1738 border-top-left-radius: 0; | |
| 1739 border-bottom-left-radius: 0; | |
| 1740 } | |
| 1741 | |
| 1742 @conditionalForwardWithUrlbar@ > #urlbar:-moz-locale-dir(rtl) { | |
| 1743 border-top-right-radius: 0; | |
| 1744 border-bottom-right-radius: 0; | |
| 1745 } | |
| 1746 | |
| 1747 @conditionalForwardWithUrlbar@ { | |
| 1748 clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path"); | |
| 1749 -moz-margin-start: -6px; | |
| 1750 } | |
| 1751 | |
| 1752 @conditionalForwardWithUrlbar@:-moz-locale-dir(rtl), | |
| 1753 @conditionalForwardWithUrlbar@ > #urlbar:-moz-locale-dir(rtl) { | |
| 1754 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */ | |
| 1755 transform: scaleX(-1); | |
| 1756 } | |
| 1757 | |
| 1758 @conditionalForwardWithUrlbar@:-moz-locale-dir(rtl) { | |
| 1759 -moz-box-direction: reverse; | |
| 1760 } | |
| 1761 | |
| 1762 #identity-box { | |
| 1763 -moz-margin-end: 3px; | |
| 1764 padding-top: 1px; | |
| 1765 padding-bottom: 1px; | |
| 1766 -moz-padding-start: 4px; | |
| 1767 -moz-padding-end: 0; | |
| 1768 font-size: .9em; | |
| 1769 } | |
| 1770 | |
| 1771 #identity-box:-moz-locale-dir(ltr) { | |
| 1772 border-top-left-radius: 2px; | |
| 1773 border-bottom-left-radius: 2px; | |
| 1774 } | |
| 1775 | |
| 1776 #identity-box:-moz-locale-dir(rtl) { | |
| 1777 border-top-right-radius: 2px; | |
| 1778 border-bottom-right-radius: 2px; | |
| 1779 } | |
| 1780 | |
| 1781 #notification-popup-box:not([hidden]) + #identity-box { | |
| 1782 -moz-padding-start: 10px; | |
| 1783 border-radius: 0; | |
| 1784 } | |
| 1785 | |
| 1786 @conditionalForwardWithUrlbar@ > #urlbar > #identity-box { | |
| 1787 border-radius: 0; | |
| 1788 } | |
| 1789 | |
| 1790 @conditionalForwardWithUrlbar@:not([switchingtabs]) > #urlbar > #identity-box { | |
| 1791 transition: padding-left, padding-right; | |
| 1792 } | |
| 1793 | |
| 1794 @conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) { | |
| 1795 padding-left: 10px; | |
| 1796 } | |
| 1797 | |
| 1798 @conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) { | |
| 1799 padding-right: 10px; | |
| 1800 } | |
| 1801 | |
| 1802 @conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box { | |
| 1803 /* forward button hiding is delayed when hovered */ | |
| 1804 transition-delay: 100s; | |
| 1805 } | |
| 1806 | |
| 1807 @conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) { | |
| 1808 padding-left: 10.01px; | |
| 1809 } | |
| 1810 | |
| 1811 @conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) { | |
| 1812 padding-right: 10.01px; | |
| 1813 } | |
| 1814 | |
| 1815 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI, | |
| 1816 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { | |
| 1817 -moz-padding-end: 4px; | |
| 1818 } | |
| 1819 | |
| 1820 #identity-box:-moz-focusring { | |
| 1821 box-shadow: 0 0 2px 1px -moz-mac-focusring inset, | |
| 1822 0 0 2px 2px -moz-mac-focusring; | |
| 1823 -moz-border-end-style: none; | |
| 1824 -moz-padding-end: 5px; | |
| 1825 } | |
| 1826 | |
| 1827 #identity-icon-labels { | |
| 1828 -moz-margin-start: 4px; | |
| 1829 } | |
| 1830 | |
| 1831 .urlbar-input-box { | |
| 1832 -moz-margin-start: 0; | |
| 1833 padding: 3px 0 2px; | |
| 1834 } | |
| 1835 | |
| 1836 .urlbar-history-dropmarker { | |
| 1837 padding: 0 3px; | |
| 1838 list-style-image: url("chrome://browser/skin/urlbar-history-dropmarker.png"); | |
| 1839 -moz-image-region: rect(0px, 11px, 14px, 0px); | |
| 1840 } | |
| 1841 | |
| 1842 .urlbar-history-dropmarker[open="true"], | |
| 1843 .urlbar-history-dropmarker:hover:active { | |
| 1844 -moz-image-region: rect(0px, 22px, 14px, 11px); | |
| 1845 background-image: radial-gradient(circle closest-side, hsla(205,100%,70%,.3), hsla(205,100%,70%,0)); | |
| 1846 } | |
| 1847 | |
| 1848 @media (min-resolution: 2dppx) { | |
| 1849 .urlbar-history-dropmarker { | |
| 1850 list-style-image: url("chrome://browser/skin/urlbar-history-dropmarker@2x.png"); | |
| 1851 -moz-image-region: rect(0px, 22px, 28px, 0px); | |
| 1852 } | |
| 1853 | |
| 1854 .urlbar-history-dropmarker[open="true"], | |
| 1855 .urlbar-history-dropmarker:hover:active { | |
| 1856 -moz-image-region: rect(0px, 44px, 28px, 22px); | |
| 1857 } | |
| 1858 | |
| 1859 .urlbar-history-dropmarker > .dropmarker-icon { | |
| 1860 width: 11px; | |
| 1861 } | |
| 1862 } | |
| 1863 | |
| 1864 #urlbar-icons { | |
| 1865 -moz-box-align: center; | |
| 1866 } | |
| 1867 | |
| 1868 .urlbar-icon { | |
| 1869 padding: 0 3px; | |
| 1870 } | |
| 1871 | |
| 1872 .urlbar-icon[open="true"], | |
| 1873 .urlbar-icon:hover:active { | |
| 1874 background-image: radial-gradient(circle closest-side, hsla(205,100%,70%,.3), hsla(205,100%,70%,0)); | |
| 1875 } | |
| 1876 | |
| 1877 #urlbar-search-splitter { | |
| 1878 min-width: 8px; | |
| 1879 width: 8px; | |
| 1880 background-image: none; | |
| 1881 margin: 0 -4px; | |
| 1882 position: relative; | |
| 1883 height: 22px; | |
| 1884 } | |
| 1885 | |
| 1886 #search-container { | |
| 1887 min-width: calc(54px + 11ch); | |
| 1888 } | |
| 1889 | |
| 1890 %include ../shared/identity-block.inc.css | |
| 1891 | |
| 1892 #page-proxy-favicon { | |
| 1893 margin: 0px; | |
| 1894 padding: 0px; | |
| 1895 -moz-image-region: rect(0, 16px, 16px, 0); | |
| 1896 } | |
| 1897 | |
| 1898 #identity-box:hover:active > #page-proxy-favicon, | |
| 1899 #identity-box[open=true] > #page-proxy-favicon { | |
| 1900 -moz-image-region: rect(0, 32px, 16px, 16px); | |
| 1901 } | |
| 1902 | |
| 1903 /* The chromeUI identity-icon set includes three states, | |
| 1904 but OS X only uses two of them. */ | |
| 1905 #identity-box.chromeUI:hover:active > #page-proxy-favicon, | |
| 1906 #identity-box.chromeUI[open=true] > #page-proxy-favicon { | |
| 1907 -moz-image-region: rect(0, 48px, 16px, 32px); | |
| 1908 } | |
| 1909 | |
| 1910 @media (min-resolution: 2dppx) { | |
| 1911 #page-proxy-favicon { | |
| 1912 list-style-image: url(chrome://browser/skin/identity-icons-generic@2x.png); | |
| 1913 -moz-image-region: rect(0, 32px, 32px, 0); | |
| 1914 } | |
| 1915 | |
| 1916 .chromeUI > #page-proxy-favicon[pageproxystate="valid"] { | |
| 1917 list-style-image: url(chrome://branding/content/identity-icons-brand@2x.png); | |
| 1918 } | |
| 1919 | |
| 1920 .verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] { | |
| 1921 list-style-image: url(chrome://browser/skin/identity-icons-https@2x.png); | |
| 1922 } | |
| 1923 | |
| 1924 .verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] { | |
| 1925 list-style-image: url(chrome://browser/skin/identity-icons-https-ev@2x.png); | |
| 1926 } | |
| 1927 | |
| 1928 .mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] { | |
| 1929 list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active@2x.png); | |
| 1930 } | |
| 1931 | |
| 1932 .mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] { | |
| 1933 list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display@2x.png); | |
| 1934 } | |
| 1935 | |
| 1936 .mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] { | |
| 1937 list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display@2x.png); | |
| 1938 } | |
| 1939 | |
| 1940 #identity-box:hover:active > #page-proxy-favicon, | |
| 1941 #identity-box[open=true] > #page-proxy-favicon { | |
| 1942 -moz-image-region: rect(0, 64px, 32px, 32px); | |
| 1943 } | |
| 1944 | |
| 1945 /* The chromeUI identity-icon set includes three states, | |
| 1946 but OS X only uses two of them. */ | |
| 1947 #identity-box.chromeUI:hover:active > #page-proxy-favicon, | |
| 1948 #identity-box.chromeUI[open=true] > #page-proxy-favicon { | |
| 1949 -moz-image-region: rect(0, 96px, 32px, 64px); | |
| 1950 } | |
| 1951 } | |
| 1952 | |
| 1953 #wrapper-urlbar-container[place="palette"] { | |
| 1954 max-width: 20em; | |
| 1955 } | |
| 1956 | |
| 1957 #urlbar-display-box { | |
| 1958 -moz-border-end: 1px solid #AAA; | |
| 1959 -moz-margin-end: 3px; | |
| 1960 } | |
| 1961 | |
| 1962 #urlbar-display { | |
| 1963 margin-top: 0; | |
| 1964 margin-bottom: 0; | |
| 1965 color: GrayText; | |
| 1966 } | |
| 1967 | |
| 1968 #PopupAutoCompleteRichResult { | |
| 1969 margin-top: 2px; | |
| 1970 } | |
| 1971 | |
| 1972 /* ----- AUTOCOMPLETE ----- */ | |
| 1973 | |
| 1974 #treecolAutoCompleteImage { | |
| 1975 max-width: 36px; | |
| 1976 } | |
| 1977 | |
| 1978 .ac-result-type-bookmark, | |
| 1979 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) { | |
| 1980 list-style-image: url("chrome://browser/skin/places/star-icons.png"); | |
| 1981 -moz-image-region: rect(0, 48px, 16px, 32px); | |
| 1982 } | |
| 1983 | |
| 1984 .ac-result-type-keyword, | |
| 1985 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) { | |
| 1986 list-style-image: url(chrome://global/skin/icons/search-textbox.png); | |
| 1987 margin: 2px; | |
| 1988 width: 12px; | |
| 1989 height: 12px; | |
| 1990 } | |
| 1991 | |
| 1992 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark, | |
| 1993 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) { | |
| 1994 list-style-image: url("chrome://browser/skin/places/star-icons.png"); | |
| 1995 -moz-image-region: rect(0, 64px, 16px, 48px); | |
| 1996 } | |
| 1997 | |
| 1998 .ac-result-type-tag, | |
| 1999 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) { | |
| 2000 list-style-image: url("chrome://browser/skin/places/tag.png"); | |
| 2001 width: 16px; | |
| 2002 height: 16px; | |
| 2003 } | |
| 2004 | |
| 2005 .ac-extra > .ac-comment { | |
| 2006 font-size: inherit; | |
| 2007 } | |
| 2008 | |
| 2009 .ac-url-text, | |
| 2010 .ac-action-text { | |
| 2011 color: -moz-nativehyperlinktext; | |
| 2012 font: message-box; | |
| 2013 } | |
| 2014 | |
| 2015 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon { | |
| 2016 list-style-image: url("chrome://browser/skin/actionicon-tab.png"); | |
| 2017 -moz-image-region: rect(0, 16px, 11px, 0); | |
| 2018 padding: 0 3px; | |
| 2019 } | |
| 2020 | |
| 2021 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon { | |
| 2022 -moz-image-region: rect(11px, 16px, 22px, 0); | |
| 2023 } | |
| 2024 | |
| 2025 @media (min-resolution: 2dppx) { | |
| 2026 .ac-result-type-bookmark { | |
| 2027 list-style-image: url("chrome://browser/skin/places/star-icons@2x.png"); | |
| 2028 -moz-image-region: rect(0, 64px, 32px, 32px); | |
| 2029 } | |
| 2030 | |
| 2031 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark { | |
| 2032 list-style-image: url("chrome://browser/skin/places/star-icons@2x.png"); | |
| 2033 -moz-image-region: rect(0, 128px, 32px, 96px); | |
| 2034 } | |
| 2035 | |
| 2036 .ac-result-type-tag { | |
| 2037 list-style-image: url("chrome://browser/skin/places/tag@2x.png"); | |
| 2038 } | |
| 2039 | |
| 2040 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon { | |
| 2041 list-style-image: url("chrome://browser/skin/actionicon-tab@2x.png"); | |
| 2042 -moz-image-region: rect(0, 32px, 22px, 0); | |
| 2043 width: 22px; | |
| 2044 } | |
| 2045 | |
| 2046 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon { | |
| 2047 -moz-image-region: rect(22px, 32px, 44px, 0); | |
| 2048 } | |
| 2049 } | |
| 2050 | |
| 2051 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) { | |
| 2052 color: GrayText; | |
| 2053 } | |
| 2054 | |
| 2055 .ac-comment[selected="true"], | |
| 2056 .ac-url-text[selected="true"], | |
| 2057 .ac-action-text[selected="true"] { | |
| 2058 color: inherit !important; | |
| 2059 } | |
| 2060 | |
| 2061 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment), | |
| 2062 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment) | |
| 2063 { | |
| 2064 color: GrayText; | |
| 2065 font-size: smaller; | |
| 2066 } | |
| 2067 | |
| 2068 .autocomplete-treebody::-moz-tree-cell(suggesthint) { | |
| 2069 border-top: 1px solid GrayText; | |
| 2070 } | |
| 2071 | |
| 2072 | |
| 2073 /* ----- COMBINED GO/RELOAD/STOP BUTTON IN LOCATION BAR ----- */ | |
| 2074 | |
| 2075 #urlbar > toolbarbutton { | |
| 2076 margin: 0; | |
| 2077 -moz-padding-start: 2px; | |
| 2078 -moz-padding-end: 1px; | |
| 2079 background-origin: border-box; | |
| 2080 list-style-image: url("chrome://browser/skin/reload-stop-go.png"); | |
| 2081 } | |
| 2082 | |
| 2083 #urlbar > toolbarbutton:not([disabled]):hover:active { | |
| 2084 background-image: radial-gradient(circle closest-side, hsla(205,100%,70%,.3), hsla(205,100%,70%,0)); | |
| 2085 } | |
| 2086 | |
| 2087 #urlbar-go-button { | |
| 2088 -moz-image-region: rect(0, 42px, 14px, 28px); | |
| 2089 } | |
| 2090 | |
| 2091 #urlbar-go-button:hover:active { | |
| 2092 -moz-image-region: rect(14px, 42px, 28px, 28px); | |
| 2093 } | |
| 2094 | |
| 2095 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { | |
| 2096 transform: scaleX(-1); | |
| 2097 } | |
| 2098 | |
| 2099 #urlbar-reload-button { | |
| 2100 -moz-image-region: rect(0, 14px, 14px, 0); | |
| 2101 } | |
| 2102 | |
| 2103 #urlbar-reload-button:not([disabled]):hover:active { | |
| 2104 -moz-image-region: rect(14px, 14px, 28px, 0); | |
| 2105 } | |
| 2106 | |
| 2107 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { | |
| 2108 transform: scaleX(-1); | |
| 2109 } | |
| 2110 | |
| 2111 #urlbar-stop-button { | |
| 2112 -moz-image-region: rect(0, 28px, 14px, 14px); | |
| 2113 } | |
| 2114 | |
| 2115 #urlbar-stop-button:hover:active { | |
| 2116 -moz-image-region: rect(14px, 28px, 28px, 14px); | |
| 2117 } | |
| 2118 | |
| 2119 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { | |
| 2120 width: 18px; | |
| 2121 height: 18px; | |
| 2122 } | |
| 2123 | |
| 2124 #bookmarks-menu-button[cui-areatype="toolbar"].bookmark-item > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { | |
| 2125 width: 16px; | |
| 2126 height: 16px; | |
| 2127 } | |
| 2128 | |
| 2129 #BMB_bookmarksPopup[side="top"], | |
| 2130 #BMB_bookmarksPopup[side="bottom"] { | |
| 2131 margin-left: -26px; | |
| 2132 margin-right: -26px; | |
| 2133 } | |
| 2134 | |
| 2135 #BMB_bookmarksPopup[side="left"], | |
| 2136 #BMB_bookmarksPopup[side="right"] { | |
| 2137 margin-top: -26px; | |
| 2138 margin-bottom: -26px; | |
| 2139 } | |
| 2140 | |
| 2141 @media (min-resolution: 2dppx) { | |
| 2142 #urlbar > toolbarbutton { | |
| 2143 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png"); | |
| 2144 } | |
| 2145 | |
| 2146 #urlbar-go-button { | |
| 2147 -moz-image-region: rect(0, 84px, 28px, 56px); | |
| 2148 } | |
| 2149 | |
| 2150 #urlbar-go-button:hover:active { | |
| 2151 -moz-image-region: rect(28px, 84px, 56px, 56px); | |
| 2152 } | |
| 2153 | |
| 2154 #urlbar-reload-button { | |
| 2155 -moz-image-region: rect(0, 28px, 28px, 0); | |
| 2156 } | |
| 2157 | |
| 2158 #urlbar-reload-button:not([disabled]):hover:active { | |
| 2159 -moz-image-region: rect(28px, 28px, 56px, 0); | |
| 2160 } | |
| 2161 | |
| 2162 #urlbar-stop-button { | |
| 2163 -moz-image-region: rect(0, 56px, 28px, 28px); | |
| 2164 } | |
| 2165 | |
| 2166 #urlbar-stop-button:hover:active { | |
| 2167 -moz-image-region: rect(28px, 56px, 56px, 28px); | |
| 2168 } | |
| 2169 | |
| 2170 #urlbar > toolbarbutton > .toolbarbutton-icon { | |
| 2171 width: 14px; | |
| 2172 } | |
| 2173 } | |
| 2174 | |
| 2175 /* POPUP BLOCKER BUTTON */ | |
| 2176 #page-report-button { | |
| 2177 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png"); | |
| 2178 -moz-image-region: rect(0, 16px, 16px, 0); | |
| 2179 } | |
| 2180 | |
| 2181 #page-report-button:hover:active, | |
| 2182 #page-report-button[open="true"] { | |
| 2183 -moz-image-region: rect(0, 32px, 16px, 16px); | |
| 2184 } | |
| 2185 | |
| 2186 @media (min-resolution: 2dppx) { | |
| 2187 #page-report-button { | |
| 2188 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked@2x.png"); | |
| 2189 -moz-image-region: rect(0, 32px, 32px, 0); | |
| 2190 width: 22px; | |
| 2191 } | |
| 2192 | |
| 2193 #page-report-button:hover:active, | |
| 2194 #page-report-button[open="true"] { | |
| 2195 -moz-image-region: rect(0, 64px, 32px, 32px); | |
| 2196 } | |
| 2197 } | |
| 2198 | |
| 2199 /* social share panel */ | |
| 2200 .social-share-frame { | |
| 2201 background: linear-gradient(to bottom, rgba(242,242,242,.99), rgba(242,242,242,.95)); | |
| 2202 border-left: 1px solid #f8f8f8; | |
| 2203 width: 330px; | |
| 2204 height: 150px; | |
| 2205 /* we resize our panels dynamically, make it look nice */ | |
| 2206 transition: height 100ms ease-out, width 100ms ease-out; | |
| 2207 } | |
| 2208 | |
| 2209 .social-share-toolbar { | |
| 2210 border-right: 1px solid #dedede; | |
| 2211 background: linear-gradient(to bottom, rgba(247,247,247,.99), rgba(247,247,247,.95)); | |
| 2212 } | |
| 2213 | |
| 2214 #social-share-provider-buttons { | |
| 2215 border-right: 1px solid #fbfbfb; | |
| 2216 padding: 6px; | |
| 2217 } | |
| 2218 | |
| 2219 #social-share-provider-buttons > .share-provider-button { | |
| 2220 padding: 6px; | |
| 2221 margin: 0; | |
| 2222 border: none; | |
| 2223 border-radius: 2px; | |
| 2224 } | |
| 2225 | |
| 2226 #social-share-provider-buttons > .share-provider-button[checked], | |
| 2227 #social-share-provider-buttons > .share-provider-button:active { | |
| 2228 padding: 5px; | |
| 2229 border: 1px solid #b5b5b8; | |
| 2230 box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.2); | |
| 2231 } | |
| 2232 | |
| 2233 #social-share-provider-buttons > .share-provider-button[checked] { | |
| 2234 background: linear-gradient(to bottom, #d9d9d9, #e3e3e3); | |
| 2235 } | |
| 2236 | |
| 2237 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-text { | |
| 2238 display: none; | |
| 2239 } | |
| 2240 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-icon { | |
| 2241 width: 16px; | |
| 2242 min-height: 16px; | |
| 2243 max-height: 16px; | |
| 2244 } | |
| 2245 | |
| 2246 /* social recommending panel */ | |
| 2247 | |
| 2248 #social-mark-button { | |
| 2249 -moz-image-region: rect(0, 16px, 16px, 0); | |
| 2250 } | |
| 2251 | |
| 2252 /* bookmarks menu-button */ | |
| 2253 | |
| 2254 #bookmarks-menu-button.bookmark-item, | |
| 2255 #bookmarks-menu-button.bookmark-item[open] { | |
| 2256 list-style-image: url("chrome://browser/skin/places/star-icons.png"); | |
| 2257 -moz-image-region: rect(0px 16px 16px 0px); | |
| 2258 } | |
| 2259 | |
| 2260 #bookmarks-menu-button.bookmark-item[starred] { | |
| 2261 -moz-image-region: rect(0px 32px 16px 16px); | |
| 2262 } | |
| 2263 | |
| 2264 #bookmarks-menu-button.bookmark-item > .toolbarbutton-menubutton-button { | |
| 2265 padding: 0; | |
| 2266 } | |
| 2267 | |
| 2268 @media (min-resolution: 2dppx) { | |
| 2269 #bookmarks-menu-button.bookmark-item, | |
| 2270 #bookmarks-menu-button.bookmark-item[open] { | |
| 2271 list-style-image: url("chrome://browser/skin/places/star-icons@2x.png"); | |
| 2272 -moz-image-region: rect(0px 32px 32px 0px); | |
| 2273 } | |
| 2274 | |
| 2275 #bookmarks-menu-button.bookmark-item[starred] { | |
| 2276 -moz-image-region: rect(0px 64px 32px 32px); | |
| 2277 } | |
| 2278 | |
| 2279 #bookmarks-menu-button.bookmark-item > .toolbarbutton-menubutton-button > .toolbarbutton-icon { | |
| 2280 width: 16px; | |
| 2281 } | |
| 2282 } | |
| 2283 | |
| 2284 /* BOOKMARKING PANEL */ | |
| 2285 #editBookmarkPanelStarIcon { | |
| 2286 list-style-image: url("chrome://browser/skin/places/starred48.png"); | |
| 2287 width: 48px; | |
| 2288 height: 48px; | |
| 2289 } | |
| 2290 | |
| 2291 #editBookmarkPanelStarIcon[unstarred] { | |
| 2292 list-style-image: url("chrome://browser/skin/places/unstarred48.png"); | |
| 2293 } | |
| 2294 | |
| 2295 @media (min-resolution: 2dppx) { | |
| 2296 #editBookmarkPanelStarIcon { | |
| 2297 list-style-image: url("chrome://browser/skin/places/starred48@2x.png"); | |
| 2298 -moz-image-region: rect(0px 96px 96px 0px); | |
| 2299 } | |
| 2300 } | |
| 2301 | |
| 2302 #editBookmarkPanelTitle { | |
| 2303 font-size: 130%; | |
| 2304 font-weight: bold; | |
| 2305 } | |
| 2306 | |
| 2307 #editBMPanel_rows > row { | |
| 2308 margin-bottom: 8px; | |
| 2309 } | |
| 2310 | |
| 2311 #editBMPanel_rows > row:last-of-type { | |
| 2312 margin-bottom: 0; | |
| 2313 } | |
| 2314 | |
| 2315 /**** Input elements ****/ | |
| 2316 | |
| 2317 #editBMPanel_rows > row > textbox, | |
| 2318 #editBMPanel_rows > row > hbox > textbox { | |
| 2319 -moz-appearance: none; | |
| 2320 background: linear-gradient(#fafafa, #fff); | |
| 2321 background-clip: padding-box; | |
| 2322 border-radius: 3px; | |
| 2323 border: 1px solid rgba(0,0,0,.3) !important; | |
| 2324 box-shadow: inset 0 1px 1px 1px rgba(0,0,0,.05), | |
| 2325 0 1px rgba(255,255,255,.3); | |
| 2326 margin: 0; | |
| 2327 padding: 3px 6px; | |
| 2328 } | |
| 2329 | |
| 2330 #editBMPanel_rows > row > textbox[focused="true"], | |
| 2331 #editBMPanel_rows > row > hbox > textbox[focused="true"] { | |
| 2332 border-color: -moz-mac-focusring !important; | |
| 2333 box-shadow: @focusRingShadow@; | |
| 2334 } | |
| 2335 | |
| 2336 /**** HUD style buttons ****/ | |
| 2337 | |
| 2338 .editBookmarkPanelHeaderButton, | |
| 2339 .editBookmarkPanelBottomButton { | |
| 2340 @hudButton@ | |
| 2341 margin: 0; | |
| 2342 min-width: 82px; | |
| 2343 min-height: 22px; | |
| 2344 } | |
| 2345 | |
| 2346 .editBookmarkPanelHeaderButton:hover:active, | |
| 2347 .editBookmarkPanelBottomButton:hover:active { | |
| 2348 @hudButtonPressed@ | |
| 2349 } | |
| 2350 | |
| 2351 .editBookmarkPanelHeaderButton:-moz-focusring, | |
| 2352 .editBookmarkPanelBottomButton:-moz-focusring { | |
| 2353 @hudButtonFocused@ | |
| 2354 } | |
| 2355 | |
| 2356 .editBookmarkPanelBottomButton[default="true"] { | |
| 2357 background-color: #666; | |
| 2358 } | |
| 2359 | |
| 2360 #editBookmarkPanelHeader { | |
| 2361 margin-bottom: 6px; | |
| 2362 } | |
| 2363 | |
| 2364 .editBookmarkPanelBottomButton:last-child { | |
| 2365 -moz-margin-start: 8px; | |
| 2366 } | |
| 2367 | |
| 2368 /* The following elements come from editBookmarkOverlay.xul. Styling that's | |
| 2369 specific to the editBookmarkPanel should be in browser.css. Styling that | |
| 2370 should be shared by all editBookmarkOverlay.xul consumers should be in | |
| 2371 editBookmarkOverlay.css. */ | |
| 2372 | |
| 2373 #editBMPanel_newFolderBox { | |
| 2374 background: linear-gradient(#fff, #f2f2f2); | |
| 2375 background-origin: padding-box; | |
| 2376 background-clip: padding-box; | |
| 2377 border-radius: 0 0 3px 3px; | |
| 2378 border: 1px solid #a5a5a5; | |
| 2379 box-shadow: inset 0 1px rgba(255,255,255,.8), | |
| 2380 inset 0 0 1px rgba(255,255, 255,.25), | |
| 2381 0 1px rgba(255,255,255,.3); | |
| 2382 margin: 0; | |
| 2383 padding: 0; | |
| 2384 height: 20px; | |
| 2385 } | |
| 2386 | |
| 2387 #editBMPanel_newFolderButton { | |
| 2388 -moz-appearance: none; | |
| 2389 border: 0 solid #a5a5a5; | |
| 2390 -moz-border-end-width: 1px; | |
| 2391 padding: 0 9px; | |
| 2392 margin: 0; | |
| 2393 min-width: 21px; | |
| 2394 min-height: 20px; | |
| 2395 height: 20px; | |
| 2396 color: #fff; | |
| 2397 list-style-image: url("chrome://browser/skin/panel-plus-sign.png"); | |
| 2398 position: relative; | |
| 2399 } | |
| 2400 | |
| 2401 #editBMPanel_newFolderButton:hover:active { | |
| 2402 background: linear-gradient(rgba(40,40,40,.9), rgba(70,70,70,.9)); | |
| 2403 box-shadow: inset 0 0 3px rgba(0,0,0,.2), inset 0 1px 7px rgba(0,0,0,.4); | |
| 2404 } | |
| 2405 | |
| 2406 #editBMPanel_newFolderButton:-moz-focusring { | |
| 2407 @hudButtonFocused@ | |
| 2408 } | |
| 2409 | |
| 2410 #editBMPanel_newFolderButton .button-text { | |
| 2411 display: none; | |
| 2412 } | |
| 2413 | |
| 2414 #editBMPanel_folderMenuList { | |
| 2415 @hudButton@ | |
| 2416 background-clip: padding-box; | |
| 2417 margin: 0; | |
| 2418 min-height: 22px; | |
| 2419 padding-top: 2px; | |
| 2420 padding-bottom: 1px; | |
| 2421 -moz-padding-start: 8px; | |
| 2422 -moz-padding-end: 4px; | |
| 2423 } | |
| 2424 | |
| 2425 #editBMPanel_folderMenuList:-moz-focusring { | |
| 2426 @hudButtonFocused@ | |
| 2427 } | |
| 2428 | |
| 2429 #editBMPanel_folderMenuList[open="true"], | |
| 2430 #editBMPanel_folderMenuList:hover:active { | |
| 2431 @hudButtonPressed@ | |
| 2432 } | |
| 2433 | |
| 2434 #editBMPanel_folderMenuList > .menulist-dropmarker { | |
| 2435 -moz-appearance: none; | |
| 2436 display: -moz-box; | |
| 2437 background-color: transparent; | |
| 2438 border: 0; | |
| 2439 margin: 0; | |
| 2440 padding: 0; | |
| 2441 -moz-padding-end: 4px; | |
| 2442 width: 7px; | |
| 2443 } | |
| 2444 | |
| 2445 #editBMPanel_folderMenuList > .menulist-dropmarker > .dropmarker-icon { | |
| 2446 list-style-image: url("chrome://global/skin/icons/panel-dropmarker.png"); | |
| 2447 } | |
| 2448 | |
| 2449 /**** folder tree and tag selector ****/ | |
| 2450 | |
| 2451 #editBMPanel_folderTree, | |
| 2452 #editBMPanel_tagsSelector { | |
| 2453 -moz-appearance: none; | |
| 2454 background: linear-gradient(#fafafa, #fff); | |
| 2455 background-clip: padding-box; | |
| 2456 border-radius: 3px; | |
| 2457 border: 1px solid rgba(0,0,0,.3); | |
| 2458 box-shadow: inset 0 1px 1px 1px rgba(0,0,0,.05), | |
| 2459 0 1px rgba(255,255,255,.3); | |
| 2460 margin: 0; | |
| 2461 } | |
| 2462 | |
| 2463 #editBMPanel_folderTree:-moz-focusring, | |
| 2464 #editBMPanel_tagsSelector:-moz-focusring { | |
| 2465 border-color: -moz-mac-focusring; | |
| 2466 box-shadow: @focusRingShadow@; | |
| 2467 } | |
| 2468 | |
| 2469 #editBMPanel_folderTree { | |
| 2470 border-bottom: none; | |
| 2471 border-bottom-left-radius: 0; | |
| 2472 border-bottom-right-radius: 0; | |
| 2473 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */ | |
| 2474 margin: 0 !important; | |
| 2475 min-width: 27em; | |
| 2476 position: relative; | |
| 2477 } | |
| 2478 | |
| 2479 /**** expanders ****/ | |
| 2480 | |
| 2481 #editBookmarkPanel .expander-up, | |
| 2482 #editBookmarkPanel .expander-down { | |
| 2483 @hudButton@ | |
| 2484 margin: 0; | |
| 2485 -moz-margin-start: 4px; | |
| 2486 min-width: 27px; | |
| 2487 min-height: 22px; | |
| 2488 } | |
| 2489 | |
| 2490 #editBookmarkPanel .expander-up:-moz-focusring, | |
| 2491 #editBookmarkPanel .expander-down:-moz-focusring { | |
| 2492 @hudButtonFocused@ | |
| 2493 } | |
| 2494 | |
| 2495 #editBookmarkPanel .expander-up:hover:active, | |
| 2496 #editBookmarkPanel .expander-down:hover:active { | |
| 2497 @hudButtonPressed@ | |
| 2498 } | |
| 2499 | |
| 2500 #editBookmarkPanel .expander-up { | |
| 2501 list-style-image: url("chrome://browser/skin/panel-expander-open.png"); | |
| 2502 } | |
| 2503 | |
| 2504 #editBookmarkPanel .expander-down { | |
| 2505 list-style-image: url("chrome://browser/skin/panel-expander-closed.png"); | |
| 2506 } | |
| 2507 | |
| 2508 #editBookmarkPanel .expander-up > .button-box > .button-icon, | |
| 2509 #editBookmarkPanel .expander-down > .button-box > .button-icon { | |
| 2510 margin: 1px 0 0; | |
| 2511 } | |
| 2512 | |
| 2513 #editBookmarkPanel .expander-up > .button-box > .button-text, | |
| 2514 #editBookmarkPanel .expander-down > .button-box > .button-text { | |
| 2515 display: none; | |
| 2516 } | |
| 2517 | |
| 2518 @media (min-resolution: 2dppx) { | |
| 2519 #editBookmarkPanel .expander-up { | |
| 2520 list-style-image: url("chrome://browser/skin/panel-expander-open@2x.png"); | |
| 2521 } | |
| 2522 | |
| 2523 #editBookmarkPanel .expander-down { | |
| 2524 list-style-image: url("chrome://browser/skin/panel-expander-closed@2x.png"); | |
| 2525 } | |
| 2526 | |
| 2527 #editBookmarkPanel .expander-up > .button-box > .button-icon, | |
| 2528 #editBookmarkPanel .expander-down > .button-box > .button-icon { | |
| 2529 width: 9px; | |
| 2530 } | |
| 2531 } | |
| 2532 | |
| 2533 #editBMPanel_tagsField > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder { | |
| 2534 opacity: 1.0; | |
| 2535 color: #bbb; | |
| 2536 } | |
| 2537 | |
| 2538 .editBMPanel_rowLabel { | |
| 2539 text-align: end; | |
| 2540 } | |
| 2541 | |
| 2542 .panel-promo-box { | |
| 2543 margin: 8px -16px -16px -16px; | |
| 2544 padding: 8px 16px; | |
| 2545 background-color: hsla(210,4%,10%,.07); | |
| 2546 border-top: 1px solid hsla(210,4%,10%,.12); | |
| 2547 border-radius: 0 0 5px 5px; | |
| 2548 box-shadow: 0 -1px hsla(0,0%,100%,.5) inset, 0 1px 1px hsla(0,0%,0%,.03) inset; | |
| 2549 color: hsl(0,0%,30%); | |
| 2550 } | |
| 2551 | |
| 2552 .panel-promo-icon { | |
| 2553 list-style-image: url("chrome://browser/skin/sync-notification-24.png"); | |
| 2554 -moz-margin-end: 10px; | |
| 2555 vertical-align: middle; | |
| 2556 } | |
| 2557 | |
| 2558 .panel-promo-closebutton { | |
| 2559 border: none; | |
| 2560 -moz-margin-end: -14px; | |
| 2561 margin-top: -8px; | |
| 2562 } | |
| 2563 | |
| 2564 .panel-promo-closebutton > .toolbarbutton-text { | |
| 2565 padding: 0; | |
| 2566 margin: 0; | |
| 2567 } | |
| 2568 | |
| 2569 @media (min-resolution: 2dppx) { | |
| 2570 .panel-promo-closebutton > .toolbarbutton-icon { | |
| 2571 width: 16px; | |
| 2572 } | |
| 2573 } | |
| 2574 | |
| 2575 /* History Swipe Animation */ | |
| 2576 | |
| 2577 #historySwipeAnimationCurrentPage, | |
| 2578 #historySwipeAnimationNextPage { | |
| 2579 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6); | |
| 2580 } | |
| 2581 | |
| 2582 #historySwipeAnimationContainer { | |
| 2583 background: url("chrome://browser/skin/subtle-pattern.png") #B3B9C1; | |
| 2584 } | |
| 2585 | |
| 2586 /* ----- SIDEBAR ELEMENTS ----- */ | |
| 2587 | |
| 2588 #sidebar, | |
| 2589 sidebarheader { | |
| 2590 background-color: #e2e7ed; | |
| 2591 } | |
| 2592 | |
| 2593 #sidebar:-moz-window-inactive, | |
| 2594 sidebarheader:-moz-window-inactive { | |
| 2595 background-color: #e8e8e8; | |
| 2596 } | |
| 2597 | |
| 2598 sidebarheader { | |
| 2599 padding: 2px; | |
| 2600 text-shadow: none; | |
| 2601 } | |
| 2602 | |
| 2603 sidebarheader > .close-icon > .toolbarbutton-text { | |
| 2604 display: none; | |
| 2605 } | |
| 2606 | |
| 2607 #sidebar-box { | |
| 2608 -moz-appearance: dialog; | |
| 2609 -moz-appearance: none; | |
| 2610 } | |
| 2611 | |
| 2612 .sidebar-splitter { | |
| 2613 -moz-border-start: none; | |
| 2614 -moz-border-end: 1px solid #bdbdbd; | |
| 2615 min-width: 1px; | |
| 2616 width: 3px; | |
| 2617 background-image: none !important; | |
| 2618 background-color: transparent; | |
| 2619 -moz-margin-start: -3px; | |
| 2620 position: relative; | |
| 2621 } | |
| 2622 | |
| 2623 #appcontent ~ .sidebar-splitter { | |
| 2624 -moz-border-start: 1px solid #ccc; | |
| 2625 -moz-border-end: none; | |
| 2626 -moz-margin-start: 0; | |
| 2627 -moz-margin-end: -3px; | |
| 2628 } | |
| 2629 | |
| 2630 .sidebar-title, | |
| 2631 #sidebar-title { | |
| 2632 color: #535f6d; | |
| 2633 font-weight: bold; | |
| 2634 } | |
| 2635 | |
| 2636 .sidebar-throbber[loading="true"], | |
| 2637 #sidebar-throbber[loading="true"] { | |
| 2638 list-style-image: url("chrome://global/skin/icons/loading_16.png"); | |
| 2639 } | |
| 2640 | |
| 2641 /* ----- CONTENT ----- */ | |
| 2642 | |
| 2643 .browserContainer > findbar { | |
| 2644 background: @scopeBarBackground@; | |
| 2645 border-top: @scopeBarSeparatorBorder@; | |
| 2646 color: -moz-DialogText; | |
| 2647 text-shadow: none; | |
| 2648 } | |
| 2649 | |
| 2650 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker { | |
| 2651 display: none; | |
| 2652 } | |
| 2653 | |
| 2654 .bookmark-item { | |
| 2655 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); | |
| 2656 } | |
| 2657 | |
| 2658 @media (min-resolution: 2dppx) { | |
| 2659 .bookmark-item { | |
| 2660 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png"); | |
| 2661 } | |
| 2662 | |
| 2663 image.bookmark-item { | |
| 2664 width: 16px; | |
| 2665 } | |
| 2666 } | |
| 2667 | |
| 2668 .openintabs-menuitem { | |
| 2669 list-style-image: none; | |
| 2670 } | |
| 2671 | |
| 2672 /* ::::: tabbrowser ::::: */ | |
| 2673 | |
| 2674 .tabbrowser-tabbox { | |
| 2675 margin: 0; | |
| 2676 } | |
| 2677 | |
| 2678 %include ../shared/tabs.inc.css | |
| 2679 | |
| 2680 .tab-label { | |
| 2681 margin-top: 1px; | |
| 2682 margin-bottom: 0; | |
| 2683 text-align: center; | |
| 2684 } | |
| 2685 | |
| 2686 @media (min-resolution: 2dppx) { | |
| 2687 /* image preloading hack from shared/tabs.inc.css */ | |
| 2688 #tabbrowser-tabs::before { | |
| 2689 background-image: | |
| 2690 url(chrome://browser/skin/tabbrowser/tab-background-end@2x.png), | |
| 2691 url(chrome://browser/skin/tabbrowser/tab-background-middle@2x.png), | |
| 2692 url(chrome://browser/skin/tabbrowser/tab-background-start@2x.png); | |
| 2693 } | |
| 2694 | |
| 2695 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]), | |
| 2696 .tabs-newtab-button:hover { | |
| 2697 background-image: url(chrome://browser/skin/tabbrowser/tab-background-start@2x.png), | |
| 2698 url(chrome://browser/skin/tabbrowser/tab-background-middle@2x.png), | |
| 2699 url(chrome://browser/skin/tabbrowser/tab-background-end@2x.png); | |
| 2700 } | |
| 2701 | |
| 2702 .tab-background-middle[selected=true] { | |
| 2703 background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle@2x.png), | |
| 2704 @fgTabTexture@, | |
| 2705 none; | |
| 2706 } | |
| 2707 | |
| 2708 .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after, | |
| 2709 .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after { | |
| 2710 background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-start@2x.png); | |
| 2711 } | |
| 2712 | |
| 2713 .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after, | |
| 2714 .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after { | |
| 2715 background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-end@2x.png); | |
| 2716 } | |
| 2717 | |
| 2718 .tab-icon-image { | |
| 2719 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png"); | |
| 2720 image-rendering: -moz-crisp-edges; | |
| 2721 } | |
| 2722 | |
| 2723 .tab-throbber { | |
| 2724 list-style-image: url("chrome://browser/skin/tabbrowser/connecting@2x.png"); | |
| 2725 } | |
| 2726 | |
| 2727 .tab-throbber[progress] { | |
| 2728 list-style-image: url("chrome://browser/skin/tabbrowser/loading@2x.png"); | |
| 2729 } | |
| 2730 | |
| 2731 /* Background tab separators */ | |
| 2732 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after, | |
| 2733 .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before, | |
| 2734 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after { | |
| 2735 background-image: url(chrome://browser/skin/tabbrowser/tab-separator@2x.png); | |
| 2736 } | |
| 2737 } | |
| 2738 | |
| 2739 .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-icon-image:not([selected="true"]) { | |
| 2740 opacity: .9; | |
| 2741 } | |
| 2742 | |
| 2743 .tab-label:not([selected="true"]) { | |
| 2744 opacity: .7; | |
| 2745 } | |
| 2746 | |
| 2747 .tabbrowser-tab, | |
| 2748 .tabs-newtab-button { | |
| 2749 font: message-box; | |
| 2750 border: none; | |
| 2751 } | |
| 2752 | |
| 2753 .tabbrowser-tab[selected=true]:not(:-moz-lwtheme) { | |
| 2754 /* overriding tabbox.css */ | |
| 2755 color: inherit; | |
| 2756 } | |
| 2757 | |
| 2758 .tabbrowser-tab[selected=true] { | |
| 2759 /* overriding tabbox.css */ | |
| 2760 text-shadow: inherit; | |
| 2761 } | |
| 2762 | |
| 2763 .tabs-newtab-button > .toolbarbutton-icon { | |
| 2764 -moz-box-align: center; | |
| 2765 border: solid transparent; | |
| 2766 border-width: 0 11px; | |
| 2767 } | |
| 2768 | |
| 2769 .tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label { | |
| 2770 box-shadow: @focusRingShadow@; | |
| 2771 } | |
| 2772 | |
| 2773 /* We want the titlebar to be unified, but we still want to be able | |
| 2774 * to give #TabsToolbar a background. So we can't set -moz-appearance: | |
| 2775 * toolbar on #TabsToolbar itself. Instead, we set it on a box of the | |
| 2776 * right size which is put underneath #TabsToolbar. | |
| 2777 * | |
| 2778 * Because of Bug 941309, we make sure this pseudoelement always exists, | |
| 2779 * but we only make it visible when we need it. | |
| 2780 */ | |
| 2781 #navigator-toolbox::before { | |
| 2782 content: ''; | |
| 2783 display: block; | |
| 2784 -moz-appearance: toolbar; | |
| 2785 height: @tabMinHeight@; | |
| 2786 margin-bottom: -@tabMinHeight@; | |
| 2787 visibility: hidden; | |
| 2788 } | |
| 2789 | |
| 2790 #main-window:not([customizing]) #navigator-toolbox[inFullscreen]:not(:-moz-lwtheme)::before, | |
| 2791 #main-window:not(:-moz-any([customizing],[tabsintitlebar])) #navigator-toolbox:not(:-moz-lwtheme)::before { | |
| 2792 visibility: visible; | |
| 2793 } | |
| 2794 | |
| 2795 #TabsToolbar { | |
| 2796 position: relative; | |
| 2797 -moz-appearance: none; | |
| 2798 background-repeat: repeat-x; | |
| 2799 } | |
| 2800 | |
| 2801 #TabsToolbar:not(:-moz-lwtheme) { | |
| 2802 color: #333; | |
| 2803 text-shadow: @loweredShadow@; | |
| 2804 } | |
| 2805 | |
| 2806 /* | |
| 2807 * Draw the bottom border of the tabstrip when core doesn't do it for us. | |
| 2808 * Because of Bug 941309, we make sure this pseudoelement always exists, | |
| 2809 * but we only make it visible when we need it. | |
| 2810 */ | |
| 2811 #TabsToolbar::after { | |
| 2812 content: ''; | |
| 2813 /* Because we use placeholders for window controls etc. in the tabstrip, | |
| 2814 * and position those with ordinal attributes, and because our layout code | |
| 2815 * expects :before/:after nodes to come first/last in the frame list, | |
| 2816 * we have to reorder this element to come last, hence the | |
| 2817 * ordinal group value (see bug 853415). */ | |
| 2818 -moz-box-ordinal-group: 1001; | |
| 2819 position: absolute; | |
| 2820 bottom: @tabToolbarNavbarOverlap@; | |
| 2821 left: 0; | |
| 2822 right: 0; | |
| 2823 z-index: 0; | |
| 2824 border-bottom: 1px solid hsla(0,0%,0%,.3); | |
| 2825 visibility: hidden; | |
| 2826 } | |
| 2827 | |
| 2828 #main-window:-moz-any([sizemode="fullscreen"],[customize-entered]) #TabsToolbar::after, | |
| 2829 #main-window:not([tabsintitlebar]) #TabsToolbar::after, | |
| 2830 #TabsToolbar:-moz-lwtheme::after { | |
| 2831 visibility: visible; | |
| 2832 } | |
| 2833 | |
| 2834 #tabbrowser-tabs { | |
| 2835 -moz-box-align: stretch; | |
| 2836 } | |
| 2837 | |
| 2838 .tabs-newtab-button > .toolbarbutton-icon { | |
| 2839 padding: 6px 0 4px; | |
| 2840 } | |
| 2841 | |
| 2842 /* Background tabs: | |
| 2843 * | |
| 2844 * Decrease the height of the hoverable region of background tabs whenever the tabs are at the top | |
| 2845 * of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by | |
| 2846 * the titlebar. We don't need this in fullscreen since window dragging is not an issue there. | |
| 2847 */ | |
| 2848 #main-window[tabsintitlebar]:not([inFullscreen]) .tab-background-middle:not([selected=true]) { | |
| 2849 clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path); | |
| 2850 } | |
| 2851 | |
| 2852 /** | |
| 2853 * Tab Drag and Drop | |
| 2854 */ | |
| 2855 | |
| 2856 .tab-drop-indicator { | |
| 2857 list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator.png); | |
| 2858 margin-top: -2px; | |
| 2859 z-index: 3; | |
| 2860 } | |
| 2861 | |
| 2862 @media (min-resolution: 2dppx) { | |
| 2863 .tab-drop-indicator { | |
| 2864 list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator@2x.png); | |
| 2865 width: 12px; | |
| 2866 } | |
| 2867 } | |
| 2868 | |
| 2869 /** | |
| 2870 * In-tab close button | |
| 2871 */ | |
| 2872 | |
| 2873 .tab-close-button > .toolbarbutton-icon { | |
| 2874 -moz-margin-end: 0px !important; | |
| 2875 } | |
| 2876 | |
| 2877 .tab-close-button { | |
| 2878 -moz-appearance: none; | |
| 2879 border: none !important; | |
| 2880 background: none; | |
| 2881 cursor: default; | |
| 2882 } | |
| 2883 | |
| 2884 .tab-close-button.close-icon:not([selected=true]):not(:hover):-moz-lwtheme-brighttext { | |
| 2885 -moz-image-region: rect(0, 64px, 16px, 48px); | |
| 2886 } | |
| 2887 | |
| 2888 @media (min-resolution: 2dppx) { | |
| 2889 .tab-close-button.close-icon:not([selected=true]):not(:hover):-moz-lwtheme-brighttext { | |
| 2890 -moz-image-region: rect(0, 128px, 32px, 96px); | |
| 2891 } | |
| 2892 } | |
| 2893 | |
| 2894 .tabbrowser-arrowscrollbox > .scrollbutton-up, | |
| 2895 .tabbrowser-arrowscrollbox > .scrollbutton-down { | |
| 2896 -moz-image-region: rect(0, 13px, 20px, 0); | |
| 2897 margin: 0 0 @tabToolbarNavbarOverlap@; | |
| 2898 padding: 0 4px; | |
| 2899 border: none; | |
| 2900 } | |
| 2901 | |
| 2902 .tabbrowser-arrowscrollbox > .scrollbutton-up { | |
| 2903 -moz-border-end: 2px solid transparent; | |
| 2904 } | |
| 2905 | |
| 2906 .tabbrowser-arrowscrollbox > .scrollbutton-down { | |
| 2907 -moz-border-start: 2px solid transparent; | |
| 2908 transition: 1s background-color ease-out; | |
| 2909 } | |
| 2910 | |
| 2911 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] { | |
| 2912 background-color: Highlight; | |
| 2913 transition: none; | |
| 2914 } | |
| 2915 | |
| 2916 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(ltr), | |
| 2917 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(rtl) { | |
| 2918 list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-left.png"); | |
| 2919 } | |
| 2920 | |
| 2921 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr), | |
| 2922 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl) { | |
| 2923 list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-right.png"); | |
| 2924 } | |
| 2925 | |
| 2926 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(ltr):-moz-lwtheme-brighttext, | |
| 2927 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(rtl):-moz-lwtheme-brighttext { | |
| 2928 list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-left-inverted.png"); | |
| 2929 } | |
| 2930 | |
| 2931 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr):-moz-lwtheme-brighttext, | |
| 2932 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl):-moz-lwtheme-brighttext { | |
| 2933 list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-right-inverted.png"); | |
| 2934 } | |
| 2935 | |
| 2936 .tabbrowser-arrowscrollbox > .scrollbutton-up:hover, | |
| 2937 .tabbrowser-arrowscrollbox > .scrollbutton-down:hover { | |
| 2938 -moz-image-region: rect(0, 26px, 20px, 13px); | |
| 2939 } | |
| 2940 | |
| 2941 .tabbrowser-arrowscrollbox > .scrollbutton-up:hover:active, | |
| 2942 .tabbrowser-arrowscrollbox > .scrollbutton-down:hover:active { | |
| 2943 -moz-image-region: rect(0, 39px, 20px, 26px); | |
| 2944 } | |
| 2945 | |
| 2946 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled] > .toolbarbutton-icon, | |
| 2947 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] > .toolbarbutton-icon { | |
| 2948 -moz-image-region: rect(0, 13px, 20px, 0) !important; | |
| 2949 opacity: .5; | |
| 2950 } | |
| 2951 | |
| 2952 @media (min-resolution: 2dppx) { | |
| 2953 .tabbrowser-arrowscrollbox > .scrollbutton-up, | |
| 2954 .tabbrowser-arrowscrollbox > .scrollbutton-down { | |
| 2955 -moz-image-region: rect(0, 26px, 40px, 0); | |
| 2956 } | |
| 2957 | |
| 2958 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(ltr), | |
| 2959 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(rtl) { | |
| 2960 list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-left@2x.png"); | |
| 2961 } | |
| 2962 | |
| 2963 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr), | |
| 2964 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl) { | |
| 2965 list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-right@2x.png"); | |
| 2966 } | |
| 2967 | |
| 2968 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(ltr):-moz-lwtheme-brighttext, | |
| 2969 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(rtl):-moz-lwtheme-brighttext { | |
| 2970 list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-left-inverted@2x.png"); | |
| 2971 } | |
| 2972 | |
| 2973 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr):-moz-lwtheme-brighttext, | |
| 2974 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl):-moz-lwtheme-brighttext { | |
| 2975 list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-right-inverted@2x.png"); | |
| 2976 } | |
| 2977 | |
| 2978 .tabbrowser-arrowscrollbox > .scrollbutton-up:hover, | |
| 2979 .tabbrowser-arrowscrollbox > .scrollbutton-down:hover { | |
| 2980 -moz-image-region: rect(0, 52px, 40px, 26px); | |
| 2981 } | |
| 2982 | |
| 2983 .tabbrowser-arrowscrollbox > .scrollbutton-up:hover:active, | |
| 2984 .tabbrowser-arrowscrollbox > .scrollbutton-down:hover:active { | |
| 2985 -moz-image-region: rect(0, 78px, 40px, 52px); | |
| 2986 } | |
| 2987 | |
| 2988 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled] > .toolbarbutton-icon, | |
| 2989 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] > .toolbarbutton-icon { | |
| 2990 -moz-image-region: rect(0, 26px, 40px, 0) !important; | |
| 2991 } | |
| 2992 | |
| 2993 .tabbrowser-arrowscrollbox > .scrollbutton-up > .toolbarbutton-icon, | |
| 2994 .tabbrowser-arrowscrollbox > .scrollbutton-down > .toolbarbutton-icon { | |
| 2995 width: 13px; | |
| 2996 } | |
| 2997 } | |
| 2998 | |
| 2999 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):-moz-locale-dir(ltr), | |
| 3000 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):-moz-locale-dir(rtl) { | |
| 3001 border-width: 0 2px 0 0; | |
| 3002 border-style: solid; | |
| 3003 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill; | |
| 3004 } | |
| 3005 | |
| 3006 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):-moz-locale-dir(ltr), | |
| 3007 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):-moz-locale-dir(rtl) { | |
| 3008 border-width: 0 0 0 2px; | |
| 3009 border-style: solid; | |
| 3010 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill; | |
| 3011 } | |
| 3012 | |
| 3013 /** | |
| 3014 * Tabstrip & add-on bar toolbar buttons | |
| 3015 */ | |
| 3016 | |
| 3017 #TabsToolbar .toolbarbutton-1, | |
| 3018 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button, | |
| 3019 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { | |
| 3020 -moz-appearance: none; | |
| 3021 margin: 0; | |
| 3022 /* !important flags needed because of bug 561154: */ | |
| 3023 /* Bug 990390: -moz-any is no longer used in the selector so the !important aren't necessary for that anymore. */ | |
| 3024 padding: 0 !important; | |
| 3025 border: none !important; | |
| 3026 border-radius: 0 !important; | |
| 3027 background: none !important; | |
| 3028 box-shadow: none !important; | |
| 3029 } | |
| 3030 | |
| 3031 #TabsToolbar .toolbarbutton-1:not([type="menu-button"]), | |
| 3032 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button { | |
| 3033 padding: 0 1px; | |
| 3034 } | |
| 3035 | |
| 3036 #TabsToolbar .toolbarbutton-1 { | |
| 3037 margin-bottom: @tabToolbarNavbarOverlap@; | |
| 3038 } | |
| 3039 | |
| 3040 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { | |
| 3041 padding-left: 4px; | |
| 3042 padding-right: 4px; | |
| 3043 } | |
| 3044 | |
| 3045 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover, | |
| 3046 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover, | |
| 3047 #TabsToolbar .toolbarbutton-1:not([type="menu-button"]):not([disabled=true]):not([open]):hover, | |
| 3048 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover, | |
| 3049 #TabsToolbar .toolbarbutton-1:not([disabled=true]):not([buttonover]):hover > .toolbarbutton-menubutton-dropmarker { | |
| 3050 background-image: linear-gradient(transparent, rgba(0,0,0,.15)) !important; | |
| 3051 } | |
| 3052 | |
| 3053 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover:active, | |
| 3054 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover:active, | |
| 3055 #TabsToolbar .toolbarbutton-1:not([type="menu-button"]):not([disabled=true]):hover:active, | |
| 3056 #TabsToolbar .toolbarbutton-1[type="menu"][open], | |
| 3057 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover:active, | |
| 3058 #TabsToolbar .toolbarbutton-1[open]:not([disabled=true]):hover > .toolbarbutton-menubutton-dropmarker { | |
| 3059 background-image: linear-gradient(transparent, rgba(0,0,0,.3)) !important; | |
| 3060 } | |
| 3061 | |
| 3062 .tabs-newtab-button, | |
| 3063 #TabsToolbar > #new-tab-button, | |
| 3064 #TabsToolbar > toolbarpaletteitem > #new-tab-button { | |
| 3065 list-style-image: url(chrome://browser/skin/tabbrowser/newtab.png); | |
| 3066 -moz-image-region: rect(0, 18px, 20px, 0); | |
| 3067 } | |
| 3068 | |
| 3069 .tabs-newtab-button:-moz-lwtheme-brighttext, | |
| 3070 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext, | |
| 3071 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext { | |
| 3072 list-style-image: url(chrome://browser/skin/tabbrowser/newtab-inverted.png); | |
| 3073 } | |
| 3074 | |
| 3075 .tabs-newtab-button:hover, | |
| 3076 #TabsToolbar > #new-tab-button:hover { | |
| 3077 -moz-image-region: rect(0, 36px, 20px, 18px); | |
| 3078 } | |
| 3079 | |
| 3080 .tabs-newtab-button:hover:active, | |
| 3081 #TabsToolbar > #new-tab-button:hover:active { | |
| 3082 -moz-image-region: rect(0, 54px, 20px, 36px); | |
| 3083 } | |
| 3084 | |
| 3085 @media (min-resolution: 2dppx) { | |
| 3086 .tabs-newtab-button, | |
| 3087 #TabsToolbar > #new-tab-button, | |
| 3088 #TabsToolbar > toolbarpaletteitem > #new-tab-button { | |
| 3089 list-style-image: url(chrome://browser/skin/tabbrowser/newtab@2x.png); | |
| 3090 -moz-image-region: rect(0, 36px, 40px, 0); | |
| 3091 } | |
| 3092 | |
| 3093 .tabs-newtab-button:-moz-lwtheme-brighttext, | |
| 3094 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext, | |
| 3095 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext { | |
| 3096 list-style-image: url(chrome://browser/skin/tabbrowser/newtab-inverted@2x.png); | |
| 3097 } | |
| 3098 | |
| 3099 .tabs-newtab-button:hover, | |
| 3100 #TabsToolbar > #new-tab-button:hover { | |
| 3101 -moz-image-region: rect(0, 72px, 40px, 36px); | |
| 3102 } | |
| 3103 | |
| 3104 .tabs-newtab-button:hover:active, | |
| 3105 #TabsToolbar > #new-tab-button:hover:active { | |
| 3106 -moz-image-region: rect(0, 108px, 40px, 72px); | |
| 3107 } | |
| 3108 | |
| 3109 .tabs-newtab-button > .toolbarbutton-icon { | |
| 3110 width: 40px; | |
| 3111 } | |
| 3112 | |
| 3113 #TabsToolbar > #new-tab-button > .toolbarbutton-icon, | |
| 3114 #TabsToolbar > toolbarpaletteitem > #new-tab-button > .toolbarbutton-icon { | |
| 3115 width: 18px; | |
| 3116 } | |
| 3117 } | |
| 3118 | |
| 3119 #alltabs-button { | |
| 3120 list-style-image: url(chrome://browser/skin/tabbrowser/alltabs-box-bkgnd-icon.png); | |
| 3121 -moz-image-region: rect(0, 17px, 20px, 0); | |
| 3122 } | |
| 3123 | |
| 3124 #alltabs-button:-moz-lwtheme-brighttext { | |
| 3125 list-style-image: url(chrome://browser/skin/tabbrowser/alltabs-box-bkgnd-icon-inverted.png); | |
| 3126 } | |
| 3127 | |
| 3128 #alltabs-button:not([disabled="true"]):hover { | |
| 3129 -moz-image-region: rect(0, 34px, 20px, 17px); | |
| 3130 } | |
| 3131 | |
| 3132 #alltabs-button[open="true"]:not([disabled="true"]), | |
| 3133 #alltabs-button:not([disabled="true"]):hover:active { | |
| 3134 -moz-image-region: rect(0, 51px, 20px, 34px); | |
| 3135 } | |
| 3136 | |
| 3137 @media (min-resolution: 2dppx) { | |
| 3138 #alltabs-button { | |
| 3139 list-style-image: url(chrome://browser/skin/tabbrowser/alltabs-box-bkgnd-icon@2x.png); | |
| 3140 -moz-image-region: rect(0, 34px, 40px, 0); | |
| 3141 } | |
| 3142 | |
| 3143 #alltabs-button:-moz-lwtheme-brighttext { | |
| 3144 list-style-image: url(chrome://browser/skin/tabbrowser/alltabs-box-bkgnd-icon-inverted@2x.png); | |
| 3145 } | |
| 3146 | |
| 3147 #alltabs-button:not([disabled="true"]):hover { | |
| 3148 -moz-image-region: rect(0, 68px, 40px, 34px); | |
| 3149 } | |
| 3150 | |
| 3151 #alltabs-button[open="true"]:not([disabled="true"]), | |
| 3152 #alltabs-button:not([disabled="true"]):hover:active { | |
| 3153 -moz-image-region: rect(0, 102px, 40px, 68px); | |
| 3154 } | |
| 3155 | |
| 3156 #alltabs-button > .toolbarbutton-icon { | |
| 3157 width: 17px; | |
| 3158 } | |
| 3159 } | |
| 3160 | |
| 3161 #alltabs-button > .toolbarbutton-menu-dropmarker { | |
| 3162 display: none; | |
| 3163 } | |
| 3164 | |
| 3165 #alltabs-button > .toolbarbutton-icon { | |
| 3166 -moz-margin-end: 2px; | |
| 3167 } | |
| 3168 | |
| 3169 /* All Tabs Menupopup */ | |
| 3170 .alltabs-item > .menu-iconic-left > .menu-iconic-icon { | |
| 3171 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); | |
| 3172 } | |
| 3173 | |
| 3174 @media (min-resolution: 2dppx) { | |
| 3175 .alltabs-item > .menu-iconic-left > .menu-iconic-icon { | |
| 3176 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png"); | |
| 3177 } | |
| 3178 } | |
| 3179 | |
| 3180 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon { | |
| 3181 list-style-image: url("chrome://global/skin/icons/loading_16.png") !important; | |
| 3182 } | |
| 3183 | |
| 3184 .alltabs-item[tabIsVisible] { | |
| 3185 /* box-shadow instead of background-color to work around native styling */ | |
| 3186 box-shadow: inset -5px 0 ThreeDShadow; | |
| 3187 } | |
| 3188 | |
| 3189 /* Bookmarks toolbar */ | |
| 3190 #PlacesToolbarDropIndicator { | |
| 3191 list-style-image: url(chrome://browser/skin/places/toolbarDropMarker.png); | |
| 3192 } | |
| 3193 | |
| 3194 /* Bookmark drag and drop styles */ | |
| 3195 | |
| 3196 .bookmark-item[dragover-into="true"] { | |
| 3197 background: Highlight !important; | |
| 3198 color: HighlightText !important; | |
| 3199 } | |
| 3200 | |
| 3201 /* rules for menupopup drop indicators */ | |
| 3202 .menupopup-drop-indicator-bar { | |
| 3203 position: relative; | |
| 3204 /* these two margins must together compensate the indicator's height */ | |
| 3205 margin-top: -1px; | |
| 3206 margin-bottom: -1px; | |
| 3207 } | |
| 3208 | |
| 3209 .menupopup-drop-indicator { | |
| 3210 list-style-image: none; | |
| 3211 height: 2px; | |
| 3212 -moz-margin-end: -4em; | |
| 3213 background-color: Highlight; | |
| 3214 } | |
| 3215 | |
| 3216 /* Popup Icons */ | |
| 3217 #identity-popup-icon { | |
| 3218 height: 64px; | |
| 3219 width: 64px; | |
| 3220 padding: 0; | |
| 3221 list-style-image: url("chrome://browser/skin/identity.png"); | |
| 3222 -moz-image-region: rect(0px, 64px, 64px, 0px); | |
| 3223 } | |
| 3224 | |
| 3225 #identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon { | |
| 3226 -moz-image-region: rect(64px, 64px, 128px, 0px); | |
| 3227 } | |
| 3228 | |
| 3229 #identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon { | |
| 3230 -moz-image-region: rect(128px, 64px, 192px, 0px); | |
| 3231 } | |
| 3232 | |
| 3233 @media (min-resolution: 2dppx) { | |
| 3234 #identity-popup-icon { | |
| 3235 list-style-image: url("chrome://browser/skin/identity@2x.png"); | |
| 3236 -moz-image-region: rect(0px, 128px, 128px, 0px); | |
| 3237 } | |
| 3238 | |
| 3239 #identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon { | |
| 3240 -moz-image-region: rect(128px, 128px, 256px, 0px); | |
| 3241 } | |
| 3242 | |
| 3243 #identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon { | |
| 3244 -moz-image-region: rect(256px, 128px, 384px, 0px); | |
| 3245 } | |
| 3246 | |
| 3247 #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon { | |
| 3248 list-style-image: url("chrome://branding/content/icon128.png"); | |
| 3249 } | |
| 3250 } | |
| 3251 | |
| 3252 /* Popup Body Text */ | |
| 3253 .identity-popup-description { | |
| 3254 white-space: pre-wrap; | |
| 3255 -moz-padding-start: 15px; | |
| 3256 margin: 2px 0 4px; | |
| 3257 } | |
| 3258 | |
| 3259 .identity-popup-label { | |
| 3260 white-space: pre-wrap; | |
| 3261 -moz-padding-start: 15px; | |
| 3262 margin: 0; | |
| 3263 } | |
| 3264 | |
| 3265 #identity-popup-content-host , | |
| 3266 #identity-popup-content-owner { | |
| 3267 font-weight: bold; | |
| 3268 max-width: 300px; | |
| 3269 } | |
| 3270 | |
| 3271 #identity-popup-content-host , | |
| 3272 #identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner { | |
| 3273 font-size: 140%; | |
| 3274 } | |
| 3275 | |
| 3276 #identity-popup-content-owner { | |
| 3277 margin-bottom: 0 !important; | |
| 3278 } | |
| 3279 | |
| 3280 #identity-popup-content-verifier { | |
| 3281 margin: 4px 0 2px; | |
| 3282 } | |
| 3283 | |
| 3284 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption , | |
| 3285 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption { | |
| 3286 margin-top: 10px; | |
| 3287 -moz-margin-start: -24px; | |
| 3288 } | |
| 3289 | |
| 3290 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon , | |
| 3291 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon { | |
| 3292 margin-top: 5px; | |
| 3293 list-style-image: url("chrome://browser/skin/Secure-Glyph.png"); | |
| 3294 } | |
| 3295 | |
| 3296 #identity-popup-help-icon { | |
| 3297 -moz-appearance: none; | |
| 3298 border: none; | |
| 3299 margin: 10px 0 0 2px; | |
| 3300 background: none; | |
| 3301 min-width: 0; | |
| 3302 list-style-image: url("chrome://global/skin/icons/question-16.png"); | |
| 3303 cursor: pointer; | |
| 3304 } | |
| 3305 | |
| 3306 #identity-popup-help-icon > .button-box > .button-text { | |
| 3307 display: none; | |
| 3308 } | |
| 3309 | |
| 3310 #identity-popup-help-icon > .button-box > .button-icon { | |
| 3311 height: 16px; | |
| 3312 width: 16px; | |
| 3313 } | |
| 3314 | |
| 3315 #identity-popup-help-icon:focus { | |
| 3316 @hudButtonFocused@ | |
| 3317 } | |
| 3318 | |
| 3319 #identity-popup-help-icon:hover:active { | |
| 3320 @hudButtonPressed@ | |
| 3321 } | |
| 3322 | |
| 3323 @media (min-resolution: 2dppx) { | |
| 3324 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon , | |
| 3325 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon { | |
| 3326 list-style-image: url("chrome://browser/skin/Secure-Glyph@2x.png"); | |
| 3327 width: 24px; | |
| 3328 } | |
| 3329 | |
| 3330 #identity-popup-help-icon { | |
| 3331 list-style-image: url("chrome://global/skin/icons/question-32.png"); | |
| 3332 } | |
| 3333 } | |
| 3334 | |
| 3335 #identity-popup { | |
| 3336 margin-top: 1px; | |
| 3337 } | |
| 3338 | |
| 3339 #identity-popup > .panel-arrowcontainer > .panel-arrowcontent { | |
| 3340 padding: 0; | |
| 3341 } | |
| 3342 | |
| 3343 #identity-popup-container { | |
| 3344 padding: 16px; | |
| 3345 } | |
| 3346 | |
| 3347 #identity-popup-button-container { | |
| 3348 background-color: hsla(210,4%,10%,.07); | |
| 3349 border-top: 1px solid hsla(210,4%,10%,.12); | |
| 3350 padding: 16px; | |
| 3351 margin-top: 5px; | |
| 3352 } | |
| 3353 | |
| 3354 #notification-popup-box { | |
| 3355 position: relative; | |
| 3356 background-color: #fff; | |
| 3357 background-clip: padding-box; | |
| 3358 padding-left: 3px; | |
| 3359 border-radius: 2px 0 0 2px; | |
| 3360 border-width: 0 8px 0 0; | |
| 3361 border-style: solid; | |
| 3362 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 fill; | |
| 3363 -moz-margin-end: -8px; | |
| 3364 } | |
| 3365 | |
| 3366 @media (min-resolution: 2dppx) { | |
| 3367 #notification-popup-box { | |
| 3368 border-image: url("chrome://browser/skin/urlbar-arrow@2x.png") 0 16 0 0 fill; | |
| 3369 } | |
| 3370 } | |
| 3371 | |
| 3372 @conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box { | |
| 3373 padding-left: 7px; | |
| 3374 } | |
| 3375 | |
| 3376 #notification-popup-box:-moz-locale-dir(rtl), | |
| 3377 .notification-anchor-icon:-moz-locale-dir(rtl) { | |
| 3378 transform: scaleX(-1); | |
| 3379 } | |
| 3380 | |
| 3381 .notification-anchor-icon { | |
| 3382 width: 16px; | |
| 3383 height: 16px; | |
| 3384 margin: 0 2px; | |
| 3385 } | |
| 3386 | |
| 3387 .notification-anchor-icon:-moz-focusring { | |
| 3388 box-shadow: 0 0 2px 1px -moz-mac-focusring inset, | |
| 3389 0 0 3px 2px -moz-mac-focusring; | |
| 3390 } | |
| 3391 | |
| 3392 #social-notification-icon > .toolbarbutton-icon { | |
| 3393 height: 16px; | |
| 3394 } | |
| 3395 | |
| 3396 .default-notification-icon, | |
| 3397 #default-notification-icon { | |
| 3398 list-style-image: url(chrome://global/skin/icons/information-16.png); | |
| 3399 } | |
| 3400 @media (min-resolution: 2dppx) { | |
| 3401 .default-notification-icon, | |
| 3402 #default-notification-icon { | |
| 3403 list-style-image: url(chrome://global/skin/icons/information-32.png); | |
| 3404 } | |
| 3405 } | |
| 3406 | |
| 3407 .identity-notification-icon, | |
| 3408 #identity-notification-icon { | |
| 3409 list-style-image: url(chrome://mozapps/skin/profile/profileicon.png); | |
| 3410 } | |
| 3411 /* XXX: need HiDPI version */ | |
| 3412 | |
| 3413 .geo-notification-icon, | |
| 3414 #geo-notification-icon { | |
| 3415 list-style-image: url(chrome://browser/skin/Geolocation-16.png); | |
| 3416 } | |
| 3417 @media (min-resolution: 2dppx) { | |
| 3418 .geo-notification-icon, | |
| 3419 #geo-notification-icon { | |
| 3420 list-style-image: url(chrome://browser/skin/Geolocation-16@2x.png); | |
| 3421 } | |
| 3422 } | |
| 3423 | |
| 3424 | |
| 3425 #canvas-notification-icon { | |
| 3426 list-style-image: url(chrome://browser/skin/canvas-popup.svg); | |
| 3427 } | |
| 3428 | |
| 3429 .indexedDB-notification-icon, | |
| 3430 #indexedDB-notification-icon { | |
| 3431 list-style-image: url(chrome://global/skin/icons/question-16.png); | |
| 3432 } | |
| 3433 @media (min-resolution: 2dppx) { | |
| 3434 .indexedDB-notification-icon, | |
| 3435 #indexedDB-notification-icon { | |
| 3436 list-style-image: url(chrome://global/skin/icons/question-32.png); | |
| 3437 } | |
| 3438 } | |
| 3439 | |
| 3440 #addons-notification-icon { | |
| 3441 list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png); | |
| 3442 } | |
| 3443 @media (min-resolution: 2dppx) { | |
| 3444 #addons-notification-icon { | |
| 3445 list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png); | |
| 3446 } | |
| 3447 } | |
| 3448 | |
| 3449 #password-notification-icon { | |
| 3450 list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); | |
| 3451 } | |
| 3452 @media (min-resolution: 2dppx) { | |
| 3453 #password-notification-icon { | |
| 3454 list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16@2x.png); | |
| 3455 } | |
| 3456 } | |
| 3457 | |
| 3458 .webapps-notification-icon, | |
| 3459 #webapps-notification-icon { | |
| 3460 list-style-image: url(chrome://global/skin/icons/webapps-16.png); | |
| 3461 } | |
| 3462 @media (min-resolution: 2dppx) { | |
| 3463 .webapps-notification-icon, | |
| 3464 #webapps-notification-icon { | |
| 3465 list-style-image: url(chrome://global/skin/icons/webapps-16@2x.png); | |
| 3466 } | |
| 3467 } | |
| 3468 | |
| 3469 #plugins-notification-icon { | |
| 3470 list-style-image: url(chrome://browser/skin/notification-pluginNormal.png); | |
| 3471 } | |
| 3472 | |
| 3473 #plugins-notification-icon.plugin-hidden { | |
| 3474 list-style-image: url(chrome://browser/skin/notification-pluginAlert.png); | |
| 3475 } | |
| 3476 | |
| 3477 #plugins-notification-icon.plugin-blocked { | |
| 3478 list-style-image: url(chrome://browser/skin/notification-pluginBlocked.png); | |
| 3479 } | |
| 3480 | |
| 3481 #plugins-notification-icon { | |
| 3482 -moz-image-region: rect(0, 16px, 16px, 0); | |
| 3483 } | |
| 3484 | |
| 3485 #plugins-notification-icon:hover { | |
| 3486 -moz-image-region: rect(0, 32px, 16px, 16px); | |
| 3487 } | |
| 3488 | |
| 3489 #plugins-notification-icon:active { | |
| 3490 -moz-image-region: rect(0, 48px, 16px, 32px); | |
| 3491 } | |
| 3492 | |
| 3493 @media (min-resolution: 2dppx) { | |
| 3494 #plugins-notification-icon { | |
| 3495 list-style-image: url(chrome://browser/skin/notification-pluginNormal@2x.png); | |
| 3496 } | |
| 3497 | |
| 3498 #plugins-notification-icon.plugin-hidden { | |
| 3499 list-style-image: url(chrome://browser/skin/notification-pluginAlert@2x.png); | |
| 3500 } | |
| 3501 | |
| 3502 #plugins-notification-icon.plugin-blocked { | |
| 3503 list-style-image: url(chrome://browser/skin/notification-pluginBlocked@2x.png); | |
| 3504 } | |
| 3505 | |
| 3506 #plugins-notification-icon { | |
| 3507 -moz-image-region: rect(0, 32px, 32px, 0); | |
| 3508 } | |
| 3509 | |
| 3510 #plugins-notification-icon:hover { | |
| 3511 -moz-image-region: rect(0, 64px, 32px, 32px); | |
| 3512 } | |
| 3513 | |
| 3514 #plugins-notification-icon:active { | |
| 3515 -moz-image-region: rect(0, 96px, 32px, 64px); | |
| 3516 } | |
| 3517 } | |
| 3518 | |
| 3519 #plugin-install-notification-icon { | |
| 3520 list-style-image: url(chrome://browser/skin/pluginInstall-16.png); | |
| 3521 } | |
| 3522 @media (min-resolution: 2dppx) { | |
| 3523 #plugin-install-notification-icon { | |
| 3524 list-style-image: url(chrome://browser/skin/pluginInstall-16@2x.png); | |
| 3525 } | |
| 3526 } | |
| 3527 | |
| 3528 #notification-popup-box[hidden] { | |
| 3529 /* Override display:none to make the pluginBlockedNotification animation work | |
| 3530 when showing the notification repeatedly. */ | |
| 3531 display: -moz-box; | |
| 3532 visibility: collapse; | |
| 3533 } | |
| 3534 | |
| 3535 #plugins-notification-icon.plugin-blocked[showing] { | |
| 3536 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both; | |
| 3537 } | |
| 3538 | |
| 3539 @keyframes pluginBlockedNotification { | |
| 3540 from { | |
| 3541 opacity: 0; | |
| 3542 } | |
| 3543 to { | |
| 3544 opacity: 1; | |
| 3545 } | |
| 3546 } | |
| 3547 | |
| 3548 #mixed-content-blocked-notification-icon { | |
| 3549 list-style-image: url(chrome://browser/skin/mixed-content-blocked-16.png); | |
| 3550 } | |
| 3551 @media (min-resolution: 2dppx) { | |
| 3552 #mixed-content-blocked-notification-icon { | |
| 3553 list-style-image: url(chrome://browser/skin/mixed-content-blocked-16@2x.png); | |
| 3554 } | |
| 3555 } | |
| 3556 | |
| 3557 .webRTC-shareDevices-notification-icon, | |
| 3558 #webRTC-shareDevices-notification-icon { | |
| 3559 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16.png); | |
| 3560 } | |
| 3561 @media (min-resolution: 2dppx) { | |
| 3562 .webRTC-shareDevices-notification-icon, | |
| 3563 #webRTC-shareDevices-notification-icon { | |
| 3564 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png); | |
| 3565 } | |
| 3566 } | |
| 3567 | |
| 3568 .webRTC-sharingDevices-notification-icon, | |
| 3569 #webRTC-sharingDevices-notification-icon { | |
| 3570 list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16.png); | |
| 3571 } | |
| 3572 @media (min-resolution: 2dppx) { | |
| 3573 .webRTC-sharingDevices-notification-icon, | |
| 3574 #webRTC-sharingDevices-notification-icon { | |
| 3575 list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png); | |
| 3576 } | |
| 3577 } | |
| 3578 | |
| 3579 .webRTC-shareMicrophone-notification-icon, | |
| 3580 #webRTC-shareMicrophone-notification-icon { | |
| 3581 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16.png); | |
| 3582 } | |
| 3583 @media (min-resolution: 2dppx) { | |
| 3584 .webRTC-shareMicrophone-notification-icon, | |
| 3585 #webRTC-shareMicrophone-notification-icon { | |
| 3586 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png); | |
| 3587 } | |
| 3588 } | |
| 3589 | |
| 3590 .webRTC-sharingMicrophone-notification-icon, | |
| 3591 #webRTC-sharingMicrophone-notification-icon { | |
| 3592 list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16.png); | |
| 3593 } | |
| 3594 @media (min-resolution: 2dppx) { | |
| 3595 .webRTC-sharingMicrophone-notification-icon, | |
| 3596 #webRTC-sharingMicrophone-notification-icon { | |
| 3597 list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png); | |
| 3598 } | |
| 3599 } | |
| 3600 | |
| 3601 .web-notifications-notification-icon, | |
| 3602 #web-notifications-notification-icon { | |
| 3603 list-style-image: url(chrome://browser/skin/notification-16.png); | |
| 3604 } | |
| 3605 @media (min-resolution: 2dppx) { | |
| 3606 .web-notifications-notification-icon, | |
| 3607 #web-notifications-notification-icon { | |
| 3608 list-style-image: url(chrome://browser/skin/notification-16@2x.png); | |
| 3609 } | |
| 3610 } | |
| 3611 | |
| 3612 .pointerLock-notification-icon, | |
| 3613 #pointerLock-notification-icon { | |
| 3614 list-style-image: url(chrome://browser/skin/pointerLock-16.png); | |
| 3615 } | |
| 3616 @media (min-resolution: 2dppx) { | |
| 3617 .pointerLock-notification-icon, | |
| 3618 #pointerLock-notification-icon { | |
| 3619 list-style-image: url(chrome://browser/skin/pointerLock-16@2x.png); | |
| 3620 } | |
| 3621 } | |
| 3622 | |
| 3623 .translate-notification-icon, | |
| 3624 #translate-notification-icon { | |
| 3625 list-style-image: url(chrome://browser/skin/translation-16.png); | |
| 3626 -moz-image-region: rect(0px, 16px, 16px, 0px); | |
| 3627 } | |
| 3628 @media (min-resolution: 2dppx) { | |
| 3629 .translate-notification-icon, | |
| 3630 #translate-notification-icon { | |
| 3631 list-style-image: url(chrome://browser/skin/translation-16@2x.png); | |
| 3632 -moz-image-region: rect(0px, 32px, 32px, 0px); | |
| 3633 } | |
| 3634 } | |
| 3635 | |
| 3636 .translated-notification-icon, | |
| 3637 #translated-notification-icon { | |
| 3638 list-style-image: url(chrome://browser/skin/translation-16.png); | |
| 3639 -moz-image-region: rect(0px, 32px, 16px, 16px); | |
| 3640 } | |
| 3641 @media (min-resolution: 2dppx) { | |
| 3642 .translated-notification-icon, | |
| 3643 #translated-notification-icon { | |
| 3644 list-style-image: url(chrome://browser/skin/translation-16@2x.png); | |
| 3645 -moz-image-region: rect(0px, 64px, 32px, 32px); | |
| 3646 } | |
| 3647 } | |
| 3648 | |
| 3649 | |
| 3650 .popup-notification-icon { | |
| 3651 width: 64px; | |
| 3652 height: 64px; | |
| 3653 -moz-margin-end: 10px; | |
| 3654 } | |
| 3655 | |
| 3656 .popup-notification-icon[popupid="geolocation"] { | |
| 3657 list-style-image: url(chrome://browser/skin/Geolocation-64.png); | |
| 3658 } | |
| 3659 @media (min-resolution: 2dppx) { | |
| 3660 .popup-notification-icon[popupid="geolocation"] { | |
| 3661 list-style-image: url(chrome://browser/skin/Geolocation-64@2x.png); | |
| 3662 } | |
| 3663 } | |
| 3664 | |
| 3665 .popup-notification-icon[popupid="web-notifications"] { | |
| 3666 list-style-image: url(chrome://browser/skin/notification-64.png); | |
| 3667 } | |
| 3668 @media (min-resolution: 2dppx) { | |
| 3669 .popup-notification-icon[popupid="web-notifications"] { | |
| 3670 list-style-image: url(chrome://browser/skin/notification-64@2x.png); | |
| 3671 } | |
| 3672 } | |
| 3673 | |
| 3674 .popup-notification-icon[popupid="xpinstall-disabled"], | |
| 3675 .popup-notification-icon[popupid="addon-progress"], | |
| 3676 .popup-notification-icon[popupid="addon-install-cancelled"], | |
| 3677 .popup-notification-icon[popupid="addon-install-blocked"], | |
| 3678 .popup-notification-icon[popupid="addon-install-failed"], | |
| 3679 .popup-notification-icon[popupid="addon-install-complete"] { | |
| 3680 list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png); | |
| 3681 width: 32px; | |
| 3682 height: 32px; | |
| 3683 } | |
| 3684 | |
| 3685 .popup-notification-icon[popupid="click-to-play-plugins"] { | |
| 3686 list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png); | |
| 3687 } | |
| 3688 | |
| 3689 .popup-notification-icon[popupid="plugins-not-found"] { | |
| 3690 list-style-image: url(chrome://browser/skin/pluginInstall-64.png); | |
| 3691 } | |
| 3692 @media (min-resolution: 2dppx) { | |
| 3693 .popup-notification-icon[popupid="plugins-not-found"] { | |
| 3694 list-style-image: url(chrome://browser/skin/pluginInstall-64\@2x.png); | |
| 3695 } | |
| 3696 } | |
| 3697 | |
| 3698 .addon-progress-description { | |
| 3699 width: 350px; | |
| 3700 max-width: 350px; | |
| 3701 } | |
| 3702 | |
| 3703 .popup-progress-label, | |
| 3704 .popup-progress-meter { | |
| 3705 -moz-margin-start: 0; | |
| 3706 -moz-margin-end: 0; | |
| 3707 } | |
| 3708 | |
| 3709 .popup-progress-cancel { | |
| 3710 -moz-appearance: none; | |
| 3711 min-height: 16px; | |
| 3712 min-width: 16px; | |
| 3713 max-height: 16px; | |
| 3714 max-width: 16px; | |
| 3715 padding: 0; | |
| 3716 margin: 0 1px 0 1px; | |
| 3717 list-style-image: url(chrome://mozapps/skin/downloads/buttons.png); | |
| 3718 -moz-image-region: rect(0px, 16px, 16px, 0px); | |
| 3719 } | |
| 3720 | |
| 3721 .popup-progress-cancel:hover { | |
| 3722 -moz-image-region: rect(0px, 32px, 16px, 16px); | |
| 3723 } | |
| 3724 | |
| 3725 .popup-progress-cancel:active { | |
| 3726 -moz-image-region: rect(0px, 48px, 16px, 32px); | |
| 3727 } | |
| 3728 | |
| 3729 .popup-notification-icon[popupid="canvas-permissions-prompt"] { | |
| 3730 list-style-image: url(chrome://browser/skin/canvas-popup.svg); | |
| 3731 } | |
| 3732 | |
| 3733 .popup-notification-icon[popupid="indexedDB-permissions-prompt"], | |
| 3734 .popup-notification-icon[popupid="indexedDB-quota-prompt"], | |
| 3735 .popup-notification-icon[popupid*="offline-app-requested"], | |
| 3736 .popup-notification-icon[popupid="offline-app-usage"] { | |
| 3737 list-style-image: url(chrome://global/skin/icons/question-64.png); | |
| 3738 } | |
| 3739 | |
| 3740 .popup-notification-icon[popupid="password-save"], | |
| 3741 .popup-notification-icon[popupid="password-change"] { | |
| 3742 list-style-image: url(chrome://mozapps/skin/passwordmgr/key-64.png); | |
| 3743 } | |
| 3744 | |
| 3745 .popup-notification-icon[popupid="webapps-install-progress"], | |
| 3746 .popup-notification-icon[popupid="webapps-install"] { | |
| 3747 list-style-image: url(chrome://global/skin/icons/webapps-64.png); | |
| 3748 } | |
| 3749 | |
| 3750 .popup-notification-icon[popupid="mixed-content-blocked"] { | |
| 3751 list-style-image: url(chrome://browser/skin/mixed-content-blocked-64.png); | |
| 3752 } | |
| 3753 @media (min-resolution: 2dppx) { | |
| 3754 .popup-notification-icon[popupid="mixed-content-blocked"] { | |
| 3755 list-style-image: url(chrome://browser/skin/mixed-content-blocked-64@2x.png); | |
| 3756 } | |
| 3757 } | |
| 3758 | |
| 3759 .popup-notification-icon[popupid="pointerLock"] { | |
| 3760 list-style-image: url(chrome://browser/skin/pointerLock-64.png); | |
| 3761 } | |
| 3762 @media (min-resolution: 2dppx) { | |
| 3763 .popup-notification-icon[popupid="pointerLock"] { | |
| 3764 list-style-image: url(chrome://browser/skin/pointerLock-64@2x.png); | |
| 3765 } | |
| 3766 } | |
| 3767 #pointerLock-cancel { | |
| 3768 margin: 0px; | |
| 3769 } | |
| 3770 | |
| 3771 | |
| 3772 .popup-notification-icon[popupid="webRTC-sharingDevices"], | |
| 3773 .popup-notification-icon[popupid="webRTC-shareDevices"] { | |
| 3774 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png); | |
| 3775 } | |
| 3776 @media (min-resolution: 2dppx) { | |
| 3777 .popup-notification-icon[popupid="webRTC-sharingDevices"], | |
| 3778 .popup-notification-icon[popupid="webRTC-shareDevices"] { | |
| 3779 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png); | |
| 3780 } | |
| 3781 } | |
| 3782 | |
| 3783 .popup-notification-icon[popupid="webRTC-sharingMicrophone"], | |
| 3784 .popup-notification-icon[popupid="webRTC-shareMicrophone"] { | |
| 3785 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64.png); | |
| 3786 } | |
| 3787 @media (min-resolution: 2dppx) { | |
| 3788 .popup-notification-icon[popupid="webRTC-sharingMicrophone"], | |
| 3789 .popup-notification-icon[popupid="webRTC-shareMicrophone"] { | |
| 3790 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png); | |
| 3791 } | |
| 3792 } | |
| 3793 | |
| 3794 /* Popup Buttons */ | |
| 3795 #identity-popup-more-info-button { | |
| 3796 @hudButton@ | |
| 3797 margin: 10px 0 0; | |
| 3798 min-height: 0px; | |
| 3799 } | |
| 3800 | |
| 3801 #identity-popup-more-info-button:focus { | |
| 3802 @hudButtonFocused@ | |
| 3803 } | |
| 3804 | |
| 3805 #identity-popup-more-info-button:hover:active { | |
| 3806 @hudButtonPressed@ | |
| 3807 } | |
| 3808 | |
| 3809 /* ::::: Keyboard UI Panel ::::: */ | |
| 3810 | |
| 3811 .KUI-panel { | |
| 3812 -moz-appearance: none; | |
| 3813 background: rgba(27%,27%,27%,.9) url(KUI-background.png) repeat-x; | |
| 3814 color: white; | |
| 3815 border-style: none; | |
| 3816 border-radius: 20px; | |
| 3817 } | |
| 3818 | |
| 3819 .KUI-panel[level="top"] { | |
| 3820 background-color: rgba(27%,27%,27%,.65); | |
| 3821 -moz-window-shadow: none; | |
| 3822 } | |
| 3823 | |
| 3824 /* Ctrl-Tab */ | |
| 3825 | |
| 3826 #ctrlTab-panel { | |
| 3827 padding: 20px 10px 10px; | |
| 3828 text-shadow: 0 0 1px rgb(27%,27%,27%), 0 0 2px rgb(27%,27%,27%); | |
| 3829 } | |
| 3830 | |
| 3831 .ctrlTab-favicon[src] { | |
| 3832 background-color: white; | |
| 3833 width: 20px; | |
| 3834 height: 20px; | |
| 3835 padding: 2px; | |
| 3836 } | |
| 3837 | |
| 3838 .ctrlTab-preview-inner > .tabPreview-canvas { | |
| 3839 box-shadow: 1px 1px 2px rgb(12%,12%,12%); | |
| 3840 } | |
| 3841 | |
| 3842 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas { | |
| 3843 margin-bottom: 2px; | |
| 3844 } | |
| 3845 | |
| 3846 .ctrlTab-preview-inner { | |
| 3847 padding-bottom: 10px; | |
| 3848 } | |
| 3849 | |
| 3850 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner { | |
| 3851 padding: 10px; | |
| 3852 background-color: rgba(255,255,255,.2); | |
| 3853 border-radius: .5em; | |
| 3854 } | |
| 3855 | |
| 3856 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner { | |
| 3857 color: white; | |
| 3858 background-color: rgba(0,0,0,.6); | |
| 3859 text-shadow: none; | |
| 3860 padding: 8px; | |
| 3861 border: 2px solid white; | |
| 3862 border-radius: .5em; | |
| 3863 } | |
| 3864 | |
| 3865 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner { | |
| 3866 margin: -10px -10px 0; | |
| 3867 } | |
| 3868 | |
| 3869 #ctrlTab-showAll { | |
| 3870 margin-top: .5em; | |
| 3871 } | |
| 3872 | |
| 3873 /* Sync Panels */ | |
| 3874 | |
| 3875 .sync-panel-icon { | |
| 3876 height:32px; | |
| 3877 width: 32px; | |
| 3878 background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat; | |
| 3879 } | |
| 3880 | |
| 3881 @media (min-resolution: 2dppx) { | |
| 3882 .sync-panel-icon { | |
| 3883 background: url("chrome://browser/content/abouthome/sync@2x.png") top left no-repeat; | |
| 3884 background-size: 32px 32px; | |
| 3885 } | |
| 3886 } | |
| 3887 | |
| 3888 .sync-panel-inner { | |
| 3889 width: 0; | |
| 3890 padding-left: 10px; | |
| 3891 } | |
| 3892 | |
| 3893 .sync-panel-button-box { | |
| 3894 margin-top: 1em; | |
| 3895 } | |
| 3896 | |
| 3897 .sync-panel-button { | |
| 3898 @hudButton@ | |
| 3899 margin: 0; | |
| 3900 min-width: 72px; | |
| 3901 min-height: 22px; | |
| 3902 } | |
| 3903 | |
| 3904 .sync-panel-button:hover:active { | |
| 3905 @hudButtonPressed@ | |
| 3906 } | |
| 3907 | |
| 3908 .sync-panel-button:-moz-focusring { | |
| 3909 @hudButtonFocused@ | |
| 3910 } | |
| 3911 | |
| 3912 #sync-error-panel-title, | |
| 3913 #sync-start-panel-title { | |
| 3914 font-size: 120%; | |
| 3915 font-weight: bold; | |
| 3916 margin-bottom: 5px; | |
| 3917 } | |
| 3918 | |
| 3919 #sync-start-panel-subtitle, | |
| 3920 #sync-error-panel-subtitle { | |
| 3921 margin: 0; | |
| 3922 } | |
| 3923 | |
| 3924 /* Status panel */ | |
| 3925 | |
| 3926 .statuspanel-label { | |
| 3927 margin: 0; | |
| 3928 padding: 2px 4px; | |
| 3929 background: linear-gradient(#fff, #ddd); | |
| 3930 border: 1px none #ccc; | |
| 3931 border-top-style: solid; | |
| 3932 color: #333; | |
| 3933 text-shadow: none; | |
| 3934 } | |
| 3935 | |
| 3936 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]), | |
| 3937 .statuspanel-label:-moz-locale-dir(rtl)[mirror] { | |
| 3938 border-right-style: solid; | |
| 3939 border-top-right-radius: .3em; | |
| 3940 margin-right: 1em; | |
| 3941 } | |
| 3942 | |
| 3943 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]), | |
| 3944 .statuspanel-label:-moz-locale-dir(ltr)[mirror] { | |
| 3945 border-left-style: solid; | |
| 3946 border-top-left-radius: .3em; | |
| 3947 margin-left: 1em; | |
| 3948 } | |
| 3949 | |
| 3950 /* Lion Fullscreen window styling */ | |
| 3951 @media (-moz-mac-lion-theme) { | |
| 3952 #navigator-toolbox[inFullscreen]::before { | |
| 3953 /* Adjust by the full element height of #titlebar, since that element is | |
| 3954 * not displayed in native full-screen. | |
| 3955 * Also add the height of the tabs, since we're calculating the | |
| 3956 * total height of this pseudo-element, not just the top-padding. */ | |
| 3957 height: calc(@tabMinHeight@ + @spaceAboveTabbar@) !important; | |
| 3958 } | |
| 3959 } | |
| 3960 | |
| 3961 #full-screen-warning-message { | |
| 3962 background-image: url("chrome://browser/skin/fullscreen-darknoise.png"); | |
| 3963 color: white; | |
| 3964 border-radius: 4px; | |
| 3965 margin-top: 30px; | |
| 3966 padding: 30px 50px; | |
| 3967 box-shadow: 0 0 2px white; | |
| 3968 } | |
| 3969 | |
| 3970 #full-screen-warning-container[obscure-browser] { | |
| 3971 background-color: rgba(0,0,0,0.3); | |
| 3972 } | |
| 3973 | |
| 3974 .full-screen-description { | |
| 3975 font-size: 150%; | |
| 3976 } | |
| 3977 | |
| 3978 #full-screen-domain-text { | |
| 3979 font-size: 300%; | |
| 3980 } | |
| 3981 | |
| 3982 .full-screen-approval-button, | |
| 3983 #full-screen-remember-decision { | |
| 3984 font-size: 120%; | |
| 3985 } | |
| 3986 | |
| 3987 %include ../shared/devtools/responsivedesign.inc.css | |
| 3988 %include ../shared/devtools/highlighter.inc.css | |
| 3989 %include ../shared/devtools/commandline.inc.css | |
| 3990 %include ../shared/plugin-doorhanger.inc.css | |
| 3991 | |
| 3992 %include downloads/indicator.css | |
| 3993 | |
| 3994 /* On mac, the popup notification contents are indented by default and so | |
| 3995 the default closebutton margins from notification.css require adjustment */ | |
| 3996 | |
| 3997 .click-to-play-plugins-notification-description-box > .popup-notification-closebutton { | |
| 3998 -moz-margin-end: -6px; | |
| 3999 margin-top: -7px; | |
| 4000 } | |
| 4001 | |
| 4002 | |
| 4003 | |
| 4004 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection { | |
| 4005 color: hsl(210,11%,16%); | |
| 4006 } | |
| 4007 | |
| 4008 /* Developer Toolbar */ | |
| 4009 | |
| 4010 #developer-toolbar-closebutton { | |
| 4011 margin-left: 8px; | |
| 4012 margin-right: 8px; | |
| 4013 } | |
| 4014 | |
| 4015 /* Error counter */ | |
| 4016 | |
| 4017 #developer-toolbar-toolbox-button[error-count]:before { | |
| 4018 color: #FDF3DE; | |
| 4019 min-width: 16px; | |
| 4020 text-shadow: none; | |
| 4021 background-image: linear-gradient(#B4211B, #8A1915); | |
| 4022 border-radius: 1px; | |
| 4023 } | |
| 4024 | |
| 4025 /* === social toolbar button === */ | |
| 4026 | |
| 4027 #social-toolbar-item > .toolbarbutton-1 { | |
| 4028 margin-left: 0; | |
| 4029 margin-right: 0; | |
| 4030 border-top-left-radius: 0; | |
| 4031 border-bottom-left-radius: 0; | |
| 4032 border-top-right-radius: 0; | |
| 4033 border-bottom-right-radius: 0; | |
| 4034 } | |
| 4035 | |
| 4036 #social-toolbar-item > .toolbarbutton-1:-moz-locale-dir(ltr) { | |
| 4037 -moz-border-end-width: 0; | |
| 4038 } | |
| 4039 #social-toolbar-item > .toolbarbutton-1:last-child:-moz-locale-dir(ltr) { | |
| 4040 -moz-border-end-width: 1px; | |
| 4041 } | |
| 4042 #social-toolbar-item > .toolbarbutton-1:-moz-locale-dir(rtl) { | |
| 4043 -moz-border-start-width: 0; | |
| 4044 } | |
| 4045 #social-toolbar-item > .toolbarbutton-1:first-child:-moz-locale-dir(rtl) { | |
| 4046 -moz-border-start-width: 1px; | |
| 4047 } | |
| 4048 | |
| 4049 #social-toolbar-item > .toolbarbutton-1:-moz-locale-dir(ltr):first-child, | |
| 4050 #social-toolbar-item > .toolbarbutton-1:-moz-locale-dir(rtl):last-child { | |
| 4051 margin-left: 4px; | |
| 4052 border-top-left-radius: 3px; | |
| 4053 border-bottom-left-radius: 3px; | |
| 4054 } | |
| 4055 #social-toolbar-item > .toolbarbutton-1:-moz-locale-dir(rtl):first-child, | |
| 4056 #social-toolbar-item > .toolbarbutton-1:-moz-locale-dir(ltr):last-child { | |
| 4057 margin-right: 4px; | |
| 4058 border-top-right-radius: 3px; | |
| 4059 border-bottom-right-radius: 3px; | |
| 4060 } | |
| 4061 | |
| 4062 #social-toolbar-item > toolbaritem { | |
| 4063 margin: 0; | |
| 4064 } | |
| 4065 | |
| 4066 #social-provider-button { | |
| 4067 list-style-image: url(chrome://browser/skin/social/services-16.png); | |
| 4068 } | |
| 4069 | |
| 4070 @media (min-resolution: 2dppx) { | |
| 4071 #social-provider-button { | |
| 4072 list-style-image: url(chrome://browser/skin/social/services-16@2x.png); | |
| 4073 } | |
| 4074 #social-provider-button > .toolbarbutton-icon { | |
| 4075 width: 16px; | |
| 4076 } | |
| 4077 } | |
| 4078 | |
| 4079 #social-provider-button > .toolbarbutton-menu-dropmarker { | |
| 4080 display: none; | |
| 4081 } | |
| 4082 | |
| 4083 .toolbarbutton-badge-container { | |
| 4084 margin: 0; | |
| 4085 padding: 0; | |
| 4086 position: relative; | |
| 4087 } | |
| 4088 | |
| 4089 .toolbarbutton-badge[badge]:not([badge=""]) { | |
| 4090 /* The |content| property is set in the content stylesheet. */ | |
| 4091 font-size: 9px; | |
| 4092 font-weight: bold; | |
| 4093 padding: 0 1px; | |
| 4094 color: #fff; | |
| 4095 background-color: rgb(240,61,37); | |
| 4096 border: 1px solid rgb(216,55,34); | |
| 4097 border-radius: 2px; | |
| 4098 box-shadow: 0 1px 0 rgba(0,39,121,0.77); | |
| 4099 position: absolute; | |
| 4100 top: 0; | |
| 4101 right: 0; | |
| 4102 z-index: 1; | |
| 4103 } | |
| 4104 | |
| 4105 .toolbarbutton-badge[badge]:not([badge=""]):-moz-window-inactive { | |
| 4106 background-color: rgb(230,230,230); | |
| 4107 box-shadow: none; | |
| 4108 border: 1px solid rgb(206,206,206); | |
| 4109 color: rgb(192,192,192); | |
| 4110 } | |
| 4111 | |
| 4112 .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl) { | |
| 4113 left: 0; | |
| 4114 right: auto; | |
| 4115 } | |
| 4116 | |
| 4117 toolbar[mode="icons"] > *|* > .toolbarbutton-badge[badge]:not([badge=""]) { | |
| 4118 right: -2px; | |
| 4119 } | |
| 4120 | |
| 4121 toolbar[mode="icons"] > *|* > .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl) { | |
| 4122 left: -2px; | |
| 4123 } | |
| 4124 | |
| 4125 .popup-notification-icon[popupid="servicesInstall"] { | |
| 4126 list-style-image: url(chrome://browser/skin/social/services-64.png); | |
| 4127 } | |
| 4128 #servicesInstall-notification-icon { | |
| 4129 list-style-image: url(chrome://browser/skin/social/services-16.png); | |
| 4130 } | |
| 4131 | |
| 4132 @media (min-resolution: 2dppx) { | |
| 4133 .popup-notification-icon[popupid="servicesInstall"] { | |
| 4134 list-style-image: url(chrome://browser/skin/social/services-64@2x.png); | |
| 4135 } | |
| 4136 #servicesInstall-notification-icon { | |
| 4137 list-style-image: url(chrome://browser/skin/social/services-16@2x.png); | |
| 4138 } | |
| 4139 } | |
| 4140 | |
| 4141 #social-undoactivation-button { | |
| 4142 -moz-margin-start: 0; /* override default label margin to match description margin */ | |
| 4143 } | |
| 4144 | |
| 4145 .social-activation-icon { | |
| 4146 width: auto; | |
| 4147 height: auto; | |
| 4148 max-height: 64px; | |
| 4149 max-width: 64px; | |
| 4150 } | |
| 4151 | |
| 4152 #social-activation-message { | |
| 4153 max-width: 250px; | |
| 4154 } | |
| 4155 | |
| 4156 #social-activation-message > label { | |
| 4157 margin: 0; | |
| 4158 } | |
| 4159 | |
| 4160 #social-activation-button { | |
| 4161 @hudButton@ | |
| 4162 min-height: 0px; | |
| 4163 } | |
| 4164 | |
| 4165 #social-activation-button:focus { | |
| 4166 @hudButtonFocused@ | |
| 4167 } | |
| 4168 | |
| 4169 #social-activation-button:hover:active { | |
| 4170 @hudButtonPressed@ | |
| 4171 } | |
| 4172 | |
| 4173 /* === end of social toolbar button === */ | |
| 4174 | |
| 4175 /* === social toolbar provider menu === */ | |
| 4176 | |
| 4177 .social-statusarea-user { | |
| 4178 list-style-image:url("chrome://global/skin/icons/information-32.png"); | |
| 4179 } | |
| 4180 | |
| 4181 .social-statusarea-user-portrait { | |
| 4182 width: 32px; | |
| 4183 height: 32px; | |
| 4184 margin: 4px; | |
| 4185 -moz-margin-start: 0; | |
| 4186 } | |
| 4187 | |
| 4188 .social-panel > .panel-arrowcontainer > .panel-arrowcontent { | |
| 4189 padding: 0; | |
| 4190 } | |
| 4191 | |
| 4192 /* fixup rounded corners for osx panels */ | |
| 4193 .social-panel > .social-panel-frame { | |
| 4194 border-radius: inherit; | |
| 4195 } | |
| 4196 | |
| 4197 #social-share-panel { | |
| 4198 max-height: 600px; | |
| 4199 min-height: 100px; | |
| 4200 max-width: 800px; | |
| 4201 min-width: 300px; | |
| 4202 } | |
| 4203 | |
| 4204 .social-share-frame:-moz-locale-dir(ltr) { | |
| 4205 border-top-left-radius: 0; | |
| 4206 border-bottom-left-radius: 0; | |
| 4207 border-top-right-radius: inherit; | |
| 4208 border-bottom-right-radius: inherit; | |
| 4209 } | |
| 4210 | |
| 4211 .social-share-frame:-moz-locale-dir(rtl) { | |
| 4212 border-top-left-radius: inherit; | |
| 4213 border-bottom-left-radius: inherit; | |
| 4214 border-top-right-radius: 0; | |
| 4215 border-bottom-right-radius: 0; | |
| 4216 } | |
| 4217 | |
| 4218 #social-share-panel > .social-share-toolbar:-moz-locale-dir(ltr) { | |
| 4219 border-top-left-radius: inherit; | |
| 4220 border-bottom-left-radius: inherit; | |
| 4221 } | |
| 4222 | |
| 4223 #social-share-panel > .social-share-toolbar:-moz-locale-dir(rtl) { | |
| 4224 border-top-right-radius: inherit; | |
| 4225 border-bottom-right-radius: inherit; | |
| 4226 } | |
| 4227 | |
| 4228 #social-share-provider-buttons:-moz-locale-dir(ltr) { | |
| 4229 border-top-left-radius: inherit; | |
| 4230 border-bottom-left-radius: inherit; | |
| 4231 } | |
| 4232 | |
| 4233 #social-share-provider-buttons:-moz-locale-dir(rtl) { | |
| 4234 border-top-right-radius: inherit; | |
| 4235 border-bottom-right-radius: inherit; | |
| 4236 } | |
| 4237 | |
| 4238 /* === end of social toolbar provider menu === */ | |
| 4239 | |
| 4240 %include ../shared/social/chat.inc.css | |
| 4241 | |
| 4242 .chat-titlebar { | |
| 4243 background-color: #d9d9d9; | |
| 4244 background-image: linear-gradient(rgba(255,255,255,.43), rgba(255,255,255,0)); | |
| 4245 } | |
| 4246 | |
| 4247 .chat-titlebar[selected] { | |
| 4248 background-color: #f0f0f0; | |
| 4249 } | |
| 4250 | |
| 4251 .chatbar-button { | |
| 4252 background-color: #d9d9d9; | |
| 4253 background-image: linear-gradient(rgba(255,255,255,.43), rgba(255,255,255,0)); | |
| 4254 border-top-left-radius: @toolbarbuttonCornerRadius@; | |
| 4255 border-top-right-radius: @toolbarbuttonCornerRadius@; | |
| 4256 } | |
| 4257 | |
| 4258 .chatbar-button:hover, | |
| 4259 .chatbar-button[open="true"] { | |
| 4260 background-color: #f0f0f0; | |
| 4261 } | |
| 4262 | |
| 4263 .chatbar-button[activity]:not([open]) { | |
| 4264 background-image: radial-gradient(circle farthest-corner at center 2px, rgb(254,254,255) 3%, rgba(210,235,255,0.9) 12%, rgba(148,205,253,0.6) 30%, rgba(148,205,253,0.2) 70%); | |
| 4265 } | |
| 4266 | |
| 4267 chatbox { | |
| 4268 border-top-left-radius: @toolbarbuttonCornerRadius@; | |
| 4269 border-top-right-radius: @toolbarbuttonCornerRadius@; | |
| 4270 } | |
| 4271 | |
| 4272 window > chatbox { | |
| 4273 border-top-left-radius: @toolbarbuttonCornerRadius@; | |
| 4274 border-top-right-radius: @toolbarbuttonCornerRadius@; | |
| 4275 border-bottom-left-radius: @toolbarbuttonCornerRadius@; | |
| 4276 border-bottom-right-radius: @toolbarbuttonCornerRadius@; | |
| 4277 } | |
| 4278 | |
| 4279 /* Customization mode */ | |
| 4280 | |
| 4281 %include ../shared/customizableui/customizeMode.inc.css | |
| 4282 | |
| 4283 #main-window[customizing] { | |
| 4284 background-color: rgb(178,178,178); | |
| 4285 } | |
| 4286 | |
| 4287 #main-window[tabsintitlebar][customize-entered] > #titlebar, | |
| 4288 #main-window[privatebrowsingmode=temporary]:not([tabsintitlebar])[customize-entered] > #titlebar, | |
| 4289 #main-window[customize-entered] > #tab-view-deck { | |
| 4290 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"), | |
| 4291 url("chrome://browser/skin/customizableui/background-noise-toolbar.png"), | |
| 4292 linear-gradient(to bottom, rgb(233,233,233), rgb(178,178,178) 40px); | |
| 4293 background-attachment: fixed; | |
| 4294 } | |
| 4295 | |
| 4296 #main-window[customize-entered] #browser-bottombox, | |
| 4297 #main-window[customize-entered] #navigator-toolbox > toolbar:not(#TabsToolbar), | |
| 4298 #main-window[customize-entered] #customization-container { | |
| 4299 border: 3px solid hsla(0,0%,0%,.1); | |
| 4300 border-top-width: 0; | |
| 4301 background-clip: padding-box; | |
| 4302 background-origin: padding-box; | |
| 4303 -moz-border-right-colors: hsla(0,0%,0%,.05) hsla(0,0%,0%,.1) hsla(0,0%,0%,.2); | |
| 4304 -moz-border-bottom-colors: hsla(0,0%,0%,.05) hsla(0,0%,0%,.1) hsla(0,0%,0%,.2); | |
| 4305 -moz-border-left-colors: hsla(0,0%,0%,.05) hsla(0,0%,0%,.1) hsla(0,0%,0%,.2); | |
| 4306 } | |
| 4307 | |
| 4308 #main-window[customize-entered] #customization-container, | |
| 4309 #main-window[customize-entered] #navigator-toolbox > toolbar:not(#TabsToolbar) { | |
| 4310 border-bottom-width: 0; | |
| 4311 } | |
| 4312 | |
| 4313 #main-window[customize-entered] #TabsToolbar { | |
| 4314 background-clip: padding-box; | |
| 4315 border-right: 3px solid transparent; | |
| 4316 border-left: 3px solid transparent; | |
| 4317 } | |
| 4318 | |
| 4319 @media (min-resolution: 2dppx) { | |
| 4320 #customization-titlebar-visibility-button { | |
| 4321 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png"); | |
| 4322 -moz-image-region: rect(0, 48px, 48px, 0); | |
| 4323 } | |
| 4324 | |
| 4325 #customization-titlebar-visibility-button[checked] { | |
| 4326 -moz-image-region: rect(0, 96px, 48px, 48px); | |
| 4327 } | |
| 4328 | |
| 4329 #customization-titlebar-visibility-button > .button-box > .button-icon { | |
| 4330 width: 24px; | |
| 4331 } | |
| 4332 | |
| 4333 .customization-tipPanel-infoBox { | |
| 4334 background-image: url(chrome://browser/skin/customizableui/info-icon-customizeTip@2x.png); | |
| 4335 background-size: 25px 25px; | |
| 4336 } | |
| 4337 | |
| 4338 .customization-tipPanel-contentImage { | |
| 4339 list-style-image: url(chrome://browser/skin/customizableui/customize-illustration@2x.png); | |
| 4340 } | |
| 4341 | |
| 4342 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) { | |
| 4343 list-style-image: url(chrome://browser/skin/customizableui/customize-illustration-rtl@2x.png); | |
| 4344 } | |
| 4345 | |
| 4346 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"], | |
| 4347 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] { | |
| 4348 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip@2x.png"); | |
| 4349 } | |
| 4350 } | |
| 4351 | |
| 4352 /* End customization mode */ | |
| 4353 | |
| 4354 .private-browsing-indicator { | |
| 4355 background-image: url("chrome://browser/skin/privatebrowsing-mask.png"); | |
| 4356 background-repeat: no-repeat; | |
| 4357 background-size: 100% auto; | |
| 4358 width: 38px; | |
| 4359 height: 28px; | |
| 4360 /** | |
| 4361 * The private browsing mask graphic has a 3px flare at the top. The distance | |
| 4362 * we want between the mask and items on either side is 7px, so we use 4px, | |
| 4363 * since the other 3px is accounted for by the empty space on either side. | |
| 4364 */ | |
| 4365 margin-left: 4px; | |
| 4366 margin-right: 4px; | |
| 4367 } | |
| 4368 | |
| 4369 #titlebar-secondary-buttonbox > .private-browsing-indicator { | |
| 4370 position: relative; | |
| 4371 } | |
| 4372 | |
| 4373 #main-window[privatebrowsingmode=temporary]:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > .private-browsing-indicator { | |
| 4374 background-image: url("chrome://browser/skin/privatebrowsing-mask-short.png"); | |
| 4375 height: 20px; | |
| 4376 } | |
| 4377 | |
| 4378 #main-window:not([privatebrowsingmode=temporary]) .private-browsing-indicator, | |
| 4379 #main-window[privatebrowsingmode=temporary][inFullscreen] > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > .private-browsing-indicator, | |
| 4380 #main-window[privatebrowsingmode=temporary]:not([inFullscreen]) > #tab-view-deck > #browser-panel > #navigator-toolbox > #TabsToolbar > .private-browsing-indicator { | |
| 4381 display: none; | |
| 4382 } | |
| 4383 | |
| 4384 @media (min-resolution: 2dppx) { | |
| 4385 .private-browsing-indicator { | |
| 4386 background-image: url("chrome://browser/skin/privatebrowsing-mask@2x.png"); | |
| 4387 } | |
| 4388 #main-window[privatebrowsingmode=temporary]:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > .private-browsing-indicator { | |
| 4389 background-image: url("chrome://browser/skin/privatebrowsing-mask-short@2x.png"); | |
| 4390 } | |
| 4391 } | |
| 4392 | |
| 4393 @media (-moz-mac-lion-theme) { | |
| 4394 #TabsToolbar > .private-browsing-indicator { | |
| 4395 transform: translateY(-@spaceAboveTabbar@); | |
| 4396 /* We offset by 38px for mask graphic, plus 4px to account for the | |
| 4397 * margin-left, which sums to 42px. | |
| 4398 */ | |
| 4399 margin-right: -42px; | |
| 4400 } | |
| 4401 | |
| 4402 #main-window[privatebrowsingmode=temporary] .titlebar-placeholder[type="fullscreen-button"], | |
| 4403 #main-window[privatebrowsingmode=temporary] > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > #titlebar-fullscreen-button { | |
| 4404 margin-left: 0px; | |
| 4405 } | |
| 4406 | |
| 4407 #main-window[privatebrowsingmode=temporary][inFullscreen] .titlebar-placeholder[type="fullscreen-button"] { | |
| 4408 /* Override display:none for .titlebar-placeholder in fullscreen so we can have consistent | |
| 4409 position and padding for the private browsing indicator. */ | |
| 4410 display: -moz-box; | |
| 4411 } | |
| 4412 } | |
| 4413 | |
| 4414 #TabsToolbar > .private-browsing-indicator:-moz-locale-dir(rtl) { | |
| 4415 -moz-box-ordinal-group: 0; | |
| 4416 } | |
| 4417 | |
| 4418 %include ../shared/UITour.inc.css | |
| 4419 | |
| 4420 #UITourTooltipDescription { | |
| 4421 font-size: 1.18rem; | |
| 4422 line-height: 2rem; | |
| 4423 } | |
| 4424 | |
| 4425 #UITourTooltipClose { | |
| 4426 -moz-margin-end: -10px; | |
| 4427 margin-top: -14px; | |
| 4428 } | |
| 4429 | |
| 4430 @media (min-resolution: 2dppx) { | |
| 4431 #UITourTooltipClose > .toolbarbutton-icon { | |
| 4432 width: 16px; | |
| 4433 } | |
| 4434 } |
