mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
654 lines
12 KiB
CSS
654 lines
12 KiB
CSS
/* 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;
|
|
}
|
|
|
|
@media not all and (-moz-mac-yosemite-theme) { /* yosemite uses vibrant background on parent iframe */
|
|
#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;
|
|
}
|
|
|