From 1d5f9f7aa7ac0bfe6a091b7c1395cafa33d52c43 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Wed, 19 Aug 2015 19:38:44 +0200 Subject: add firefox theme --- .../chrome/browser/tabview/tabview.css | 666 +++++++++++++++++++++ 1 file changed, 666 insertions(+) create mode 100644 arc-firefox-theme/chrome/browser/tabview/tabview.css (limited to 'arc-firefox-theme/chrome/browser/tabview/tabview.css') diff --git a/arc-firefox-theme/chrome/browser/tabview/tabview.css b/arc-firefox-theme/chrome/browser/tabview/tabview.css new file mode 100644 index 0000000..648b36e --- /dev/null +++ b/arc-firefox-theme/chrome/browser/tabview/tabview.css @@ -0,0 +1,666 @@ +/* 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 { + font: -moz-window; + color: WindowText; + font-size: 12px; +} + +#bg { + background-color: window; + background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.2)); +} + +/* Tabs +----------------------------------*/ + +.tab { + margin: 4px; + padding-top: 4px; + -moz-padding-end: 6px; + padding-bottom: 6px; + -moz-padding-start: 4px; + background-color: #D7D7D7; + 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.4) inset, + -1px 0 1px rgba(255, 255, 255, 0.4) inset, + 1px 0 1px rgba(255, 255, 255, 0.4) inset, + 0 1px 1.5px rgba(0, 0, 0, 0.4); +} + +.tab canvas, +.cached-thumb { + border: 1px solid rgba(0,0,0,0.2); +} + +.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: #D7D7D7; + 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; + opacity: 0.2; + background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 16, 16, 0); + background-position: center center; + background-repeat: no-repeat; +} + +.close:hover { + background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 32, 16, 16); +} + +.close:hover:active { + background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 48, 16, 32); +} + +html[dir=rtl] .close { + right: auto; + left: 6px; +} + +.close:hover, +.appTabIcon:hover { + opacity: 1.0; +} + +.expander { + bottom: 8px; + right: 6px; + width: 16px; + height: 16px; + background: url(chrome://global/skin/icons/resizer.png) no-repeat; + opacity: 0.2; +} + +html[dir=rtl] .expander { + right: auto; + left: 6px; + transform: scaleX(-1); +} + +.expander:hover { + opacity: 1.0; +} + +.close:hover, +.expander:hover, +.appTabIcon:hover { + transition-property: opacity; + transition-duration: 0.5s; + transition-timing-function: ease-out; +} + +.favicon img:hover, +.close img:hover, +.expander img:hover { + opacity: 1; + border: none; +} + +.tab-title { + top: 100%; + text-align: center; + width: 94.5%; +} + +.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: Highlight 0px 0px 5px 1px !important; + border: 1px solid Highlight; +} + +/* Tab: Zooming +----------------------------------*/ + +.front .tab-title, +.front .close, +.front .favicon, +.front .expander, +.front .thumb-shadow { + display: none; +} + +.front .focus { + box-shadow: none !important; +} + +/* Tab GroupItem +----------------------------------*/ + +.groupItem { + cursor: pointer; + border: 1px solid rgba(230,230,230,1); + background-color: window; + background-image: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.1)); + border-radius: 0.4em; + box-shadow: + inset rgba(255, 255, 255, 0.6) 0 0 0 2px, + rgba(0,0,0,0.2) 1px 1px 3px; +} + +html[dir=rtl] .groupItem { + box-shadow: + inset rgba(255, 255, 255, 0.6) 0 0 0 2px, + rgba(0,0,0,0.2) -1px 1px 3px; +} + +.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(190,190,190,1); +} + +.dragRegion { + background: rgba(248,248,248,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: rgba(0,0,0,.2); + padding-top: 3px; + padding-bottom: 3px; + -moz-padding-start: 5px; + -moz-padding-end: 20px; + width: 135px; + line-height: 25px; + box-shadow: 0 1px 0 rgba(255,255,255,.4), 0 1px 0 rgba(0,0,0,.3) inset; + text-shadow: 0 1px 0 rgba(255,255,255,.2); + color: WindowText; + border-radius: 0.4em; + text-align: center; + border: none; + cursor: pointer; +} + +.undo:hover { + background-color: rgba(0,0,0,.3); +} + +.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: GrayText; + 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: WindowText; +} + +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: GrayText; + 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: 16px; + height: 16px; + -moz-margin-end: 8px; + margin-top: 5px; + background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 80, 16, 64); + 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, 16, 16, 0); +} + +#exit-button[groups="1"] { + background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 32, 16, 16); +} + +#exit-button[groups="2"] { + background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 48, 16, 32); +} + +#exit-button[groups="3"] { + background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 64, 16, 48); +} + +/* Search +----------------------------------*/ +#searchshade{ + background-color: rgba(0,0,0,.42); + width: 100%; + height: 100%; +} + +#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 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; + text-align: center; + border: 1px solid rgba(230,230,230,1); + background-color: rgba(248,248,248,1); + border-radius: 0.4em; + box-shadow: + inset rgba(255, 255, 255, 0.6) 0 0 0 2px, + rgba(0,0,0,0.2) 1px 1px 3px; +} + +html[dir=rtl] #actions { + box-shadow: + inset rgba(255, 255, 255, 0.6) 0 0 0 2px, + rgba(0,0,0,0.2) -1px 1px 3px; +} + +#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; +} + -- cgit v1.2.3