first part of syncing LCARStrek with Firefox 35 windows theme changes
[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
a7145e95 383input.name::-moz-placeholder {
9e47e601
RK
384 font-style: italic !important;
385 color: transparent;
03ef9d8e 386 background-image: url("chrome://browser/skin/tabview/edit-light.png");
9e47e601 387 background-repeat: no-repeat;
9e47e601
RK
388}
389
a7145e95 390.title-container:hover input.name::-moz-placeholder {
9e47e601 391 color: #E7ADE7;
56ab361a
RK
392 background-image: none;
393}
394
395input.name:focus::-moz-placeholder {
396 background-image: none;
9e47e601
RK
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;
9e47e601 407 height: 100%;
8ad8bf83 408 width: -moz-available;
9e47e601
RK
409 cursor: text;
410}
411
c29b709d 412.title-shield:-moz-dir(rtl) {
9e47e601
RK
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;
03ef9d8e 424 background-image: -moz-image-rect(url("chrome://browser/skin/tabview/stack-expander.png"), 0, 48, 24, 24);
9e47e601
RK
425 width: 24px;
426 height: 24px;
427}
428
429.stackExpander:hover {
03ef9d8e 430 background-image: -moz-image-rect(url("chrome://browser/skin/tabview/stack-expander.png"), 0, 24, 24, 0);
9e47e601
RK
431}
432
433/* Resizable
434----------------------------------*/
435.resizer {
03ef9d8e 436 background-image: url("chrome://global/skin/icons/resizer.png");
9e47e601
RK
437 width: 16px;
438 height: 16px;
439 bottom: 0px;
440 right: 0px;
441 opacity: .2;
442}
443
c29b709d 444.resizer:-moz-dir(rtl) {
9e47e601
RK
445 right: auto;
446 left: 0;
71a617ff 447 transform: scaleX(-1);
9e47e601
RK
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
c29b709d 464.iq-resizable-se:-moz-dir(rtl) {
9e47e601
RK
465 cursor: sw-resize;
466 right: auto;
467 left: 1px;
468}
469
470/* Exit button
471+----------------------------------*/
472#exit-button {
03ef9d8e
RK
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);
9e47e601
RK
479 background-attachment: scroll;
480 background-repeat: no-repeat;
03ef9d8e 481 background-position: center center;
9e47e601 482 border: none;
03ef9d8e 483 border-radius: 3px;
9e47e601
RK
484}
485
486#exit-button[groups="0"] {
03ef9d8e 487 background-image: -moz-image-rect(url("chrome://browser/skin/tabview/tabview.png"), 0, 18, 18, 0);
9e47e601
RK
488}
489
490#exit-button[groups="1"] {
03ef9d8e 491 background-image: -moz-image-rect(url("chrome://browser/skin/tabview/tabview.png"), 0, 36, 18, 18);
9e47e601
RK
492}
493
494#exit-button[groups="2"] {
03ef9d8e 495 background-image: -moz-image-rect(url("chrome://browser/skin/tabview/tabview.png"), 0, 54, 18, 36);
9e47e601
RK
496}
497
498#exit-button[groups="3"] {
03ef9d8e
RK
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;
9e47e601
RK
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;
c29b709d
RK
521 max-width: -moz-available;
522 -moz-margin-start: 20px;
9e47e601
RK
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{
03ef9d8e
RK
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;
9e47e601 550 border: none;
03ef9d8e
RK
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);
9e47e601
RK
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
c29b709d 575#otherresults:-moz-dir(rtl) {
9e47e601
RK
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;
4c765db1
RK
607 width: 16px;
608 height: 16px;
9e47e601
RK
609}
610
611.inlineMatch > span {
612 max-width: 200px;
613 height: 15px;
614}