michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: %include tree.css
michael@0: %filter substitution
michael@0: %define selectedBorderColor rgb(217,217,217)
michael@0: %define hoverAndFocusBorderColor rgb(125,162,206)
michael@0: %define selectedFocusBorderColor rgb(132,172,221)
michael@0: %define hoverBorderColor rgb(184,214,251)
michael@0: %define whiteOpacityBorderColor rgba(255,255,255,.4)
michael@0: %define whiteOpacityBottomBorderColor rgba(255,255,255,.6)
michael@0: %define selectedGradientColor1 rgba(190,190,190,.1)
michael@0: %define selectedGradientColor2 rgba(190,190,190,.4)
michael@0: %define selectedFocusGradientColor1 rgba(131,183,249,.16)
michael@0: %define selectedFocusGradientColor2 rgba(131,183,249,.375)
michael@0: %define hoverAndCurrentFocusGradientColor1 rgba(131,183,249,.28)
michael@0: %define hoverAndCurrentFocusGradientColor2 rgba(131,183,249,.5)
michael@0: %define hoverGradientColor1 rgba(131,183,249,.05)
michael@0: %define hoverGradientColor2 rgba(131,183,249,.16)
michael@0: 
michael@0: /* ::::: twisty :::::  */
michael@0: 
michael@0: treechildren::-moz-tree-indentation {
michael@0:   width: 12px;
michael@0: }
michael@0: 
michael@0: treechildren::-moz-tree-twisty {
michael@0:   -moz-padding-end: 1px;
michael@0:   width: 9px;
michael@0: }
michael@0: 
michael@0: /*
michael@0:   Please note that the following RTL icons are only available in Aero themes:
michael@0:    * chrome://global/skin/tree/twisty-clsd-hover.png
michael@0:    * chrome://global/skin/tree/twisty-open-hover.png
michael@0:    * chrome://global/skin/tree/twisty-clsd-rtl.png
michael@0:    * chrome://global/skin/tree/twisty-open-rtl.png
michael@0:    * chrome://global/skin/tree/twisty-clsd-hover-rtl.png
michael@0:    * chrome://global/skin/tree/twisty-open-hover-rtl.png
michael@0: */
michael@0: treechildren::-moz-tree-twisty(hover) {
michael@0:   list-style-image: url("chrome://global/skin/tree/twisty-clsd-hover.png");
michael@0: }
michael@0: 
michael@0: treechildren::-moz-tree-twisty(hover, open) {
michael@0:   list-style-image: url("chrome://global/skin/tree/twisty-open-hover.png");
michael@0: }
michael@0: 
michael@0: treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty {
michael@0:   list-style-image: url("chrome://global/skin/tree/twisty-clsd-rtl.png");
michael@0: }
michael@0: 
michael@0: treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(open) {
michael@0:   list-style-image: url("chrome://global/skin/tree/twisty-open-rtl.png");
michael@0: }
michael@0: 
michael@0: treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(hover) {
michael@0:   list-style-image: url("chrome://global/skin/tree/twisty-clsd-hover-rtl.png");
michael@0: }
michael@0: 
michael@0: treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(hover, open) {
michael@0:   list-style-image: url("chrome://global/skin/tree/twisty-open-hover-rtl.png");
michael@0: }
michael@0: 
michael@0: @media (-moz-windows-default-theme) {
michael@0:   treechildren:not(.autocomplete-treebody)::-moz-tree-row {
michael@0:     height: 1.8em;
michael@0:     color: -moz-FieldText;
michael@0:     -moz-margin-start: 1px;
michael@0:     -moz-margin-end: 1px;
michael@0:     border-width: 2px;
michael@0:     border-color: transparent;
michael@0:     border-radius: 3px;
michael@0:     background-repeat: no-repeat;
michael@0:     background-size: 100% 100%;
michael@0:     -moz-outline-radius: 3px;
michael@0:   }
michael@0: 
michael@0:   treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected) {
michael@0:     -moz-border-top-colors: @selectedBorderColor@ @whiteOpacityBorderColor@;
michael@0:     -moz-border-right-colors: @selectedBorderColor@ @whiteOpacityBorderColor@;
michael@0:     -moz-border-left-colors: @selectedBorderColor@ @whiteOpacityBorderColor@;
michael@0:     -moz-border-bottom-colors: @selectedBorderColor@ @whiteOpacityBottomBorderColor@;
michael@0:     background-image: linear-gradient(@selectedGradientColor1@, @selectedGradientColor2@);
michael@0:     background-color: transparent;
michael@0:     outline: 1px solid @whiteOpacityBorderColor@;
michael@0:   }
michael@0: 
michael@0:   treechildren:not(.autocomplete-treebody)::-moz-tree-row(current, focus) {
michael@0:     border-style: solid;
michael@0:     -moz-border-top-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
michael@0:     -moz-border-right-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
michael@0:     -moz-border-left-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
michael@0:     -moz-border-bottom-colors: @hoverAndFocusBorderColor@ @whiteOpacityBottomBorderColor@;
michael@0:     outline: 1px solid @whiteOpacityBorderColor@;
michael@0:   }
michael@0: 
michael@0:   treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, focus),
michael@0:   treechildren::-moz-tree-row(dropOn) {
michael@0:     -moz-border-top-colors: @selectedFocusBorderColor@ @whiteOpacityBorderColor@;
michael@0:     -moz-border-right-colors: @selectedFocusBorderColor@ @whiteOpacityBorderColor@;
michael@0:     -moz-border-left-colors: @selectedFocusBorderColor@ @whiteOpacityBorderColor@;
michael@0:     -moz-border-bottom-colors: @selectedFocusBorderColor@ @whiteOpacityBottomBorderColor@;
michael@0:     background-image: linear-gradient(@selectedFocusGradientColor1@, @selectedFocusGradientColor2@);
michael@0:     background-color: transparent;
michael@0:   }
michael@0: 
michael@0:   treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, current, focus) {
michael@0:     border-style: solid;
michael@0:     -moz-border-top-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
michael@0:     -moz-border-right-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
michael@0:     -moz-border-left-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
michael@0:     -moz-border-bottom-colors: @hoverAndFocusBorderColor@ @whiteOpacityBottomBorderColor@;
michael@0:     background-image: linear-gradient(@hoverAndCurrentFocusGradientColor1@, @hoverAndCurrentFocusGradientColor2@);
michael@0:   }
michael@0: 
michael@0:   treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover) {
michael@0:     -moz-border-top-colors: @hoverBorderColor@ @whiteOpacityBorderColor@;
michael@0:     -moz-border-right-colors: @hoverBorderColor@ @whiteOpacityBorderColor@;
michael@0:     -moz-border-left-colors: @hoverBorderColor@ @whiteOpacityBorderColor@;
michael@0:     -moz-border-bottom-colors: @hoverBorderColor@ @whiteOpacityBottomBorderColor@;
michael@0:     background-image: linear-gradient(@hoverGradientColor1@, @hoverGradientColor2@);
michael@0:     outline: 1px solid @whiteOpacityBorderColor@;
michael@0:   }
michael@0: 
michael@0:   treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover, current) {
michael@0:     -moz-border-top-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
michael@0:     -moz-border-right-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
michael@0:     -moz-border-left-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
michael@0:     -moz-border-bottom-colors: @hoverAndFocusBorderColor@ @whiteOpacityBottomBorderColor@;
michael@0:     background-image: linear-gradient(@hoverGradientColor1@, @hoverGradientColor2@);
michael@0:   }
michael@0: 
michael@0:   treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover, selected) {
michael@0:     -moz-border-top-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
michael@0:     -moz-border-right-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
michael@0:     -moz-border-left-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
michael@0:     -moz-border-bottom-colors: @hoverAndFocusBorderColor@ @whiteOpacityBottomBorderColor@;
michael@0:     background-image: linear-gradient(@hoverAndCurrentFocusGradientColor1@, @hoverAndCurrentFocusGradientColor2@);
michael@0:   }
michael@0: 
michael@0:   tree[disabled="true"] > treechildren::-moz-tree-row {
michael@0:     background: none;
michael@0:     -moz-border-top-colors: transparent;
michael@0:     -moz-border-right-colors: transparent;
michael@0:     -moz-border-left-colors: transparent;
michael@0:     -moz-border-bottom-colors: transparent;
michael@0:   }
michael@0: 
michael@0:   treechildren::-moz-tree-cell(dropOn) {
michael@0:     background-image: none;
michael@0:     background-color: transparent;
michael@0:     border-radius: 0;
michael@0:   }
michael@0: 
michael@0:   treechildren:not(.autocomplete-treebody)::-moz-tree-cell-text {
michael@0:     padding-bottom: initial;
michael@0:     border-color: transparent;
michael@0:     background-color: transparent;
michael@0:   }
michael@0: 
michael@0:   treechildren:not(.autocomplete-treebody)::-moz-tree-cell-text(selected, focus) {
michael@0:     color: -moz-DialogText;
michael@0:   }
michael@0: 
michael@0:   @media (-moz-os-version: windows-win8) {
michael@0:     treechildren:not(.autocomplete-treebody)::-moz-tree-row {
michael@0:       border-width: 1px;
michael@0:       border-radius: 0;
michael@0:       -moz-outline-radius: 0;
michael@0:     }
michael@0: 
michael@0:     treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected) {
michael@0:       background-image: linear-gradient(@selectedGradientColor2@, @selectedGradientColor2@);
michael@0:     }
michael@0: 
michael@0:     treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, focus),
michael@0:     treechildren::-moz-tree-row(dropOn) {
michael@0:       background-image: linear-gradient(@selectedFocusGradientColor2@, @selectedFocusGradientColor2@);
michael@0:     }
michael@0: 
michael@0:     treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, current, focus) {
michael@0:       background-image: linear-gradient(@hoverAndCurrentFocusGradientColor2@, @hoverAndCurrentFocusGradientColor2@);
michael@0:     }
michael@0: 
michael@0:     treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover) {
michael@0:       background-image: linear-gradient(@hoverGradientColor2@, @hoverGradientColor2@);
michael@0:     }
michael@0: 
michael@0:     treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover, current) {
michael@0:       background-image: linear-gradient(@hoverGradientColor2@, @hoverGradientColor2@);
michael@0:     }
michael@0: 
michael@0:     treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover, selected) {
michael@0:       background-image: linear-gradient(@hoverAndCurrentFocusGradientColor2@, @hoverAndCurrentFocusGradientColor2@);
michael@0:     }
michael@0:   }
michael@0: }