The Tor Browser: browser/themes/windows/tabview/tabview.css@6474c204b198

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

     1 /* This Source Code Form is subject to the terms of the Mozilla Public

     2  * License, v. 2.0. If a copy of the MPL was not distributed with this

     3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

     5 body {

     6   font: message-box;

     7   color: rgba(0, 0, 0, 0.6);

     8   font-size: 13px;

9 }

    11 #bg:not(:-moz-system-metric(windows-compositor)) {

    12   background: url("chrome://browser/skin/tabview/grain.png") repeat scroll center top,

    13               linear-gradient(#CCD9EA, #C7D5E7) repeat scroll 0 0;

    14 }

    16 /* Tabs

    17 ----------------------------------*/

    19 .tab {

    20   margin: 4px;

    21   padding-top: 4px;

    22   -moz-padding-end: 6px;

    23   padding-bottom: 6px;

    24   -moz-padding-start: 4px;

    25   background-color: #E0EAF5;

    26   border-radius: 0.4em;

    27   cursor: pointer;

    28 }

    30 html[dir=rtl] .tab {

    31   box-shadow:

    32     0 1px 0 #FFFFFF inset,

    33     0 -1px 1px rgba(255, 255, 255, 0.8) inset,

    34     -1px 0 1px rgba(255, 255, 255, 0.8) inset,

    35     1px 0 1px rgba(255, 255, 255, 0.8) inset,

    36     0 1px 1.5px rgba(4, 38, 60, 0.4);

    37 }

    39 .tab canvas,

    40 .cached-thumb {

    41   border: 1px solid rgba(73, 99, 119, 0.3);

    42 }

    44 .thumb {

    45   box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.1);

    46   background-color: white;

    47 }

    49 html[dir=rtl] .thumb {

    50   box-shadow: -1px 2px 0 rgba(0, 0, 0, 0.1);

    51 }

    53 .favicon {

    54   background-color: #E0EAF5;

    55   padding-top: 4px;

    56   -moz-padding-end: 6px;

    57   padding-bottom: 6px;

    58   -moz-padding-start: 4px;

    59   top: 4px;

    60   left: 4px;

    61   -moz-border-end: 1px solid rgba(73, 99, 119, 0.3);

    62   border-bottom: 1px solid rgba(73, 99, 119, 0.3);

    63   height: 17px;

    64   width: 17px;

    65 }

    67 html[dir=ltr] .favicon {

    68   border-bottom-right-radius: 0.4em;

    69 }

    71 html[dir=rtl] .favicon {

    72   border-bottom-left-radius: 0.4em;

    73   left: auto;

    74   right: 2px;

    75 }

    77 .favicon img {

    78   border: none;

    79   width: 16px;

    80   height: 16px;

    81 }

    83 .close {

    84   top: 6px;

    85   right: 6px;

    86   width: 16px;

    87   height: 16px;

    88   background-image: -moz-image-rect(url("chrome://browser/skin/tabview/close.png"), 0, 16, 16, 0);

    89   background-repeat: no-repeat;

    90 }

    92 .close:hover {

    93   background-image: -moz-image-rect(url("chrome://browser/skin/tabview/close.png"), 0, 32, 16, 16);

    94 }

    96 .close:hover:active {

    97   background-image: -moz-image-rect(url("chrome://browser/skin/tabview/close.png"), 0, 48, 16, 32);

    98 }

   100 html[dir=rtl] .close {

   101   right: auto;

   102   left: 6px;

   103 }

   105 .expander {

   106   bottom: 6px;

   107   right: 6px;

   108   width: 16px;

   109   height: 16px;

   110   background: url(chrome://global/skin/icons/resizer.png) no-repeat;

   111   transition-property: opacity;

   112   transition-duration: 0.5s;

   113   transition-timing-function: ease-out;

   114   opacity: 0.2;

   115 }

   117 html[dir=rtl] .expander {

   118   right: auto;

   119   left: 6px;

   120   transform: scaleX(-1);

   121 }

   123 .expander:hover,

   124 .appTabIcon:hover {

   125   transition-property: opacity;

   126   transition-duration: 0.5s;

   127   transition-timing-function: ease-out;

   128   opacity: 1.0;

   129 }

   131 .favicon img:hover,

   132 .close img:hover,

   133 .expander img:hover {

   134   opacity: 1;

   135   border: none;

   136 }

   138 .tab-title {

   139   bottom: -20px;

   140   text-align: center;

   141   width: 94.5%;

   142   text-shadow: 0 1px rgba(255, 255, 255, 0.6);

   143 }

   145 .stacked {

   146   padding: 0;

   147 }

   149 .stacked .thumb {

   150   box-shadow: rgba(0,0,0,.2) 1px 1px 4px;

   151 }

   153 html[dir=rtl] .stacked .thumb {

   154   box-shadow: rgba(0,0,0,.2) -1px 1px 4px;

   155 }

   157 .stack-trayed .tab-title {

   158   text-shadow: rgba(0,0,0,1) 1px 1px 1.5px;

   159   color: #EEE;

   160   font-size: 11px;

   161 }

   163 html[dir=rtl] .stack-trayed .tab-title {

   164   text-shadow: rgba(0,0,0,1) -1px 1px 1.5px;

   165 }

   167 .stack-trayed .thumb {

   168   box-shadow: none !important;

   169 }

   171 .tab.focus {

   172   box-shadow:

   173     0 1px 0 #FFFFFF inset,

   174     0 -1px 1px #FFFFFF inset,

   175     1px 0 1px #FFFFFF inset,

   176     -1px 0 1px #FFFFFF inset,

   177     0 0 5.5px #007ECE;

   178 }

   180 html[dir=rtl] .tab.focus {

   181   box-shadow:

   182     0 1px 0 #FFFFFF inset,

   183     0 -1px 1px #FFFFFF inset,

   184     -1px 0 1px #FFFFFF inset,

   185     1px 0 1px #FFFFFF inset,

   186     0 0 5.5px #007ECE;

   187 }

   189 /* Tab: Zooming

   190 ----------------------------------*/

   192 .front .tab-title,

   193 .front .close,

   194 .front .favicon,

   195 .front .expander,

   196 .front .thumb-shadow {

   197   display: none;

   198 }

   200 .front .thumb {

   201   box-shadow: none !important;

   202 }

   204 .front.focus {

   205   box-shadow: none !important;

   206 }

   208 /* Tab GroupItem

   209 ----------------------------------*/

   211 .groupItem {

   212   cursor: pointer;

   213   background-color: #E0EAF5;

   214   border-radius: 0.4em;

   215   box-shadow:

   216     0 1px 0 #FFFFFF inset,

   217     0 -1px 1px rgba(255, 255, 255, 0.8) inset,

   218     1px 0 1px rgba(255, 255, 255, 0.8) inset,

   219     -1px 0 1px rgba(255, 255, 255, 0.8) inset,

   220     0 1px 3px rgba(4, 38, 60, 0.6);

   221 }

   223 html[dir=rtl] .groupItem {

   224   box-shadow:

   225     0 1px 0 #FFFFFF inset,

   226     0 -1px 1px rgba(255, 255, 255, 0.8) inset,

   227     -1px 0 1px rgba(255, 255, 255, 0.8) inset,

   228     1px 0 1px rgba(255, 255, 255, 0.8) inset,

   229     0 1px 3px rgba(4, 38, 60, 0.6);

   230 }

   232 .groupItem.activeGroupItem {

   233   box-shadow:

   234     rgba(0,0,0,0.8) 2px 2px 8px;

   235 }

   237 html[dir=rtl] .groupItem.activeGroupItem {

   238   box-shadow:

   239     rgba(0,0,0,0.8) -2px 2px 8px;

   240 }

   242 .groupItem .close {

   243   z-index: 10;

   244   top: 0px;

   245   right: 0px;

   246   width: 22px;

   247   height: 22px;

   248   background-position: bottom left;

   249 }

   251 html[dir=rtl] .groupItem .close {

   252   right: auto;

   253   left: 0px;

   254   background-position: bottom right;

   255 }

   257 .dragRegion {

   258   background: rgba(224, 234, 245, 0.4);

   259 }

   261 .overlay {

   262   background-color: rgba(0,0,0,.7) !important;

   263   box-shadow: 3px 3px 5.5px rgba(0,0,0,.5);

   264   border-radius: 0.4em;

   265 }

   267 html[dir=rtl] .overlay {

   268   box-shadow: -3px 3px 5.5px rgba(0,0,0,.5);

   269 }

   271 .appTabTrayContainer {

   272   top: 34px;

   273   right: 1px;

   274   -moz-border-start: 1px solid #E1E1E1;

   275   padding: 0 5px;

   276   overflow: -moz-hidden-unscrollable;

   277   text-align: start;

   278   line-height: 0;

   279 }

   281 html[dir=rtl] .appTabTrayContainer {

   282   right: auto;

   283   left: 1px;

   284 }

   286 .appTabTray {

   287   display: inline-block;

   288   -moz-column-width: 16px;

   289   -moz-column-gap: 5px;

   290 }

   292 .appTabTrayContainerTruncated {

   293   padding-bottom: 7px;

   294 }

   296 .appTabTrayContainerTruncated:after {

   297   content: "…";

   298   position: absolute;

   299   bottom: 2px;

   300   left: 0;

   301   display: block;

   302   width: 100%;

   303   height: 15px;

   304   line-height: 15px;

   305   text-align: center;

   306   font-size: 15px;

   307 }

   309 .appTabIcon {

   310   width: 16px;

   311   height: 16px;

   312   cursor: pointer;

   313   opacity: 0.8;

   314   padding-bottom: 3px;

   315   display: block;

   316 }

   318 .undo {

   319   background-color: #A0A0A0;

   320   padding-top: 3px;

   321   padding-bottom: 3px;

   322   -moz-padding-start: 5px;

   323   -moz-padding-end: 20px;

   324   width: 135px;

   325   line-height: 25px;

   326   box-shadow: 0px 1px 0px rgba(255,255,255,.5), 0px -1px 0px rgba(0,0,0,.24);

   327   text-shadow: 0px -1px 0px rgba(255,255,255,.2);

   328   color: rgba( 0,0,0, .8);

   329   border-radius: 0.4em;

   330   text-align: center;

   331   border: none;

   332   cursor: pointer;

   333 }

   335 .undo:hover {

   336   background-color: #949494;

   337 }

   339 .undo .close {

   340   top: 7px;

   341   right: 7px;

   342   opacity: 0.5;

   343 }

   345 html[dir=rtl] .undo .close {

   346   right: auto;

   347   left: 7px;

   348 }

   350 .undo .close:hover{

   351   opacity: 1.0;

   352 }

   354 /* Trenches

   355 ----------------------------------*/

   357 .guideTrench {

   358   opacity: 0.9;

   359   border: 1px dashed  rgba(0,0,0,.12);

   360   border-bottom: none;

   361   -moz-border-end: none;

   362   box-shadow: 1px 1px 0 rgba(255,255,255,.15);

   363 }

   365 html[dir=rtl] .guideTrench {

   366   box-shadow: -1px 1px 0 rgba(255,255,255,.15);

   367 }

   369 .visibleTrench {

   370   opacity: 0.05;

   371 }

   373 .activeVisibleTrench {

   374   opacity: 0;

   375 }

   377 .activeVisibleTrench.activeTrench {

   378   opacity: 0.45;

   379 }

   381 .visibleTrench.border,

   382 .activeVisibleTrench.border {

   383   background-color: red;

   384 }

   386 .visibleTrench.guide,

   387 .activeVisibleTrench.guide {

   388   background-color: blue;

   389 }

   391 /* Other

   392 ----------------------------------*/

   394 .active {

   395   box-shadow: 5px 5px 3px rgba(0,0,0,.5);

   396 }

   398 html[dir=rtl] .active {

   399   box-shadow: -5px 5px 3px rgba(0,0,0,.5);

   400 }

   402 .acceptsDrop {

   403   box-shadow: 2px 2px 7px -1px rgba(0,0,0,.6);

   404 }

   406 html[dir=rtl] .acceptsDrop {

   407   box-shadow: -2px 2px 7px -1px rgba(0,0,0,.6);

   408 }

   410 .titlebar {

   411   cursor: move;

   412   font-size: 12px;

   413   height: 18px;

   414 }

   416 input.name {

   417   background: transparent;

   418   border: 1px solid transparent;

   419   color: #999;

   420   margin-top: 3px;

   421   -moz-margin-end: 0;

   422   margin-bottom: 0;

   423   -moz-margin-start: 3px;

   424   padding: 1px;

   425 }

   427 html[dir=rtl] input.name {

   428   background-position: right top;

   429 }

   431 .title-container:hover input.name,

   432 .title-container input.name:focus {

   433   border: 1px solid #ddd;

   434 }

   436 .title-container:hover input.name-locked {

   437   border: 1px solid transparent !important;

   438   cursor: default;

   439 }

   441 input.name:focus {

   442   color: #555;

   443 }

   445 input.name::-moz-placeholder {

   446   opacity: 1.0;

   447   font-style: italic !important;

   448   color: transparent;

   449   background-image: url(chrome://browser/skin/tabview/edit-light.png);

   450   background-repeat: no-repeat;

   451 }

   453 .title-container:hover input.name::-moz-placeholder {

   454   color: #CCC;

   455   background-image: none;

   456 }

   458 input.name:focus::-moz-placeholder {

   459   background-image: none;

   460 }

   462 .title-shield {

   463   margin-top: 3px;

   464   -moz-margin-end: 0;

   465   margin-bottom: 0;

   466   -moz-margin-start: 3px;

   467   padding: 1px;

   468   left: 0;

   469   top: 0;

   470   height: 100%;

   471   width: -moz-available;

   472   cursor: text;

   473 }

   475 html[dir=rtl] .title-shield {

   476   left: auto;

   477   right: 0;

   478 }

   480 .transparentBorder {

   481   border: 1px solid transparent !important;

   482 }

   484 .stackExpander {

   485   cursor: pointer;

   486   bottom: 8px;

   487   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/stack-expander.png), 0, 48, 24, 24);

   488   width: 24px;

   489   height: 24px;

   490 }

   492 .stackExpander:hover {

   493   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/stack-expander.png), 0, 24, 24, 0);

   494 }

   496 /* Resizable

   497 ----------------------------------*/

   498 .resizer {

   499   background-image: url(chrome://global/skin/icons/resizer.png);

   500   width: 16px;

   501   height: 16px;

   502   bottom: 0px;

   503   right: 0px;

   504   opacity: .2;

   505 }

   507 html[dir=rtl] .resizer {

   508   right: auto;

   509   left: 0;

   510   transform: scaleX(-1);

   511 }

   513 .iq-resizable-handle {

   514   font-size: 0.1px;

   515 }

   517 .iq-resizable-se {

   518   cursor: se-resize;

   519   width: 12px;

   520   height: 12px;

   521   padding-right: 3px;

   522   padding-bottom: 3px;

   523   right: -2px;

   524   bottom: -2px;

   525 }

   527 html[dir=rtl] .iq-resizable-se {

   528   cursor: sw-resize;

   529   right: auto;

   530   left: 1px;

   531 }

   533 /* Exit button

   534 +----------------------------------*/

   535 #exit-button {

   536   width: 18px;

   537   height: 18px;

   538   -moz-margin-end: 4px;

   539   margin-top: 2px;

   540   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 90, 18, 72);

   541   background-attachment: scroll;

   542   background-repeat: no-repeat;

   543   border: none;

   544 }

   546 #exit-button[groups="0"] {

   547   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 18, 18, 0);

   548 }

   550 #exit-button[groups="1"] {

   551   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 36, 18, 18);

   552 }

   554 #exit-button[groups="2"] {

   555   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 54, 18, 36);

   556 }

   558 #exit-button[groups="3"] {

   559   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 72, 18, 54);

   560 }

   562 /* Search

   563 ----------------------------------*/

   564 #searchshade{

   565   background-color: rgba(0,0,0,.42);

   566   width: 100%;

   567   height: 100%;

   568 }

   570 #search{

   571   width: 100%;

   572   height: 100%;

   573 }

   575 #searchbox{

   576   width: 270px;

   577   max-width: -moz-available;

   578   -moz-margin-start: 20px;

   579   height: 30px;

   580   box-shadow: 0px 1px 0px rgba(255,255,255,.5), 0px -1px 0px rgba(0,0,0,1), 0px 0px 9px rgba(0,0,0,.8);

   581   color: white;

   582   border: none;

   583   background-color: #272727;

   584   border-radius: 0.4em;

   585   -moz-padding-start: 5px;

   586   -moz-padding-end: 5px;

   587   font-size: 14px;

   588 }

   590 #actions{

   591   top: -3px;

   592   padding-top: 3px;

   593   width: 29px;

   594   border: none;

   595   text-align: center;

   596   background-color: #E0EAF5;

   597   border-radius: 0.4em;

   598   box-shadow:

   599     0 1px 0 #FFFFFF inset,

   600     0 -1px 1px rgba(255, 255, 255, 0.8) inset,

   601     1px 0 1px rgba(255, 255, 255, 0.8) inset,

   602     -1px 0 1px rgba(255, 255, 255, 0.8) inset,

   603     0 1px 3px rgba(4, 38, 60, 0.6);

   604 }

   606 html[dir=rtl] #actions {

   607   box-shadow:

   608     0 1px 0 #FFFFFF inset,

   609     0 -1px 1px rgba(255, 255, 255, 0.8) inset,

   610     -1px 0 1px rgba(255, 255, 255, 0.8) inset,

   611     1px 0 1px rgba(255, 255, 255, 0.8) inset,

   612     0 1px 3px rgba(4, 38, 60, 0.6);

   613 }

   615 #actions #searchbutton{

   616   background: transparent url(chrome://browser/skin/tabview/search.png) no-repeat;

   617   border: none;

   618   width: 20px;

   619   height: 20px;

   620   margin-top: 3px;

   621   -moz-margin-end: 1px;

   622 }

   624 .notMainMatch{

   625   opacity: .70;

   626 }

   628 #otherresults {

   629   left: 0px;

   630   bottom: 0px;

   631   width: 100%;

   632   height: 30px;

   633   background-color: rgba(0,0,0,.3);

   634   box-shadow: 0px -1px 0px rgba(255,255,255,.1), inset 0px 2px 5px rgba(0,0,0,.3);

   635 }

   637 html[dir=rtl] #otherresults {

   638   left: auto;

   639   right: 0;

   640 }

   642 #otherresults .label {

   643   color: #999;

   644   line-height: 30px;

   645   -moz-margin-start: 5px;

   646   -moz-margin-end: 5px;

   647 }

   649 .inlineMatch {

   650   background-color: #EBEBEB;

   651   border-radius: 0.4em;

   652   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);

   653   border: 1px solid rgba(255, 255, 255, 0.5);

   654   -moz-padding-start: 3px;

   655   -moz-padding-end: 3px;

   656   height: 20px;

   657   -moz-margin-end: 5px;

   658   cursor: pointer;

   659 }

   661 .inlineMatch:hover {

   662   opacity: 1.0;

   663 }

   665 .inlineMatch > img {

   666   -moz-margin-end: 5px;

   667   position: relative;

   668   top: 2px;

   669   width: 16px;

   670   height: 16px;

   671 }

   673 .inlineMatch > span {

   674   max-width: 200px;

   675   height: 15px;

   676 }

The Tor Browser / file revision

browser/themes/windows/tabview/tabview.css@6474c204b198

browser/themes/windows/tabview/tabview.css