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