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