browser/themes/windows/browser-aero.css@b8a032363ba2
browser/themes/windows/browser-aero.css
Thu, 22 Jan 2015 13:21:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 22 Jan 2015 13:21:57 +0100
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
- permissions
- -rw-r--r--
Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6
1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
5 %define WINDOWS_AERO
6 %include browser.css
7 %undef WINDOWS_AERO
9 %define glassActiveBorderColor rgb(37, 44, 51)
10 %define glassInactiveBorderColor rgb(102, 102, 102)
12 %include downloads/indicator-aero.css
14 @media not all and (-moz-windows-classic) {
15 #main-window[sizemode="normal"] > #tab-view-deck > #browser-panel > #navigator-toolbox > #toolbar-menubar {
16 margin-top: 1px;
17 }
19 .panel-promo-message {
20 font-style: italic;
21 }
22 }
24 @media (-moz-windows-default-theme) {
25 .sidebar-header,
26 #sidebar-header {
27 -moz-appearance: none;
28 color: black;
29 background-color: #EEF3FA;
30 border-bottom: none;
31 text-shadow: none;
32 }
34 .sidebar-title,
35 #sidebar-title {
36 font-weight: bold;
37 }
39 .sidebar-splitter {
40 border: 0;
41 -moz-border-end: 1px solid #A9B7C9;
42 min-width: 0;
43 width: 3px;
44 background-color: transparent;
45 -moz-margin-start: -3px;
46 position: relative;
47 }
49 #appcontent ~ .sidebar-splitter {
50 -moz-border-start: 1px solid #A9B7C9;
51 -moz-border-end: none;
52 -moz-margin-start: 0;
53 -moz-margin-end: -3px;
54 }
56 #urlbar:not(:-moz-lwtheme),
57 .searchbar-textbox:not(:-moz-lwtheme) {
58 border-color: hsla(210,54%,20%,.25) hsla(210,54%,20%,.27) hsla(210,54%,20%,.3);
59 box-shadow: 0 1px 0 hsla(0,0%,0%,.01) inset,
60 0 1px 0 hsla(0,0%,100%,.1);
61 }
63 #urlbar:not(:-moz-lwtheme)[focused],
64 .searchbar-textbox:not(:-moz-lwtheme)[focused] {
65 border-color: Highlight;
66 }
68 .menu-accel,
69 .menu-iconic-accel {
70 color: graytext;
71 }
73 .chatbar-button,
74 chatbar > chatbox {
75 border-color: #A9B7C9;
76 }
78 @media (-moz-os-version: windows-vista),
79 (-moz-os-version: windows-win7) {
80 #navigator-toolbox > toolbar:not(:-moz-lwtheme),
81 #browser-bottombox:not(:-moz-lwtheme),
82 .browserContainer > findbar {
83 background-color: @customToolbarColor@;
84 }
86 .tab-background-middle[selected=true]:not(:-moz-lwtheme) {
87 background-color: @customToolbarColor@;
88 }
90 #navigator-toolbox:not(:-moz-lwtheme)::after {
91 background-color: #aabccf;
92 }
94 #urlbar:not(:-moz-lwtheme):not([focused]):hover,
95 .searchbar-textbox:not(:-moz-lwtheme):not([focused]):hover {
96 border-color: hsla(210,54%,20%,.35) hsla(210,54%,20%,.37) hsla(210,54%,20%,.4);
97 }
99 #urlbar:not(:-moz-lwtheme)[focused],
100 .searchbar-textbox:not(:-moz-lwtheme)[focused] {
101 border-color: hsla(206,100%,60%,.65) hsla(206,100%,55%,.65) hsla(206,100%,50%,.65);
102 }
103 }
104 }
106 @media (-moz-windows-compositor) {
107 /* These should be hidden w/ glass enabled. Windows draws its own buttons. */
108 .titlebar-button {
109 display: none;
110 }
112 #main-window[sizemode="maximized"] #titlebar-buttonbox {
113 -moz-margin-end: 3px;
114 }
116 #main-window {
117 -moz-appearance: -moz-win-borderless-glass;
118 background: transparent;
119 }
121 #appcontent {
122 -moz-appearance: -moz-win-exclude-glass;
123 }
125 /* Artificially draw window borders that are covered by lwtheme, see bug 591930. */
126 #main-window[sizemode="normal"] > #titlebar > #titlebar-content:-moz-lwtheme {
127 border-top: 2px solid;
128 -moz-border-top-colors: @glassActiveBorderColor@ rgba(255,255,255,.6);
129 }
131 #main-window[sizemode="normal"] > #titlebar > #titlebar-content:-moz-lwtheme:-moz-window-inactive {
132 -moz-border-top-colors: @glassInactiveBorderColor@ rgba(255,255,255,.6);
133 }
135 #main-window[sizemode="normal"] #titlebar-buttonbox:-moz-lwtheme {
136 margin-top: -2px;
137 }
139 @media (-moz-windows-default-theme) {
140 #toolbar-menubar:not(:-moz-lwtheme),
141 #TabsToolbar:not(:-moz-lwtheme) {
142 background-color: transparent !important;
143 color: black;
144 }
146 #main-menubar > menu:not(:-moz-lwtheme) {
147 color: inherit;
148 }
150 /* Use a different color only on Windows 8 and higher for inactive windows.
151 * On aero, the menubar fog disappears for inactive windows, and renders gray
152 * illegible.
153 */
154 @media not all and (-moz-os-version: windows-vista) {
155 @media not all and (-moz-os-version: windows-win7) {
156 #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive {
157 color: ThreeDShadow;
158 }
159 }
160 }
161 }
163 #main-window[darkwindowframe="true"] #toolbar-menubar:not(:-moz-lwtheme):not(:-moz-window-inactive),
164 #main-window[darkwindowframe="true"] #TabsToolbar:not(:-moz-lwtheme):not(:-moz-window-inactive) {
165 color: white;
166 }
168 #toolbar-menubar:not(:-moz-lwtheme) {
169 text-shadow: 0 0 .5em white, 0 0 .5em white, 0 1px 0 rgba(255,255,255,.4);
170 }
172 /* Vertical toolbar border */
173 #main-window[sizemode=normal] #navigator-toolbox::after,
174 #main-window[sizemode=normal] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
175 border-left: 1px solid @toolbarShadowColor@;
176 border-right: 1px solid @toolbarShadowColor@;
177 background-clip: padding-box;
178 }
179 #main-window[sizemode=normal] #browser-border-start,
180 #main-window[sizemode=normal] #browser-border-end {
181 display: -moz-box;
182 background-color: @toolbarShadowColor@;
183 width: 1px;
184 }
185 #main-window[sizemode=normal] #browser-bottombox {
186 border: 1px solid @toolbarShadowColor@;
187 border-top-style: none;
188 background-clip: padding-box;
189 }
191 /* Toolbar shadow behind tabs */
192 #nav-bar {
193 border-top: 1px solid @toolbarShadowColor@ !important;
194 background-clip: padding-box;
195 }
197 /* This code is only needed for restored windows (i.e. sizemode=normal)
198 because of the border radius on the toolbar below the tab bar. */
199 #main-window[sizemode=normal] #nav-bar {
200 border-top: 1px solid @toolbarShadowColor@;
201 background-clip: padding-box;
202 }
204 /* Cover the top border of the adjacent toolbar */
205 #TabsToolbar {
206 margin-bottom: -1px;
207 }
209 #main-window[sizemode=normal] #TabsToolbar {
210 padding-left: 1px;
211 padding-right: 1px;
212 }
214 /* Make the window draggable by glassed toolbars (bug 555081) */
215 #toolbar-menubar:not([autohide="true"]),
216 #TabsToolbar,
217 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#addon-bar):-moz-lwtheme {
218 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag");
219 }
221 #appcontent:not(:-moz-lwtheme) {
222 background-color: -moz-dialog;
223 }
225 #main-menubar:not(:-moz-lwtheme):not(:-moz-window-inactive) {
226 background-color: rgba(255,255,255,.5);
227 color: black;
228 }
230 @media (-moz-os-version: windows-vista),
231 (-moz-os-version: windows-win7) {
232 #main-window[sizemode=normal] #nav-bar {
233 border-top-left-radius: 2.5px;
234 border-top-right-radius: 2.5px;
235 }
237 #main-menubar:not(:-moz-lwtheme):not(:-moz-window-inactive) {
238 border-radius: 4px;
239 }
240 }
242 #ctrlTab-panel {
243 background: transparent;
244 -moz-appearance: -moz-win-glass;
245 border-radius: 0;
246 border: none;
247 font: normal 1.2em "Segoe UI";
248 color: black;
249 text-shadow: white -1px -1px .35em, white -1px 1px .35em, white 1px 1px .35em, white 1px -1px .35em;
250 }
252 #tab-view:-moz-lwtheme {
253 background-image: url("chrome://browser/skin/tabview/grain.png"),
254 linear-gradient(rgba(255,255,255,0), #CCD9EA 200px, #C7D5E7);
255 background-attachment: fixed;
256 }
257 }
259 @media (-moz-windows-glass) {
260 #main-window[sizemode=fullscreen]:not(:-moz-lwtheme) {
261 -moz-appearance: none;
262 background-color: #556;
263 }
265 /* Glass Fog */
267 #TabsToolbar:not(:-moz-lwtheme) {
268 background-image: none;
269 position: relative;
270 }
272 #TabsToolbar:not(:-moz-lwtheme)::after {
273 /* Because we use placeholders for window controls etc. in the tabstrip,
274 * and position those with ordinal attributes, and because our layout code
275 * expects :before/:after nodes to come first/last in the frame list,
276 * we have to reorder this element to come last, hence the
277 * ordinal group value (see bug 853415). */
278 -moz-box-ordinal-group: 1001;
279 box-shadow: 0 0 30px 30px rgba(174,189,204,0.85);
280 content: "";
281 display: -moz-box;
282 height: 0;
283 margin: 0 60px; /* (30px + 30px) from box-shadow */
284 position: absolute;
285 pointer-events: none;
286 top: 50%;
287 width: -moz-available;
288 z-index: -1;
289 }
291 /* Need to constrain the glass fog to avoid overlapping layers, see bug 886281. */
292 #navigator-toolbox:not(:-moz-lwtheme) {
293 overflow: -moz-hidden-unscrollable;
294 }
296 #main-window[sizemode=normal] .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox:not(:-moz-lwtheme) {
297 position: relative;
298 }
300 /* End Glass Fog */
301 }
304 @media not all and (-moz-windows-compositor) {
305 @media (-moz-windows-default-theme) {
306 #main-window {
307 background-color: rgb(185,209,234);
308 }
309 #main-window:-moz-window-inactive {
310 background-color: rgb(215,228,242);
311 }
313 #toolbar-menubar:not([autohide=true]):not(:-moz-lwtheme),
314 #TabsToolbar:not(:-moz-lwtheme) {
315 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag");
316 background-color: transparent;
317 }
318 #toolbar-menubar[autohide=true] {
319 background-color: transparent !important;
320 }
322 /* Render a window top border for lwthemes: */
323 #main-window[tabsintitlebar][sizemode="normal"] #titlebar-content:-moz-lwtheme {
324 background-image: linear-gradient(to bottom,
325 @glassActiveBorderColor@ 0, @glassActiveBorderColor@ 1px,
326 rgba(255,255,255,.6) 1px, rgba(255,255,255,.6) 2px, transparent 2px);
327 }
329 #main-window[tabsintitlebar][sizemode="normal"] #titlebar-content:-moz-lwtheme:-moz-window-inactive {
330 background-image: linear-gradient(to bottom,
331 @glassInactiveBorderColor@ 0, @glassInactiveBorderColor@ 1px,
332 rgba(255,255,255,.6) 1px, rgba(255,255,255,.6) 2px, transparent 2px);
333 }
334 }
336 #print-preview-toolbar:not(:-moz-lwtheme) {
337 -moz-appearance: -moz-win-browsertabbar-toolbox;
338 }
339 }
341 /* Win8 and beyond. */
342 @media not all and (-moz-os-version: windows-vista) {
343 @media not all and (-moz-os-version: windows-win7) {
344 /* Introducing an additional hover state for the Bookmark button */
345 #nav-bar .toolbarbutton-1[buttonover] > .toolbarbutton-menubutton-button:hover > .toolbarbutton-icon {
346 background-color: hsla(210,4%,10%,.08);
347 border-color: hsla(210,4%,10%,.1);
348 }
349 }
350 }
352 /* ::::: fullscreen window controls ::::: */
354 #window-controls {
355 -moz-box-align: start;
356 }
358 #minimize-button,
359 #restore-button,
360 #close-button {
361 -moz-appearance: none;
362 border-style: none;
363 margin: 0;
364 }
365 #close-button {
366 -moz-image-region: rect(0, 49px, 16px, 32px);
367 }
368 #close-button:hover {
369 -moz-image-region: rect(16px, 49px, 32px, 32px);
370 }
371 #close-button:hover:active {
372 -moz-image-region: rect(32px, 49px, 48px, 32px);
373 }
375 #minimize-button:-moz-locale-dir(rtl),
376 #restore-button:-moz-locale-dir(rtl),
377 #close-button:-moz-locale-dir(rtl) {
378 transform: scaleX(-1);
379 }
381 /* ::::: private browsing indicator ::::: */
383 @media (-moz-os-version: windows-vista),
384 (-moz-os-version: windows-win7) {
385 #TabsToolbar > .private-browsing-indicator {
386 background-image: url("chrome://browser/skin/privatebrowsing-mask-tabstrip-XPVista7.png");
387 }
389 /* We're intentionally using the titlebar asset here for fullscreen mode.
390 * See bug 1008183.
391 */
392 #private-browsing-indicator-titlebar > .private-browsing-indicator,
393 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
394 background-image: url("chrome://browser/skin/privatebrowsing-mask-titlebar-XPVista7.png");
395 }
396 }
398 @media (-moz-windows-glass) {
399 #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator {
400 top: 1px;
401 }
402 #main-window[sizemode="maximized"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator {
403 top: -1px;
404 }
405 }
407 /**
408 * This next block targets Aero Basic, which has different positioning for the
409 * window caption buttons, and therefore needs to be special-cased.
410 */
411 @media (-moz-windows-default-theme) {
412 @media not all and (-moz-windows-compositor) {
413 #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator {
414 background-image: url("chrome://browser/skin/privatebrowsing-mask-titlebar-XPVista7-tall.png");
415 height: 28px;
416 }
417 }
418 }
