browser/themes/linux/tabview/tabview.css@6474c204b198
browser/themes/linux/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 font: -moz-window;
7 color: WindowText;
8 font-size: 12px;
9 }
11 #bg {
12 background-color: window;
13 background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.2));
14 }
16 /* Tabs
17 ----------------------------------*/
19 .tab {
20 margin: 4px;
21 padding-top: 4px;
22 -moz-padding-end: 6px;
23 padding-bottom: 6px;
24 -moz-padding-start: 4px;
25 background-color: #D7D7D7;
26 border-radius: 0.4em;
27 cursor: pointer;
28 }
30 html[dir=rtl] .tab {
31 box-shadow: 0 1px 0 #FFFFFF inset,
32 0 -1px 1px rgba(255, 255, 255, 0.4) inset,
33 -1px 0 1px rgba(255, 255, 255, 0.4) inset,
34 1px 0 1px rgba(255, 255, 255, 0.4) inset,
35 0 1px 1.5px rgba(0, 0, 0, 0.4);
36 }
38 .tab canvas,
39 .cached-thumb {
40 border: 1px solid rgba(0,0,0,0.2);
41 }
43 .thumb {
44 box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.2);
45 background-color: white;
46 }
48 html[dir=rtl] .thumb {
49 box-shadow: -1px 2px 0 rgba(0, 0, 0, 0.2);
50 }
52 .favicon {
53 background-color: #D7D7D7;
54 box-shadow:
55 0 -1px 0 rgba(225, 225, 225, 0.8) inset,
56 -1px 0 0 rgba(225, 225, 225, 0.8) inset;
57 padding-top: 4px;
58 -moz-padding-end: 6px;
59 padding-bottom: 6px;
60 -moz-padding-start: 4px;
61 top: 4px;
62 left: 4px;
63 -moz-border-end: 1px solid rgba(0, 0, 0, 0.3);
64 border-bottom: 1px solid rgba(0, 0, 0, 0.3);
65 height: 16px;
66 width: 16px;
67 }
69 html[dir=ltr] .favicon {
70 border-bottom-right-radius: 0.4em;
71 }
73 html[dir=rtl] .favicon {
74 border-bottom-left-radius: 0.4em;
75 box-shadow:
76 0 -1px 0 rgba(225, 225, 225, 0.8) inset,
77 1px 0 0 rgba(225, 225, 225, 0.8) inset;
78 left: auto;
79 right: 2px;
80 }
82 .favicon img {
83 border: none;
84 width: 16px;
85 height: 16px;
86 }
88 .close {
89 top: 6px;
90 right: 6px;
91 width: 16px;
92 height: 16px;
93 opacity: 0.2;
94 background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 16, 16, 0);
95 background-position: center center;
96 background-repeat: no-repeat;
97 }
99 .close:hover {
100 background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 32, 16, 16);
101 }
103 .close:hover:active {
104 background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 48, 16, 32);
105 }
107 html[dir=rtl] .close {
108 right: auto;
109 left: 6px;
110 }
112 .close:hover,
113 .appTabIcon:hover {
114 opacity: 1.0;
115 }
117 .expander {
118 bottom: 8px;
119 right: 6px;
120 width: 16px;
121 height: 16px;
122 background: url(chrome://global/skin/icons/resizer.png) no-repeat;
123 opacity: 0.2;
124 }
126 html[dir=rtl] .expander {
127 right: auto;
128 left: 6px;
129 transform: scaleX(-1);
130 }
132 .expander:hover {
133 opacity: 1.0;
134 }
136 .close:hover,
137 .expander:hover,
138 .appTabIcon:hover {
139 transition-property: opacity;
140 transition-duration: 0.5s;
141 transition-timing-function: ease-out;
142 }
144 .favicon img:hover,
145 .close img:hover,
146 .expander img:hover {
147 opacity: 1;
148 border: none;
149 }
151 .tab-title {
152 top: 100%;
153 text-align: center;
154 width: 94.5%;
155 }
157 .stacked {
158 padding: 0;
159 }
161 .stacked .thumb {
162 box-shadow: rgba(0,0,0,.2) 1px 1px 4px;
163 }
165 html[dir=rtl] .stacked .thumb {
166 box-shadow: rgba(0,0,0,.2) -1px 1px 4px;
167 }
169 .stack-trayed .tab-title {
170 text-shadow: rgba(0,0,0,1) 1px 1px 1.5px;
171 color: #EEE;
172 font-size: 11px;
173 }
175 html[dir=rtl] .stack-trayed .tab-title {
176 text-shadow: rgba(0,0,0,1) -1px 1px 1.5px;
177 }
179 .stack-trayed .thumb {
180 box-shadow: none !important;
181 }
183 .tab.focus {
184 box-shadow: Highlight 0px 0px 5px 1px !important;
185 border: 1px solid Highlight;
186 }
188 /* Tab: Zooming
189 ----------------------------------*/
191 .front .tab-title,
192 .front .close,
193 .front .favicon,
194 .front .expander,
195 .front .thumb-shadow {
196 display: none;
197 }
199 .front .focus {
200 box-shadow: none !important;
201 }
203 /* Tab GroupItem
204 ----------------------------------*/
206 .groupItem {
207 cursor: pointer;
208 border: 1px solid rgba(230,230,230,1);
209 background-color: window;
210 background-image: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.1));
211 border-radius: 0.4em;
212 box-shadow:
213 inset rgba(255, 255, 255, 0.6) 0 0 0 2px,
214 rgba(0,0,0,0.2) 1px 1px 3px;
215 }
217 html[dir=rtl] .groupItem {
218 box-shadow:
219 inset rgba(255, 255, 255, 0.6) 0 0 0 2px,
220 rgba(0,0,0,0.2) -1px 1px 3px;
221 }
223 .groupItem.activeGroupItem {
224 box-shadow:
225 rgba(0,0,0,0.8) 2px 2px 8px;
226 }
228 html[dir=rtl] .groupItem.activeGroupItem {
229 box-shadow:
230 rgba(0,0,0,0.8) -2px 2px 8px;
231 }
233 .groupItem .close {
234 z-index: 10;
235 top: 0px;
236 right: 0px;
237 width: 22px;
238 height: 22px;
239 background-position: bottom left;
240 }
242 html[dir=rtl] .groupItem .close {
243 right: auto;
244 left: 0px;
245 background-position: bottom right;
246 }
248 .phantom {
249 border: 1px solid rgba(190,190,190,1);
250 }
252 .dragRegion {
253 background: rgba(248,248,248,0.4);
254 }
256 .overlay {
257 background-color: rgba(0,0,0,.7) !important;
258 box-shadow: 3px 3px 5.5px rgba(0,0,0,.5);
259 border-radius: 0.4em;
260 }
262 html[dir=rtl] .overlay {
263 box-shadow: -3px 3px 5.5px rgba(0,0,0,.5);
264 }
266 .appTabTrayContainer {
267 top: 34px;
268 right: 1px;
269 -moz-border-start: 1px solid #E1E1E1;
270 padding: 0 5px;
271 overflow: -moz-hidden-unscrollable;
272 text-align: start;
273 line-height: 0;
274 }
276 html[dir=rtl] .appTabTrayContainer {
277 right: auto;
278 left: 1px;
279 }
281 .appTabTray {
282 display: inline-block;
283 -moz-column-width: 16px;
284 -moz-column-gap: 5px;
285 }
287 .appTabTrayContainerTruncated {
288 padding-bottom: 7px;
289 }
291 .appTabTrayContainerTruncated:after {
292 content: "…";
293 position: absolute;
294 bottom: 2px;
295 left: 0;
296 display: block;
297 width: 100%;
298 height: 15px;
299 line-height: 15px;
300 text-align: center;
301 font-size: 15px;
302 }
304 .appTabIcon {
305 width: 16px;
306 height: 16px;
307 cursor: pointer;
308 opacity: 0.8;
309 padding-bottom: 3px;
310 display: block;
311 }
313 .undo {
314 background-color: rgba(0,0,0,.2);
315 padding-top: 3px;
316 padding-bottom: 3px;
317 -moz-padding-start: 5px;
318 -moz-padding-end: 20px;
319 width: 135px;
320 line-height: 25px;
321 box-shadow: 0 1px 0 rgba(255,255,255,.4), 0 1px 0 rgba(0,0,0,.3) inset;
322 text-shadow: 0 1px 0 rgba(255,255,255,.2);
323 color: WindowText;
324 border-radius: 0.4em;
325 text-align: center;
326 border: none;
327 cursor: pointer;
328 }
330 .undo:hover {
331 background-color: rgba(0,0,0,.3);
332 }
334 .undo .close {
335 top: 7px;
336 right: 7px;
337 opacity: 0.5;
338 }
340 html[dir=rtl] .undo .close {
341 right: auto;
342 left: 7px;
343 }
345 .undo .close:hover{
346 opacity: 1.0;
347 }
349 /* Trenches
350 ----------------------------------*/
352 .guideTrench {
353 opacity: 0.9;
354 border: 1px dashed rgba(0,0,0,.12);
355 border-bottom: none;
356 -moz-border-end: none;
357 box-shadow: 1px 1px 0 rgba(255,255,255,.15);
358 }
360 html[dir=rtl] .guideTrench {
361 box-shadow: 1px 1px 0 rgba(255,255,255,.15);
362 }
364 .visibleTrench {
365 opacity: 0.05;
366 }
368 .activeVisibleTrench {
369 opacity: 0;
370 }
372 .activeVisibleTrench.activeTrench {
373 opacity: 0.45;
374 }
376 .visibleTrench.border,
377 .activeVisibleTrench.border {
378 background-color: red;
379 }
381 .visibleTrench.guide,
382 .activeVisibleTrench.guide {
383 background-color: blue;
384 }
386 /* Other
387 ----------------------------------*/
389 .active {
390 box-shadow: 5px 5px 3px rgba(0,0,0,.5);
391 }
393 html[dir=rtl] .active {
394 box-shadow: -5px 5px 3px rgba(0,0,0,.5);
395 }
397 .acceptsDrop {
398 box-shadow: 2px 2px 7px -1px rgba(0,0,0,.6);
399 }
401 html[dir=rtl] .acceptsDrop {
402 box-shadow: -2px 2px 7px -1px rgba(0,0,0,.6);
403 }
405 .titlebar {
406 cursor: move;
407 font-size: 12px;
408 height: 18px;
409 }
411 input.name {
412 background: transparent;
413 border: 1px solid transparent;
414 color: GrayText;
415 margin-top: 3px;
416 -moz-margin-end: 0;
417 margin-bottom: 0;
418 -moz-margin-start: 3px;
419 padding: 1px;
420 }
422 html[dir=rtl] input.name {
423 background-position: right top;
424 }
426 .title-container:hover input.name,
427 .title-container input.name:focus {
428 border: 1px solid #ddd;
429 }
431 .title-container:hover input.name-locked {
432 border: 1px solid transparent !important;
433 cursor: default;
434 }
436 input.name:focus {
437 color: WindowText;
438 }
440 input.name::-moz-placeholder {
441 opacity: 1.0;
442 font-style: italic !important;
443 color: transparent;
444 background-image: url(chrome://browser/skin/tabview/edit-light.png);
445 background-repeat: no-repeat;
446 }
448 .title-container:hover input.name::-moz-placeholder {
449 color: GrayText;
450 background-image: none;
451 }
453 input.name:focus::-moz-placeholder {
454 background-image: none;
455 }
457 .title-shield {
458 margin-top: 3px;
459 -moz-margin-end: 0;
460 margin-bottom: 0;
461 -moz-margin-start: 3px;
462 padding: 1px;
463 left: 0;
464 top: 0;
465 height: 100%;
466 width: -moz-available;
467 cursor: text;
468 }
470 html[dir=rtl] .title-shield {
471 left: auto;
472 right: 0;
473 }
475 .transparentBorder {
476 border: 1px solid transparent !important;
477 }
479 .stackExpander {
480 cursor: pointer;
481 bottom: 8px;
482 background-image: -moz-image-rect(url(chrome://browser/skin/tabview/stack-expander.png), 0, 48, 24, 24);
483 width: 24px;
484 height: 24px;
485 }
487 .stackExpander:hover {
488 background-image: -moz-image-rect(url(chrome://browser/skin/tabview/stack-expander.png), 0, 24, 24, 0);
489 }
491 /* Resizable
492 ----------------------------------*/
493 .resizer {
494 background-image: url(chrome://global/skin/icons/resizer.png);
495 width: 16px;
496 height: 16px;
497 bottom: 0px;
498 right: 0px;
499 opacity: .2;
500 }
502 html[dir=rtl] .resizer {
503 right: auto;
504 left: 0;
505 transform: scaleX(-1);
506 }
508 .iq-resizable-handle {
509 font-size: 0.1px;
510 }
512 .iq-resizable-se {
513 cursor: se-resize;
514 width: 12px;
515 height: 12px;
516 padding-right: 3px;
517 padding-bottom: 3px;
518 right: -2px;
519 bottom: -2px;
520 }
522 html[dir=rtl] .iq-resizable-se {
523 cursor: sw-resize;
524 right: auto;
525 left: 1px;
526 }
528 /* Exit button
529 +----------------------------------*/
530 #exit-button {
531 width: 16px;
532 height: 16px;
533 -moz-margin-end: 8px;
534 margin-top: 5px;
535 background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 80, 16, 64);
536 background-attachment: scroll;
537 background-repeat: no-repeat;
538 border: none;
539 }
541 #exit-button[groups="0"] {
542 background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 16, 16, 0);
543 }
545 #exit-button[groups="1"] {
546 background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 32, 16, 16);
547 }
549 #exit-button[groups="2"] {
550 background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 48, 16, 32);
551 }
553 #exit-button[groups="3"] {
554 background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 64, 16, 48);
555 }
557 /* Search
558 ----------------------------------*/
559 #searchshade{
560 background-color: rgba(0,0,0,.42);
561 width: 100%;
562 height: 100%;
563 }
565 #search{
566 width: 100%;
567 height: 100%;
568 }
570 #searchbox{
571 width: 270px;
572 max-width: -moz-available;
573 -moz-margin-start: 20px;
574 height: 30px;
575 box-shadow: 0px 1px 0px rgba(255,255,255,.5), 0px -1px 0px rgba(0,0,0,1), 0px 0px 9px rgba(0,0,0,.8);
576 color: white;
577 border: none;
578 background-color: #272727;
579 border-radius: 0.4em;
580 -moz-padding-start: 5px;
581 -moz-padding-end: 5px;
582 font-size: 14px;
583 }
585 #actions{
586 top: -3px;
587 padding-top: 3px;
588 width: 29px;
589 text-align: center;
590 border: 1px solid rgba(230,230,230,1);
591 background-color: rgba(248,248,248,1);
592 border-radius: 0.4em;
593 box-shadow:
594 inset rgba(255, 255, 255, 0.6) 0 0 0 2px,
595 rgba(0,0,0,0.2) 1px 1px 3px;
596 }
598 html[dir=rtl] #actions {
599 box-shadow:
600 inset rgba(255, 255, 255, 0.6) 0 0 0 2px,
601 rgba(0,0,0,0.2) -1px 1px 3px;
602 }
604 #actions #searchbutton{
605 background: transparent url(chrome://browser/skin/tabview/search.png) no-repeat;
606 border: none;
607 width: 20px;
608 height: 20px;
609 margin-top: 3px;
610 -moz-margin-end: 1px;
611 }
613 .notMainMatch{
614 opacity: .70;
615 }
617 #otherresults {
618 left: 0px;
619 bottom: 0px;
620 width: 100%;
621 height: 30px;
622 background-color: rgba(0,0,0,.3);
623 box-shadow: 0px -1px 0px rgba(255,255,255,.1), inset 0px 2px 5px rgba(0,0,0,.3);
624 }
626 html[dir=rtl] #otherresults {
627 left: auto;
628 right: 0;
629 }
631 #otherresults .label {
632 color: #999;
633 line-height: 30px;
634 -moz-margin-start: 5px;
635 -moz-margin-end: 5px;
636 }
638 .inlineMatch {
639 background-color: #EBEBEB;
640 border-radius: 0.4em;
641 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
642 border: 1px solid rgba(255, 255, 255, 0.5);
643 -moz-padding-start: 3px;
644 -moz-padding-end: 3px;
645 height: 20px;
646 -moz-margin-end: 5px;
647 cursor: pointer;
648 }
650 .inlineMatch:hover {
651 opacity: 1.0;
652 }
654 .inlineMatch > img {
655 -moz-margin-end: 5px;
656 position: relative;
657 top: 2px;
658 width: 16px;
659 height: 16px;
660 }
662 .inlineMatch > span {
663 max-width: 200px;
664 height: 15px;
665 }
