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   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
  48 html[dir=ltr] .favicon {
  49   border-bottom-right-radius: 0.4em;
  50 }
  51
  52 html[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
  78 html[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
  95 html[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
 214 html[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;
 254   width: 150px;
 255   height: 30px;
 256   line-height: 30px;
 257   box-shadow: 0px 1px 0px #9F9FCC, 0px -1px 0px #008484;
 258   color: #FFCF00;
 259   border-radius: 0.4em;
 260   text-align: center;
 261   border: none;
 262   cursor: pointer;
 263 }
 264
 265 .undo:hover {
 266   background-color: #FFCF00;
 267   color: #000000;
 268 }
 269
 270 .undo .close {
 271   top: 4px;
 272   left: 4px;
 273   opacity: 0.5;
 274 }
 275
 276 html[dir=rtl] .undo .close {
 277   left: auto;
 278   right: 4px;
 279 }
 280
 281 .undo .close:hover{
 282   opacity: 1.0;
 283 }
 284
 285 /* InfoItems
 286 ----------------------------------*/
 287
 288 .info-item {
 289   cursor: move;
 290   border: 1px solid #9C9CFF;
 291   background-color: #000000;
 292   border-radius: 0.4em;
 293 }
 294
 295 .intro {
 296   margin: 10px;
 297 }
 298
 299 /* Trenches
 300 ----------------------------------*/
 301
 302 .guideTrench {
 303   opacity: 0.9;
 304   border: 1px dashed rgba(156,156,255,.12);
 305   border-bottom: none;
 306   -moz-border-end: none;
 307   box-shadow: 1px 1px 0 rgba(0,132,132,.15);
 308 }
 309
 310 html[dir=rtl] .guideTrench {
 311   box-shadow: -1px 1px 0 rgba(0,132,132,.15);
 312 }
 313
 314 .visibleTrench {
 315   opacity: 0.05;
 316 }
 317
 318 .activeVisibleTrench {
 319   opacity: 0;
 320 }
 321
 322 .activeVisibleTrench.activeTrench {
 323   opacity: 0.45;
 324 }
 325
 326 .visibleTrench.border,
 327 .activeVisibleTrench.border {
 328   background-color: #E7ADE7;
 329 }
 330
 331 .visibleTrench.guide,
 332 .activeVisibleTrench.guide {
 333   background-color: #9C9CFF;
 334 }
 335
 336 /* Other
 337 ----------------------------------*/
 338
 339 .newTabButton {
 340   width: 16px;
 341   height: 15px;
 342   bottom: 10px;
 343   left: 10px;
 344   cursor: pointer;
 345   opacity: .3;
 346   background-image: url(chrome://browser/skin/tabview/new-tab.png);
 347 }
 348
 349 html[dir=rtl] .newTabButton {
 350   left: auto;
 351   right: 10px;
 352 }
 353
 354 .newTabButton:hover {
 355   opacity: 1;
 356 }
 357
 358 .active {
 359   box-shadow: 5px 5px 3px rgba(255,207,0,.5);
 360 }
 361
 362 html[dir=rtl] .active {
 363   box-shadow: -5px 5px 3px rgba(255,207,0,.5);
 364 }
 365
 366 .acceptsDrop {
 367   box-shadow: 2px 2px 7px -1px rgba(0,132,132,.6);
 368 }
 369
 370 html[dir=rtl] .acceptsDrop {
 371   box-shadow: -2px 2px 7px -1px rgba(0,132,132,.6);
 372 }
 373
 374 .titlebar {
 375   font-size: 12px;
 376   height: 18px;
 377 }
 378
 379 input.name {
 380   background: transparent;
 381   border: 1px solid transparent;
 382   color: #FF9F00;
 383   margin-top: 3px;
 384   -moz-margin-end: 0;
 385   margin-bottom: 0;
 386   -moz-margin-start: 3px;
 387   padding: 1px;
 388 }
 389
 390 html[dir=rtl] input.name {
 391   background-position: right top;
 392 }
 393
 394 .title-container:hover input.name,
 395 .title-container input.name:focus {
 396   border: 1px solid #008484;
 397 }
 398
 399 .title-container:hover input.name-locked {
 400   border: 1px solid transparent !important;
 401   cursor: default;
 402 }
 403
 404 input.name:focus {
 405   color: #FFCF00;
 406 }
 407
 408 input.name:-moz-placeholder {
 409   font-style: italic !important;
 410   color: transparent;
 411   background-image: url(chrome://browser/skin/tabview/edit-light.png);
 412   background-repeat: no-repeat;
 413   -moz-padding-start: 20px;
 414 }
 415
 416 .title-container:hover input.name:-moz-placeholder {
 417   color: #E7ADE7;
 418 }
 419
 420 .title-shield {
 421   margin-top: 3px;
 422   -moz-margin-end: 0;
 423   margin-bottom: 0;
 424   -moz-margin-start: 3px;
 425   padding: 1px;
 426   left: 0;
 427   top: 0;
 428   width: 100%;
 429   height: 100%;
 430   cursor: text;
 431 }
 432
 433 html[dir=rtl] .title-shield {
 434   left: auto;
 435   right: 0;
 436 }
 437
 438 .transparentBorder {
 439   border: 1px solid transparent !important;
 440 }
 441
 442 .stackExpander {
 443   cursor: pointer;
 444   bottom: 8px;
 445   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/stack-expander.png), 0, 48, 24, 24);
 446   width: 24px;
 447   height: 24px;
 448 }
 449
 450 .stackExpander:hover {
 451   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/stack-expander.png), 0, 24, 24, 0);
 452 }
 453
 454 /* Resizable
 455 ----------------------------------*/
 456 .resizer {
 457   background-image: url(chrome://global/skin/icons/resizer.png);
 458   width: 16px;
 459   height: 16px;
 460   bottom: 0px;
 461   right: 0px;
 462   opacity: .2;
 463 }
 464
 465 html[dir=rtl] .resizer {
 466   right: auto;
 467   left: 0;
 468   -moz-transform: scaleX(-1);
 469 }
 470
 471 .iq-resizable-handle {
 472   font-size: 0.1px;
 473 }
 474
 475 .iq-resizable-se {
 476   cursor: se-resize;
 477   width: 12px;
 478   height: 12px;
 479   padding-right: 3px;
 480   padding-bottom: 3px;
 481   right: -2px;
 482   bottom: -2px;
 483 }
 484
 485 html[dir=rtl] .iq-resizable-se {
 486   cursor: sw-resize;
 487   right: auto;
 488   left: 1px;
 489 }
 490
 491 /* Exit button
 492 +----------------------------------*/
 493 #exit-button {
 494   width: 18px;
 495   height: 18px;
 496   -moz-margin-end: 4px;
 497   margin-top: 2px;
 498   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 90, 18, 72);
 499   background-attachment: scroll;
 500   background-repeat: no-repeat;
 501   border: none;
 502 }
 503
 504 #exit-button[groups="0"] {
 505   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 18, 18, 0);
 506 }
 507
 508 #exit-button[groups="1"] {
 509   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 36, 18, 18);
 510 }
 511
 512 #exit-button[groups="2"] {
 513   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 54, 18, 36);
 514 }
 515
 516 #exit-button[groups="3"] {
 517   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 72, 18, 54);
 518 }
 519
 520 /* Search
 521 ----------------------------------*/
 522 #searchshade{
 523   background-color: rgba(231,174,231,.42);
 524   width: 100%;
 525   height: 100%;
 526 }
 527
 528 #search{
 529   width: 100%;
 530   height: 100%;
 531 }
 532
 533 #searchbox{
 534   width: 270px;
 535   height: 30px;
 536   color: #FF9F00;
 537   border: 2px solid #008484;
 538   background-color: #000000;
 539   border-radius: 0.4em;
 540   -moz-padding-start: 5px;
 541   -moz-padding-end: 5px;
 542   font-size: 14px;
 543 }
 544
 545 #actions{
 546   top: -3px;
 547   padding-top: 3px;
 548   width: 29px;
 549   border: none;
 550   text-align: center;
 551   background-color: #000000;
 552   border-radius: 0.4em;
 553   border: 1px solid #9C9CFF;
 554 }
 555
 556 #actions #searchbutton{
 557   background: transparent url(chrome://browser/skin/tabview/search.png) no-repeat;
 558   border: none;
 559   width: 20px;
 560   height: 20px;
 561   margin-top: 3px;
 562   -moz-margin-end: 1px;
 563 }
 564
 565 .notMainMatch{
 566   opacity: .70;
 567 }
 568
 569 #otherresults {
 570   left: 0px;
 571   bottom: 0px;
 572   width: 100%;
 573   height: 30px;
 574   background-color: rgba(0,132,132,.3);
 575   box-shadow: 0px -1px 0px rgba(255,207,0,.1), inset 0px 2px 5px rgba(255,207,0,.3);
 576 }
 577
 578 html[dir=rtl] #otherresults {
 579   left: auto;
 580   right: 0;
 581 }
 582
 583 #otherresults .label {
 584   color: #999;
 585   line-height: 30px;
 586   -moz-margin-start: 5px;
 587   -moz-margin-end: 5px;
 588 }
 589
 590 .inlineMatch {
 591   background-color: rgba(0,132,132,.5);
 592   border-radius: 0.4em;
 593   box-shadow: 0 1px 4px rgba(255,207,0, 0.6);
 594   border: 1px solid #008484;
 595   -moz-padding-start: 3px;
 596   -moz-padding-end: 3px;
 597   height: 20px;
 598   -moz-margin-end: 5px;
 599   cursor: pointer;
 600 }
 601
 602 .inlineMatch:hover {
 603   opacity: 1.0;
 604 }
 605
 606 .inlineMatch > img {
 607   -moz-margin-end: 5px;
 608   position: relative;
 609   top: 2px;
 610 }
 611
 612 .inlineMatch > span {
 613   max-width: 200px;
 614   height: 15px;
 615 }