browser/themes/osx/tabview/tabview.css@6474c204b198
browser/themes/osx/tabview/tabview.css
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
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 body {
6 background-color: transparent;
7 font: message-box;
8 color: rgba(0, 0, 0, 0.6);
9 font-size: 12px;
10 }
12 #bg {
13 background: linear-gradient(#C4C4C4, #9E9E9E);
14 }
16 #bg:-moz-window-inactive {
17 background: linear-gradient(#EDEDED, #D8D8D8);
18 }
20 /* Tabs
21 ----------------------------------*/
23 .tab {
24 margin: 8px;
25 padding-top: 4px;
26 -moz-padding-end: 6px;
27 padding-bottom: 6px;
28 -moz-padding-start: 4px;
29 background-color: rgb(240,240,240);
30 border-radius: 0.4em;
31 cursor: pointer;
32 }
34 .tab canvas,
35 .cached-thumb {
36 border: 1px solid rgba(0, 0, 0, 0.3);
37 }
39 .thumb {
40 box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.2);
41 background-color: white;
42 }
44 html[dir=rtl] .thumb {
45 box-shadow: -1px 2px 0 rgba(0, 0, 0, 0.2);
46 }
48 .favicon {
49 background-color: rgb(240,240,240);
50 box-shadow:
51 0 -1px 0 rgba(225, 225, 225, 0.8) inset,
52 -1px 0 0 rgba(225, 225, 225, 0.8) inset;
53 padding-top: 4px;
54 -moz-padding-end: 6px;
55 padding-bottom: 6px;
56 -moz-padding-start: 4px;
57 top: 4px;
58 left: 4px;
59 -moz-border-end: 1px solid rgba(0, 0, 0, 0.3);
60 border-bottom: 1px solid rgba(0, 0, 0, 0.3);
61 height: 16px;
62 width: 16px;
63 }
65 html[dir=ltr] .favicon {
66 border-bottom-right-radius: 0.4em;
67 }
69 html[dir=rtl] .favicon {
70 border-bottom-left-radius: 0.4em;
71 box-shadow:
72 0 -1px 0 rgba(225, 225, 225, 0.8) inset,
73 1px 0 0 rgba(225, 225, 225, 0.8) inset;
74 left: auto;
75 right: 2px;
76 }
78 .favicon img {
79 border: none;
80 width: 16px;
81 height: 16px;
82 }
84 .close {
85 top: 6px;
86 right: 6px;
87 width: 16px;
88 height: 16px;
89 background-image: -moz-image-rect(url(chrome://browser/skin/tabview/close.png), 0, 16, 16, 0);
90 background-repeat: no-repeat;
91 }
92 .close:hover {
93 background-image: -moz-image-rect(url(chrome://browser/skin/tabview/close.png), 0, 32, 16, 16);
94 }
95 .close:active {
96 background-image: -moz-image-rect(url(chrome://browser/skin/tabview/close.png), 0, 48, 16, 32);
97 }
99 html[dir=rtl] .close {
100 right: auto;
101 left: 6px;
102 }
104 .expander {
105 bottom: 8px;
106 right: 6px;
107 width: 16px;
108 height: 16px;
109 background: url(chrome://global/skin/icons/resizer.png) no-repeat;
110 transition-property: opacity;
111 transition-duration: 0.5s;
112 transition-timing-function: ease-out;
113 opacity: 0.2;
114 }
116 html[dir=rtl] .expander {
117 right: auto;
118 left: 6px;
119 transform: scaleX(-1);
120 }
122 .expander:hover,
123 .appTabIcon:hover {
124 transition-property: opacity;
125 transition-duration: 0.5s;
126 transition-timing-function: ease-out;
127 opacity: 1.0;
128 }
130 .favicon img:hover,
131 .expander img:hover {
132 opacity: 1;
133 border: none;
134 }
136 .tab-title {
137 bottom: -20px;
138 text-align: center;
139 width: 94.5%;
140 text-shadow: 0 1px rgba(255, 255, 255, 0.6);
141 }
143 .stacked {
144 padding: 0;
145 }
147 .stacked .thumb {
148 box-shadow: rgba(0,0,0,.2) 1px 1px 4px;
149 }
151 html[dir=rtl] .stacked .thumb {
152 box-shadow: rgba(0,0,0,.2) -1px 1px 4px;
153 }
155 .stack-trayed .tab-title {
156 text-shadow: rgba(0,0,0,1) 1px 1px 1.5px;
157 color: #EEE;
158 font-size: 11px;
159 }
161 html[dir=rtl] .stack-trayed .tab-title {
162 text-shadow: rgba(0,0,0,1) -1px 1px 1.5px;
163 }
165 .stack-trayed .thumb {
166 box-shadow: none !important;
167 }
169 .tab.focus {
170 box-shadow: 0 0 5.5px -moz-mac-menuselect/*#0060D6*/;
171 border: 1px solid rgba(255, 255, 255, 0.6);
172 }
174 /* Tab: Zooming
175 ----------------------------------*/
177 .front .tab-title,
178 .front .close,
179 .front .favicon,
180 .front .expander,
181 .front .thumb-shadow {
182 display: none;
183 }
185 .front .thumb {
186 box-shadow: none !important;
187 }
189 .front.focus {
190 box-shadow: none !important;
191 border: none !important;
192 }
194 /* Tab GroupItem
195 ----------------------------------*/
197 .groupItem {
198 cursor: pointer;
199 background-color: rgb(240,240,240);
200 border-radius: 0.4em;
201 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
202 border: 1px solid rgba(255, 255, 255, 0.5);
203 }
205 .groupItem.activeGroupItem {
206 box-shadow:
207 rgba(0,0,0,0.8) 2px 2px 8px;
208 }
210 html[dir=rtl] .groupItem.activeGroupItem {
211 box-shadow:
212 rgba(0,0,0,0.8) -2px 2px 8px;
213 }
215 .groupItem .close {
216 z-index: 10;
217 top: 0px;
218 right: 0px;
219 width: 22px;
220 height: 22px;
221 background-position: bottom left;
222 }
224 html[dir=rtl] .groupItem .close {
225 right: auto;
226 left: 0px;
227 background-position: bottom right;
228 }
230 .phantom {
231 border: 1px solid rgba(255, 255, 255, 0.5);
232 }
234 .dragRegion {
235 background: rgba(235, 235, 235, 0.4);
236 }
238 .overlay {
239 background-color: rgba(0,0,0,.7) !important;
240 box-shadow: 3px 3px 5.5px rgba(0,0,0,.5);
241 border-radius: 0.4em;
242 }
244 html[dir=rtl] .overlay {
245 box-shadow: -3px 3px 5.5px rgba(0,0,0,.5);
246 }
248 .appTabTrayContainer {
249 top: 34px;
250 right: 1px;
251 -moz-border-start: 1px solid #E1E1E1;
252 padding: 0 5px;
253 overflow: -moz-hidden-unscrollable;
254 text-align: start;
255 line-height: 0;
256 }
258 html[dir=rtl] .appTabTrayContainer {
259 right: auto;
260 left: 1px;
261 }
263 .appTabTray {
264 display: inline-block;
265 -moz-column-width: 16px;
266 -moz-column-gap: 5px;
267 }
269 .appTabTrayContainerTruncated {
270 padding-bottom: 7px;
271 }
273 .appTabTrayContainerTruncated:after {
274 content: "…";
275 position: absolute;
276 bottom: 2px;
277 left: 0;
278 display: block;
279 width: 100%;
280 height: 15px;
281 line-height: 15px;
282 text-align: center;
283 font-size: 15px;
284 }
286 .appTabIcon {
287 width: 16px;
288 height: 16px;
289 cursor: pointer;
290 opacity: 0.8;
291 padding-bottom: 3px;
292 display: block;
293 }
295 .undo {
296 background-color: #A0A0A0;
297 padding-top: 3px;
298 padding-bottom: 3px;
299 -moz-padding-start: 5px;
300 -moz-padding-end: 20px;
301 width: 135px;
302 line-height: 25px;
303 box-shadow: 0px 1px 0px rgba(255,255,255,.5), 0px -1px 0px rgba(0,0,0,.24);
304 text-shadow: 0px -1px 0px rgba(255,255,255,.2);
305 color: rgba( 0,0,0, .8);
306 border-radius: 0.4em;
307 text-align: center;
308 border: none;
309 cursor: pointer;
310 }
312 .undo:hover {
313 background-color: #949494;
314 }
316 .undo .close {
317 top: 7px;
318 right: 7px;
319 opacity: 0.5;
320 }
322 html[dir=rtl] .undo .close {
323 right: auto;
324 left: 7px;
325 }
327 .undo .close:hover{
328 opacity: 1.0;
329 }
331 /* Trenches
332 ----------------------------------*/
334 .guideTrench {
335 opacity: 0.9;
336 border: 1px dashed rgba(0,0,0,.12);
337 border-bottom: none;
338 -moz-border-end: none;
339 box-shadow: 1px 1px 0 rgba(255,255,255,.15);
340 }
342 html[dir=rtl] .guideTrench {
343 box-shadow: -1px 1px 0 rgba(255,255,255,.15);
344 }
346 .visibleTrench {
347 opacity: 0.05;
348 }
350 .activeVisibleTrench {
351 opacity: 0;
352 }
354 .activeVisibleTrench.activeTrench {
355 opacity: 0.45;
356 }
358 .visibleTrench.border,
359 .activeVisibleTrench.border {
360 background-color: red;
361 }
363 .visibleTrench.guide,
364 .activeVisibleTrench.guide {
365 background-color: blue;
366 }
368 /* Other
369 ----------------------------------*/
371 .active {
372 box-shadow: 5px 5px 3px rgba(0,0,0,.5);
373 }
375 html[dir=rtl] .active {
376 box-shadow: -5px 5px 3px rgba(0,0,0,.5);
377 }
379 .acceptsDrop {
380 box-shadow: 2px 2px 7px -1px rgba(0,0,0,.6);
381 }
383 html[dir=rtl] .acceptsDrop {
384 box-shadow: -2px 2px 7px -1px rgba(0,0,0,.6);
385 }
387 .titlebar {
388 cursor: move;
389 font-size: 12px;
390 height: 18px;
391 }
393 input.name {
394 background: transparent;
395 border: 1px solid transparent;
396 color: #999;
397 margin-top: 3px;
398 -moz-margin-end: 0;
399 margin-bottom: 0;
400 -moz-margin-start: 3px;
401 padding: 1px;
402 }
404 html[dir=rtl] input.name {
405 background-position: right top;
406 }
408 .title-container:hover input.name,
409 .title-container input.name:focus {
410 border: 1px solid #ddd;
411 }
413 .title-container:hover input.name-locked {
414 border: 1px solid transparent !important;
415 cursor: default;
416 }
418 input.name:focus {
419 color: #555;
420 }
422 input.name::-moz-placeholder {
423 opacity: 1.0;
424 font-style: italic !important;
425 color: transparent;
426 background-image: url(chrome://browser/skin/tabview/edit-light.png);
427 background-repeat: no-repeat;
428 }
430 .title-container:hover input.name::-moz-placeholder {
431 color: #CCC;
432 background-image: none;
433 }
435 input.name:focus::-moz-placeholder {
436 background-image: none;
437 }
439 .title-shield {
440 margin-top: 3px;
441 -moz-margin-end: 0;
442 margin-bottom: 0;
443 -moz-margin-start: 3px;
444 padding: 1px;
445 left: 0;
446 top: 0;
447 height: 100%;
448 width: -moz-available;
449 cursor: text;
450 }
452 html[dir=rtl] .title-shield {
453 left: auto;
454 right: 0;
455 }
457 .transparentBorder {
458 border: 1px solid transparent !important;
459 }
461 .stackExpander {
462 cursor: pointer;
463 bottom: 8px;
464 background-image: -moz-image-rect(url(chrome://browser/skin/tabview/stack-expander.png), 0, 48, 24, 24);
465 width: 24px;
466 height: 24px;
467 }
469 .stackExpander:hover {
470 background-image: -moz-image-rect(url(chrome://browser/skin/tabview/stack-expander.png), 0, 24, 24, 0);
471 }
473 /* Resizable
474 ----------------------------------*/
475 .resizer {
476 background-image: url(chrome://global/skin/icons/resizer.png);
477 width: 16px;
478 height: 16px;
479 bottom: 0px;
480 right: 0px;
481 opacity: .2;
482 }
484 html[dir=rtl] .resizer {
485 right: auto;
486 left: 0;
487 transform: scaleX(-1);
488 }
490 .iq-resizable-handle {
491 font-size: 0.1px;
492 }
494 .iq-resizable-se {
495 cursor: se-resize;
496 width: 12px;
497 height: 12px;
498 padding-right: 3px;
499 padding-bottom: 3px;
500 right: -2px;
501 bottom: -2px;
502 }
504 html[dir=rtl] .iq-resizable-se {
505 cursor: sw-resize;
506 right: auto;
507 left: 1px;
508 }
510 /* Exit button
511 +----------------------------------*/
512 #exit-button {
513 width: 20px;
514 height: 20px;
515 -moz-margin-end: 3px;
516 margin-top: 0px;
517 background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 100, 20, 80);
518 background-attachment: scroll;
519 background-repeat: no-repeat;
520 border: none;
521 }
523 #exit-button[groups="0"] {
524 background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 20, 20, 0);
525 }
527 #exit-button[groups="1"] {
528 background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 40, 20, 20);
529 }
531 #exit-button[groups="2"] {
532 background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 60, 20, 40);
533 }
535 #exit-button[groups="3"] {
536 background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 80, 20, 60);
537 }
539 /* Search
540 ----------------------------------*/
541 #searchshade{
542 background-color: rgba(0,0,0,.42);
543 width: 100%;
544 height: 100%;
545 }
547 #searchshade:-moz-window-inactive {
548 background: linear-gradient(rgba(237,237,237,0.42), rgba(216,216,216,0.42));
549 }
551 #search{
552 width: 100%;
553 height: 100%;
554 }
556 #searchbox {
557 width: 270px;
558 max-width: -moz-available;
559 -moz-margin-start: 20px;
560 height: 30px;
561 box-shadow: 0px 1px 0px rgba(255,255,255,.5), 0px -1px 0px rgba(0,0,0,1), 0px 0px 13px rgba(0,0,0,.8);
562 color: white;
563 border: none;
564 background-color: #272727;
565 border-radius: 0.4em;
566 -moz-padding-start: 5px;
567 -moz-padding-end: 5px;
568 font-size: 14px;
569 }
571 #searchbox:-moz-window-inactive {
572 background-color: #BBBBBB;
573 box-shadow: 0px 1px 0px rgba(255,255,255,.1), 0px -1px 0px rgba(0,0,0,0.3), 0px 0px 13px rgba(0,0,0,.2);
574 }
576 #actions {
577 width: 29px;
578 text-align: center;
579 background-color: #EBEBEB;
580 border-radius: 0.4em;
581 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
582 border: 1px solid rgba(255, 255, 255, 0.5);
583 }
585 #actions #searchbutton {
586 background: transparent url(chrome://browser/skin/tabview/search.png) no-repeat;
587 border: none;
588 width: 20px;
589 height: 20px;
590 margin-top: 3px;
591 -moz-margin-end: 1px;
592 }
594 .notMainMatch {
595 opacity: .70;
596 }
598 #otherresults {
599 left: 0px;
600 bottom: 0px;
601 width: 100%;
602 height: 30px;
603 background-color: rgba(0,0,0,.3);
604 box-shadow: 0 -1px 0 rgba(255,255,255,.1), inset 0 2px 5px rgba(0,0,0,.3);
605 }
607 html[dir=rtl] #otherresults {
608 left: auto;
609 right: 0px;
610 }
612 #otherresults .label {
613 color: #999;
614 line-height: 30px;
615 -moz-margin-start: 5px;
616 -moz-margin-end: 5px;
617 }
619 #otherresults .label:-moz-window-inactive {
620 color: #404040;
621 }
623 .inlineMatch {
624 background-color: #EBEBEB;
625 border-radius: 0.4em;
626 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
627 border: 1px solid rgba(255, 255, 255, 0.5);
628 -moz-padding-start: 3px;
629 -moz-padding-end: 3px;
630 height: 20px;
631 -moz-margin-end: 5px;
632 cursor: pointer;
633 }
635 .inlineMatch:hover {
636 opacity: 1.0;
637 }
639 .inlineMatch > img {
640 -moz-margin-end: 5px;
641 position: relative;
642 top: 2px;
643 width: 16px;
644 height: 16px;
645 }
647 .inlineMatch > span {
648 max-width: 200px;
649 height: 15px;
650 }
