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