tree.css (6199B)
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 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 6 7 /* ::::: tree ::::: */ 8 9 tree { 10 border: 2px solid; 11 -moz-border-top-colors: ThreeDShadow ThreeDDarkShadow; 12 -moz-border-right-colors: ThreeDHighlight ThreeDLightShadow; 13 -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow; 14 -moz-border-left-colors: ThreeDShadow ThreeDDarkShadow; 15 background-color: -moz-Field; 16 color: -moz-FieldText; 17 } 18 19 /* ::::: tree focusring ::::: */ 20 21 .focusring > .tree-stack > .tree-rows > .tree-bodybox { 22 border: 1px solid transparent; 23 } 24 25 .focusring:focus > .tree-stack > .tree-rows > .tree-bodybox { 26 border: 1px solid #000000; 27 } 28 29 /* ::::: tree rows ::::: */ 30 31 treechildren:not(.autocomplete-treebody)::-moz-tree-row(multicol, odd) { 32 background-color: -moz-oddtreerow; 33 } 34 35 treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected) { 36 background-color: -moz-cellhighlight; 37 } 38 39 treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, focus) { 40 background-color: Highlight; 41 } 42 43 /* ::::: tree cells ::::: */ 44 45 treechildren::-moz-tree-cell-text(selected) { 46 color: -moz-cellhighlighttext; 47 } 48 49 tree[seltype="cell"] > treechildren::-moz-tree-cell { 50 border: 1px solid transparent; 51 } 52 53 tree[seltype="text"] > treechildren::-moz-tree-cell-text { 54 border: 1px solid transparent; 55 } 56 57 tree[seltype="cell"] > treechildren::-moz-tree-cell(active, selected) { 58 background-color: -moz-cellhighlight; 59 } 60 61 tree[seltype="cell"] > treechildren::-moz-tree-cell-text(active, selected) { 62 color: -moz-cellhighlighttext; 63 } 64 65 tree[seltype="text"] > treechildren::-moz-tree-cell-text(active, selected) { 66 background-color: -moz-cellhighlight; 67 color: -moz-cellhighlighttext; 68 } 69 70 tree[seltype="text"] > treechildren::-moz-tree-cell-text(active, selected, focus) { 71 background-color: Highlight; 72 } 73 74 tree[seltype="cell"] > treechildren::-moz-tree-cell(active, current, focus) { 75 border: 1px dotted #000000; 76 } 77 78 tree[seltype="text"] > treechildren::-moz-tree-cell-text(active, current, focus) { 79 border: 1px dotted #000000; 80 } 81 82 tree[seltype="cell"] > treechildren::-moz-tree-cell(active, selected, current, focus) { 83 border: 1px dotted #C0C0C0; 84 } 85 86 tree[seltype="text"] > treechildren::-moz-tree-cell-text(active, selected, current, focus) { 87 border: 1px dotted #C0C0C0; 88 } 89 90 /* ::::: lines connecting cells ::::: */ 91 92 tree[seltype="cell"] > treechildren::-moz-tree-line, 93 tree[seltype="text"] > treechildren::-moz-tree-line, 94 treechildren::-moz-tree-line { 95 border: 1px dotted ThreeDShadow; 96 } 97 98 tree[seltype="cell"] > treechildren::-moz-tree-line(active, selected, focus), 99 treechildren::-moz-tree-line(selected, focus) { 100 border: 1px dotted HighlightText; 101 } 102 103 /* ::::: tree separator ::::: */ 104 105 treechildren::-moz-tree-separator { 106 border-top: 1px solid ThreeDShadow; 107 border-bottom: 1px solid ThreeDHighlight; 108 } 109 110 /* ::::: drop feedback ::::: */ 111 112 tree[seltype="cell"] > treechildren::-moz-tree-cell-text(primary, dropOn), 113 tree[seltype="text"] > treechildren::-moz-tree-cell-text(primary, dropOn), 114 treechildren::-moz-tree-cell-text(primary, dropOn) { 115 background-color: Highlight; 116 color: HighlightText; 117 } 118 119 treechildren::-moz-tree-drop-feedback { 120 background-color: Highlight; 121 } 122 123 /* ::::: tree progress meter ::::: */ 124 125 treechildren::-moz-tree-progressmeter { 126 padding: 1px; 127 border: 1px solid; 128 border-top-color: ThreeDShadow; 129 border-right-color: ThreeDHighlight; 130 border-bottom-color: ThreeDHighlight; 131 border-left-color: ThreeDShadow; 132 background-color: -moz-Dialog; 133 color: ThreeDShadow; 134 } 135 136 treechildren::-moz-tree-progressmeter(progressUndetermined) { 137 list-style-image: url("chrome://global/skin/progressmeter/progressmeter-busy.gif"); 138 } 139 140 /* ::::: tree columns ::::: */ 141 142 treecol:hover, 143 treecolpicker:hover { 144 color: -moz-buttonhovertext; 145 } 146 147 /* ..... internal box ..... */ 148 149 treecol:hover:active, 150 treecolpicker:hover:active { 151 color: ButtonText; 152 border: 2px solid; 153 -moz-border-top-colors: ThreeDShadow -moz-Dialog; 154 -moz-border-right-colors: ThreeDShadow transparent; 155 -moz-border-bottom-colors: ThreeDShadow transparent; 156 -moz-border-left-colors: ThreeDShadow -moz-Dialog; 157 padding-top: 0px; 158 padding-bottom: 0px; 159 padding-inline-start: 3px; 160 padding-inline-end: 1px; 161 } 162 163 .treecol-image:hover:active { 164 padding: 0px; 165 padding-inline-start: 2px; 166 } 167 168 treecol:hover:active .treecol-text { 169 margin: 1px 0px -1px 0px !important; 170 } 171 172 /* ::::: column drag and drop styles ::::: */ 173 174 treecol[dragging="true"] { 175 -moz-border-top-colors: ThreeDDarkShadow transparent !important; 176 -moz-border-right-colors: ThreeDDarkShadow transparent!important; 177 -moz-border-bottom-colors: ThreeDDarkShadow transparent !important; 178 -moz-border-left-colors: ThreeDDarkShadow transparent !important; 179 } 180 181 /* ::::: sort direction indicator ::::: */ 182 183 .treecol-sortdirection { 184 -moz-appearance: treeheadersortarrow; 185 } 186 187 /* ::::: twisty ::::: */ 188 189 treechildren::-moz-tree-twisty { 190 -moz-appearance: treetwisty; 191 padding-inline-end: 4px; 192 padding-top: 1px; 193 width: 9px; /* The image's width is 9 pixels */ 194 list-style-image: url("chrome://global/skin/tree/twisty-clsd.png"); 195 } 196 197 treechildren::-moz-tree-twisty(open) { 198 -moz-appearance: treetwistyopen; 199 width: 9px; /* The image's width is 9 pixels */ 200 list-style-image: url("chrome://global/skin/tree/twisty-open.png"); 201 } 202 203 treechildren::-moz-tree-indentation { 204 width: 18px; 205 } 206 207 /* ::::: gridline style ::::: */ 208 209 treechildren.gridlines::-moz-tree-cell { 210 border-right: 1px solid transparent !important; 211 border-bottom: 1px solid transparent !important; 212 } 213 214 /* ::::: editable tree ::::: */ 215 216 treechildren::-moz-tree-row(selected, editing) { 217 background-color: transparent; 218 border: none; 219 } 220 221 treechildren::-moz-tree-cell-text(selected, editing) { 222 color: inherit; 223 } 224 225 .tree-input { 226 border: 1px solid Highlight; 227 -moz-border-top-colors: Highlight; 228 -moz-border-bottom-colors: Highlight; 229 -moz-border-left-colors: Highlight; 230 -moz-border-right-colors: Highlight; 231 margin: 0; 232 margin-inline-start: -4px; 233 padding: 1px; 234 }