EarlyBlue/global/tree.css

   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 /* ===== tree.css =======================================================
   6   == Styles used by the XUL tree element.
   7   ======================================================================= */
   8
   9 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
  10
  11 /* ::::: tree ::::: */
  12
  13 tree {
  14   margin: 0px;
  15   border: 1px inset #CCD0DD;
  16   background-color: #FFFFFF;
  17   color: #000000;
  18 }
  19
  20 /* ::::: tree focusring ::::: */
  21
  22 .focusring > .tree-stack > .tree-rows > .tree-bodybox {
  23   border: 1px solid transparent;
  24 }
  25
  26 .focusring:-moz-focusring > .tree-stack > .tree-rows > .tree-bodybox {
  27   border: 1px solid #000000;
  28 }
  29
  30 /* ::::: tree rows ::::: */
  31
  32 treechildren::-moz-tree-row {
  33   border: 1px solid transparent;
  34   background-color: transparent;
  35   min-height: 18px;
  36   height: 1.3em;
  37 }
  38
  39 treechildren::-moz-tree-row(selected) {
  40   background-color: #808080;
  41 }
  42
  43 treechildren::-moz-tree-row(selected, focus) {
  44   background-color: #336699;
  45 }
  46
  47 treechildren::-moz-tree-row(current, focus) {
  48   border: 1px dotted #9999CC;
  49 }
  50
  51 treechildren::-moz-tree-row(selected, current, focus) {
  52   border: 1px dotted #666699;
  53 }
  54
  55 tree[seltype="cell"] > treechildren::-moz-tree-row,
  56 tree[seltype="text"] > treechildren::-moz-tree-row {
  57   border: none;
  58   background-color: transparent;
  59 }
  60
  61 /* ::::: tree cells ::::: */
  62
  63 treechildren::-moz-tree-cell {
  64   padding: 0px 2px;
  65 }
  66
  67 tree[seltype="cell"] > treechildren::-moz-tree-cell-text,
  68 tree[seltype="text"] > treechildren::-moz-tree-cell-text,
  69 treechildren::-moz-tree-cell-text {
  70   color: inherit;
  71 }
  72
  73 treechildren::-moz-tree-cell-text(selected) {
  74   color: #FFFFFF;
  75 }
  76
  77 tree[seltype="cell"] > treechildren::-moz-tree-cell {
  78   border: 1px solid transparent;
  79   padding: 0px 1px;
  80 }
  81
  82 tree[seltype="text"] > treechildren::-moz-tree-cell-text {
  83   border: 1px solid transparent;
  84   padding: 0px 1px 1px;
  85 }
  86
  87 tree[seltype="cell"] > treechildren::-moz-tree-cell(active, selected) {
  88   background-color: #808080;
  89 }
  90 tree[seltype="cell"] > treechildren::-moz-tree-cell-text(active, selected) {
  91   color: #FFFFFF;
  92 }
  93
  94 tree[seltype="text"] > treechildren::-moz-tree-cell-text(active, selected) {
  95   background-color: #808080;
  96   color: #FFFFFF;
  97 }
  98
  99 treechildren::-moz-tree-cell-text(selected, focus) {
 100   color: #FFFFFF;
 101 }
 102
 103 tree[seltype="cell"] > treechildren::-moz-tree-cell(active, selected, focus) {
 104   background-color: #336699;
 105 }
 106 tree[seltype="cell"] > treechildren::-moz-tree-cell-text(active, selected, focus) {
 107   color: #FFFFFF;
 108 }
 109
 110 tree[seltype="text"] > treechildren::-moz-tree-cell-text(active, selected, focus) {
 111   background-color: #336699;
 112   color: #FFFFFF;
 113 }
 114
 115 tree[seltype="cell"] > treechildren::-moz-tree-cell(active, current, focus) {
 116   border: 1px dotted #9999CC;
 117 }
 118
 119 tree[seltype="text"] > treechildren::-moz-tree-cell-text(active, current, focus) {
 120   border: 1px dotted #9999CC;
 121 }
 122
 123 tree[seltype="cell"] > treechildren::-moz-tree-cell(active, selected, current, focus) {
 124   border: 1px dotted #666699;
 125 }
 126
 127 tree[seltype="text"] > treechildren::-moz-tree-cell-text(active, selected, current, focus) {
 128   border: 1px dotted #666699;
 129 }
 130
 131 /* ::::: lines connecting cells ::::: */
 132
 133 tree[seltype="cell"] > treechildren::-moz-tree-line,
 134 tree[seltype="text"] > treechildren::-moz-tree-line,
 135 treechildren::-moz-tree-line {
 136   visibility: hidden;
 137 }
 138
 139 tree[seltype="cell"] > treechildren::-moz-tree-line,
 140 tree[seltype="text"] > treechildren::-moz-tree-line,
 141 treechildren::-moz-tree-line {
 142   border: 1px dotted #CCD0DD;
 143 }
 144
 145 tree[seltype="cell"] > treechildren::-moz-tree-line(active, selected, focus),
 146 treechildren::-moz-tree-line(selected, focus) {
 147   border: 1px dotted #666699;
 148 }
 149
 150 /* ::::: tree separator ::::: */
 151
 152 treechildren::-moz-tree-separator {
 153   margin-top: 1px;
 154   border: 1px outset #CCD0DD;
 155   height: 2px;
 156 }
 157
 158 /* ::::: drop feedback ::::: */
 159
 160 treechildren::-moz-tree-row(dropOn) {
 161   background-color: #336699;
 162 }
 163
 164 tree[seltype="cell"] > treechildren::-moz-tree-cell-text(primary, dropOn),
 165 tree[seltype="text"] > treechildren::-moz-tree-cell-text(primary, dropOn),
 166 treechildren::-moz-tree-cell-text(dropOn) {
 167   color: #FFFFFF;
 168 }
 169
 170 treechildren::-moz-tree-drop-feedback {
 171   background-color: #336699;
 172   width: 50px;
 173   height: 2px;
 174   margin-inline-start: 5px;
 175 }
 176
 177 treechildren::-moz-tree-drop-feedback(selected) {
 178   background-color: #FFFFFF;
 179 }
 180
 181 /* ::::: tree checkbox ::::: */
 182
 183 treechildren::-moz-tree-checkbox {
 184   list-style-image: url("chrome://global/skin/tree/checkbox.gif");
 185 }
 186
 187 treechildren::-moz-tree-checkbox(checked) {
 188   list-style-image: url("chrome://global/skin/tree/checkbox-checked.gif");
 189 }
 190
 191 /* ::::: tree progress meter ::::: */
 192
 193 treechildren::-moz-tree-progressmeter {
 194   margin: 0px 0px;
 195   border: 1px inset #CCD0DD;
 196   background-color: #999999;
 197   color: #6699CC;
 198 }
 199
 200 treechildren::-moz-tree-progressmeter(progressUndetermined) {
 201   list-style-image: url("chrome://global/skin/progressmeter/progressmeter-busy.gif");
 202   background-color: #CCD0DD;
 203 }
 204
 205 treechildren::-moz-tree-cell-text(progressmeter) {
 206   margin: 2px 4px;
 207 }
 208
 209 /* ::::: tree columns ::::: */
 210
 211 treecol {
 212   -moz-box-align: center;
 213   -moz-box-pack: center;
 214   border: 1px outset #CCD0DD;
 215   background-color: #CCD0DD;
 216   color: #000000;
 217   padding: 1px 4px;
 218 }
 219
 220 treecolpicker {
 221   -moz-box-align: center;
 222   -moz-box-pack: center;
 223   border: 1px solid transparent;
 224   background-color: #CCD0DD;
 225   padding: 1px 0px;
 226 }
 227
 228 .treecol-image {
 229   padding: 0 1px;
 230 }
 231
 232 .treecol-text {
 233   margin: 0px !important;
 234   padding: 0px !important;
 235 }
 236
 237 treecol[hideheader="true"] {
 238   border: none;
 239   padding: 0;
 240 }
 241
 242 /* ..... internal box ..... */
 243
 244 treecol:hover:active {
 245   border: 1px solid #666699;
 246   padding-top: 2px;
 247   padding-bottom: 0px;
 248   padding-inline-start: 5px;
 249   padding-inline-end: 3px;
 250 }
 251
 252 treecolpicker:hover:active {
 253   border: 1px solid #666699;
 254 }
 255
 256 .treecol-image:hover:active {
 257   padding-top: 2px;
 258   padding-bottom: 0px;
 259   padding-inline-start: 2px;
 260   padding-inline-end: 0px;
 261 }
 262
 263 /* ::::: column drag and drop styles ::::: */
 264
 265 treecol[dragging="true"] {
 266   border: 1px solid transparent;
 267   background-color: #336699;
 268   color: #000000;
 269 }
 270
 271 treecol[insertafter="true"]:-moz-locale-dir(ltr),
 272 treecol[insertbefore="true"]:-moz-locale-dir(rtl) {
 273   border-right: 1px solid #000000;
 274 }
 275
 276 treecol[insertafter="true"]:-moz-locale-dir(rtl),
 277 treecol[insertbefore="true"]:-moz-locale-dir(ltr) {
 278   border-left: 1px solid #000000;
 279 }
 280
 281 treechildren::-moz-tree-column(insertbefore) {
 282   border-inline-start: 1px solid #000000;
 283 }
 284
 285 treechildren::-moz-tree-column(insertafter) {
 286   border-inline-end: 1px solid #000000;
 287 }
 288
 289 /* ::::: sort direction indicator :::::  */
 290
 291 .treecol-sortdirection {
 292   list-style-image: none;
 293   width: 8px;  /* The image's width is 7 pixels */
 294 }
 295
 296 treecol:not([hideheader="true"]) > .treecol-sortdirection[sortDirection="ascending"] {
 297   list-style-image: url("chrome://global/skin/tree/sort-asc.gif");
 298 }
 299
 300 treecol:not([hideheader="true"]) > .treecol-sortdirection[sortDirection="descending"] {
 301   list-style-image: url("chrome://global/skin/tree/sort-desc.gif");
 302 }
 303
 304 /* ::::: column picker :::::  */
 305
 306 .tree-columnpicker-icon {
 307   list-style-image: url("chrome://global/skin/tree/columnpicker.gif");
 308 }
 309
 310 /* ::::: twisty :::::  */
 311
 312 treechildren::-moz-tree-twisty {
 313   padding-inline-end: 2px;
 314   padding-top: 1px;
 315   width: 11px; /* The image's width is 11 pixels */
 316   list-style-image: url("chrome://global/skin/tree/twisty.svg#clsd");
 317 }
 318
 319 treechildren::-moz-tree-twisty(open) {
 320   width: 11px; /* The image's width is 11 pixels */
 321   list-style-image: url("chrome://global/skin/tree/twisty.svg#open");
 322 }
 323
 324 treechildren::-moz-tree-indentation {
 325   width: 11px;
 326 }
 327
 328 /* ::::: gridline style ::::: */
 329
 330 treechildren.gridlines::-moz-tree-cell {
 331   border-right: 1px solid green;
 332   border-bottom: 1px solid green;
 333 }
 334
 335 treechildren.gridlines::-moz-tree-row {
 336   border: none;
 337 }
 338
 339 /* ::::: alternating background ::::: */
 340
 341 treechildren[alternatingbackground="true"]::-moz-tree-row(odd) {
 342   background-color: #F5F7FF;
 343 }
 344
 345 treechildren[alternatingbackground="true"]::-moz-tree-row(odd, selected) {
 346   background-color: #A0A0A0;
 347 }
 348
 349 treechildren[alternatingbackground="true"]::-moz-tree-row(odd, selected, focus) {
 350   background-color: #6699CC;
 351 }
 352
 353 /* ::::: editable tree ::::: */
 354
 355 treechildren::-moz-tree-row(selected, editing) {
 356   background-color: transparent;
 357   border: none;
 358 }
 359
 360 treechildren::-moz-tree-cell-text(selected, editing) {
 361   color: inherit;
 362 }
 363
 364 .tree-input {
 365   border: 1px solid #336699;
 366   margin: 0;
 367   margin-inline-start: -4px;
 368   padding: 1px;
 369 }