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