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