tweaks for making devtools look nicer
[themes.git] / LCARStrek / browser / tabview / tabview.css
1 body {
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   margin: 4px;
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;
23 }
24
25 .tab canvas,
26 .cached-thumb {
27   border: none;
28   border-radius: 3px;
29 }
30
31 .thumb {
32   background-color: white;
33   border-radius: 3px;
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
50 .favicon:-moz-dir(ltr) {
51   border-bottom-right-radius: 0.4em;
52 }
53
54 .favicon:-moz-dir(rtl) {
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);
73   background-repeat: no-repeat;
74   background-color: rgba(0, 0, 0, 0.35);
75   background-position: center center;
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
83 .close:-moz-dir(rtl) {
84   right: auto;
85   left: 6px;
86 }
87
88 .expander {
89   bottom: 6px;
90   right: 6px;
91   width: 16px;
92   height: 16px;
93   background: url("chrome://global/skin/icons/resizer.png") no-repeat;
94   transition-property: opacity;
95   transition-duration: 0.5s;
96   transition-timing-function: ease-out;
97   opacity: 0.2;
98 }
99
100 .expander:-moz-dir(rtl) {
101   right: auto;
102   left: 6px;
103   transform: scaleX(-1);
104 }
105
106 .expander:hover,
107 .appTabIcon:hover {
108   transition-property: opacity;
109   transition-duration: 0.5s;
110   transition-timing-function: ease-out;
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%;
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 {
144   background-color: #008484;
145   border-color: #008484;
146 }
147
148 .tab.focus > .favicon {
149   background-color: #008484;
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
174 .groupItem {
175   cursor: pointer;
176   background-color: #000000;
177   border-radius: 0.4em;
178   border: 1px solid #6080B5;
179 }
180
181 .groupItem.activeGroupItem {
182   background-color: rgba(0, 132, 132, 0.2);
183   border: 1px solid #008484;
184 }
185
186 .groupItem .close {
187   z-index: 10;
188   top: 3px;
189   right: 3px;
190   padding: 2px;
191 }
192
193 .groupItem .close:-moz-dir(rtl) {
194   right: auto;
195   left: 0px;
196   background-position: bottom right;
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
218 .appTabTrayContainer:-moz-dir(rtl) {
219   right: auto;
220   left: 1px;
221 }
222
223 .appTabTray {
224   display: inline-block;
225   -moz-column-width: 16px;
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;
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;
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 {
277   top: 7px;
278   right: 7px;
279   opacity: 0.5;
280 }
281
282 .undo .close:-moz-dir(rtl) {
283   right: auto;
284   left: 7px;
285 }
286
287 .undo .close:hover{
288   opacity: 1.0;
289 }
290
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
302 .guideTrench:-moz-dir(rtl) {
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
331 .active {
332   box-shadow: 5px 5px 3px rgba(255,207,0,.5);
333 }
334
335 .active:-moz-dir(rtl) {
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
343 .acceptsDrop:-moz-dir(rtl) {
344   box-shadow: -2px 2px 7px -1px rgba(0,132,132,.6);
345 }
346
347 .titlebar {
348   cursor: move;
349   font-size: 12px;
350   height: 18px;
351 }
352
353 input.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;
362   border-radius: 3px;
363 }
364
365 input.name:-moz-dir(rtl) {
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
379 input.name:focus {
380   color: #FFCF00;
381 }
382
383 input.name::-moz-placeholder {
384   font-style: italic !important;
385   color: transparent;
386   background-image: url("chrome://browser/skin/tabview/edit-light.png");
387   background-repeat: no-repeat;
388 }
389
390 .title-container:hover input.name::-moz-placeholder {
391   color: #E7ADE7;
392   background-image: none;
393 }
394
395 input.name:focus::-moz-placeholder {
396   background-image: none;
397 }
398
399 .title-shield {
400   margin-top: 3px;
401   -moz-margin-end: 0;
402   margin-bottom: 0;
403   -moz-margin-start: 3px;
404   padding: 1px;
405   left: 0;
406   top: 0;
407   height: 100%;
408   width: -moz-available;
409   cursor: text;
410 }
411
412 .title-shield:-moz-dir(rtl) {
413   left: auto;
414   right: 0;
415 }
416
417 .transparentBorder {
418   border: 1px solid transparent !important;
419 }
420
421 .stackExpander {
422   cursor: pointer;
423   bottom: 8px;
424   background-image: -moz-image-rect(url("chrome://browser/skin/tabview/stack-expander.png"), 0, 48, 24, 24);
425   width: 24px;
426   height: 24px;
427 }
428
429 .stackExpander:hover {
430   background-image: -moz-image-rect(url("chrome://browser/skin/tabview/stack-expander.png"), 0, 24, 24, 0);
431 }
432
433 /* Resizable
434 ----------------------------------*/
435 .resizer {
436   background-image: url("chrome://global/skin/icons/resizer.png");
437   width: 16px;
438   height: 16px;
439   bottom: 0px;
440   right: 0px;
441   opacity: .2;
442 }
443
444 .resizer:-moz-dir(rtl) {
445   right: auto;
446   left: 0;
447   transform: scaleX(-1);
448 }
449
450 .iq-resizable-handle {
451   font-size: 0.1px;
452 }
453
454 .iq-resizable-se {
455   cursor: se-resize;
456   width: 12px;
457   height: 12px;
458   padding-right: 3px;
459   padding-bottom: 3px;
460   right: -2px;
461   bottom: -2px;
462 }
463
464 .iq-resizable-se:-moz-dir(rtl) {
465   cursor: sw-resize;
466   right: auto;
467   left: 1px;
468 }
469
470 /* Exit button
471 +----------------------------------*/
472 #exit-button {
473   width: 24px;
474   height: 24px;
475   -moz-margin-end: 2px;
476   margin-bottom: 2px;
477   background-color: transparent;
478   background-image: -moz-image-rect(url("chrome://browser/skin/tabview/tabview.png"), 0, 90, 18, 72);
479   background-attachment: scroll;
480   background-repeat: no-repeat;
481   background-position: center center;
482   border: none;
483   border-radius: 3px;
484 }
485
486 #exit-button[groups="0"] {
487   background-image: -moz-image-rect(url("chrome://browser/skin/tabview/tabview.png"), 0, 18, 18, 0);
488 }
489
490 #exit-button[groups="1"] {
491   background-image: -moz-image-rect(url("chrome://browser/skin/tabview/tabview.png"), 0, 36, 18, 18);
492 }
493
494 #exit-button[groups="2"] {
495   background-image: -moz-image-rect(url("chrome://browser/skin/tabview/tabview.png"), 0, 54, 18, 36);
496 }
497
498 #exit-button[groups="3"] {
499   background-image: -moz-image-rect(url("chrome://browser/skin/tabview/tabview.png"), 0, 72, 18, 54);
500 }
501
502 #exit-button:hover {
503   background-color: #FFCF00;
504 }
505
506 /* Search
507 ----------------------------------*/
508 #searchshade{
509   background-color: rgba(231,174,231,.42);
510   width: 100%;
511   height: 100%;
512 }
513
514 #search{
515   width: 100%;
516   height: 100%;
517 }
518
519 #searchbox{
520   width: 270px;
521   max-width: -moz-available;
522   -moz-margin-start: 20px;
523   height: 30px;
524   color: #FF9F00;
525   border: 2px solid #008484;
526   background-color: #000000;
527   border-radius: 0.4em;
528   -moz-padding-start: 5px;
529   -moz-padding-end: 5px;
530   font-size: 14px;
531 }
532
533 #actions{
534   top: -3px;
535   padding-top: 3px;
536   width: 29px;
537   border: none;
538   text-align: center;
539   background-color: #000000;
540   border-radius: 0.4em;
541   border: 1px solid #9C9CFF;
542 }
543
544 #actions #searchbutton{
545   background-color: transparent;
546   background-image: -moz-image-rect(url("chrome://browser/skin/tabview/search.png"), 0, 20, 20, 0);
547   background-repeat: no-repeat;
548   background-position: center center;
549   border-radius: 3px;
550   border: none;
551   width: 24px;
552   height: 24px;
553   -moz-margin-end: 2px;
554   margin-bottom: 2px;
555 }
556
557 #actions #searchbutton:hover{
558   background-color: #FFCF00;
559   background-image: -moz-image-rect(url("chrome://browser/skin/tabview/search.png"), 0, 40, 20, 20);
560 }
561
562 .notMainMatch{
563   opacity: .70;
564 }
565
566 #otherresults {
567   left: 0px;
568   bottom: 0px;
569   width: 100%;
570   height: 30px;
571   background-color: rgba(0,132,132,.3);
572   box-shadow: 0px -1px 0px rgba(255,207,0,.1), inset 0px 2px 5px rgba(255,207,0,.3);
573 }
574
575 #otherresults:-moz-dir(rtl) {
576   left: auto;
577   right: 0;
578 }
579
580 #otherresults .label {
581   color: #999;
582   line-height: 30px;
583   -moz-margin-start: 5px;
584   -moz-margin-end: 5px;
585 }
586
587 .inlineMatch {
588   background-color: rgba(0,132,132,.5);
589   border-radius: 0.4em;
590   box-shadow: 0 1px 4px rgba(255,207,0, 0.6);
591   border: 1px solid #008484;
592   -moz-padding-start: 3px;
593   -moz-padding-end: 3px;
594   height: 20px;
595   -moz-margin-end: 5px;
596   cursor: pointer;
597 }
598
599 .inlineMatch:hover {
600   opacity: 1.0;
601 }
602
603 .inlineMatch > img {
604   -moz-margin-end: 5px;
605   position: relative;
606   top: 2px;
607   width: 16px;
608   height: 16px;
609 }
610
611 .inlineMatch > span {
612   max-width: 200px;
613   height: 15px;
614 }