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