diff -r 000000000000 -r 6474c204b198 browser/themes/osx/tabview/tabview.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/browser/themes/osx/tabview/tabview.css Wed Dec 31 06:09:35 2014 +0100 @@ -0,0 +1,651 @@ +/* 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: + 0 -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: + 0 -1px 0 rgba(225, 225, 225, 0.8) inset, + 1px 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; +} +