mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 855998 - Use Aero styling for hover and selected items in UI. r=dao, ui-r=shorlander
This commit is contained in:
Richard Marti
parent
3a503413f6
commit
c5697869ca
@ -89,6 +89,18 @@
|
||||
border-color: hsla(206,100%,60%,.65) hsla(206,100%,55%,.65) hsla(206,100%,50%,.65);
|
||||
}
|
||||
|
||||
#sidebar-header {
|
||||
-moz-appearance: none;
|
||||
color: black;
|
||||
background-color: #EEF3FA;
|
||||
border-bottom: none;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
#sidebar-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sidebar-splitter {
|
||||
border: 0;
|
||||
-moz-border-end: 1px solid #A9B7C9;
|
||||
|
||||
@ -15,4 +15,8 @@
|
||||
background-color: transparent;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -210,9 +210,9 @@ toolkit.jar:
|
||||
* skin/classic/aero/global/global.css
|
||||
skin/classic/aero/global/globalBindings.xml
|
||||
skin/classic/aero/global/groupbox.css
|
||||
* skin/classic/aero/global/inContentUI.css (inContentUI-aero.css)
|
||||
* skin/classic/aero/global/inContentUI.css (inContentUI-aero.css)
|
||||
skin/classic/aero/global/linkTree.css
|
||||
skin/classic/aero/global/listbox.css
|
||||
* skin/classic/aero/global/listbox.css (listbox-aero.css)
|
||||
* skin/classic/aero/global/menu.css (menu-aero.css)
|
||||
* skin/classic/aero/global/menulist.css (menulist-aero.css)
|
||||
skin/classic/aero/global/netError.css
|
||||
|
||||
66
toolkit/themes/windows/global/listbox-aero.css
Normal file
66
toolkit/themes/windows/global/listbox-aero.css
Normal file
@ -0,0 +1,66 @@
|
||||
/* 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/. */
|
||||
|
||||
%include listbox.css
|
||||
%filter substitution
|
||||
%define selectedBorderColor rgb(217,217,217)
|
||||
%define hoverAndFocusBorderColor rgb(125,162,206)
|
||||
%define selectedFocusBorderColor rgb(132,172,221)
|
||||
%define selectedGradientColor1 rgba(190,190,190,.1)
|
||||
%define selectedGradientColor2 rgba(190,190,190,.4)
|
||||
%define selectedFocusGradientColor1 rgba(131,183,249,.16)
|
||||
%define selectedFocusGradientColor2 rgba(131,183,249,.375)
|
||||
|
||||
@media (-moz-windows-default-theme) {
|
||||
listitem {
|
||||
min-height: 1.7em;
|
||||
color: -moz-FieldText;
|
||||
-moz-margin-start: 1px;
|
||||
-moz-margin-end: 1px;
|
||||
border-width: 1px;
|
||||
border-radius: 3px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 -1px 0 1px rgba(255,255,255,.2);
|
||||
}
|
||||
|
||||
listitem[selected="true"] {
|
||||
border-color: @selectedBorderColor@;
|
||||
background-image: linear-gradient(@selectedGradientColor1@, @selectedGradientColor2@);
|
||||
background-color: rgba(190,190,190,.15);
|
||||
color: -moz-DialogText;
|
||||
}
|
||||
|
||||
listbox:focus > listitem[selected="true"] {
|
||||
border-color: @selectedFocusBorderColor@;
|
||||
background-image: linear-gradient(@selectedFocusGradientColor1@, @selectedFocusGradientColor2@);
|
||||
background-color: rgba(131,183,249,.02);
|
||||
color: -moz-DialogText;
|
||||
}
|
||||
|
||||
listbox:focus > listitem[current="true"] {
|
||||
border-color: @hoverAndFocusBorderColor@;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
listbox:focus > listitem[selected="true"][current="true"] {
|
||||
background-color: rgba(131,183,249,.15);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (-moz-windows-version: win8) {
|
||||
listitem {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
listitem[selected="true"] {
|
||||
background-image: linear-gradient(@selectedGradientColor2@, @selectedGradientColor2@);
|
||||
}
|
||||
|
||||
listbox:focus > listitem[selected="true"] {
|
||||
background-image: linear-gradient(@selectedFocusGradientColor2@, @selectedFocusGradientColor2@);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -3,6 +3,21 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
%include tree.css
|
||||
%filter substitution
|
||||
%define selectedBorderColor rgb(217,217,217)
|
||||
%define hoverAndFocusBorderColor rgb(125,162,206)
|
||||
%define selectedFocusBorderColor rgb(132,172,221)
|
||||
%define hoverBorderColor rgb(184,214,251)
|
||||
%define whiteOpacityBorderColor rgba(255,255,255,.4)
|
||||
%define whiteOpacityBottomBorderColor rgba(255,255,255,.6)
|
||||
%define selectedGradientColor1 rgba(190,190,190,.1)
|
||||
%define selectedGradientColor2 rgba(190,190,190,.4)
|
||||
%define selectedFocusGradientColor1 rgba(131,183,249,.16)
|
||||
%define selectedFocusGradientColor2 rgba(131,183,249,.375)
|
||||
%define hoverAndCurrentFocusGradientColor1 rgba(131,183,249,.28)
|
||||
%define hoverAndCurrentFocusGradientColor2 rgba(131,183,249,.5)
|
||||
%define hoverGradientColor1 rgba(131,183,249,.05)
|
||||
%define hoverGradientColor2 rgba(131,183,249,.16)
|
||||
|
||||
/* ::::: twisty ::::: */
|
||||
|
||||
@ -47,3 +62,137 @@ treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(hover) {
|
||||
treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(hover, open) {
|
||||
list-style-image: url("chrome://global/skin/tree/twisty-open-hover-rtl.png");
|
||||
}
|
||||
|
||||
@media (-moz-windows-default-theme) {
|
||||
treechildren::-moz-tree-row {
|
||||
min-height: 1.7em;
|
||||
color: -moz-FieldText;
|
||||
-moz-margin-start: 1px;
|
||||
-moz-margin-end: 1px;
|
||||
border-width: 2px;
|
||||
border-style: solid !important;
|
||||
border-color: transparent;
|
||||
border-radius: 3px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
-moz-outline-radius: 3px;
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-row(selected) {
|
||||
-moz-border-top-colors: @selectedBorderColor@ @whiteOpacityBorderColor@;
|
||||
-moz-border-right-colors: @selectedBorderColor@ @whiteOpacityBorderColor@;
|
||||
-moz-border-left-colors: @selectedBorderColor@ @whiteOpacityBorderColor@;
|
||||
-moz-border-bottom-colors: @selectedBorderColor@ @whiteOpacityBottomBorderColor@;
|
||||
background-image: linear-gradient(@selectedGradientColor1@, @selectedGradientColor2@);
|
||||
background-color: transparent;
|
||||
outline: 1px solid @whiteOpacityBorderColor@;
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-row(current, focus) {
|
||||
-moz-border-top-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
|
||||
-moz-border-right-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
|
||||
-moz-border-left-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
|
||||
-moz-border-bottom-colors: @hoverAndFocusBorderColor@ @whiteOpacityBottomBorderColor@;
|
||||
outline: 1px solid @whiteOpacityBorderColor@;
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-row(selected, focus),
|
||||
treechildren::-moz-tree-row(dropOn) {
|
||||
-moz-border-top-colors: @selectedFocusBorderColor@ @whiteOpacityBorderColor@;
|
||||
-moz-border-right-colors: @selectedFocusBorderColor@ @whiteOpacityBorderColor@;
|
||||
-moz-border-left-colors: @selectedFocusBorderColor@ @whiteOpacityBorderColor@;
|
||||
-moz-border-bottom-colors: @selectedFocusBorderColor@ @whiteOpacityBottomBorderColor@;
|
||||
background-image: linear-gradient(@selectedFocusGradientColor1@, @selectedFocusGradientColor2@);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-row(selected, current, focus) {
|
||||
-moz-border-top-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
|
||||
-moz-border-right-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
|
||||
-moz-border-left-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
|
||||
-moz-border-bottom-colors: @hoverAndFocusBorderColor@ @whiteOpacityBottomBorderColor@;
|
||||
background-image: linear-gradient(@hoverAndCurrentFocusGradientColor1@, @hoverAndCurrentFocusGradientColor2@);
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-row(hover) {
|
||||
-moz-border-top-colors: @hoverBorderColor@ @whiteOpacityBorderColor@;
|
||||
-moz-border-right-colors: @hoverBorderColor@ @whiteOpacityBorderColor@;
|
||||
-moz-border-left-colors: @hoverBorderColor@ @whiteOpacityBorderColor@;
|
||||
-moz-border-bottom-colors: @hoverBorderColor@ @whiteOpacityBottomBorderColor@;
|
||||
background-image: linear-gradient(@hoverGradientColor1@, @hoverGradientColor2@);
|
||||
outline: 1px solid @whiteOpacityBorderColor@;
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-row(hover, current) {
|
||||
-moz-border-top-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
|
||||
-moz-border-right-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
|
||||
-moz-border-left-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
|
||||
-moz-border-bottom-colors: @hoverAndFocusBorderColor@ @whiteOpacityBottomBorderColor@;
|
||||
background-image: linear-gradient(@hoverGradientColor1@, @hoverGradientColor2@);
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-row(hover, selected) {
|
||||
-moz-border-top-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
|
||||
-moz-border-right-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
|
||||
-moz-border-left-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
|
||||
-moz-border-bottom-colors: @hoverAndFocusBorderColor@ @whiteOpacityBottomBorderColor@;
|
||||
background-image: linear-gradient(@hoverAndCurrentFocusGradientColor1@, @hoverAndCurrentFocusGradientColor2@);
|
||||
}
|
||||
|
||||
tree[disabled="true"] > treechildren::-moz-tree-row {
|
||||
background: none;
|
||||
-moz-border-top-colors: transparent;
|
||||
-moz-border-right-colors: transparent;
|
||||
-moz-border-left-colors: transparent;
|
||||
-moz-border-bottom-colors: transparent;
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-cell(dropOn) {
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-cell-text {
|
||||
padding-bottom: initial;
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-cell-text(selected, focus) {
|
||||
color: -moz-DialogText;
|
||||
}
|
||||
|
||||
@media (-moz-windows-version: win8) {
|
||||
treechildren::-moz-tree-row {
|
||||
border-width: 1px;
|
||||
border-radius: 0;
|
||||
-moz-outline-radius: 0;
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-row(selected) {
|
||||
background-image: linear-gradient(@selectedGradientColor2@, @selectedGradientColor2@);
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-row(selected, focus),
|
||||
treechildren::-moz-tree-row(dropOn) {
|
||||
background-image: linear-gradient(@selectedFocusGradientColor2@, @selectedFocusGradientColor2@);
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-row(selected, current, focus) {
|
||||
background-image: linear-gradient(@hoverAndCurrentFocusGradientColor2@, @hoverAndCurrentFocusGradientColor2@);
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-row(hover) {
|
||||
background-image: linear-gradient(@hoverGradientColor2@, @hoverGradientColor2@);
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-row(hover, current) {
|
||||
background-image: linear-gradient(@hoverGradientColor2@, @hoverGradientColor2@);
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-row(hover, selected) {
|
||||
background-image: linear-gradient(@hoverAndCurrentFocusGradientColor2@, @hoverAndCurrentFocusGradientColor2@);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user