The Tor Browser / file comparison

comparison: browser/themes/windows/tabview/tabview.css

browser/themes/windows/tabview/tabview.css

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

Mercurial Repository: The Tor Browser

Europalab SCM Repository Server

mercurial