The Tor Browser / file comparison
comparison: browser/themes/linux/browser.css
browser/themes/linux/browser.css
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:98fe4a191488 |
|---|---|
| 1 %if 0 | |
| 2 /* This Source Code Form is subject to the terms of the Mozilla Public | |
| 3 * License, v. 2.0. If a copy of the MPL was not distributed with this | |
| 4 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
| 5 %endif | |
| 6 | |
| 7 @import url("chrome://global/skin/"); | |
| 8 | |
| 9 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); | |
| 10 @namespace html url("http://www.w3.org/1999/xhtml"); | |
| 11 @namespace svg url("http://www.w3.org/2000/svg"); | |
| 12 | |
| 13 %include ../shared/browser.inc | |
| 14 %include linuxShared.inc | |
| 15 %filter substitution | |
| 16 | |
| 17 %define forwardTransitionLength 150ms | |
| 18 %define conditionalForwardWithUrlbar window:not([chromehidden~="toolbar"]) #urlbar-wrapper | |
| 19 %define conditionalForwardWithUrlbarWidth 30 | |
| 20 | |
| 21 #menubar-items { | |
| 22 -moz-box-orient: vertical; /* for flex hack */ | |
| 23 } | |
| 24 | |
| 25 #main-menubar { | |
| 26 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */ | |
| 27 } | |
| 28 | |
| 29 #navigator-toolbox { | |
| 30 -moz-appearance: none; | |
| 31 background-color: transparent; | |
| 32 border-top: none; | |
| 33 } | |
| 34 | |
| 35 #navigator-toolbox::after { | |
| 36 content: ""; | |
| 37 display: -moz-box; | |
| 38 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */ | |
| 39 height: 1px; | |
| 40 background-color: ThreeDShadow; | |
| 41 } | |
| 42 | |
| 43 #navigator-toolbox > toolbar:not(:-moz-lwtheme):not(#toolbar-menubar):not(#TabsToolbar) { | |
| 44 -moz-appearance: none; | |
| 45 border-style: none; | |
| 46 background-color: -moz-Dialog; | |
| 47 } | |
| 48 | |
| 49 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar) { | |
| 50 padding-top: 1px; | |
| 51 padding-bottom: 1px; | |
| 52 } | |
| 53 | |
| 54 #TabsToolbar:not([collapsed="true"]) + #nav-bar { | |
| 55 margin-top: -@tabToolbarNavbarOverlap@; /* Move up into the TabsToolbar */ | |
| 56 /* Position the toolbar above the bottom of background tabs */ | |
| 57 position: relative; | |
| 58 z-index: 1; | |
| 59 } | |
| 60 | |
| 61 #nav-bar { | |
| 62 background-image: linear-gradient(@toolbarHighlight@, rgba(255,255,255,0)); | |
| 63 box-shadow: 0 1px 0 @toolbarHighlight@ inset; | |
| 64 padding-top: 2px; | |
| 65 padding-bottom: 2px; | |
| 66 } | |
| 67 | |
| 68 #nav-bar-overflow-button { | |
| 69 -moz-image-region: rect(-5px, 12px, 11px, -4px); | |
| 70 } | |
| 71 | |
| 72 /* This only has an effect when this element is placed on the bookmarks toolbar. | |
| 73 * It's 30px to make sure buttons with 18px icons fit along with the default 16px | |
| 74 * icons, without changing the size of the toolbar. | |
| 75 */ | |
| 76 #personal-bookmarks { | |
| 77 min-height: 30px; | |
| 78 } | |
| 79 | |
| 80 #browser-bottombox { | |
| 81 /* opaque for layers optimization */ | |
| 82 background-color: -moz-Dialog; | |
| 83 } | |
| 84 | |
| 85 #urlbar:-moz-lwtheme:not([focused="true"]), | |
| 86 .searchbar-textbox:-moz-lwtheme:not([focused="true"]) { | |
| 87 opacity: .85; | |
| 88 } | |
| 89 | |
| 90 /* Places toolbar */ | |
| 91 toolbarbutton.bookmark-item:not(.subviewbutton), | |
| 92 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder { | |
| 93 margin: 0; | |
| 94 padding: 2px 3px; | |
| 95 } | |
| 96 | |
| 97 toolbarbutton.bookmark-item:not(.subviewbutton):hover:active, | |
| 98 toolbarbutton.bookmark-item[open="true"] { | |
| 99 padding-top: 3px; | |
| 100 padding-bottom: 1px; | |
| 101 -moz-padding-start: 4px; | |
| 102 -moz-padding-end: 2px; | |
| 103 } | |
| 104 | |
| 105 .bookmark-item:not(#home-button) > .toolbarbutton-icon, | |
| 106 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon { | |
| 107 width: 16px; | |
| 108 height: 16px; | |
| 109 } | |
| 110 | |
| 111 /* Force the display of the label for bookmarks */ | |
| 112 .bookmark-item > .toolbarbutton-text, | |
| 113 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text { | |
| 114 display: -moz-box !important; | |
| 115 } | |
| 116 | |
| 117 .bookmark-item > .toolbarbutton-menu-dropmarker { | |
| 118 display: none; | |
| 119 } | |
| 120 | |
| 121 /* Dropmarker for folder bookmarks */ | |
| 122 .bookmark-item[container] > .toolbarbutton-menu-dropmarker { | |
| 123 display: -moz-box !important; | |
| 124 } | |
| 125 | |
| 126 #bookmarks-toolbar-placeholder { | |
| 127 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png") !important; | |
| 128 } | |
| 129 | |
| 130 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder, | |
| 131 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder { | |
| 132 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important; | |
| 133 } | |
| 134 | |
| 135 /* ----- BOOKMARK STAR ANIMATION ----- */ | |
| 136 | |
| 137 @keyframes animation-bookmarkAdded { | |
| 138 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; } | |
| 139 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; } | |
| 140 80% { opacity: 1; } | |
| 141 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; } | |
| 142 } | |
| 143 | |
| 144 @keyframes animation-bookmarkPulse { | |
| 145 from { transform: scale(1); } | |
| 146 50% { transform: scale(1.3); } | |
| 147 to { transform: scale(1); } | |
| 148 } | |
| 149 | |
| 150 #bookmarked-notification-container { | |
| 151 min-height: 1px; | |
| 152 min-width: 1px; | |
| 153 height: 1px; | |
| 154 margin-bottom: -1px; | |
| 155 z-index: 5; | |
| 156 position: relative; | |
| 157 } | |
| 158 | |
| 159 #bookmarked-notification { | |
| 160 background-size: 16px; | |
| 161 background-position: center; | |
| 162 background-repeat: no-repeat; | |
| 163 width: 16px; | |
| 164 height: 16px; | |
| 165 opacity: 0; | |
| 166 } | |
| 167 | |
| 168 #bookmarked-notification-dropmarker-anchor { | |
| 169 z-index: -1; | |
| 170 position: relative; | |
| 171 } | |
| 172 | |
| 173 #bookmarked-notification-dropmarker-icon { | |
| 174 width: 18px; | |
| 175 height: 18px; | |
| 176 visibility: hidden; | |
| 177 } | |
| 178 | |
| 179 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification { | |
| 180 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png"); | |
| 181 animation: animation-bookmarkAdded 800ms; | |
| 182 animation-timing-function: ease, ease, ease; | |
| 183 } | |
| 184 | |
| 185 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { | |
| 186 list-style-image: none !important; | |
| 187 } | |
| 188 | |
| 189 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon { | |
| 190 visibility: visible; | |
| 191 animation: animation-bookmarkPulse 300ms; | |
| 192 animation-delay: 600ms; | |
| 193 animation-timing-function: ease-out; | |
| 194 } | |
| 195 | |
| 196 /* Bookmark menus */ | |
| 197 menu.bookmark-item, | |
| 198 menuitem.bookmark-item { | |
| 199 min-width: 0; | |
| 200 max-width: 32em; | |
| 201 } | |
| 202 | |
| 203 .bookmark-item:not(.subviewbutton) > .menu-iconic-left { | |
| 204 margin-top: 0; | |
| 205 margin-bottom: 0; | |
| 206 } | |
| 207 | |
| 208 .bookmark-item > .menu-iconic-left > .menu-iconic-icon { | |
| 209 -moz-padding-start: 0px; | |
| 210 } | |
| 211 | |
| 212 /* Bookmark drag and drop styles */ | |
| 213 .bookmark-item[dragover-into="true"] { | |
| 214 background: Highlight !important; | |
| 215 color: HighlightText !important; | |
| 216 } | |
| 217 | |
| 218 /* rules for menupopup drop indicators */ | |
| 219 .menupopup-drop-indicator-bar { | |
| 220 position: relative; | |
| 221 /* these two margins must together compensate the indicator's height */ | |
| 222 margin-top: -1px; | |
| 223 margin-bottom: -1px; | |
| 224 } | |
| 225 | |
| 226 .menupopup-drop-indicator { | |
| 227 list-style-image: none; | |
| 228 height: 2px; | |
| 229 -moz-margin-end: -4em; | |
| 230 background-color: Highlight; | |
| 231 } | |
| 232 | |
| 233 /* Bookmarks toolbar */ | |
| 234 #PlacesToolbarDropIndicator { | |
| 235 list-style-image: url(chrome://browser/skin/places/toolbarDropMarker.png); | |
| 236 } | |
| 237 | |
| 238 /* Bookmark items */ | |
| 239 .bookmark-item { | |
| 240 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); | |
| 241 } | |
| 242 | |
| 243 .bookmark-item[container] { | |
| 244 list-style-image: url("moz-icon://stock/gtk-directory?size=menu"); | |
| 245 } | |
| 246 | |
| 247 .bookmark-item[container][livemark] { | |
| 248 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png"); | |
| 249 } | |
| 250 | |
| 251 .bookmark-item[container][livemark] .bookmark-item { | |
| 252 list-style-image: url("chrome://browser/skin/places/livemark-item.png"); | |
| 253 -moz-image-region: rect(0px, 16px, 16px, 0px); | |
| 254 } | |
| 255 | |
| 256 .bookmark-item[container][livemark] .bookmark-item[visited] { | |
| 257 -moz-image-region: rect(0px, 32px, 16px, 16px); | |
| 258 } | |
| 259 | |
| 260 .bookmark-item[container][query] { | |
| 261 list-style-image: url("chrome://browser/skin/places/query.png"); | |
| 262 } | |
| 263 | |
| 264 .bookmark-item[query][tagContainer] { | |
| 265 list-style-image: url("chrome://browser/skin/places/tag.png"); | |
| 266 } | |
| 267 | |
| 268 .bookmark-item[query][dayContainer] { | |
| 269 list-style-image: url("chrome://browser/skin/places/calendar.png"); | |
| 270 } | |
| 271 | |
| 272 .bookmark-item[query][hostContainer] { | |
| 273 list-style-image: url("moz-icon://stock/gtk-directory?size=menu"); | |
| 274 } | |
| 275 | |
| 276 .bookmark-item[query][hostContainer][open] { | |
| 277 list-style-image: url("moz-icon://stock/gtk-directory?size=menu"); | |
| 278 } | |
| 279 | |
| 280 .bookmark-item[cutting] > .toolbarbutton-icon, | |
| 281 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon { | |
| 282 opacity: 0.5; | |
| 283 } | |
| 284 | |
| 285 .bookmark-item[cutting] > .toolbarbutton-text, | |
| 286 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text { | |
| 287 opacity: 0.7; | |
| 288 } | |
| 289 | |
| 290 /* Stock icons for the menu bar items */ | |
| 291 menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { | |
| 292 -moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic"); | |
| 293 } | |
| 294 | |
| 295 #placesContext_open\:newwindow, | |
| 296 #menu_newNavigator, | |
| 297 #context-openlink, | |
| 298 #context-openframe { | |
| 299 list-style-image: url("chrome://browser/skin/Toolbar-small.png"); | |
| 300 -moz-image-region: rect(0px 80px 16px 64px); | |
| 301 } | |
| 302 | |
| 303 #placesContext_open\:newtab, | |
| 304 #placesContext_openContainer\:tabs, | |
| 305 #menu_newNavigatorTab, | |
| 306 #context-openlinkintab, | |
| 307 #context-openframeintab { | |
| 308 list-style-image: url("chrome://browser/skin/Toolbar-small.png"); | |
| 309 -moz-image-region: rect(0px 64px 16px 48px); | |
| 310 } | |
| 311 | |
| 312 #menu_openFile { | |
| 313 list-style-image: url("moz-icon://stock/gtk-open?size=menu"); | |
| 314 } | |
| 315 | |
| 316 #menu_close { | |
| 317 list-style-image: url("moz-icon://stock/gtk-close?size=menu"); | |
| 318 } | |
| 319 | |
| 320 #context-media-play { | |
| 321 list-style-image: url("moz-icon://stock/gtk-media-play?size=menu"); | |
| 322 } | |
| 323 | |
| 324 #context-media-pause { | |
| 325 list-style-image: url("moz-icon://stock/gtk-media-pause?size=menu"); | |
| 326 } | |
| 327 | |
| 328 #menu_savePage, | |
| 329 #context-savelink, | |
| 330 #context-saveimage, | |
| 331 #context-savevideo, | |
| 332 #context-saveaudio, | |
| 333 #context-savepage, | |
| 334 #context-saveframe { | |
| 335 list-style-image: url("moz-icon://stock/gtk-save-as?size=menu"); | |
| 336 } | |
| 337 | |
| 338 #menu_printPreview { | |
| 339 list-style-image: url("moz-icon://stock/gtk-print-preview?size=menu"); | |
| 340 } | |
| 341 | |
| 342 #menu_print, | |
| 343 #context-printframe { | |
| 344 list-style-image: url("moz-icon://stock/gtk-print?size=menu"); | |
| 345 } | |
| 346 | |
| 347 #menu_FileQuitItem { | |
| 348 list-style-image: url("moz-icon://stock/gtk-quit?size=menu"); | |
| 349 } | |
| 350 | |
| 351 #menu_undo, | |
| 352 #context-undo { | |
| 353 list-style-image: url("moz-icon://stock/gtk-undo?size=menu"); | |
| 354 } | |
| 355 | |
| 356 #menu_undo[disabled], | |
| 357 #context-undo[disabled] { | |
| 358 list-style-image: url("moz-icon://stock/gtk-undo?size=menu&state=disabled"); | |
| 359 } | |
| 360 | |
| 361 #menu_redo { | |
| 362 list-style-image: url("moz-icon://stock/gtk-redo?size=menu"); | |
| 363 } | |
| 364 | |
| 365 #menu_redo[disabled] { | |
| 366 list-style-image: url("moz-icon://stock/gtk-redo?size=menu&state=disabled"); | |
| 367 } | |
| 368 | |
| 369 #menu_cut, | |
| 370 #placesContext_cut, | |
| 371 #context-cut { | |
| 372 list-style-image: url("moz-icon://stock/gtk-cut?size=menu"); | |
| 373 } | |
| 374 | |
| 375 #menu_cut[disabled], | |
| 376 #placesContext_cut[disabled], | |
| 377 #context-cut[disabled] { | |
| 378 list-style-image: url("moz-icon://stock/gtk-cut?size=menu&state=disabled"); | |
| 379 } | |
| 380 | |
| 381 #menu_copy, | |
| 382 #placesContext_copy, | |
| 383 #context-copy, | |
| 384 #context-copyimage, | |
| 385 #context-copyvideourl, | |
| 386 #context-copyaudiourl, | |
| 387 #context-copylink, | |
| 388 #context-copyemail { | |
| 389 list-style-image: url("moz-icon://stock/gtk-copy?size=menu"); | |
| 390 } | |
| 391 | |
| 392 #menu_copy[disabled], | |
| 393 #placesContext_copy[disabled], | |
| 394 #context-copy[disabled] { | |
| 395 list-style-image: url("moz-icon://stock/gtk-copy?size=menu&state=disabled"); | |
| 396 } | |
| 397 | |
| 398 #menu_paste, | |
| 399 #placesContext_paste, | |
| 400 #context-paste { | |
| 401 list-style-image: url("moz-icon://stock/gtk-paste?size=menu"); | |
| 402 } | |
| 403 | |
| 404 #menu_paste[disabled], | |
| 405 #placesContext_paste[disabled], | |
| 406 #context-paste[disabled] { | |
| 407 list-style-image: url("moz-icon://stock/gtk-paste?size=menu&state=disabled"); | |
| 408 } | |
| 409 | |
| 410 #menu_delete, | |
| 411 #placesContext_delete, | |
| 412 #placesContext_delete_history, | |
| 413 #context-delete { | |
| 414 list-style-image: url("moz-icon://stock/gtk-delete?size=menu"); | |
| 415 } | |
| 416 | |
| 417 #menu_delete[disabled], | |
| 418 #placesContext_delete[disabled], | |
| 419 #placesContext_delete_history[disabled], | |
| 420 #context-delete[disabled] { | |
| 421 list-style-image: url("moz-icon://stock/gtk-delete?size=menu&state=disabled"); | |
| 422 } | |
| 423 | |
| 424 #menu_selectAll, | |
| 425 #context-selectall { | |
| 426 list-style-image: url("moz-icon://stock/gtk-select-all?size=menu"); | |
| 427 } | |
| 428 | |
| 429 #menu_find { | |
| 430 list-style-image: url("moz-icon://stock/gtk-find?size=menu"); | |
| 431 } | |
| 432 | |
| 433 #menu_find[disabled] { | |
| 434 list-style-image: url("moz-icon://stock/gtk-find?size=menu&state=disabled"); | |
| 435 } | |
| 436 | |
| 437 #menu_preferences { | |
| 438 list-style-image: url("moz-icon://stock/gtk-preferences?size=menu"); | |
| 439 } | |
| 440 | |
| 441 #context-stop { | |
| 442 list-style-image: url("moz-icon://stock/gtk-stop?size=menu"); | |
| 443 } | |
| 444 | |
| 445 #context-stop[disabled] { | |
| 446 list-style-image: url("moz-icon://stock/gtk-stop?size=menu&state=disabled"); | |
| 447 } | |
| 448 | |
| 449 #placesContext_reload, | |
| 450 #context-reload, | |
| 451 #context-reloadframe { | |
| 452 list-style-image: url("moz-icon://stock/gtk-refresh?size=menu"); | |
| 453 } | |
| 454 | |
| 455 #context-reload[disabled] { | |
| 456 list-style-image: url("moz-icon://stock/gtk-refresh?size=menu&state=disabled"); | |
| 457 } | |
| 458 | |
| 459 #menu_zoomEnlarge { | |
| 460 list-style-image: url("moz-icon://stock/gtk-zoom-in?size=menu"); | |
| 461 } | |
| 462 | |
| 463 #menu_zoomReduce { | |
| 464 list-style-image: url("moz-icon://stock/gtk-zoom-out?size=menu"); | |
| 465 } | |
| 466 | |
| 467 #menu_zoomReset { | |
| 468 list-style-image: url("moz-icon://stock/gtk-zoom-100?size=menu"); | |
| 469 } | |
| 470 | |
| 471 #context-back { | |
| 472 list-style-image: url("moz-icon://stock/gtk-go-back-ltr?size=menu"); | |
| 473 } | |
| 474 | |
| 475 #context-back[disabled] { | |
| 476 list-style-image: url("moz-icon://stock/gtk-go-back-ltr?size=menu&state=disabled"); | |
| 477 } | |
| 478 | |
| 479 #context-back:-moz-locale-dir(rtl) { | |
| 480 list-style-image: url("moz-icon://stock/gtk-go-back-rtl?size=menu"); | |
| 481 } | |
| 482 | |
| 483 #context-back[disabled]:-moz-locale-dir(rtl) { | |
| 484 list-style-image: url("moz-icon://stock/gtk-go-back-rtl?size=menu&state=disabled"); | |
| 485 } | |
| 486 | |
| 487 #context-forward { | |
| 488 list-style-image: url("moz-icon://stock/gtk-go-forward-ltr?size=menu"); | |
| 489 } | |
| 490 | |
| 491 #context-forward[disabled] { | |
| 492 list-style-image: url("moz-icon://stock/gtk-go-forward-ltr?size=menu&state=disabled"); | |
| 493 } | |
| 494 | |
| 495 #context-forward:-moz-locale-dir(rtl) { | |
| 496 list-style-image: url("moz-icon://stock/gtk-go-forward-rtl?size=menu"); | |
| 497 } | |
| 498 | |
| 499 #context-forward[disabled]:-moz-locale-dir(rtl) { | |
| 500 list-style-image: url("moz-icon://stock/gtk-go-forward-rtl?size=menu&state=disabled"); | |
| 501 } | |
| 502 | |
| 503 #menu_showAllHistory { | |
| 504 list-style-image: url("chrome://browser/skin/Toolbar-small.png"); | |
| 505 -moz-image-region: rect(0px 32px 16px 16px); | |
| 506 } | |
| 507 | |
| 508 #bookmarksShowAll { | |
| 509 list-style-image: url("chrome://browser/skin/Toolbar-small.png"); | |
| 510 -moz-image-region: rect(0px 48px 16px 32px); | |
| 511 } | |
| 512 | |
| 513 #subscribeToPageMenuitem:not([disabled]), | |
| 514 #subscribeToPageMenupopup, | |
| 515 #BMB_subscribeToPageMenuitem:not([disabled]), | |
| 516 #BMB_subscribeToPageMenupopup { | |
| 517 list-style-image: url("chrome://browser/skin/page-livemarks.png"); | |
| 518 } | |
| 519 | |
| 520 #bookmarksToolbarFolderMenu, | |
| 521 #BMB_bookmarksToolbar, | |
| 522 #panelMenu_bookmarksToolbar { | |
| 523 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png"); | |
| 524 } | |
| 525 | |
| 526 #BMB_unsortedBookmarks, | |
| 527 #panelMenu_unsortedBookmarks { | |
| 528 list-style-image: url("chrome://browser/skin/places/unsortedBookmarks.png"); | |
| 529 } | |
| 530 | |
| 531 #menu_openDownloads { | |
| 532 list-style-image: url("chrome://browser/skin/Toolbar-small.png"); | |
| 533 -moz-image-region: rect(0px 16px 16px 0px); | |
| 534 } | |
| 535 | |
| 536 #menu_openAddons { | |
| 537 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric-16.png"); | |
| 538 } | |
| 539 | |
| 540 #menu_pageInfo, | |
| 541 #context-viewinfo, | |
| 542 #context-viewframeinfo { | |
| 543 list-style-image: url("moz-icon://stock/gtk-info?size=menu"); | |
| 544 } | |
| 545 | |
| 546 #privateBrowsingItem { | |
| 547 list-style-image: url("chrome://browser/skin/Privacy-16.png"); | |
| 548 } | |
| 549 | |
| 550 #placesContext_show\:info { | |
| 551 list-style-image: url("moz-icon://stock/gtk-properties?size=menu"); | |
| 552 } | |
| 553 | |
| 554 #sanitizeItem { | |
| 555 list-style-image: url("moz-icon://stock/gtk-clear?size=menu"); | |
| 556 } | |
| 557 | |
| 558 #menu_openHelp { | |
| 559 list-style-image: url("moz-icon://stock/gtk-help?size=menu"); | |
| 560 } | |
| 561 | |
| 562 #aboutName { | |
| 563 list-style-image: url("moz-icon://stock/gtk-about?size=menu"); | |
| 564 } | |
| 565 | |
| 566 #javascriptConsole { | |
| 567 list-style-image: url("chrome://global/skin/console/console.png"); | |
| 568 } | |
| 569 | |
| 570 /* Primary toolbar buttons */ | |
| 571 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button, | |
| 572 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 { | |
| 573 -moz-appearance: none; | |
| 574 } | |
| 575 | |
| 576 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open="true"], | |
| 577 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:hover:active { | |
| 578 padding: 3px; | |
| 579 } | |
| 580 | |
| 581 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, | |
| 582 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, | |
| 583 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon, | |
| 584 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-icon { | |
| 585 -moz-margin-end: 0; | |
| 586 padding: 2px 6px; | |
| 587 border: 1px solid transparent; | |
| 588 border-radius: 2px; | |
| 589 transition-property: background-color, border-color; | |
| 590 transition-duration: 150ms; | |
| 591 } | |
| 592 | |
| 593 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon, | |
| 594 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-container > .toolbarbutton-icon, | |
| 595 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { | |
| 596 padding: 3px 7px; | |
| 597 } | |
| 598 | |
| 599 toolbarbutton[type="badged"] > .toolbarbutton-badge-container > .toolbarbutton-icon, | |
| 600 toolbarbutton[type="socialmark"] > .toolbarbutton-icon { | |
| 601 max-width: 32px !important; | |
| 602 } | |
| 603 | |
| 604 /* Help SDK icons fit: */ | |
| 605 toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { | |
| 606 width: 16px; | |
| 607 } | |
| 608 | |
| 609 :-moz-any(#TabsToolbar, #nav-bar) toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { | |
| 610 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */ | |
| 611 width: 32px; | |
| 612 } | |
| 613 | |
| 614 #nav-bar #PanelUI-menu-button { | |
| 615 -moz-padding-start: 7px; | |
| 616 -moz-padding-end: 5px; | |
| 617 } | |
| 618 | |
| 619 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, | |
| 620 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-menubutton-button > .toolbarbutton-icon, | |
| 621 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, | |
| 622 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-container > .toolbarbutton-icon, | |
| 623 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-icon { | |
| 624 background-color: hsla(0,0%,100%,.3); | |
| 625 background-image: linear-gradient(hsla(0,0%,100%,.7), hsla(0,0%,100%,.2)); | |
| 626 border: 1px solid rgb(154,154,154); | |
| 627 box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset, | |
| 628 0 0 0 1px hsla(0,0%,100%,.2) inset, | |
| 629 0 1px 0 hsla(0,0%,0%,.03); | |
| 630 } | |
| 631 | |
| 632 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, | |
| 633 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { | |
| 634 margin-top: 4px; | |
| 635 margin-bottom: 4px; | |
| 636 } | |
| 637 | |
| 638 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon, | |
| 639 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon, | |
| 640 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-container > .toolbarbutton-icon, | |
| 641 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon { | |
| 642 background-color: rgba(154,154,154,.5); | |
| 643 background-image: linear-gradient(hsla(0,0%,100%,.7), hsla(0,0%,100%,.4)); | |
| 644 border: 1px solid rgb(154,154,154); | |
| 645 box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset, | |
| 646 0 0 1px hsla(0,0%,0%,.3) inset; | |
| 647 transition-duration: 10ms; | |
| 648 } | |
| 649 | |
| 650 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon { | |
| 651 background-color: rgba(90%,90%,90%,.4); | |
| 652 transition: background-color 150ms; | |
| 653 } | |
| 654 | |
| 655 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button[open], | |
| 656 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button:hover:active, | |
| 657 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:hover:active { | |
| 658 padding: 3px; | |
| 659 } | |
| 660 | |
| 661 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before { | |
| 662 content: ""; | |
| 663 display: -moz-box; | |
| 664 width: 1px; | |
| 665 height: 18px; | |
| 666 -moz-margin-end: -1px; | |
| 667 background-image: linear-gradient(hsla(210,54%,20%,.2) 0, hsla(210,54%,20%,.2) 18px); | |
| 668 background-clip: padding-box; | |
| 669 background-position: center; | |
| 670 background-repeat: no-repeat; | |
| 671 background-size: 1px 18px; | |
| 672 box-shadow: 0 0 0 1px hsla(0,0%,100%,.2); | |
| 673 } | |
| 674 | |
| 675 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { | |
| 676 -moz-margin-start: -4px; | |
| 677 margin-top: 3px; | |
| 678 margin-bottom: 3px; | |
| 679 } | |
| 680 | |
| 681 #back-button { | |
| 682 padding-top: 3px; | |
| 683 padding-bottom: 3px; | |
| 684 -moz-padding-start: 5px; | |
| 685 -moz-padding-end: 0; | |
| 686 position: relative; | |
| 687 z-index: 1; | |
| 688 border-radius: 0 10000px 10000px 0; | |
| 689 } | |
| 690 | |
| 691 #back-button:-moz-locale-dir(rtl) { | |
| 692 border-radius: 10000px 0 0 10000px; | |
| 693 } | |
| 694 | |
| 695 #back-button > menupopup { | |
| 696 margin-top: -1px; | |
| 697 } | |
| 698 | |
| 699 #back-button > .toolbarbutton-icon { | |
| 700 border-radius: 10000px; | |
| 701 background-clip: padding-box; | |
| 702 padding: 6px; | |
| 703 border: none; | |
| 704 box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset, | |
| 705 0 0 0 1px hsla(0,0%,100%,.3) inset, | |
| 706 0 0 0 1px hsla(210,54%,20%,.25), | |
| 707 0 1px 0 hsla(210,54%,20%,.35); | |
| 708 background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1)); | |
| 709 transition-property: background-color, box-shadow; | |
| 710 transition-duration: 250ms; | |
| 711 } | |
| 712 | |
| 713 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon { | |
| 714 background-color: hsla(210,48%,96%,.75); | |
| 715 box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset, | |
| 716 0 0 0 1px hsla(0,0%,100%,.3) inset, | |
| 717 0 0 0 1px hsla(210,54%,20%,.3), | |
| 718 0 1px 0 hsla(210,54%,20%,.4), | |
| 719 0 0 4px hsla(210,54%,20%,.2); | |
| 720 } | |
| 721 | |
| 722 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon, | |
| 723 #back-button[open="true"] > .toolbarbutton-icon { | |
| 724 background-color: hsla(210,54%,20%,.15); | |
| 725 box-shadow: 0 1px 1px hsla(210,54%,20%,.1) inset, | |
| 726 0 0 1px hsla(210,54%,20%,.2) inset, | |
| 727 0 0 0 1px hsla(210,54%,20%,.4), | |
| 728 0 1px 0 hsla(210,54%,20%,.2); | |
| 729 transition: none; | |
| 730 } | |
| 731 | |
| 732 #main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon { | |
| 733 box-shadow: 0 0 0 1px hsla(210,54%,20%,.55), | |
| 734 0 1px 0 hsla(210,54%,20%,.65) !important; | |
| 735 transition: none; | |
| 736 } | |
| 737 | |
| 738 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { | |
| 739 transform: scaleX(-1); | |
| 740 } | |
| 741 | |
| 742 #forward-button { | |
| 743 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */ | |
| 744 padding: 0; | |
| 745 } | |
| 746 | |
| 747 #forward-button > .toolbarbutton-icon { | |
| 748 background-clip: padding-box; | |
| 749 padding-left: 9px; | |
| 750 padding-right: 3px; | |
| 751 border: 1px solid #9a9a9a; | |
| 752 border-left-style: none; | |
| 753 border-radius: 0; | |
| 754 } | |
| 755 | |
| 756 @conditionalForwardWithUrlbar@:not([switchingtabs]) > #forward-button { | |
| 757 transition: margin-left @forwardTransitionLength@ ease-out; | |
| 758 } | |
| 759 | |
| 760 @conditionalForwardWithUrlbar@ > #forward-button[disabled] { | |
| 761 margin-left: -@conditionalForwardWithUrlbarWidth@px; | |
| 762 } | |
| 763 | |
| 764 @conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] { | |
| 765 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */ | |
| 766 transition-delay: 100s; | |
| 767 } | |
| 768 | |
| 769 @conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] { | |
| 770 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */ | |
| 771 margin-left: -@conditionalForwardWithUrlbarWidth@.01px; | |
| 772 } | |
| 773 | |
| 774 /* tabview menu item */ | |
| 775 | |
| 776 #menu_tabview { | |
| 777 list-style-image: url(chrome://browser/skin/tabview/tabview.png); | |
| 778 -moz-image-region: rect(0, 80px, 16px, 64px); | |
| 779 } | |
| 780 | |
| 781 #menu_tabview[groups="0"] { | |
| 782 -moz-image-region: rect(0, 16px, 16px, 0); | |
| 783 } | |
| 784 | |
| 785 #menu_tabview[groups="1"] { | |
| 786 -moz-image-region: rect(0, 32px, 16px, 16px); | |
| 787 } | |
| 788 | |
| 789 #menu_tabview[groups="2"] { | |
| 790 -moz-image-region: rect(0, 48px, 16px, 32px); | |
| 791 } | |
| 792 | |
| 793 #menu_tabview[groups="3"] { | |
| 794 -moz-image-region: rect(0, 64px, 16px, 48px); | |
| 795 } | |
| 796 | |
| 797 #bookmarks-button { | |
| 798 -moz-image-region: rect(0px 72px 24px 48px); | |
| 799 } | |
| 800 | |
| 801 #new-tab-button { | |
| 802 -moz-image-region: rect(0px 96px 24px 72px); | |
| 803 } | |
| 804 | |
| 805 #new-window-button { | |
| 806 -moz-image-region: rect(0px 120px 24px 96px); | |
| 807 } | |
| 808 | |
| 809 #sync-button { | |
| 810 -moz-image-region: rect(0px 144px 24px 120px); | |
| 811 } | |
| 812 #sync-button[cui-areatype="toolbar"][status="active"] { | |
| 813 list-style-image: url("chrome://browser/skin/syncProgress-toolbar.png"); | |
| 814 -moz-image-region: rect(0px 18px 18px 0px); | |
| 815 } | |
| 816 #sync-button[cui-areatype="menu-panel"][status="active"] { | |
| 817 list-style-image: url("chrome://browser/skin/syncProgress-menuPanel.png"); | |
| 818 -moz-image-region: rect(0px 32px 32px 0px); | |
| 819 } | |
| 820 | |
| 821 #feed-button { | |
| 822 -moz-image-region: rect(0px 168px 24px 144px); | |
| 823 } | |
| 824 | |
| 825 #feed-button[disabled] > .toolbarbutton-icon { | |
| 826 opacity: .4; | |
| 827 } | |
| 828 | |
| 829 #webrtc-status-button { | |
| 830 -moz-image-region: rect(0px 192px 24px 168px); | |
| 831 } | |
| 832 | |
| 833 .unified-nav-back[_moz-menuactive] { | |
| 834 list-style-image: url("moz-icon://stock/gtk-go-back-ltr?size=menu") !important; | |
| 835 } | |
| 836 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) { | |
| 837 list-style-image: url("moz-icon://stock/gtk-go-back-rtl?size=menu") !important; | |
| 838 } | |
| 839 .unified-nav-forward[_moz-menuactive] { | |
| 840 list-style-image: url("moz-icon://stock/gtk-go-forward-ltr?size=menu") !important; | |
| 841 } | |
| 842 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) { | |
| 843 list-style-image: url("moz-icon://stock/gtk-go-forward-rtl?size=menu") !important; | |
| 844 } | |
| 845 | |
| 846 /* Menu panel buttons */ | |
| 847 | |
| 848 %include ../shared/toolbarbuttons.inc.css | |
| 849 %include ../shared/menupanel.inc.css | |
| 850 | |
| 851 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon, | |
| 852 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker, | |
| 853 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker, | |
| 854 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon, | |
| 855 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon { | |
| 856 opacity: 0.4; | |
| 857 } | |
| 858 | |
| 859 /* Fullscreen window controls */ | |
| 860 #window-controls { | |
| 861 -moz-box-align: start; | |
| 862 -moz-margin-start: 10px; | |
| 863 } | |
| 864 | |
| 865 #minimize-button { | |
| 866 list-style-image: url("chrome://global/skin/icons/Minimize.gif"); | |
| 867 } | |
| 868 #restore-button { | |
| 869 list-style-image: url("chrome://global/skin/icons/Restore.gif"); | |
| 870 } | |
| 871 #close-button { | |
| 872 list-style-image: url("chrome://global/skin/icons/Close.gif"); | |
| 873 } | |
| 874 | |
| 875 /* Location bar */ | |
| 876 #urlbar, | |
| 877 .searchbar-textbox { | |
| 878 -moz-appearance: none; | |
| 879 padding: 1px; | |
| 880 border: 1px solid ThreeDShadow; | |
| 881 border-radius: 2px; | |
| 882 margin: 0 3px; | |
| 883 } | |
| 884 | |
| 885 #urlbar[focused], | |
| 886 .searchbar-textbox[focused] { | |
| 887 border-color: Highlight; | |
| 888 } | |
| 889 | |
| 890 #urlbar { | |
| 891 background-color: -moz-field; | |
| 892 } | |
| 893 | |
| 894 .urlbar-textbox-container { | |
| 895 -moz-appearance: none; | |
| 896 -moz-box-align: stretch; | |
| 897 } | |
| 898 | |
| 899 .urlbar-input-box { | |
| 900 -moz-margin-start: 0; | |
| 901 } | |
| 902 | |
| 903 .urlbar-history-dropmarker { | |
| 904 -moz-appearance: toolbarbutton-dropdown; | |
| 905 } | |
| 906 | |
| 907 #urlbar-container { | |
| 908 -moz-box-align: center; | |
| 909 } | |
| 910 | |
| 911 @conditionalForwardWithUrlbar@ > #urlbar { | |
| 912 -moz-border-start: none; | |
| 913 margin-left: 0; | |
| 914 } | |
| 915 | |
| 916 @conditionalForwardWithUrlbar@ > #urlbar:-moz-locale-dir(ltr) { | |
| 917 border-top-left-radius: 0; | |
| 918 border-bottom-left-radius: 0; | |
| 919 } | |
| 920 | |
| 921 @conditionalForwardWithUrlbar@ > #urlbar:-moz-locale-dir(rtl) { | |
| 922 border-top-right-radius: 0; | |
| 923 border-bottom-right-radius: 0; | |
| 924 } | |
| 925 | |
| 926 @conditionalForwardWithUrlbar@ { | |
| 927 clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path"); | |
| 928 -moz-margin-start: -5px; | |
| 929 } | |
| 930 | |
| 931 @conditionalForwardWithUrlbar@:-moz-locale-dir(rtl), | |
| 932 @conditionalForwardWithUrlbar@ > #urlbar:-moz-locale-dir(rtl) { | |
| 933 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */ | |
| 934 transform: scaleX(-1); | |
| 935 } | |
| 936 | |
| 937 @conditionalForwardWithUrlbar@:-moz-locale-dir(rtl) { | |
| 938 -moz-box-direction: reverse; | |
| 939 } | |
| 940 | |
| 941 #urlbar-icons { | |
| 942 -moz-box-align: center; | |
| 943 } | |
| 944 | |
| 945 .urlbar-icon { | |
| 946 cursor: pointer; | |
| 947 padding: 0 3px; | |
| 948 } | |
| 949 | |
| 950 #urlbar-search-splitter { | |
| 951 -moz-appearance: none; | |
| 952 width: 8px; | |
| 953 -moz-margin-start: -4px; | |
| 954 } | |
| 955 | |
| 956 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox { | |
| 957 -moz-margin-start: 0; | |
| 958 } | |
| 959 | |
| 960 #urlbar-display-box { | |
| 961 margin-top: -1px; | |
| 962 margin-bottom: -1px; | |
| 963 -moz-border-end: 1px solid #AAA; | |
| 964 -moz-margin-end: 3px; | |
| 965 } | |
| 966 | |
| 967 #urlbar-display { | |
| 968 margin-top: 0; | |
| 969 margin-bottom: 0; | |
| 970 -moz-margin-start: 0; | |
| 971 color: GrayText; | |
| 972 } | |
| 973 | |
| 974 #search-container { | |
| 975 min-width: calc(54px + 11ch); | |
| 976 } | |
| 977 | |
| 978 /* identity box */ | |
| 979 | |
| 980 #identity-box { | |
| 981 padding: 1px; | |
| 982 font-size: .9em; | |
| 983 } | |
| 984 | |
| 985 #identity-box:-moz-locale-dir(ltr) { | |
| 986 border-top-left-radius: 1.5px; | |
| 987 border-bottom-left-radius: 1.5px; | |
| 988 } | |
| 989 | |
| 990 #identity-box:-moz-locale-dir(rtl) { | |
| 991 border-top-right-radius: 1.5px; | |
| 992 border-bottom-right-radius: 1.5px; | |
| 993 } | |
| 994 | |
| 995 #notification-popup-box:not([hidden]) + #identity-box { | |
| 996 -moz-padding-start: 10px; | |
| 997 border-radius: 0; | |
| 998 } | |
| 999 | |
| 1000 @conditionalForwardWithUrlbar@ > #urlbar > #identity-box { | |
| 1001 border-radius: 0; | |
| 1002 } | |
| 1003 | |
| 1004 @conditionalForwardWithUrlbar@:not([switchingtabs]) > #urlbar > #identity-box { | |
| 1005 transition: padding-left, padding-right; | |
| 1006 } | |
| 1007 | |
| 1008 @conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) { | |
| 1009 padding-left: 5px; | |
| 1010 } | |
| 1011 | |
| 1012 @conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) { | |
| 1013 padding-right: 5px; | |
| 1014 } | |
| 1015 | |
| 1016 @conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box { | |
| 1017 /* forward button hiding is delayed when hovered */ | |
| 1018 transition-delay: 100s; | |
| 1019 } | |
| 1020 | |
| 1021 @conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) { | |
| 1022 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */ | |
| 1023 padding-left: 5.01px; | |
| 1024 } | |
| 1025 | |
| 1026 @conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) { | |
| 1027 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */ | |
| 1028 padding-right: 5.01px; | |
| 1029 } | |
| 1030 | |
| 1031 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI, | |
| 1032 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { | |
| 1033 -moz-margin-end: 4px; | |
| 1034 } | |
| 1035 | |
| 1036 #identity-box.verifiedIdentity:not(:-moz-lwtheme) { | |
| 1037 background-color: #fff; | |
| 1038 } | |
| 1039 | |
| 1040 #identity-box:-moz-focusring { | |
| 1041 outline: 1px dotted #000; | |
| 1042 outline-offset: -3px; | |
| 1043 } | |
| 1044 | |
| 1045 #identity-icon-labels { | |
| 1046 -moz-padding-start: 2px; | |
| 1047 -moz-padding-end: 5px; | |
| 1048 } | |
| 1049 | |
| 1050 %include ../shared/identity-block.inc.css | |
| 1051 | |
| 1052 #page-proxy-favicon { | |
| 1053 margin-top: 1px; | |
| 1054 margin-bottom: 1px; | |
| 1055 -moz-margin-start: 3px; | |
| 1056 -moz-margin-end: 1px; | |
| 1057 -moz-image-region: rect(0, 16px, 16px, 0); | |
| 1058 } | |
| 1059 | |
| 1060 #identity-box:hover > #page-proxy-favicon { | |
| 1061 -moz-image-region: rect(0, 32px, 16px, 16px); | |
| 1062 } | |
| 1063 | |
| 1064 #identity-box:hover:active > #page-proxy-favicon, | |
| 1065 #identity-box[open=true] > #page-proxy-favicon { | |
| 1066 -moz-image-region: rect(0, 48px, 16px, 32px); | |
| 1067 } | |
| 1068 | |
| 1069 /* Identity popup icons */ | |
| 1070 #identity-popup-icon { | |
| 1071 height: 64px; | |
| 1072 width: 64px; | |
| 1073 padding: 0; | |
| 1074 list-style-image: url("chrome://browser/skin/identity.png"); | |
| 1075 -moz-image-region: rect(0px, 64px, 64px, 0px); | |
| 1076 } | |
| 1077 | |
| 1078 #identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon { | |
| 1079 -moz-image-region: rect(64px, 64px, 128px, 0px); | |
| 1080 } | |
| 1081 | |
| 1082 #identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon { | |
| 1083 -moz-image-region: rect(128px, 64px, 192px, 0px); | |
| 1084 } | |
| 1085 | |
| 1086 /* Identity popup body text */ | |
| 1087 .identity-popup-description { | |
| 1088 white-space: pre-wrap; | |
| 1089 -moz-padding-start: 15px; | |
| 1090 margin: 2px 0 4px; | |
| 1091 } | |
| 1092 | |
| 1093 .identity-popup-label { | |
| 1094 white-space: pre-wrap; | |
| 1095 -moz-padding-start: 15px; | |
| 1096 margin: 0; | |
| 1097 } | |
| 1098 | |
| 1099 #identity-popup-content-host , | |
| 1100 #identity-popup-content-owner { | |
| 1101 font-weight: bold; | |
| 1102 max-width: 300px; | |
| 1103 } | |
| 1104 | |
| 1105 #identity-popup-content-host , | |
| 1106 #identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner { | |
| 1107 font-size: 140%; | |
| 1108 } | |
| 1109 | |
| 1110 #identity-popup-content-owner { | |
| 1111 margin-bottom: 0 !important; | |
| 1112 } | |
| 1113 | |
| 1114 #identity-popup-content-verifier { | |
| 1115 margin: 4px 0 2px; | |
| 1116 } | |
| 1117 | |
| 1118 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption , | |
| 1119 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption { | |
| 1120 margin-top: 10px; | |
| 1121 -moz-margin-start: -18px; | |
| 1122 } | |
| 1123 | |
| 1124 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon , | |
| 1125 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon { | |
| 1126 list-style-image: url("chrome://browser/skin/Secure.png"); | |
| 1127 } | |
| 1128 | |
| 1129 #identity-popup-help-icon { | |
| 1130 -moz-appearance: none; | |
| 1131 margin-left: 0px; | |
| 1132 border: none; | |
| 1133 background: none; | |
| 1134 min-width: 0; | |
| 1135 list-style-image: url("chrome://global/skin/icons/question-16.png"); | |
| 1136 cursor: pointer; | |
| 1137 } | |
| 1138 | |
| 1139 #identity-popup-help-icon > .button-box > .button-text { | |
| 1140 display: none; | |
| 1141 } | |
| 1142 | |
| 1143 #identity-popup-help-icon > .button-box > .button-icon { | |
| 1144 height: 16px; | |
| 1145 width: 16px; | |
| 1146 } | |
| 1147 | |
| 1148 #identity-popup-help-icon:-moz-focusring { | |
| 1149 outline: 1px dotted; | |
| 1150 outline-offset: 1px; | |
| 1151 } | |
| 1152 | |
| 1153 #identity-popup > .panel-arrowcontainer > .panel-arrowcontent { | |
| 1154 padding: 0; | |
| 1155 } | |
| 1156 | |
| 1157 #identity-popup-container { | |
| 1158 min-width: 280px; | |
| 1159 padding: 10px; | |
| 1160 } | |
| 1161 | |
| 1162 #identity-popup-button-container { | |
| 1163 background: linear-gradient(to bottom, rgba(0,0,0,0.04) 60%, transparent); | |
| 1164 padding: 10px; | |
| 1165 margin-top: 5px; | |
| 1166 } | |
| 1167 | |
| 1168 /* Notification popup */ | |
| 1169 #notification-popup { | |
| 1170 min-width: 280px; | |
| 1171 } | |
| 1172 | |
| 1173 .popup-notification-icon { | |
| 1174 width: 64px; | |
| 1175 height: 64px; | |
| 1176 -moz-margin-end: 10px; | |
| 1177 } | |
| 1178 | |
| 1179 .popup-notification-icon[popupid="geolocation"] { | |
| 1180 list-style-image: url(chrome://browser/skin/Geolocation-64.png); | |
| 1181 } | |
| 1182 | |
| 1183 .popup-notification-icon[popupid="xpinstall-disabled"], | |
| 1184 .popup-notification-icon[popupid="addon-progress"], | |
| 1185 .popup-notification-icon[popupid="addon-install-cancelled"], | |
| 1186 .popup-notification-icon[popupid="addon-install-blocked"], | |
| 1187 .popup-notification-icon[popupid="addon-install-failed"], | |
| 1188 .popup-notification-icon[popupid="addon-install-complete"] { | |
| 1189 list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png); | |
| 1190 width: 32px; | |
| 1191 height: 32px; | |
| 1192 } | |
| 1193 | |
| 1194 .popup-notification-icon[popupid="click-to-play-plugins"] { | |
| 1195 list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png); | |
| 1196 } | |
| 1197 | |
| 1198 .popup-notification-icon[popupid="plugins-not-found"] { | |
| 1199 list-style-image: url(chrome://browser/skin/pluginInstall-64.png); | |
| 1200 } | |
| 1201 | |
| 1202 .popup-notification-icon[popupid="web-notifications"] { | |
| 1203 list-style-image: url(chrome://browser/skin/notification-64.png); | |
| 1204 } | |
| 1205 | |
| 1206 .addon-progress-description { | |
| 1207 width: 350px; | |
| 1208 max-width: 350px; | |
| 1209 } | |
| 1210 | |
| 1211 .popup-progress-label, | |
| 1212 .popup-progress-meter { | |
| 1213 -moz-margin-start: 0; | |
| 1214 -moz-margin-end: 0; | |
| 1215 } | |
| 1216 | |
| 1217 .popup-progress-cancel { | |
| 1218 -moz-appearance: none; | |
| 1219 background: transparent; | |
| 1220 border: none; | |
| 1221 padding: 0; | |
| 1222 margin: 0; | |
| 1223 -moz-margin-start: 5px; | |
| 1224 min-height: 0; | |
| 1225 min-width: 0; | |
| 1226 list-style-image: url("moz-icon://stock/gtk-cancel?size=menu"); | |
| 1227 } | |
| 1228 | |
| 1229 .popup-notification-icon[popupid="canvas-permissions-prompt"] { | |
| 1230 list-style-image: url(chrome://browser/skin/canvas-popup.svg); | |
| 1231 } | |
| 1232 | |
| 1233 .popup-notification-icon[popupid="indexedDB-permissions-prompt"], | |
| 1234 .popup-notification-icon[popupid="indexedDB-quota-prompt"], | |
| 1235 .popup-notification-icon[popupid*="offline-app-requested"], | |
| 1236 .popup-notification-icon[popupid="offline-app-usage"] { | |
| 1237 list-style-image: url(chrome://global/skin/icons/question-64.png); | |
| 1238 } | |
| 1239 | |
| 1240 .popup-notification-icon[popupid="password-save"], | |
| 1241 .popup-notification-icon[popupid="password-change"] { | |
| 1242 list-style-image: url(chrome://mozapps/skin/passwordmgr/key-64.png); | |
| 1243 } | |
| 1244 | |
| 1245 .popup-notification-icon[popupid="webapps-install-progress"], | |
| 1246 .popup-notification-icon[popupid="webapps-install"] { | |
| 1247 list-style-image: url(chrome://global/skin/icons/webapps-64.png); | |
| 1248 } | |
| 1249 | |
| 1250 .popup-notification-icon[popupid="mixed-content-blocked"] { | |
| 1251 list-style-image: url(chrome://browser/skin/mixed-content-blocked-64.png); | |
| 1252 } | |
| 1253 | |
| 1254 .popup-notification-icon[popupid="webRTC-sharingDevices"], | |
| 1255 .popup-notification-icon[popupid="webRTC-shareDevices"] { | |
| 1256 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png); | |
| 1257 } | |
| 1258 | |
| 1259 .popup-notification-icon[popupid="webRTC-sharingMicrophone"], | |
| 1260 .popup-notification-icon[popupid="webRTC-shareMicrophone"] { | |
| 1261 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64.png); | |
| 1262 } | |
| 1263 | |
| 1264 .popup-notification-icon[popupid="pointerLock"] { | |
| 1265 list-style-image: url(chrome://browser/skin/pointerLock-64.png); | |
| 1266 } | |
| 1267 | |
| 1268 /* Notification icon box */ | |
| 1269 #notification-popup-box { | |
| 1270 position: relative; | |
| 1271 background-color: #fff; | |
| 1272 background-clip: padding-box; | |
| 1273 padding-left: 3px; | |
| 1274 border-radius: 2.5px 0 0 2.5px; | |
| 1275 border-width: 0 8px 0 0; | |
| 1276 border-style: solid; | |
| 1277 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 fill; | |
| 1278 -moz-margin-end: -8px; | |
| 1279 margin-top: -1px; | |
| 1280 margin-bottom: -1px; | |
| 1281 } | |
| 1282 | |
| 1283 @conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box { | |
| 1284 padding-left: 7px; | |
| 1285 } | |
| 1286 | |
| 1287 #notification-popup-box:not([hidden]) + #identity-box { | |
| 1288 -moz-padding-start: 10px; | |
| 1289 border-radius: 0; | |
| 1290 } | |
| 1291 | |
| 1292 #notification-popup-box:-moz-locale-dir(rtl), | |
| 1293 .notification-anchor-icon:-moz-locale-dir(rtl) { | |
| 1294 transform: scaleX(-1); | |
| 1295 } | |
| 1296 | |
| 1297 .notification-anchor-icon { | |
| 1298 width: 16px; | |
| 1299 height: 16px; | |
| 1300 margin: 0 2px; | |
| 1301 } | |
| 1302 | |
| 1303 .notification-anchor-icon:-moz-focusring { | |
| 1304 outline: 1px dotted -moz-DialogText; | |
| 1305 } | |
| 1306 | |
| 1307 .default-notification-icon, | |
| 1308 #default-notification-icon { | |
| 1309 list-style-image: url(chrome://global/skin/icons/information-16.png); | |
| 1310 } | |
| 1311 | |
| 1312 .identity-notification-icon, | |
| 1313 #identity-notification-icon { | |
| 1314 list-style-image: url(chrome://mozapps/skin/profile/profileicon.png); | |
| 1315 } | |
| 1316 | |
| 1317 .geo-notification-icon, | |
| 1318 #geo-notification-icon { | |
| 1319 list-style-image: url(chrome://browser/skin/Geolocation-16.png); | |
| 1320 } | |
| 1321 | |
| 1322 #addons-notification-icon { | |
| 1323 list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png); | |
| 1324 } | |
| 1325 | |
| 1326 #canvas-notification-icon { | |
| 1327 list-style-image: url(chrome://browser/skin/canvas-popup.svg); | |
| 1328 } | |
| 1329 | |
| 1330 .indexedDB-notification-icon, | |
| 1331 #indexedDB-notification-icon { | |
| 1332 list-style-image: url(chrome://global/skin/icons/question-16.png); | |
| 1333 } | |
| 1334 | |
| 1335 #password-notification-icon { | |
| 1336 list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); | |
| 1337 } | |
| 1338 | |
| 1339 #webapps-notification-icon { | |
| 1340 list-style-image: url(chrome://global/skin/icons/webapps-16.png); | |
| 1341 } | |
| 1342 | |
| 1343 #plugins-notification-icon { | |
| 1344 list-style-image: url(chrome://browser/skin/notification-pluginNormal.png); | |
| 1345 } | |
| 1346 #plugins-notification-icon.plugin-hidden { | |
| 1347 list-style-image: url(chrome://browser/skin/notification-pluginAlert.png); | |
| 1348 } | |
| 1349 #plugins-notification-icon.plugin-blocked { | |
| 1350 list-style-image: url(chrome://browser/skin/notification-pluginBlocked.png); | |
| 1351 } | |
| 1352 | |
| 1353 #plugins-notification-icon { | |
| 1354 -moz-image-region: rect(0, 16px, 16px, 0); | |
| 1355 } | |
| 1356 | |
| 1357 #plugins-notification-icon:hover { | |
| 1358 -moz-image-region: rect(0, 32px, 16px, 16px); | |
| 1359 } | |
| 1360 | |
| 1361 #plugins-notification-icon:active { | |
| 1362 -moz-image-region: rect(0, 48px, 16px, 32px); | |
| 1363 } | |
| 1364 | |
| 1365 #plugin-install-notification-icon { | |
| 1366 list-style-image: url(chrome://browser/skin/pluginInstall-16.png); | |
| 1367 } | |
| 1368 | |
| 1369 #notification-popup-box[hidden] { | |
| 1370 /* Override display:none to make the pluginBlockedNotification animation work | |
| 1371 when showing the notification repeatedly. */ | |
| 1372 display: -moz-box; | |
| 1373 visibility: collapse; | |
| 1374 } | |
| 1375 | |
| 1376 #plugins-notification-icon.plugin-blocked[showing] { | |
| 1377 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both; | |
| 1378 } | |
| 1379 | |
| 1380 @keyframes pluginBlockedNotification { | |
| 1381 from { | |
| 1382 opacity: 0; | |
| 1383 } | |
| 1384 to { | |
| 1385 opacity: 1; | |
| 1386 } | |
| 1387 } | |
| 1388 | |
| 1389 .mixed-content-blocked-notification-icon, | |
| 1390 #mixed-content-blocked-notification-icon { | |
| 1391 list-style-image: url(chrome://browser/skin/mixed-content-blocked-16.png); | |
| 1392 } | |
| 1393 | |
| 1394 .webRTC-shareDevices-notification-icon, | |
| 1395 #webRTC-shareDevices-notification-icon { | |
| 1396 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16.png); | |
| 1397 } | |
| 1398 | |
| 1399 .webRTC-sharingDevices-notification-icon, | |
| 1400 #webRTC-sharingDevices-notification-icon { | |
| 1401 list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16.png); | |
| 1402 } | |
| 1403 | |
| 1404 .webRTC-shareMicrophone-notification-icon, | |
| 1405 #webRTC-shareMicrophone-notification-icon { | |
| 1406 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16.png); | |
| 1407 } | |
| 1408 | |
| 1409 .webRTC-sharingMicrophone-notification-icon, | |
| 1410 #webRTC-sharingMicrophone-notification-icon { | |
| 1411 list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16.png); | |
| 1412 } | |
| 1413 | |
| 1414 .web-notifications-notification-icon, | |
| 1415 #web-notifications-notification-icon { | |
| 1416 list-style-image: url(chrome://browser/skin/notification-16.png); | |
| 1417 } | |
| 1418 | |
| 1419 #pointerLock-notification-icon { | |
| 1420 list-style-image: url(chrome://browser/skin/pointerLock-16.png); | |
| 1421 } | |
| 1422 #pointerLock-cancel { | |
| 1423 margin: 0px; | |
| 1424 } | |
| 1425 | |
| 1426 .translate-notification-icon, | |
| 1427 #translate-notification-icon { | |
| 1428 list-style-image: url(chrome://browser/skin/translation-16.png); | |
| 1429 -moz-image-region: rect(0px, 16px, 16px, 0px); | |
| 1430 } | |
| 1431 | |
| 1432 .translated-notification-icon, | |
| 1433 #translated-notification-icon { | |
| 1434 list-style-image: url(chrome://browser/skin/translation-16.png); | |
| 1435 -moz-image-region: rect(0px, 32px, 16px, 16px); | |
| 1436 } | |
| 1437 | |
| 1438 #treecolAutoCompleteImage { | |
| 1439 max-width : 36px; | |
| 1440 } | |
| 1441 | |
| 1442 .ac-result-type-bookmark, | |
| 1443 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) { | |
| 1444 list-style-image: url("chrome://browser/skin/places/star-icons.png"); | |
| 1445 -moz-image-region: rect(0px 32px 16px 16px); | |
| 1446 width: 16px; | |
| 1447 height: 16px; | |
| 1448 } | |
| 1449 | |
| 1450 .ac-result-type-keyword, | |
| 1451 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) { | |
| 1452 list-style-image: url(moz-icon://stock/gtk-find?size=menu); | |
| 1453 width: 16px; | |
| 1454 height: 16px; | |
| 1455 } | |
| 1456 | |
| 1457 .ac-result-type-tag, | |
| 1458 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) { | |
| 1459 list-style-image: url("chrome://browser/skin/places/tag.png"); | |
| 1460 width: 16px; | |
| 1461 height: 16px; | |
| 1462 } | |
| 1463 | |
| 1464 .ac-comment { | |
| 1465 font-size: 1.05em; | |
| 1466 } | |
| 1467 | |
| 1468 .ac-extra > .ac-comment { | |
| 1469 font-size: inherit; | |
| 1470 } | |
| 1471 | |
| 1472 .ac-url-text, | |
| 1473 .ac-action-text { | |
| 1474 color: -moz-nativehyperlinktext; | |
| 1475 font-size: 0.9em; | |
| 1476 } | |
| 1477 | |
| 1478 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon { | |
| 1479 list-style-image: url("chrome://browser/skin/actionicon-tab.png"); | |
| 1480 padding: 0 3px; | |
| 1481 } | |
| 1482 | |
| 1483 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) { | |
| 1484 color: GrayText; | |
| 1485 } | |
| 1486 | |
| 1487 .ac-comment[selected="true"], | |
| 1488 .ac-url-text[selected="true"], | |
| 1489 .ac-action-text[selected="true"] { | |
| 1490 color: inherit !important; | |
| 1491 } | |
| 1492 | |
| 1493 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment), | |
| 1494 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment) { | |
| 1495 color: GrayText; | |
| 1496 font-size: smaller; | |
| 1497 } | |
| 1498 | |
| 1499 .autocomplete-treebody::-moz-tree-cell(suggesthint) { | |
| 1500 border-top: 1px solid GrayText; | |
| 1501 } | |
| 1502 | |
| 1503 /* Combined go/reload/stop button in location bar */ | |
| 1504 | |
| 1505 #urlbar > toolbarbutton { | |
| 1506 -moz-appearance: none; | |
| 1507 padding: 0 2px; | |
| 1508 cursor: pointer; | |
| 1509 list-style-image: url("chrome://browser/skin/reload-stop-go.png"); | |
| 1510 } | |
| 1511 | |
| 1512 #urlbar-reload-button { | |
| 1513 -moz-image-region: rect(0, 14px, 14px, 0); | |
| 1514 } | |
| 1515 | |
| 1516 #urlbar-reload-button:not([disabled]):hover { | |
| 1517 background-image: radial-gradient(circle closest-side, hsla(200,100%,70%,.2), hsla(200,100%,70%,0)); | |
| 1518 -moz-image-region: rect(14px, 14px, 28px, 0); | |
| 1519 } | |
| 1520 | |
| 1521 #urlbar-reload-button:not([disabled]):hover:active { | |
| 1522 background-image: radial-gradient(circle closest-side, hsla(200,100%,60%,.1), hsla(200,100%,60%,0)); | |
| 1523 -moz-image-region: rect(28px, 14px, 42px, 0); | |
| 1524 } | |
| 1525 | |
| 1526 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { | |
| 1527 transform: scaleX(-1); | |
| 1528 } | |
| 1529 | |
| 1530 #urlbar-go-button { | |
| 1531 -moz-image-region: rect(0, 42px, 14px, 28px); | |
| 1532 } | |
| 1533 | |
| 1534 #urlbar-go-button:hover { | |
| 1535 background-image: radial-gradient(circle closest-side, hsla(110,70%,50%,.2), hsla(110,70%,50%,0)); | |
| 1536 -moz-image-region: rect(14px, 42px, 28px, 28px); | |
| 1537 } | |
| 1538 | |
| 1539 #urlbar-go-button:hover:active { | |
| 1540 background-image: radial-gradient(circle closest-side, hsla(110,70%,50%,.1), hsla(110,70%,50%,0)); | |
| 1541 -moz-image-region: rect(28px, 42px, 42px, 28px); | |
| 1542 } | |
| 1543 | |
| 1544 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { | |
| 1545 transform: scaleX(-1); | |
| 1546 } | |
| 1547 | |
| 1548 #urlbar-stop-button { | |
| 1549 -moz-image-region: rect(0, 28px, 14px, 14px); | |
| 1550 } | |
| 1551 | |
| 1552 #urlbar-stop-button:not([disabled]):hover { | |
| 1553 background-image: radial-gradient(circle closest-side, hsla(5,100%,75%,.3), hsla(5,100%,75%,0)); | |
| 1554 -moz-image-region: rect(14px, 28px, 28px, 14px); | |
| 1555 } | |
| 1556 | |
| 1557 #urlbar-stop-button:hover:active { | |
| 1558 background-image: radial-gradient(circle closest-side, hsla(5,100%,75%,.1), hsla(5,100%,75%,0)); | |
| 1559 -moz-image-region: rect(28px, 28px, 42px, 14px); | |
| 1560 } | |
| 1561 | |
| 1562 /* Popup blocker button */ | |
| 1563 #page-report-button { | |
| 1564 list-style-image: url("chrome://browser/skin/Info.png"); | |
| 1565 } | |
| 1566 | |
| 1567 | |
| 1568 /* social share panel */ | |
| 1569 | |
| 1570 .social-share-frame { | |
| 1571 background: linear-gradient(to bottom, rgba(242,242,242,.99), rgba(242,242,242,.95)); | |
| 1572 border-left: 1px solid #f8f8f8; | |
| 1573 width: 330px; | |
| 1574 height: 150px; | |
| 1575 /* we resize our panels dynamically, make it look nice */ | |
| 1576 transition: height 100ms ease-out, width 100ms ease-out; | |
| 1577 } | |
| 1578 | |
| 1579 .social-share-toolbar { | |
| 1580 border-right: 1px solid #dedede; | |
| 1581 background: linear-gradient(to bottom, rgba(247,247,247,.99), rgba(247,247,247,.95)); | |
| 1582 } | |
| 1583 | |
| 1584 #social-share-provider-buttons { | |
| 1585 border-right: 1px solid #fbfbfb; | |
| 1586 padding: 6px; | |
| 1587 } | |
| 1588 | |
| 1589 #social-share-provider-buttons > .share-provider-button { | |
| 1590 padding: 6px; | |
| 1591 margin: 0; | |
| 1592 border: none; | |
| 1593 border-radius: 2px; | |
| 1594 } | |
| 1595 | |
| 1596 #social-share-provider-buttons > .share-provider-button[checked], | |
| 1597 #social-share-provider-buttons > .share-provider-button:active { | |
| 1598 padding: 5px; | |
| 1599 border: 1px solid #b5b5b8; | |
| 1600 box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.2); | |
| 1601 } | |
| 1602 | |
| 1603 #social-share-provider-buttons > .share-provider-button[checked] { | |
| 1604 background: linear-gradient(to bottom, #d9d9d9, #e3e3e3); | |
| 1605 } | |
| 1606 | |
| 1607 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-text { | |
| 1608 display: none; | |
| 1609 } | |
| 1610 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-icon { | |
| 1611 width: 16px; | |
| 1612 min-height: 16px; | |
| 1613 max-height: 16px; | |
| 1614 } | |
| 1615 | |
| 1616 /* social recommending panel */ | |
| 1617 | |
| 1618 #social-mark-button { | |
| 1619 -moz-image-region: rect(0, 16px, 16px, 0); | |
| 1620 } | |
| 1621 | |
| 1622 /* bookmarks menu-button */ | |
| 1623 | |
| 1624 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker { | |
| 1625 -moz-appearance: none !important; | |
| 1626 -moz-box-align: center; | |
| 1627 } | |
| 1628 | |
| 1629 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { | |
| 1630 margin-top: 3px; | |
| 1631 margin-bottom: 3px; | |
| 1632 } | |
| 1633 | |
| 1634 #bookmarks-menu-button[disabled][cui-areatype="toolbar"] > .toolbarbutton-icon, | |
| 1635 #bookmarks-menu-button[disabled][cui-areatype="toolbar"] > .toolbarbutton-menu-dropmarker, | |
| 1636 #bookmarks-menu-button[disabled][cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker, | |
| 1637 #bookmarks-menu-button[disabled][cui-areatype="toolbar"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon, | |
| 1638 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled] > .toolbarbutton-icon { | |
| 1639 opacity: .4; | |
| 1640 } | |
| 1641 | |
| 1642 #BMB_bookmarksPopup[side="top"], | |
| 1643 #BMB_bookmarksPopup[side="bottom"] { | |
| 1644 margin-left: -16px; | |
| 1645 margin-right: -16px; | |
| 1646 } | |
| 1647 | |
| 1648 #BMB_bookmarksPopup[side="left"], | |
| 1649 #BMB_bookmarksPopup[side="right"] { | |
| 1650 margin-top: -16px; | |
| 1651 margin-bottom: -16px; | |
| 1652 } | |
| 1653 | |
| 1654 #nav-bar .toolbarbutton-1 > menupopup[side="top"].cui-widget-panel, | |
| 1655 #nav-bar .toolbarbutton-1 > menupopup[side="bottom"].cui-widget-panel { | |
| 1656 margin-top: -4px; | |
| 1657 } | |
| 1658 | |
| 1659 /* Bookmarking panel */ | |
| 1660 #editBookmarkPanelStarIcon { | |
| 1661 list-style-image: url("chrome://browser/skin/places/starred48.png"); | |
| 1662 width: 48px; | |
| 1663 height: 48px; | |
| 1664 } | |
| 1665 | |
| 1666 #editBookmarkPanelStarIcon[unstarred] { | |
| 1667 list-style-image: url("chrome://browser/skin/places/unstarred48.png"); | |
| 1668 } | |
| 1669 | |
| 1670 #editBookmarkPanelTitle { | |
| 1671 font-size: 130%; | |
| 1672 } | |
| 1673 | |
| 1674 #editBookmarkPanelHeader, | |
| 1675 #editBookmarkPanelContent { | |
| 1676 margin-bottom: .5em; | |
| 1677 } | |
| 1678 | |
| 1679 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */ | |
| 1680 #editBMPanel_folderTree { | |
| 1681 min-width: 27em; | |
| 1682 } | |
| 1683 | |
| 1684 .panel-promo-box { | |
| 1685 margin: 8px -10px -10px -10px; | |
| 1686 padding: 8px 10px; | |
| 1687 border-top: 1px solid ThreeDShadow; | |
| 1688 background-image: linear-gradient(hsla(0,0%,0%,.15), hsla(0,0%,0%,.08) 6px); | |
| 1689 } | |
| 1690 | |
| 1691 .panel-promo-icon { | |
| 1692 list-style-image: url("chrome://browser/skin/sync-notification-24.png"); | |
| 1693 -moz-margin-end: 10px; | |
| 1694 vertical-align: middle; | |
| 1695 } | |
| 1696 | |
| 1697 .panel-promo-closebutton { | |
| 1698 -moz-appearance: none; | |
| 1699 height: 16px; | |
| 1700 width: 16px; | |
| 1701 } | |
| 1702 | |
| 1703 .panel-promo-closebutton > .toolbarbutton-text { | |
| 1704 padding: 0; | |
| 1705 margin: 0; | |
| 1706 } | |
| 1707 | |
| 1708 /* Content area */ | |
| 1709 #sidebar { | |
| 1710 background-color: Window; | |
| 1711 } | |
| 1712 | |
| 1713 .browserContainer > findbar { | |
| 1714 background-color: -moz-dialog; | |
| 1715 color: -moz-DialogText; | |
| 1716 text-shadow: none; | |
| 1717 } | |
| 1718 | |
| 1719 /* Tabstrip */ | |
| 1720 | |
| 1721 %include ../shared/tabs.inc.css | |
| 1722 | |
| 1723 #tabbrowser-tabs { | |
| 1724 /* override the global style to allow the selected tab to be above the nav-bar */ | |
| 1725 z-index: auto; | |
| 1726 } | |
| 1727 | |
| 1728 #TabsToolbar { | |
| 1729 min-height: 0; | |
| 1730 padding: 0; | |
| 1731 position: relative; | |
| 1732 } | |
| 1733 | |
| 1734 /* | |
| 1735 * Draw the bottom border of the tabstrip: | |
| 1736 */ | |
| 1737 #TabsToolbar::after { | |
| 1738 content: ""; | |
| 1739 position: absolute; | |
| 1740 bottom: @tabToolbarNavbarOverlap@; | |
| 1741 left: 0; | |
| 1742 right: 0; | |
| 1743 z-index: 0; | |
| 1744 border-bottom: 1px solid hsla(0,0%,0%,.3); | |
| 1745 } | |
| 1746 | |
| 1747 #TabsToolbar:not(:-moz-lwtheme) { | |
| 1748 -moz-appearance: menubar; | |
| 1749 color: -moz-menubartext; | |
| 1750 } | |
| 1751 | |
| 1752 #toolbar-menubar:not([autohide="true"]):not(:-moz-lwtheme):-moz-system-metric(menubar-drag), | |
| 1753 #TabsToolbar:not(:-moz-lwtheme):-moz-system-metric(menubar-drag) { | |
| 1754 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag"); | |
| 1755 } | |
| 1756 | |
| 1757 .tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label { | |
| 1758 outline: 1px dotted; | |
| 1759 } | |
| 1760 | |
| 1761 #context_reloadTab { | |
| 1762 list-style-image: url("moz-icon://stock/gtk-refresh?size=menu"); | |
| 1763 } | |
| 1764 | |
| 1765 #context_closeOtherTabs { | |
| 1766 list-style-image: url("moz-icon://stock/gtk-clear?size=menu"); | |
| 1767 } | |
| 1768 | |
| 1769 #context_closeOtherTabs[disabled] { | |
| 1770 list-style-image: url("moz-icon://stock/gtk-clear?size=menu&state=disabled"); | |
| 1771 } | |
| 1772 | |
| 1773 #context_undoCloseTab { | |
| 1774 list-style-image: url("moz-icon://stock/gtk-undelete?size=menu"); | |
| 1775 } | |
| 1776 | |
| 1777 #context_closeTab { | |
| 1778 list-style-image: url("moz-icon://stock/gtk-close?size=menu"); | |
| 1779 } | |
| 1780 | |
| 1781 /* Tab drag and drop */ | |
| 1782 .tab-drop-indicator { | |
| 1783 list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator.png); | |
| 1784 margin-bottom: -9px; | |
| 1785 z-index: 3; | |
| 1786 } | |
| 1787 | |
| 1788 /* Tab close button */ | |
| 1789 .tab-close-button:not([selected]):not(:hover) { | |
| 1790 background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 64, 16, 48); | |
| 1791 } | |
| 1792 | |
| 1793 .tab-close-button:not([selected]):not(:hover):-moz-lwtheme-brighttext { | |
| 1794 background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64); | |
| 1795 } | |
| 1796 | |
| 1797 .tab-close-button:not([selected]):not(:hover):-moz-lwtheme-darktext { | |
| 1798 background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 96, 16, 80); | |
| 1799 } | |
| 1800 | |
| 1801 /* Tabstrip new tab button */ | |
| 1802 .tabs-newtab-button, | |
| 1803 #TabsToolbar > #new-tab-button , | |
| 1804 #TabsToolbar > #wrapper-new-tab-button > #new-tab-button { | |
| 1805 list-style-image: url("moz-icon://stock/gtk-add?size=menu"); | |
| 1806 -moz-image-region: auto; | |
| 1807 } | |
| 1808 | |
| 1809 /* Tabbrowser arrowscrollbox arrows */ | |
| 1810 .tabbrowser-arrowscrollbox > .scrollbutton-up, | |
| 1811 .tabbrowser-arrowscrollbox > .scrollbutton-down { | |
| 1812 -moz-appearance: none; | |
| 1813 margin: 0 0 @tabToolbarNavbarOverlap@; | |
| 1814 } | |
| 1815 | |
| 1816 .tabbrowser-arrowscrollbox > .scrollbutton-up { | |
| 1817 -moz-border-start: 0; | |
| 1818 -moz-border-end: 2px solid transparent; | |
| 1819 } | |
| 1820 | |
| 1821 .tabbrowser-arrowscrollbox > .scrollbutton-down { | |
| 1822 -moz-border-start: 2px solid transparent; | |
| 1823 -moz-border-end: 0; | |
| 1824 transition: 1s box-shadow ease-out; | |
| 1825 border-radius: 4px; | |
| 1826 } | |
| 1827 | |
| 1828 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] { | |
| 1829 box-shadow: 0 0 5px 5px Highlight inset; | |
| 1830 transition: none; | |
| 1831 } | |
| 1832 | |
| 1833 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):-moz-locale-dir(ltr), | |
| 1834 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):-moz-locale-dir(rtl) { | |
| 1835 border-width: 0 2px 0 0; | |
| 1836 border-style: solid; | |
| 1837 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill; | |
| 1838 } | |
| 1839 | |
| 1840 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):-moz-locale-dir(ltr), | |
| 1841 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):-moz-locale-dir(rtl) { | |
| 1842 border-width: 0 0 0 2px; | |
| 1843 border-style: solid; | |
| 1844 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill; | |
| 1845 } | |
| 1846 | |
| 1847 #TabsToolbar .toolbarbutton-1 { | |
| 1848 margin-bottom: @tabToolbarNavbarOverlap@; | |
| 1849 } | |
| 1850 | |
| 1851 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon, | |
| 1852 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker, | |
| 1853 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon { | |
| 1854 margin-top: -2px; | |
| 1855 margin-bottom: -2px; | |
| 1856 } | |
| 1857 | |
| 1858 #alltabs-button > .toolbarbutton-menu-dropmarker { | |
| 1859 margin-bottom: -2px; | |
| 1860 } | |
| 1861 | |
| 1862 #alltabs-button > .toolbarbutton-icon { | |
| 1863 display: none; | |
| 1864 } | |
| 1865 | |
| 1866 /* All tabs menupopup */ | |
| 1867 .alltabs-item > .menu-iconic-left > .menu-iconic-icon { | |
| 1868 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); | |
| 1869 } | |
| 1870 | |
| 1871 .alltabs-item[selected="true"] { | |
| 1872 font-weight: bold; | |
| 1873 } | |
| 1874 | |
| 1875 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon { | |
| 1876 list-style-image: url("chrome://global/skin/icons/loading_16.png"); | |
| 1877 } | |
| 1878 | |
| 1879 .alltabs-item[tabIsVisible] { | |
| 1880 /* box-shadow instead of background-color to work around native styling */ | |
| 1881 box-shadow: inset -5px 0 ThreeDShadow; | |
| 1882 } | |
| 1883 | |
| 1884 /* Sidebar */ | |
| 1885 #sidebar-throbber[loading="true"] { | |
| 1886 list-style-image: url("chrome://global/skin/icons/loading_16.png"); | |
| 1887 -moz-margin-end: 4px; | |
| 1888 } | |
| 1889 | |
| 1890 toolbarbutton.chevron { | |
| 1891 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important; | |
| 1892 } | |
| 1893 | |
| 1894 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon { | |
| 1895 transform: scaleX(-1); | |
| 1896 } | |
| 1897 | |
| 1898 toolbarbutton.chevron > .toolbarbutton-text, | |
| 1899 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker { | |
| 1900 display: none; | |
| 1901 } | |
| 1902 | |
| 1903 toolbarbutton.chevron > .toolbarbutton-icon { | |
| 1904 margin: 0; | |
| 1905 } | |
| 1906 | |
| 1907 /* Ctrl-Tab */ | |
| 1908 | |
| 1909 .ctrlTab-preview { | |
| 1910 -moz-appearance: toolbarbutton; | |
| 1911 } | |
| 1912 | |
| 1913 .tabPreview-canvas { | |
| 1914 box-shadow: 0 0 5px ThreeDShadow; | |
| 1915 } | |
| 1916 | |
| 1917 .ctrlTab-preview:focus .tabPreview-canvas, | |
| 1918 .ctrlTab-preview:hover .tabPreview-canvas { | |
| 1919 box-shadow: none; | |
| 1920 } | |
| 1921 | |
| 1922 .ctrlTab-favicon[src] { | |
| 1923 background-color: white; | |
| 1924 width: 20px; | |
| 1925 height: 20px; | |
| 1926 padding: 2px; | |
| 1927 } | |
| 1928 | |
| 1929 #ctrlTab-panel { | |
| 1930 padding: 10px; | |
| 1931 } | |
| 1932 | |
| 1933 .ctrlTab-preview:not(#ctrlTab-showAll) .tabPreview-canvas { | |
| 1934 margin-bottom: 2px; | |
| 1935 } | |
| 1936 | |
| 1937 #ctrlTab-showAll { | |
| 1938 -moz-appearance: button; | |
| 1939 color: ButtonText; | |
| 1940 padding: 0 3px; | |
| 1941 margin-top: 10px; | |
| 1942 } | |
| 1943 | |
| 1944 /* Sync Panel */ | |
| 1945 | |
| 1946 .sync-panel-icon { | |
| 1947 height:32px; | |
| 1948 width: 32px; | |
| 1949 background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat; | |
| 1950 } | |
| 1951 | |
| 1952 .sync-panel-inner { | |
| 1953 width: 0; | |
| 1954 padding-left: 10px; | |
| 1955 } | |
| 1956 | |
| 1957 .sync-panel-button-box { | |
| 1958 margin-top: 1em; | |
| 1959 } | |
| 1960 | |
| 1961 #sync-error-panel-title, | |
| 1962 #sync-start-panel-title { | |
| 1963 font-size: 120%; | |
| 1964 font-weight: bold; | |
| 1965 margin-bottom: 5px; | |
| 1966 } | |
| 1967 | |
| 1968 #sync-start-panel-subtitle, | |
| 1969 #sync-error-panel-subtitle { | |
| 1970 margin: 0; | |
| 1971 } | |
| 1972 | |
| 1973 /* Status panel */ | |
| 1974 | |
| 1975 .statuspanel-label { | |
| 1976 margin: 0; | |
| 1977 padding: 2px 4px; | |
| 1978 background: linear-gradient(#fff, #ddd); | |
| 1979 border: 1px none #ccc; | |
| 1980 border-top-style: solid; | |
| 1981 color: #333; | |
| 1982 text-shadow: none; | |
| 1983 } | |
| 1984 | |
| 1985 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]), | |
| 1986 .statuspanel-label:-moz-locale-dir(rtl)[mirror] { | |
| 1987 border-right-style: solid; | |
| 1988 border-top-right-radius: .3em; | |
| 1989 margin-right: 1em; | |
| 1990 } | |
| 1991 | |
| 1992 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]), | |
| 1993 .statuspanel-label:-moz-locale-dir(ltr)[mirror] { | |
| 1994 border-left-style: solid; | |
| 1995 border-top-left-radius: .3em; | |
| 1996 margin-left: 1em; | |
| 1997 } | |
| 1998 | |
| 1999 #full-screen-warning-message { | |
| 2000 background-image: url("chrome://browser/skin/fullscreen-darknoise.png"); | |
| 2001 color: white; | |
| 2002 border-radius: 4px; | |
| 2003 margin-top: 30px; | |
| 2004 padding: 30px 50px; | |
| 2005 box-shadow: 0 0 2px white; | |
| 2006 } | |
| 2007 | |
| 2008 #full-screen-warning-container[obscure-browser] { | |
| 2009 background-color: rgba(0,0,0,0.3); | |
| 2010 } | |
| 2011 | |
| 2012 .full-screen-description { | |
| 2013 font-size: 150%; | |
| 2014 } | |
| 2015 | |
| 2016 #full-screen-domain-text { | |
| 2017 font-size: 300%; | |
| 2018 } | |
| 2019 | |
| 2020 .full-screen-approval-button, | |
| 2021 #full-screen-remember-decision { | |
| 2022 font-size: 120%; | |
| 2023 } | |
| 2024 | |
| 2025 %include ../shared/devtools/responsivedesign.inc.css | |
| 2026 %include ../shared/devtools/highlighter.inc.css | |
| 2027 %include ../shared/devtools/commandline.inc.css | |
| 2028 %include ../shared/plugin-doorhanger.inc.css | |
| 2029 | |
| 2030 %include downloads/indicator.css | |
| 2031 | |
| 2032 .gcli-panel { | |
| 2033 padding: 0; | |
| 2034 } | |
| 2035 | |
| 2036 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection { | |
| 2037 color: hsl(210,11%,16%); | |
| 2038 } | |
| 2039 | |
| 2040 /* Error counter */ | |
| 2041 | |
| 2042 #developer-toolbar-toolbox-button[error-count]:before { | |
| 2043 color: #FDF3DE; | |
| 2044 min-width: 16px; | |
| 2045 text-shadow: none; | |
| 2046 background-image: linear-gradient(#B4211B, #8A1915); | |
| 2047 border-radius: 1px; | |
| 2048 -moz-margin-end: 2px; | |
| 2049 } | |
| 2050 | |
| 2051 /* Social toolbar item */ | |
| 2052 | |
| 2053 #social-provider-button { | |
| 2054 -moz-image-region: rect(0, 16px, 16px, 0); | |
| 2055 list-style-image: url(chrome://browser/skin/social/services-16.png); | |
| 2056 } | |
| 2057 | |
| 2058 #social-provider-button > .toolbarbutton-menu-dropmarker { | |
| 2059 display: none; | |
| 2060 } | |
| 2061 | |
| 2062 .toolbarbutton-badge-container { | |
| 2063 margin: 5px 3px; | |
| 2064 position: relative; | |
| 2065 } | |
| 2066 | |
| 2067 toolbar[iconsize="small"] .toolbarbutton-badge-container { | |
| 2068 margin: 0; | |
| 2069 } | |
| 2070 | |
| 2071 .toolbarbutton-badge[badge]:not([badge=""])::after { | |
| 2072 /* The |content| property is set in the content stylesheet. */ | |
| 2073 font-size: 9px; | |
| 2074 font-weight: bold; | |
| 2075 padding: 0 1px; | |
| 2076 color: #fff; | |
| 2077 background-color: rgb(240,61,37); | |
| 2078 border: 1px solid rgb(216,55,34); | |
| 2079 border-radius: 2px; | |
| 2080 box-shadow: 0 1px 0 rgba(0,39,121,0.77); | |
| 2081 position: absolute; | |
| 2082 top: 0; | |
| 2083 right: 0; | |
| 2084 } | |
| 2085 | |
| 2086 .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after { | |
| 2087 left: 2px; | |
| 2088 right: auto; | |
| 2089 } | |
| 2090 | |
| 2091 .popup-notification-icon[popupid="servicesInstall"] { | |
| 2092 list-style-image: url(chrome://browser/skin/social/services-64.png); | |
| 2093 } | |
| 2094 #servicesInstall-notification-icon { | |
| 2095 list-style-image: url(chrome://browser/skin/social/services-16.png); | |
| 2096 } | |
| 2097 #social-undoactivation-button { | |
| 2098 -moz-margin-start: 0; /* override default label margin to match description margin */ | |
| 2099 } | |
| 2100 | |
| 2101 .social-activation-icon { | |
| 2102 width: auto; | |
| 2103 height: auto; | |
| 2104 max-height: 64px; | |
| 2105 max-width: 64px; | |
| 2106 } | |
| 2107 | |
| 2108 #social-activation-message { | |
| 2109 max-width: 250px; | |
| 2110 } | |
| 2111 | |
| 2112 #social-activation-message > label { | |
| 2113 margin: 0; | |
| 2114 } | |
| 2115 | |
| 2116 /* social toolbar provider menu */ | |
| 2117 #social-statusarea-popup { | |
| 2118 margin-top: 0; | |
| 2119 margin-left: -12px; | |
| 2120 margin-right: -12px; | |
| 2121 } | |
| 2122 | |
| 2123 .social-statusarea-user { | |
| 2124 list-style-image:url("chrome://global/skin/icons/information-32.png"); | |
| 2125 } | |
| 2126 | |
| 2127 .social-statusarea-user-portrait { | |
| 2128 width: 32px; | |
| 2129 height: 32px; | |
| 2130 border-radius: 2px; | |
| 2131 margin: 10px; | |
| 2132 } | |
| 2133 | |
| 2134 .social-panel > .panel-arrowcontainer > .panel-arrowcontent { | |
| 2135 padding: 0; | |
| 2136 } | |
| 2137 | |
| 2138 %include ../shared/social/chat.inc.css | |
| 2139 | |
| 2140 .chat-titlebar { | |
| 2141 background-color: #d9d9d9; | |
| 2142 background-image: linear-gradient(@toolbarHighlight@, rgba(255,255,255,0)); | |
| 2143 } | |
| 2144 | |
| 2145 .chat-titlebar[selected] { | |
| 2146 background-color: #f0f0f0; | |
| 2147 } | |
| 2148 | |
| 2149 .chatbar-button { | |
| 2150 -moz-appearance: none; | |
| 2151 background-color: #d9d9d9; | |
| 2152 background-image: linear-gradient(@toolbarHighlight@, rgba(255,255,255,0)); | |
| 2153 } | |
| 2154 | |
| 2155 .chatbar-button > .toolbarbutton-icon { | |
| 2156 -moz-margin-end: 0; | |
| 2157 } | |
| 2158 | |
| 2159 .chatbar-button:hover, | |
| 2160 .chatbar-button[open="true"] { | |
| 2161 background-color: #f0f0f0; | |
| 2162 } | |
| 2163 | |
| 2164 .chatbar-button[activity] { | |
| 2165 background-image: radial-gradient(circle farthest-corner at center 3px, rgb(233,242,252) 3%, rgba(172,206,255,0.75) 40%, rgba(87,151,201,0.5) 80%, rgba(87,151,201,0)); | |
| 2166 } | |
| 2167 | |
| 2168 chatbox { | |
| 2169 border-top-left-radius: 2.5px; | |
| 2170 border-top-right-radius: 2.5px; | |
| 2171 } | |
| 2172 | |
| 2173 /* Customization mode */ | |
| 2174 | |
| 2175 %include ../shared/customizableui/customizeMode.inc.css | |
| 2176 | |
| 2177 #main-window[customizing] > #tab-view-deck { | |
| 2178 background: linear-gradient(to bottom, #bcbcbc, #b5b5b5); | |
| 2179 } | |
| 2180 | |
| 2181 #main-window[customize-entered] > #tab-view-deck { | |
| 2182 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"), | |
| 2183 url("chrome://browser/skin/customizableui/background-noise-toolbar.png"), | |
| 2184 linear-gradient(to bottom, #bcbcbc, #b5b5b5); | |
| 2185 background-attachment: fixed; | |
| 2186 } | |
| 2187 | |
| 2188 #main-window[customize-entered] #browser-bottombox, | |
| 2189 #main-window[customize-entered] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar), | |
| 2190 #main-window[customize-entered] #customization-container { | |
| 2191 border: 3px solid hsla(0,0%,0%,.1); | |
| 2192 border-top-width: 0; | |
| 2193 background-clip: padding-box; | |
| 2194 background-origin: padding-box; | |
| 2195 -moz-border-right-colors: hsla(0,0%,0%,.05) hsla(0,0%,0%,.1) hsla(0,0%,0%,.2); | |
| 2196 -moz-border-bottom-colors: hsla(0,0%,0%,.05) hsla(0,0%,0%,.1) hsla(0,0%,0%,.2); | |
| 2197 -moz-border-left-colors: hsla(0,0%,0%,.05) hsla(0,0%,0%,.1) hsla(0,0%,0%,.2); | |
| 2198 } | |
| 2199 | |
| 2200 #main-window[customize-entered] #customization-container, | |
| 2201 #main-window[customize-entered] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) { | |
| 2202 border-bottom-width: 0; | |
| 2203 } | |
| 2204 | |
| 2205 #main-window[customize-entered] #TabsToolbar { | |
| 2206 -moz-appearance: none; | |
| 2207 background-clip: padding-box; | |
| 2208 border-right: 3px solid transparent; | |
| 2209 border-left: 3px solid transparent; | |
| 2210 } | |
| 2211 | |
| 2212 /* The :hover:active style from toolkit doesn't seem to work in this panel so just use :active. */ | |
| 2213 .customization-tipPanel-closeBox > .close-icon:active { | |
| 2214 background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 48, 16, 32); | |
| 2215 } | |
| 2216 | |
| 2217 /* End customization mode */ | |
| 2218 | |
| 2219 | |
| 2220 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator { | |
| 2221 background: url("chrome://browser/skin/privatebrowsing-mask.png") center no-repeat; | |
| 2222 width: 40px; | |
| 2223 } | |
| 2224 | |
| 2225 %include ../shared/UITour.inc.css | |
| 2226 | |
| 2227 #UITourHighlight { | |
| 2228 /* Below are some fixes for people without an X compositor on Linux. | |
| 2229 This is why we can't have nice things: */ | |
| 2230 /* Animations don't repaint properly without an X compositor. */ | |
| 2231 animation-name: none !important; | |
| 2232 /* Opacity rounds to 0 or 1 on Linux without an X compositor so make the | |
| 2233 background be transparent in that case by having all alpha values < 0.5 */ | |
| 2234 background-image: radial-gradient(50% 100%, rgba(0,149,220,0.3) 50%, rgba(0,149,220,0.49) 100%); | |
| 2235 /* The highlight isn't anti-aliased without an X compositor so make it thicker. | |
| 2236 Make it a darker color since we don't have the box-shadow in this case. */ | |
| 2237 border: 4px solid rgb(0,149,220); | |
| 2238 } | |
| 2239 | |
| 2240 #UITourTooltipDescription { | |
| 2241 font-size: 1.05rem; | |
| 2242 } | |
| 2243 | |
| 2244 #UITourTooltipClose { | |
| 2245 -moz-margin-end: -4px; | |
| 2246 height: 16px; | |
| 2247 width: 16px; | |
| 2248 } | |
| 2249 | |
| 2250 #UITourTooltipButtons { | |
| 2251 margin-bottom: -10px; | |
| 2252 } |
