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