The Tor Browser: browser/themes/osx/tabview/tabview.css@6474c204b198 (annotated)

browser/themes/osx/tabview/tabview.css@6474c204b198 (annotated)

browser/themes/osx/tabview/tabview.css

Wed, 31 Dec 2014 06:09:35 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Wed, 31 Dec 2014 06:09:35 +0100
changeset 0: 6474c204b198
permissions: -rw-r--r--

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

 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 body {
   background-color: transparent;
   font: message-box;
   color: rgba(0, 0, 0, 0.6);
   font-size: 12px;
 }
 #bg {
   background: linear-gradient(#C4C4C4, #9E9E9E);
 }
 #bg:-moz-window-inactive {
   background: linear-gradient(#EDEDED, #D8D8D8);
 }
 /* Tabs
 ----------------------------------*/
 .tab {
   margin: 8px;
   padding-top: 4px;
   -moz-padding-end: 6px;
   padding-bottom: 6px;
   -moz-padding-start: 4px;
   background-color: rgb(240,240,240);
   border-radius: 0.4em;
   cursor: pointer;
 }
 .tab canvas,
 .cached-thumb {
   border: 1px solid rgba(0, 0, 0, 0.3);
 }
 .thumb {
   box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.2);
   background-color: white;
 }
 html[dir=rtl] .thumb {
   box-shadow: -1px 2px 0 rgba(0, 0, 0, 0.2);
 }
 .favicon {
   background-color: rgb(240,240,240);
   box-shadow:
 -1px 0 rgba(225, 225, 225, 0.8) inset,
     -1px 0 0 rgba(225, 225, 225, 0.8) inset;
   padding-top: 4px;
   -moz-padding-end: 6px;
   padding-bottom: 6px;
   -moz-padding-start: 4px;
   top: 4px;
   left: 4px;
   -moz-border-end: 1px solid rgba(0, 0, 0, 0.3);
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   height: 16px;
   width: 16px;
 }
 html[dir=ltr] .favicon {
   border-bottom-right-radius: 0.4em;
 }
 html[dir=rtl] .favicon {
   border-bottom-left-radius: 0.4em;
   box-shadow:
 -1px 0 rgba(225, 225, 225, 0.8) inset,
 px 0 0 rgba(225, 225, 225, 0.8) inset;
   left: auto;
   right: 2px;
 }
 .favicon img {
   border: none;
   width: 16px;
   height: 16px;
 }
 .close {
   top: 6px;
   right: 6px;
   width: 16px;
   height: 16px;
   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/close.png), 0, 16, 16, 0);
   background-repeat: no-repeat;
 }
 .close:hover {
   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/close.png), 0, 32, 16, 16);
 }
 .close:active {
   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/close.png), 0, 48, 16, 32);
 }
 html[dir=rtl] .close {
   right: auto;
   left: 6px;
 }
 .expander {
   bottom: 8px;
   right: 6px;
   width: 16px;
   height: 16px;
   background: url(chrome://global/skin/icons/resizer.png) no-repeat;
   transition-property: opacity;
   transition-duration: 0.5s;
   transition-timing-function: ease-out;
   opacity: 0.2;
 }
 html[dir=rtl] .expander {
   right: auto;
   left: 6px;
   transform: scaleX(-1);
 }
 .expander:hover,
 .appTabIcon:hover {
   transition-property: opacity;
   transition-duration: 0.5s;
   transition-timing-function: ease-out;
   opacity: 1.0;
 }
 .favicon img:hover,
 .expander img:hover {
   opacity: 1;
   border: none;
 }
 .tab-title {
   bottom: -20px;
   text-align: center;
   width: 94.5%;
   text-shadow: 0 1px rgba(255, 255, 255, 0.6);
 }
 .stacked {
   padding: 0;
 }
 .stacked .thumb {
   box-shadow: rgba(0,0,0,.2) 1px 1px 4px;
 }
 html[dir=rtl] .stacked .thumb {
   box-shadow: rgba(0,0,0,.2) -1px 1px 4px;
 }
 .stack-trayed .tab-title {
   text-shadow: rgba(0,0,0,1) 1px 1px 1.5px;
   color: #EEE;
   font-size: 11px;
 }
 html[dir=rtl] .stack-trayed .tab-title {
   text-shadow: rgba(0,0,0,1) -1px 1px 1.5px;
 }
 .stack-trayed .thumb {
   box-shadow: none !important;
 }
 .tab.focus {
   box-shadow: 0 0 5.5px -moz-mac-menuselect/*#0060D6*/;
   border: 1px solid rgba(255, 255, 255, 0.6);
 }
 /* Tab: Zooming
 ----------------------------------*/
 .front .tab-title,
 .front .close,
 .front .favicon,
 .front .expander,
 .front .thumb-shadow {
   display: none;
 }
 .front .thumb {
   box-shadow: none !important;
 }
 .front.focus {
   box-shadow: none !important;
   border: none !important;
 }
 /* Tab GroupItem
 ----------------------------------*/
 .groupItem {
   cursor: pointer;
   background-color: rgb(240,240,240);
   border-radius: 0.4em;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
   border: 1px solid rgba(255, 255, 255, 0.5);
 }
 .groupItem.activeGroupItem {
   box-shadow:
     rgba(0,0,0,0.8) 2px 2px 8px;
 }
 html[dir=rtl] .groupItem.activeGroupItem {
   box-shadow:
     rgba(0,0,0,0.8) -2px 2px 8px;
 }
 .groupItem .close {
   z-index: 10;
   top: 0px;
   right: 0px;
   width: 22px;
   height: 22px;
   background-position: bottom left;
 }
 html[dir=rtl] .groupItem .close {
   right: auto;
   left: 0px;
   background-position: bottom right;
 }
 .phantom {
   border: 1px solid rgba(255, 255, 255, 0.5);
 }
 .dragRegion {
   background: rgba(235, 235, 235, 0.4);
 }
 .overlay {
   background-color: rgba(0,0,0,.7) !important;
   box-shadow: 3px 3px 5.5px rgba(0,0,0,.5);
   border-radius: 0.4em;
 }
 html[dir=rtl] .overlay {
   box-shadow: -3px 3px 5.5px rgba(0,0,0,.5);
 }
 .appTabTrayContainer {
   top: 34px;
   right: 1px;
   -moz-border-start: 1px solid #E1E1E1;
   padding: 0 5px;
   overflow: -moz-hidden-unscrollable;
   text-align: start;
   line-height: 0;
 }
 html[dir=rtl] .appTabTrayContainer {
   right: auto;
   left: 1px;
 }
 .appTabTray {
   display: inline-block;
   -moz-column-width: 16px;
   -moz-column-gap: 5px;
 }
 .appTabTrayContainerTruncated {
   padding-bottom: 7px;
 }
 .appTabTrayContainerTruncated:after {
   content: "…";
   position: absolute;
   bottom: 2px;
   left: 0;
   display: block;
   width: 100%;
   height: 15px;
   line-height: 15px;
   text-align: center;
   font-size: 15px;
 }
 .appTabIcon {
   width: 16px;
   height: 16px;
   cursor: pointer;
   opacity: 0.8;
   padding-bottom: 3px;
   display: block;
 }
 .undo {
   background-color: #A0A0A0;
   padding-top: 3px;
   padding-bottom: 3px;
   -moz-padding-start: 5px;
   -moz-padding-end: 20px;
   width: 135px;
   line-height: 25px;
   box-shadow: 0px 1px 0px rgba(255,255,255,.5), 0px -1px 0px rgba(0,0,0,.24);
   text-shadow: 0px -1px 0px rgba(255,255,255,.2);
   color: rgba( 0,0,0, .8);
   border-radius: 0.4em;
   text-align: center;
   border: none;
   cursor: pointer;
 }
 .undo:hover {
   background-color: #949494;
 }
 .undo .close {
   top: 7px;
   right: 7px;
   opacity: 0.5;
 }
 html[dir=rtl] .undo .close {
   right: auto;
   left: 7px;
 }
 .undo .close:hover{
   opacity: 1.0;
 }
 /* Trenches
 ----------------------------------*/
 .guideTrench {
   opacity: 0.9;
   border: 1px dashed  rgba(0,0,0,.12);
   border-bottom: none;
   -moz-border-end: none;
   box-shadow: 1px 1px 0 rgba(255,255,255,.15);
 }
 html[dir=rtl] .guideTrench {
   box-shadow: -1px 1px 0 rgba(255,255,255,.15);
 }
 .visibleTrench {
   opacity: 0.05;
 }
 .activeVisibleTrench {
   opacity: 0;
 }
 .activeVisibleTrench.activeTrench {
   opacity: 0.45;
 }
 .visibleTrench.border,
 .activeVisibleTrench.border {
   background-color: red;
 }
 .visibleTrench.guide,
 .activeVisibleTrench.guide {
   background-color: blue;
 }
 /* Other
 ----------------------------------*/
 .active {
   box-shadow: 5px 5px 3px rgba(0,0,0,.5);
 }
 html[dir=rtl] .active {
   box-shadow: -5px 5px 3px rgba(0,0,0,.5);
 }
 .acceptsDrop {
   box-shadow: 2px 2px 7px -1px rgba(0,0,0,.6);
 }
 html[dir=rtl] .acceptsDrop {
   box-shadow: -2px 2px 7px -1px rgba(0,0,0,.6);
 }
 .titlebar {
   cursor: move;
   font-size: 12px;
   height: 18px;
 }
 input.name {
   background: transparent;
   border: 1px solid transparent;
   color: #999;
   margin-top: 3px;
   -moz-margin-end: 0;
   margin-bottom: 0;
   -moz-margin-start: 3px;
   padding: 1px;
 }
 html[dir=rtl] input.name {
   background-position: right top;
 }
 .title-container:hover input.name,
 .title-container input.name:focus {
   border: 1px solid #ddd;
 }
 .title-container:hover input.name-locked {
   border: 1px solid transparent !important;
   cursor: default;
 }
 input.name:focus {
   color: #555;
 }
 input.name::-moz-placeholder {
   opacity: 1.0;
   font-style: italic !important;
   color: transparent;
   background-image: url(chrome://browser/skin/tabview/edit-light.png);
   background-repeat: no-repeat;
 }
 .title-container:hover input.name::-moz-placeholder {
   color: #CCC;
   background-image: none;
 }
 input.name:focus::-moz-placeholder {
   background-image: none;
 }
 .title-shield {
   margin-top: 3px;
   -moz-margin-end: 0;
   margin-bottom: 0;
   -moz-margin-start: 3px;
   padding: 1px;
   left: 0;
   top: 0;
   height: 100%;
   width: -moz-available;
   cursor: text;
 }
 html[dir=rtl] .title-shield {
   left: auto;
   right: 0;
 }
 .transparentBorder {
   border: 1px solid transparent !important;
 }
 .stackExpander {
   cursor: pointer;
   bottom: 8px;
   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/stack-expander.png), 0, 48, 24, 24);
   width: 24px;
   height: 24px;
 }
 .stackExpander:hover {
   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/stack-expander.png), 0, 24, 24, 0);
 }
 /* Resizable
 ----------------------------------*/
 .resizer {
   background-image: url(chrome://global/skin/icons/resizer.png);
   width: 16px;
   height: 16px;
   bottom: 0px;
   right: 0px;
   opacity: .2;
 }
 html[dir=rtl] .resizer {
   right: auto;
   left: 0;
   transform: scaleX(-1);
 }
 .iq-resizable-handle {
   font-size: 0.1px;
 }
 .iq-resizable-se {
   cursor: se-resize;
   width: 12px;
   height: 12px;
   padding-right: 3px;
   padding-bottom: 3px;
   right: -2px;
   bottom: -2px;
 }
 html[dir=rtl] .iq-resizable-se {
   cursor: sw-resize;
   right: auto;
   left: 1px;
 }
 /* Exit button
 +----------------------------------*/
 #exit-button {
   width: 20px;
   height: 20px;
   -moz-margin-end: 3px;
   margin-top: 0px;
   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 100, 20, 80);
   background-attachment: scroll;
   background-repeat: no-repeat;
   border: none;
 }
 #exit-button[groups="0"] {
   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 20, 20, 0);
 }
 #exit-button[groups="1"] {
   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 40, 20, 20);
 }
 #exit-button[groups="2"] {
   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 60, 20, 40);
 }
 #exit-button[groups="3"] {
   background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 80, 20, 60);
 }
 /* Search
 ----------------------------------*/
 #searchshade{
   background-color: rgba(0,0,0,.42);
   width: 100%;
   height: 100%;
 }
 #searchshade:-moz-window-inactive {
   background: linear-gradient(rgba(237,237,237,0.42), rgba(216,216,216,0.42));
 }
 #search{
   width: 100%;
   height: 100%;
 }
 #searchbox {
   width: 270px;
   max-width: -moz-available;
   -moz-margin-start: 20px;
   height: 30px;
   box-shadow: 0px 1px 0px rgba(255,255,255,.5), 0px -1px 0px rgba(0,0,0,1), 0px 0px 13px rgba(0,0,0,.8);
   color: white;
   border: none;
   background-color: #272727;
   border-radius: 0.4em;
   -moz-padding-start: 5px;
   -moz-padding-end: 5px;
   font-size: 14px;
 }
 #searchbox:-moz-window-inactive {
   background-color: #BBBBBB;
   box-shadow: 0px 1px 0px rgba(255,255,255,.1), 0px -1px 0px rgba(0,0,0,0.3), 0px 0px 13px rgba(0,0,0,.2);
 }
 #actions {
   width: 29px;
   text-align: center;
   background-color: #EBEBEB;
   border-radius: 0.4em;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
   border: 1px solid rgba(255, 255, 255, 0.5);
 }
 #actions #searchbutton {
   background: transparent url(chrome://browser/skin/tabview/search.png) no-repeat;
   border: none;
   width: 20px;
   height: 20px;
   margin-top: 3px;
   -moz-margin-end: 1px;
 }
 .notMainMatch {
   opacity: .70;
 }
 #otherresults {
   left: 0px;
   bottom: 0px;
   width: 100%;
   height: 30px;
   background-color: rgba(0,0,0,.3);
   box-shadow: 0 -1px 0 rgba(255,255,255,.1), inset 0 2px 5px rgba(0,0,0,.3);
 }
 html[dir=rtl] #otherresults {
   left: auto;
   right: 0px;
 }
 #otherresults .label {
   color: #999;
   line-height: 30px;
   -moz-margin-start: 5px;
   -moz-margin-end: 5px;
 }
 #otherresults .label:-moz-window-inactive {
   color: #404040;
 }
 .inlineMatch {
   background-color: #EBEBEB;
   border-radius: 0.4em;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
   border: 1px solid rgba(255, 255, 255, 0.5);
   -moz-padding-start: 3px;
   -moz-padding-end: 3px;
   height: 20px;
   -moz-margin-end: 5px;
   cursor: pointer;
 }
 .inlineMatch:hover {
   opacity: 1.0;
 }
 .inlineMatch > img {
   -moz-margin-end: 5px;
   position: relative;
   top: 2px;
   width: 16px;
   height: 16px;
 }
 .inlineMatch > span {
   max-width: 200px;
   height: 15px;
 }

The Tor Browser / annotate

browser/themes/osx/tabview/tabview.css@6474c204b198 (annotated)

browser/themes/osx/tabview/tabview.css