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