body { font: message-box; color: rgba(0, 0, 0, 0.6); font-size: 13px; } #bg:not(:-moz-system-metric(windows-compositor)) { background: url("chrome://browser/skin/tabview/grain.png") repeat scroll center top, -moz-linear-gradient(center top , #CCD9EA, #C7D5E7) repeat scroll 0 0 transparent; } /* Tabs ----------------------------------*/ .tab { margin: 4px; padding-top: 4px; -moz-padding-end: 6px; padding-bottom: 6px; -moz-padding-start: 4px; background-color: #E0EAF5; border-radius: 0.4em; cursor: pointer; } html[dir=rtl] .tab { box-shadow: 0 1px 0 #FFFFFF inset, 0 -1px 1px rgba(255, 255, 255, 0.8) inset, -1px 0 1px rgba(255, 255, 255, 0.8) inset, 1px 0 1px rgba(255, 255, 255, 0.8) inset, 0 1px 1.5px rgba(4, 38, 60, 0.4); } .tab canvas, .cached-thumb { border: 1px solid rgba(73, 99, 119, 0.3); } .thumb { box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.1); background-color: white; } html[dir=rtl] .thumb { box-shadow: -1px 2px 0 rgba(0, 0, 0, 0.1); } .favicon { background-color: #E0EAF5; padding-top: 4px; -moz-padding-end: 6px; padding-bottom: 6px; -moz-padding-start: 4px; top: 4px; left: 4px; -moz-border-end: 1px solid rgba(73, 99, 119, 0.3); border-bottom: 1px solid rgba(73, 99, 119, 0.3); height: 17px; width: 17px; } html[dir=ltr] .favicon { border-bottom-right-radius: 0.4em; } html[dir=rtl] .favicon { border-bottom-left-radius: 0.4em; 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:hover: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: 6px; right: 6px; width: 16px; height: 16px; background: url(chrome://global/skin/icons/resizer.png) no-repeat; -moz-transition-property: opacity; -moz-transition-duration: 0.5s; -moz-transition-timing-function: ease-out; opacity: 0.2; } html[dir=rtl] .expander { right: auto; left: 6px; -moz-transform: scaleX(-1); } .expander:hover, .appTabIcon:hover { -moz-transition-property: opacity; -moz-transition-duration: 0.5s; -moz-transition-timing-function: ease-out; opacity: 1.0; } .favicon img:hover, .close 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 1px 0 #FFFFFF inset, 0 -1px 1px #FFFFFF inset, 1px 0 1px #FFFFFF inset, -1px 0 1px #FFFFFF inset, 0 0 5.5px #007ECE; } html[dir=rtl] .tab.focus { box-shadow: 0 1px 0 #FFFFFF inset, 0 -1px 1px #FFFFFF inset, -1px 0 1px #FFFFFF inset, 1px 0 1px #FFFFFF inset, 0 0 5.5px #007ECE; } /* 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; } /* Tab GroupItem ----------------------------------*/ .groupItem { cursor: pointer; background-color: #E0EAF5; border-radius: 0.4em; box-shadow: 0 1px 0 #FFFFFF inset, 0 -1px 1px rgba(255, 255, 255, 0.8) inset, 1px 0 1px rgba(255, 255, 255, 0.8) inset, -1px 0 1px rgba(255, 255, 255, 0.8) inset, 0 1px 3px rgba(4, 38, 60, 0.6); } html[dir=rtl] .groupItem { box-shadow: 0 1px 0 #FFFFFF inset, 0 -1px 1px rgba(255, 255, 255, 0.8) inset, -1px 0 1px rgba(255, 255, 255, 0.8) inset, 1px 0 1px rgba(255, 255, 255, 0.8) inset, 0 1px 3px rgba(4, 38, 60, 0.6); } .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; } .dragRegion { background: rgba(224, 234, 245, 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 { font-style: italic !important; color: transparent; background-image: url(chrome://browser/skin/tabview/edit-light.png); background-repeat: no-repeat; -moz-padding-start: 20px; } .title-container:hover input.name:-moz-placeholder { color: #CCC; } .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; -moz-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: 18px; height: 18px; -moz-margin-end: 4px; margin-top: 2px; background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 90, 18, 72); 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, 18, 18, 0); } #exit-button[groups="1"] { background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 36, 18, 18); } #exit-button[groups="2"] { background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 54, 18, 36); } #exit-button[groups="3"] { background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 72, 18, 54); } /* Search ----------------------------------*/ #searchshade{ background-color: rgba(0,0,0,.42); width: 100%; height: 100%; } #search{ width: 100%; height: 100%; } #searchbox{ width: 270px; height: 30px; 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); color: white; border: none; background-color: #272727; border-radius: 0.4em; -moz-padding-start: 5px; -moz-padding-end: 5px; font-size: 14px; } #actions{ top: -3px; padding-top: 3px; width: 29px; border: none; text-align: center; background-color: #E0EAF5; border-radius: 0.4em; box-shadow: 0 1px 0 #FFFFFF inset, 0 -1px 1px rgba(255, 255, 255, 0.8) inset, 1px 0 1px rgba(255, 255, 255, 0.8) inset, -1px 0 1px rgba(255, 255, 255, 0.8) inset, 0 1px 3px rgba(4, 38, 60, 0.6); } html[dir=rtl] #actions { box-shadow: 0 1px 0 #FFFFFF inset, 0 -1px 1px rgba(255, 255, 255, 0.8) inset, -1px 0 1px rgba(255, 255, 255, 0.8) inset, 1px 0 1px rgba(255, 255, 255, 0.8) inset, 0 1px 3px rgba(4, 38, 60, 0.6); } #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: 0px -1px 0px rgba(255,255,255,.1), inset 0px 2px 5px rgba(0,0,0,.3); } html[dir=rtl] #otherresults { left: auto; right: 0; } #otherresults .label { color: #999; line-height: 30px; -moz-margin-start: 5px; -moz-margin-end: 5px; } .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; }