The Tor Browser / file comparison
comparison: toolkit/themes/windows/global/tree-aero.css
toolkit/themes/windows/global/tree-aero.css
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
equal
deleted
inserted
replaced
| -1:000000000000 | 0:03b8bba957ce |
|---|---|
| 1 /* This Source Code Form is subject to the terms of the Mozilla Public | |
| 2 * License, v. 2.0. If a copy of the MPL was not distributed with this | |
| 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
| 4 | |
| 5 %include tree.css | |
| 6 %filter substitution | |
| 7 %define selectedBorderColor rgb(217,217,217) | |
| 8 %define hoverAndFocusBorderColor rgb(125,162,206) | |
| 9 %define selectedFocusBorderColor rgb(132,172,221) | |
| 10 %define hoverBorderColor rgb(184,214,251) | |
| 11 %define whiteOpacityBorderColor rgba(255,255,255,.4) | |
| 12 %define whiteOpacityBottomBorderColor rgba(255,255,255,.6) | |
| 13 %define selectedGradientColor1 rgba(190,190,190,.1) | |
| 14 %define selectedGradientColor2 rgba(190,190,190,.4) | |
| 15 %define selectedFocusGradientColor1 rgba(131,183,249,.16) | |
| 16 %define selectedFocusGradientColor2 rgba(131,183,249,.375) | |
| 17 %define hoverAndCurrentFocusGradientColor1 rgba(131,183,249,.28) | |
| 18 %define hoverAndCurrentFocusGradientColor2 rgba(131,183,249,.5) | |
| 19 %define hoverGradientColor1 rgba(131,183,249,.05) | |
| 20 %define hoverGradientColor2 rgba(131,183,249,.16) | |
| 21 | |
| 22 /* ::::: twisty ::::: */ | |
| 23 | |
| 24 treechildren::-moz-tree-indentation { | |
| 25 width: 12px; | |
| 26 } | |
| 27 | |
| 28 treechildren::-moz-tree-twisty { | |
| 29 -moz-padding-end: 1px; | |
| 30 width: 9px; | |
| 31 } | |
| 32 | |
| 33 /* | |
| 34 Please note that the following RTL icons are only available in Aero themes: | |
| 35 * chrome://global/skin/tree/twisty-clsd-hover.png | |
| 36 * chrome://global/skin/tree/twisty-open-hover.png | |
| 37 * chrome://global/skin/tree/twisty-clsd-rtl.png | |
| 38 * chrome://global/skin/tree/twisty-open-rtl.png | |
| 39 * chrome://global/skin/tree/twisty-clsd-hover-rtl.png | |
| 40 * chrome://global/skin/tree/twisty-open-hover-rtl.png | |
| 41 */ | |
| 42 treechildren::-moz-tree-twisty(hover) { | |
| 43 list-style-image: url("chrome://global/skin/tree/twisty-clsd-hover.png"); | |
| 44 } | |
| 45 | |
| 46 treechildren::-moz-tree-twisty(hover, open) { | |
| 47 list-style-image: url("chrome://global/skin/tree/twisty-open-hover.png"); | |
| 48 } | |
| 49 | |
| 50 treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty { | |
| 51 list-style-image: url("chrome://global/skin/tree/twisty-clsd-rtl.png"); | |
| 52 } | |
| 53 | |
| 54 treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(open) { | |
| 55 list-style-image: url("chrome://global/skin/tree/twisty-open-rtl.png"); | |
| 56 } | |
| 57 | |
| 58 treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(hover) { | |
| 59 list-style-image: url("chrome://global/skin/tree/twisty-clsd-hover-rtl.png"); | |
| 60 } | |
| 61 | |
| 62 treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(hover, open) { | |
| 63 list-style-image: url("chrome://global/skin/tree/twisty-open-hover-rtl.png"); | |
| 64 } | |
| 65 | |
| 66 @media (-moz-windows-default-theme) { | |
| 67 treechildren:not(.autocomplete-treebody)::-moz-tree-row { | |
| 68 height: 1.8em; | |
| 69 color: -moz-FieldText; | |
| 70 -moz-margin-start: 1px; | |
| 71 -moz-margin-end: 1px; | |
| 72 border-width: 2px; | |
| 73 border-color: transparent; | |
| 74 border-radius: 3px; | |
| 75 background-repeat: no-repeat; | |
| 76 background-size: 100% 100%; | |
| 77 -moz-outline-radius: 3px; | |
| 78 } | |
| 79 | |
| 80 treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected) { | |
| 81 -moz-border-top-colors: @selectedBorderColor@ @whiteOpacityBorderColor@; | |
| 82 -moz-border-right-colors: @selectedBorderColor@ @whiteOpacityBorderColor@; | |
| 83 -moz-border-left-colors: @selectedBorderColor@ @whiteOpacityBorderColor@; | |
| 84 -moz-border-bottom-colors: @selectedBorderColor@ @whiteOpacityBottomBorderColor@; | |
| 85 background-image: linear-gradient(@selectedGradientColor1@, @selectedGradientColor2@); | |
| 86 background-color: transparent; | |
| 87 outline: 1px solid @whiteOpacityBorderColor@; | |
| 88 } | |
| 89 | |
| 90 treechildren:not(.autocomplete-treebody)::-moz-tree-row(current, focus) { | |
| 91 border-style: solid; | |
| 92 -moz-border-top-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@; | |
| 93 -moz-border-right-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@; | |
| 94 -moz-border-left-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@; | |
| 95 -moz-border-bottom-colors: @hoverAndFocusBorderColor@ @whiteOpacityBottomBorderColor@; | |
| 96 outline: 1px solid @whiteOpacityBorderColor@; | |
| 97 } | |
| 98 | |
| 99 treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, focus), | |
| 100 treechildren::-moz-tree-row(dropOn) { | |
| 101 -moz-border-top-colors: @selectedFocusBorderColor@ @whiteOpacityBorderColor@; | |
| 102 -moz-border-right-colors: @selectedFocusBorderColor@ @whiteOpacityBorderColor@; | |
| 103 -moz-border-left-colors: @selectedFocusBorderColor@ @whiteOpacityBorderColor@; | |
| 104 -moz-border-bottom-colors: @selectedFocusBorderColor@ @whiteOpacityBottomBorderColor@; | |
| 105 background-image: linear-gradient(@selectedFocusGradientColor1@, @selectedFocusGradientColor2@); | |
| 106 background-color: transparent; | |
| 107 } | |
| 108 | |
| 109 treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, current, focus) { | |
| 110 border-style: solid; | |
| 111 -moz-border-top-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@; | |
| 112 -moz-border-right-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@; | |
| 113 -moz-border-left-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@; | |
| 114 -moz-border-bottom-colors: @hoverAndFocusBorderColor@ @whiteOpacityBottomBorderColor@; | |
| 115 background-image: linear-gradient(@hoverAndCurrentFocusGradientColor1@, @hoverAndCurrentFocusGradientColor2@); | |
| 116 } | |
| 117 | |
| 118 treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover) { | |
| 119 -moz-border-top-colors: @hoverBorderColor@ @whiteOpacityBorderColor@; | |
| 120 -moz-border-right-colors: @hoverBorderColor@ @whiteOpacityBorderColor@; | |
| 121 -moz-border-left-colors: @hoverBorderColor@ @whiteOpacityBorderColor@; | |
| 122 -moz-border-bottom-colors: @hoverBorderColor@ @whiteOpacityBottomBorderColor@; | |
| 123 background-image: linear-gradient(@hoverGradientColor1@, @hoverGradientColor2@); | |
| 124 outline: 1px solid @whiteOpacityBorderColor@; | |
| 125 } | |
| 126 | |
| 127 treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover, current) { | |
| 128 -moz-border-top-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@; | |
| 129 -moz-border-right-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@; | |
| 130 -moz-border-left-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@; | |
| 131 -moz-border-bottom-colors: @hoverAndFocusBorderColor@ @whiteOpacityBottomBorderColor@; | |
| 132 background-image: linear-gradient(@hoverGradientColor1@, @hoverGradientColor2@); | |
| 133 } | |
| 134 | |
| 135 treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover, selected) { | |
| 136 -moz-border-top-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@; | |
| 137 -moz-border-right-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@; | |
| 138 -moz-border-left-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@; | |
| 139 -moz-border-bottom-colors: @hoverAndFocusBorderColor@ @whiteOpacityBottomBorderColor@; | |
| 140 background-image: linear-gradient(@hoverAndCurrentFocusGradientColor1@, @hoverAndCurrentFocusGradientColor2@); | |
| 141 } | |
| 142 | |
| 143 tree[disabled="true"] > treechildren::-moz-tree-row { | |
| 144 background: none; | |
| 145 -moz-border-top-colors: transparent; | |
| 146 -moz-border-right-colors: transparent; | |
| 147 -moz-border-left-colors: transparent; | |
| 148 -moz-border-bottom-colors: transparent; | |
| 149 } | |
| 150 | |
| 151 treechildren::-moz-tree-cell(dropOn) { | |
| 152 background-image: none; | |
| 153 background-color: transparent; | |
| 154 border-radius: 0; | |
| 155 } | |
| 156 | |
| 157 treechildren:not(.autocomplete-treebody)::-moz-tree-cell-text { | |
| 158 padding-bottom: initial; | |
| 159 border-color: transparent; | |
| 160 background-color: transparent; | |
| 161 } | |
| 162 | |
| 163 treechildren:not(.autocomplete-treebody)::-moz-tree-cell-text(selected, focus) { | |
| 164 color: -moz-DialogText; | |
| 165 } | |
| 166 | |
| 167 @media (-moz-os-version: windows-win8) { | |
| 168 treechildren:not(.autocomplete-treebody)::-moz-tree-row { | |
| 169 border-width: 1px; | |
| 170 border-radius: 0; | |
| 171 -moz-outline-radius: 0; | |
| 172 } | |
| 173 | |
| 174 treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected) { | |
| 175 background-image: linear-gradient(@selectedGradientColor2@, @selectedGradientColor2@); | |
| 176 } | |
| 177 | |
| 178 treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, focus), | |
| 179 treechildren::-moz-tree-row(dropOn) { | |
| 180 background-image: linear-gradient(@selectedFocusGradientColor2@, @selectedFocusGradientColor2@); | |
| 181 } | |
| 182 | |
| 183 treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, current, focus) { | |
| 184 background-image: linear-gradient(@hoverAndCurrentFocusGradientColor2@, @hoverAndCurrentFocusGradientColor2@); | |
| 185 } | |
| 186 | |
| 187 treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover) { | |
| 188 background-image: linear-gradient(@hoverGradientColor2@, @hoverGradientColor2@); | |
| 189 } | |
| 190 | |
| 191 treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover, current) { | |
| 192 background-image: linear-gradient(@hoverGradientColor2@, @hoverGradientColor2@); | |
| 193 } | |
| 194 | |
| 195 treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover, selected) { | |
| 196 background-image: linear-gradient(@hoverAndCurrentFocusGradientColor2@, @hoverAndCurrentFocusGradientColor2@); | |
| 197 } | |
| 198 } | |
| 199 } |
