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