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 }
  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 }
 121
 122 .stacked {
 123   padding: 0;
 124 }
 125
 126 .stacked .thumb {
 127 }
 128
 129 .stack-trayed .tab-title {
 130   color: #E7ADE7;
 131   font-size: 10px;
 132 }
 133
 134 .stack-trayed .thumb {
 135   box-shadow: none !important;
 136 }
 137
 138 .tab.focus {
 139   box-shadow:
 140     0 1px 0 #008484 inset,
 141     0 -1px 1px #008484 inset,
 142     1px 0 1px #008484 inset,
 143     -1px 0 1px #008484 inset,
 144     0 0 5.5px #008484;
 145 }
 146
 147 /* Tab: Zooming
 148 ----------------------------------*/
 149
 150 .front .tab-title,
 151 .front .close,
 152 .front .favicon,
 153 .front .expander,
 154 .front .thumb-shadow {
 155   display: none;
 156 }
 157
 158 .front .thumb {
 159   box-shadow: none !important;
 160 }
 161
 162 .front.focus {
 163   box-shadow: none !important;
 164 }
 165
 166 /* Tab GroupItem
 167 ----------------------------------*/
 168
 169 .groupItem {
 170   cursor: move;
 171   background-color: #000000;
 172   border-radius: 0.4em;
 173   border: 1px solid #6080B5;
 174 }
 175
 176 .groupItem.activeGroupItem {
 177   border: 1px solid #008484;
 178 }
 179
 180 .groupItem .close {
 181   z-index: 10;
 182 }
 183
 184 .dragRegion {
 185   background: #008484;
 186 }
 187
 188 .overlay {
 189   background-color: #6000CF !important;
 190   border-radius: 0.4em;
 191 }
 192
 193 .appTabTrayContainer {
 194   top: 34px;
 195   right: 1px;
 196   -moz-border-start: 1px solid #9C9CFF;
 197   padding: 0 5px;
 198   overflow-x: hidden;
 199   text-align: start;
 200   line-height: 0;
 201 }
 202
 203 html[dir=rtl] .appTabTrayContainer {
 204   right: auto;
 205   left: 1px;
 206 }
 207
 208 .appTabTray {
 209   display: inline-block;
 210   -moz-column-width: 16px;
 211   -moz-column-count: 0;
 212   -moz-column-gap: 5px;
 213 }
 214
 215 .appTabTrayContainerTruncated {
 216   padding-bottom: 7px;
 217 }
 218
 219 .appTabTrayContainerTruncated:after {
 220   content: "…";
 221   position: absolute;
 222   bottom: 2px;
 223   left: 0;
 224   display: block;
 225   width: 100%;
 226   height: 15px;
 227   line-height: 15px;
 228   text-align: center;
 229   font-size: 15px;
 230 }
 231
 232 .appTabIcon {
 233   width: 16px;
 234   height: 16px;
 235   cursor: pointer;
 236   opacity: 0.8;
 237   padding-bottom: 3px;
 238   display: block;
 239 }
 240
 241 .undo {
 242   background-color: #8050B0;
 243   padding-top: 3px;
 244   padding-bottom: 3px;
 245   -moz-padding-start: 5px;
 246   -moz-padding-end: 20px;
 247   width: 135px;
 248   line-height: 25px;
 249   box-shadow: 0px 1px 0px #9F9FCC, 0px -1px 0px #008484;
 250   color: #FFCF00;
 251   border-radius: 0.4em;
 252   text-align: center;
 253   border: none;
 254   cursor: pointer;
 255 }
 256
 257 .undo:hover {
 258   background-color: #FFCF00;
 259   color: #000000;
 260 }
 261
 262 .undo .close {
 263   top: 7px;
 264   right: 7px;
 265   opacity: 0.5;
 266 }
 267
 268 html[dir=rtl] .undo .close {
 269   right: auto;
 270   left: 7px;
 271 }
 272
 273 .undo .close:hover{
 274   opacity: 1.0;
 275 }
 276
 277 /* InfoItems
 278 ----------------------------------*/
 279
 280 .info-item {
 281   cursor: move;
 282   border: 1px solid #9C9CFF;
 283   background-color: #000000;
 284   border-radius: 0.4em;
 285 }
 286
 287 .intro {
 288   margin: 10px;
 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 html[dir=rtl] .guideTrench {
 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 .newTabButton {
 332   width: 16px;
 333   height: 15px;
 334   bottom: 10px;
 335   left: 10px;
 336   cursor: pointer;
 337   opacity: .3;
 338   background-image: url(chrome://browser/skin/tabview/new-tab.png);
 339 }
 340
 341 html[dir=rtl] .newTabButton {
 342   left: auto;
 343   right: 10px;
 344 }
 345
 346 .newTabButton:hover {
 347   opacity: 1;
 348 }
 349
 350 .active {
 351   box-shadow: 5px 5px 3px rgba(255,207,0,.5);
 352 }
 353
 354 html[dir=rtl] .active {
 355   box-shadow: -5px 5px 3px rgba(255,207,0,.5);
 356 }
 357
 358 .acceptsDrop {
 359   box-shadow: 2px 2px 7px -1px rgba(0,132,132,.6);
 360 }
 361
 362 html[dir=rtl] .acceptsDrop {
 363   box-shadow: -2px 2px 7px -1px rgba(0,132,132,.6);
 364 }
 365
 366 .titlebar {
 367   font-size: 12px;
 368   height: 18px;
 369 }
 370
 371 input.name {
 372   background: transparent;
 373   border: 1px solid transparent;
 374   color: #FF9F00;
 375   margin-top: 3px;
 376   -moz-margin-end: 0;
 377   margin-bottom: 0;
 378   -moz-margin-start: 3px;
 379   padding: 1px;
 380 }
 381
 382 html[dir=rtl] input.name {
 383   background-position: right top;
 384 }
 385
 386 .title-container:hover input.name,
 387 .title-container input.name:focus {
 388   border: 1px solid #008484;
 389 }
 390
 391 .title-container:hover input.name-locked {
 392   border: 1px solid transparent !important;
 393   cursor: default;
 394 }
 395
 396 input.name:focus {
 397   color: #FFCF00;
 398 }
 399
 400 input.name:-moz-placeholder {
 401   font-style: italic !important;
 402   color: transparent;
 403   background-image: url(chrome://browser/skin/tabview/edit-light.png);
 404   background-repeat: no-repeat;
 405   -moz-padding-start: 20px;
 406 }
 407
 408 .title-container:hover input.name:-moz-placeholder {
 409   color: #E7ADE7;
 410 }
 411
 412 .title-shield {
 413   margin-top: 3px;
 414   -moz-margin-end: 0;
 415   margin-bottom: 0;
 416   -moz-margin-start: 3px;
 417   padding: 1px;
 418   left: 0;
 419   top: 0;
 420   width: 100%;
 421   height: 100%;
 422   cursor: text;
 423 }
 424
 425 html[dir=rtl] .title-shield {
 426   left: auto;
 427   right: 0;
 428 }
 429
 430 .transparentBorder {
 431   border: 1px solid transparent !important;
 432 }
 433
 434 .stackExpander {
 435   cursor: pointer;
 436   bottom: 8px;
 437   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/stack-expander.png), 0, 48, 24, 24);
 438   width: 24px;
 439   height: 24px;
 440 }
 441
 442 .stackExpander:hover {
 443   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/stack-expander.png), 0, 24, 24, 0);
 444 }
 445
 446 /* Resizable
 447 ----------------------------------*/
 448 .resizer {
 449   background-image: url(chrome://global/skin/icons/resizer.png);
 450   width: 16px;
 451   height: 16px;
 452   bottom: 0px;
 453   right: 0px;
 454   opacity: .2;
 455 }
 456
 457 html[dir=rtl] .resizer {
 458   right: auto;
 459   left: 0;
 460   -moz-transform: scaleX(-1);
 461 }
 462
 463 .iq-resizable-handle {
 464   font-size: 0.1px;
 465 }
 466
 467 .iq-resizable-se {
 468   cursor: se-resize;
 469   width: 12px;
 470   height: 12px;
 471   padding-right: 3px;
 472   padding-bottom: 3px;
 473   right: -2px;
 474   bottom: -2px;
 475 }
 476
 477 html[dir=rtl] .iq-resizable-se {
 478   cursor: sw-resize;
 479   right: auto;
 480   left: 1px;
 481 }
 482
 483 /* Exit button
 484 +----------------------------------*/
 485 #exit-button {
 486   width: 18px;
 487   height: 18px;
 488   -moz-margin-end: 4px;
 489   margin-top: 2px;
 490   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 90, 18, 72);
 491   background-attachment: scroll;
 492   background-repeat: no-repeat;
 493   border: none;
 494 }
 495
 496 #exit-button[groups="0"] {
 497   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 18, 18, 0);
 498 }
 499
 500 #exit-button[groups="1"] {
 501   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 36, 18, 18);
 502 }
 503
 504 #exit-button[groups="2"] {
 505   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 54, 18, 36);
 506 }
 507
 508 #exit-button[groups="3"] {
 509   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 72, 18, 54);
 510 }
 511
 512 /* Search
 513 ----------------------------------*/
 514 #searchshade{
 515   background-color: rgba(231,174,231,.42);
 516   width: 100%;
 517   height: 100%;
 518 }
 519
 520 #search{
 521   width: 100%;
 522   height: 100%;
 523 }
 524
 525 #searchbox{
 526   width: 270px;
 527   height: 30px;
 528   color: #FF9F00;
 529   border: 2px solid #008484;
 530   background-color: #000000;
 531   border-radius: 0.4em;
 532   -moz-padding-start: 5px;
 533   -moz-padding-end: 5px;
 534   font-size: 14px;
 535 }
 536
 537 #actions{
 538   top: -3px;
 539   padding-top: 3px;
 540   width: 29px;
 541   border: none;
 542   text-align: center;
 543   background-color: #000000;
 544   border-radius: 0.4em;
 545   border: 1px solid #9C9CFF;
 546 }
 547
 548 #actions #searchbutton{
 549   background: transparent url(chrome://browser/skin/tabview/search.png) no-repeat;
 550   border: none;
 551   width: 20px;
 552   height: 20px;
 553   margin-top: 3px;
 554   -moz-margin-end: 1px;
 555 }
 556
 557 .notMainMatch{
 558   opacity: .70;
 559 }
 560
 561 #otherresults {
 562   left: 0px;
 563   bottom: 0px;
 564   width: 100%;
 565   height: 30px;
 566   background-color: rgba(0,132,132,.3);
 567   box-shadow: 0px -1px 0px rgba(255,207,0,.1), inset 0px 2px 5px rgba(255,207,0,.3);
 568 }
 569
 570 html[dir=rtl] #otherresults {
 571   left: auto;
 572   right: 0;
 573 }
 574
 575 #otherresults .label {
 576   color: #999;
 577   line-height: 30px;
 578   -moz-margin-start: 5px;
 579   -moz-margin-end: 5px;
 580 }
 581
 582 .inlineMatch {
 583   background-color: rgba(0,132,132,.5);
 584   border-radius: 0.4em;
 585   box-shadow: 0 1px 4px rgba(255,207,0, 0.6);
 586   border: 1px solid #008484;
 587   -moz-padding-start: 3px;
 588   -moz-padding-end: 3px;
 589   height: 20px;
 590   -moz-margin-end: 5px;
 591   cursor: pointer;
 592 }
 593
 594 .inlineMatch:hover {
 595   opacity: 1.0;
 596 }
 597
 598 .inlineMatch > img {
 599   -moz-margin-end: 5px;
 600   position: relative;
 601   top: 2px;
 602 }
 603
 604 .inlineMatch > span {
 605   max-width: 200px;
 606   height: 15px;
 607 }