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