xonstat/static/css/nv.d3.css

   1
   2 /********************
   3  * HTML CSS
   4  */
   5
   6
   7 .chartWrap {
   8   margin: 0;
   9   padding: 0;
  10   overflow: hidden;
  11 }
  12
  13 /********************
  14   Box shadow and border radius styling
  15 */
  16 .nvtooltip.with-3d-shadow, .with-3d-shadow .nvtooltip {
  17   -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  18   -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  19   box-shadow: 0 5px 10px rgba(0,0,0,.2);
  20
  21   -webkit-border-radius: 6px;
  22   -moz-border-radius: 6px;
  23   border-radius: 6px;
  24 }
  25
  26 /********************
  27  * TOOLTIP CSS
  28  */
  29
  30 .nvtooltip {
  31   position: absolute;
  32   background-color: rgba(255,255,255,1.0);
  33   padding: 1px;
  34   border: 1px solid rgba(0,0,0,.2);
  35   z-index: 10000;
  36
  37   font-family: Arial;
  38   font-size: 13px;
  39   text-align: left;
  40   pointer-events: none;
  41
  42   white-space: nowrap;
  43
  44   -webkit-touch-callout: none;
  45   -webkit-user-select: none;
  46   -khtml-user-select: none;
  47   -moz-user-select: none;
  48   -ms-user-select: none;
  49   user-select: none;
  50 }
  51
  52 /*Give tooltips that old fade in transition by
  53     putting a "with-transitions" class on the container div.
  54 */
  55 .nvtooltip.with-transitions, .with-transitions .nvtooltip {
  56   transition: opacity 250ms linear;
  57   -moz-transition: opacity 250ms linear;
  58   -webkit-transition: opacity 250ms linear;
  59
  60   transition-delay: 250ms;
  61   -moz-transition-delay: 250ms;
  62   -webkit-transition-delay: 250ms;
  63 }
  64
  65 .nvtooltip.x-nvtooltip,
  66 .nvtooltip.y-nvtooltip {
  67   padding: 8px;
  68 }
  69
  70 .nvtooltip h3 {
  71   margin: 0;
  72   padding: 4px 14px;
  73   line-height: 18px;
  74   font-weight: normal;
  75   background-color: rgba(247,247,247,0.75);
  76   text-align: center;
  77
  78   border-bottom: 1px solid #ebebeb;
  79
  80   -webkit-border-radius: 5px 5px 0 0;
  81   -moz-border-radius: 5px 5px 0 0;
  82   border-radius: 5px 5px 0 0;
  83 }
  84
  85 .nvtooltip p {
  86   margin: 0;
  87   padding: 5px 14px;
  88   text-align: center;
  89 }
  90
  91 .nvtooltip span {
  92   display: inline-block;
  93   margin: 2px 0;
  94 }
  95
  96 .nvtooltip table {
  97   margin: 6px;
  98 }
  99
 100 .nvtooltip table td {
 101   padding-right: 9px;
 102   padding-bottom: 3px;
 103   vertical-align: middle;
 104 }
 105
 106 .nvtooltip table td.key {
 107   font-weight:normal;
 108 }
 109 .nvtooltip table td.value {
 110   text-align: right;
 111   font-weight: bold;
 112 }
 113
 114 .nvtooltip table td.legend-color-guide div {
 115   width: 8px;
 116   height: 8px;
 117   vertical-align: middle;
 118 }
 119 .nvtooltip-pending-removal {
 120   position: absolute;
 121   pointer-events: none;
 122 }
 123
 124
 125 /********************
 126  * SVG CSS
 127  */
 128
 129
 130 svg {
 131   -webkit-touch-callout: none;
 132   -webkit-user-select: none;
 133   -khtml-user-select: none;
 134   -moz-user-select: none;
 135   -ms-user-select: none;
 136   user-select: none;
 137   /* Trying to get SVG to act like a greedy block in all browsers */
 138   display: block;
 139   width:100%;
 140   height:100%;
 141 }
 142
 143
 144 svg text {
 145   font: normal 12px Arial;
 146 }
 147
 148 svg .title {
 149  font: bold 14px Arial;
 150 }
 151
 152 .nvd3 .nv-background {
 153   fill: white;
 154   fill-opacity: 0;
 155   /*
 156   pointer-events: none;
 157   */
 158 }
 159
 160 .nvd3.nv-noData {
 161   font-size: 18px;
 162   font-weight: bold;
 163 }
 164
 165
 166 /**********
 167 *  Brush
 168 */
 169
 170 .nv-brush .extent {
 171   fill-opacity: .125;
 172   shape-rendering: crispEdges;
 173 }
 174
 175
 176
 177 /**********
 178 *  Legend
 179 */
 180
 181 .nvd3 .nv-legend .nv-series {
 182   cursor: pointer;
 183 }
 184
 185 .nvd3 .nv-legend .disabled circle {
 186   fill-opacity: 0;
 187 }
 188
 189
 190
 191 /**********
 192 *  Axes
 193 */
 194 .nvd3 .nv-axis {
 195   pointer-events:none;
 196 }
 197
 198 .nvd3 .nv-axis path {
 199   fill: none;
 200   stroke: #000;
 201   stroke-opacity: .75;
 202   shape-rendering: crispEdges;
 203 }
 204
 205 .nvd3 .nv-axis path.domain {
 206   stroke-opacity: .75;
 207 }
 208
 209 .nvd3 .nv-axis.nv-x path.domain {
 210   stroke-opacity: 0;
 211 }
 212
 213 .nvd3 .nv-axis line {
 214   fill: none;
 215   stroke: #e5e5e5;
 216   shape-rendering: crispEdges;
 217 }
 218
 219 .nvd3 .nv-axis .zero line,
 220 /*this selector may not be necessary*/ .nvd3 .nv-axis line.zero {
 221   stroke-opacity: .75;
 222 }
 223
 224 .nvd3 .nv-axis .nv-axisMaxMin text {
 225   font-weight: bold;
 226 }
 227
 228 .nvd3 .x  .nv-axis .nv-axisMaxMin text,
 229 .nvd3 .x2 .nv-axis .nv-axisMaxMin text,
 230 .nvd3 .x3 .nv-axis .nv-axisMaxMin text {
 231   text-anchor: middle
 232 }
 233
 234
 235
 236 /**********
 237 *  Brush
 238 */
 239
 240 .nv-brush .resize path {
 241   fill: #eee;
 242   stroke: #666;
 243 }
 244
 245
 246
 247 /**********
 248 *  Bars
 249 */
 250
 251 .nvd3 .nv-bars .negative rect {
 252     zfill: brown;
 253 }
 254
 255 .nvd3 .nv-bars rect {
 256   zfill: steelblue;
 257   fill-opacity: .75;
 258
 259   transition: fill-opacity 250ms linear;
 260   -moz-transition: fill-opacity 250ms linear;
 261   -webkit-transition: fill-opacity 250ms linear;
 262 }
 263
 264 .nvd3 .nv-bars rect.hover {
 265   fill-opacity: 1;
 266 }
 267
 268 .nvd3 .nv-bars .hover rect {
 269   fill: lightblue;
 270 }
 271
 272 .nvd3 .nv-bars text {
 273   fill: rgba(0,0,0,0);
 274 }
 275
 276 .nvd3 .nv-bars .hover text {
 277   fill: rgba(0,0,0,1);
 278 }
 279
 280
 281 /**********
 282 *  Bars
 283 */
 284
 285 .nvd3 .nv-multibar .nv-groups rect,
 286 .nvd3 .nv-multibarHorizontal .nv-groups rect,
 287 .nvd3 .nv-discretebar .nv-groups rect {
 288   stroke-opacity: 0;
 289
 290   transition: fill-opacity 250ms linear;
 291   -moz-transition: fill-opacity 250ms linear;
 292   -webkit-transition: fill-opacity 250ms linear;
 293 }
 294
 295 .nvd3 .nv-multibar .nv-groups rect:hover,
 296 .nvd3 .nv-multibarHorizontal .nv-groups rect:hover,
 297 .nvd3 .nv-discretebar .nv-groups rect:hover {
 298   fill-opacity: 1;
 299 }
 300
 301 .nvd3 .nv-discretebar .nv-groups text,
 302 .nvd3 .nv-multibarHorizontal .nv-groups text {
 303   font-weight: bold;
 304   fill: rgba(0,0,0,1);
 305   stroke: rgba(0,0,0,0);
 306 }
 307
 308 /***********
 309 *  Pie Chart
 310 */
 311
 312 .nvd3.nv-pie path {
 313   stroke-opacity: 0;
 314   transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
 315   -moz-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
 316   -webkit-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
 317
 318 }
 319
 320 .nvd3.nv-pie .nv-slice text {
 321   stroke: #000;
 322   stroke-width: 0;
 323 }
 324
 325 .nvd3.nv-pie path {
 326   stroke: #fff;
 327   stroke-width: 1px;
 328   stroke-opacity: 1;
 329 }
 330
 331 .nvd3.nv-pie .hover path {
 332   fill-opacity: .7;
 333 }
 334 .nvd3.nv-pie .nv-label {
 335   pointer-events: none;
 336 }
 337 .nvd3.nv-pie .nv-label rect {
 338   fill-opacity: 0;
 339   stroke-opacity: 0;
 340 }
 341
 342 /**********
 343 * Lines
 344 */
 345
 346 .nvd3 .nv-groups path.nv-line {
 347   fill: none;
 348   stroke-width: 1.5px;
 349   /*
 350   stroke-linecap: round;
 351   shape-rendering: geometricPrecision;
 352
 353   transition: stroke-width 250ms linear;
 354   -moz-transition: stroke-width 250ms linear;
 355   -webkit-transition: stroke-width 250ms linear;
 356
 357   transition-delay: 250ms
 358   -moz-transition-delay: 250ms;
 359   -webkit-transition-delay: 250ms;
 360   */
 361 }
 362
 363 .nvd3 .nv-groups path.nv-line.nv-thin-line {
 364   stroke-width: 1px;
 365 }
 366
 367
 368 .nvd3 .nv-groups path.nv-area {
 369   stroke: none;
 370   /*
 371   stroke-linecap: round;
 372   shape-rendering: geometricPrecision;
 373
 374   stroke-width: 2.5px;
 375   transition: stroke-width 250ms linear;
 376   -moz-transition: stroke-width 250ms linear;
 377   -webkit-transition: stroke-width 250ms linear;
 378
 379   transition-delay: 250ms
 380   -moz-transition-delay: 250ms;
 381   -webkit-transition-delay: 250ms;
 382   */
 383 }
 384
 385 .nvd3 .nv-line.hover path {
 386   stroke-width: 6px;
 387 }
 388
 389 /*
 390 .nvd3.scatter .groups .point {
 391   fill-opacity: 0.1;
 392   stroke-opacity: 0.1;
 393 }
 394   */
 395
 396 .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
 397   fill-opacity: 0;
 398   stroke-opacity: 0;
 399 }
 400
 401 .nvd3.nv-scatter.nv-single-point .nv-groups .nv-point {
 402   fill-opacity: .5 !important;
 403   stroke-opacity: .5 !important;
 404 }
 405
 406
 407 .with-transitions .nvd3 .nv-groups .nv-point {
 408   transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
 409   -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
 410   -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
 411
 412 }
 413
 414 .nvd3.nv-scatter .nv-groups .nv-point.hover,
 415 .nvd3 .nv-groups .nv-point.hover {
 416   stroke-width: 7px;
 417   fill-opacity: .95 !important;
 418   stroke-opacity: .95 !important;
 419 }
 420
 421
 422 .nvd3 .nv-point-paths path {
 423   stroke: #aaa;
 424   stroke-opacity: 0;
 425   fill: #eee;
 426   fill-opacity: 0;
 427 }
 428
 429
 430
 431 .nvd3 .nv-indexLine {
 432   cursor: ew-resize;
 433 }
 434
 435
 436 /**********
 437 * Distribution
 438 */
 439
 440 .nvd3 .nv-distribution {
 441   pointer-events: none;
 442 }
 443
 444
 445
 446 /**********
 447 *  Scatter
 448 */
 449
 450 /* **Attempting to remove this for useVoronoi(false), need to see if it's required anywhere
 451 .nvd3 .nv-groups .nv-point {
 452   pointer-events: none;
 453 }
 454 */
 455
 456 .nvd3 .nv-groups .nv-point.hover {
 457   stroke-width: 20px;
 458   stroke-opacity: .5;
 459 }
 460
 461 .nvd3 .nv-scatter .nv-point.hover {
 462   fill-opacity: 1;
 463 }
 464
 465 /*
 466 .nv-group.hover .nv-point {
 467   fill-opacity: 1;
 468 }
 469 */
 470
 471
 472 /**********
 473 *  Stacked Area
 474 */
 475
 476 .nvd3.nv-stackedarea path.nv-area {
 477   fill-opacity: .7;
 478   /*
 479   stroke-opacity: .65;
 480   fill-opacity: 1;
 481   */
 482   stroke-opacity: 0;
 483
 484   transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
 485   -moz-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
 486   -webkit-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
 487
 488   /*
 489   transition-delay: 500ms;
 490   -moz-transition-delay: 500ms;
 491   -webkit-transition-delay: 500ms;
 492   */
 493
 494 }
 495
 496 .nvd3.nv-stackedarea path.nv-area.hover {
 497   fill-opacity: .9;
 498   /*
 499   stroke-opacity: .85;
 500   */
 501 }
 502 /*
 503 .d3stackedarea .groups path {
 504   stroke-opacity: 0;
 505 }
 506   */
 507
 508
 509
 510 .nvd3.nv-stackedarea .nv-groups .nv-point {
 511   stroke-opacity: 0;
 512   fill-opacity: 0;
 513 }
 514
 515 /*
 516 .nvd3.nv-stackedarea .nv-groups .nv-point.hover {
 517   stroke-width: 20px;
 518   stroke-opacity: .75;
 519   fill-opacity: 1;
 520 }*/
 521
 522
 523
 524 /**********
 525 *  Line Plus Bar
 526 */
 527
 528 .nvd3.nv-linePlusBar .nv-bar rect {
 529   fill-opacity: .75;
 530 }
 531
 532 .nvd3.nv-linePlusBar .nv-bar rect:hover {
 533   fill-opacity: 1;
 534 }
 535
 536
 537 /**********
 538 *  Bullet
 539 */
 540
 541 .nvd3.nv-bullet { font: 10px sans-serif; }
 542 .nvd3.nv-bullet .nv-measure { fill-opacity: .8; }
 543 .nvd3.nv-bullet .nv-measure:hover { fill-opacity: 1; }
 544 .nvd3.nv-bullet .nv-marker { stroke: #000; stroke-width: 2px; }
 545 .nvd3.nv-bullet .nv-markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; }
 546 .nvd3.nv-bullet .nv-tick line { stroke: #666; stroke-width: .5px; }
 547 .nvd3.nv-bullet .nv-range.nv-s0 { fill: #eee; }
 548 .nvd3.nv-bullet .nv-range.nv-s1 { fill: #ddd; }
 549 .nvd3.nv-bullet .nv-range.nv-s2 { fill: #ccc; }
 550 .nvd3.nv-bullet .nv-title { font-size: 14px; font-weight: bold; }
 551 .nvd3.nv-bullet .nv-subtitle { fill: #999; }
 552
 553
 554 .nvd3.nv-bullet .nv-range {
 555   fill: #bababa;
 556   fill-opacity: .4;
 557 }
 558 .nvd3.nv-bullet .nv-range:hover {
 559   fill-opacity: .7;
 560 }
 561
 562
 563
 564 /**********
 565 * Sparkline
 566 */
 567
 568 .nvd3.nv-sparkline path {
 569   fill: none;
 570 }
 571
 572 .nvd3.nv-sparklineplus g.nv-hoverValue {
 573   pointer-events: none;
 574 }
 575
 576 .nvd3.nv-sparklineplus .nv-hoverValue line {
 577   stroke: #333;
 578   stroke-width: 1.5px;
 579  }
 580
 581 .nvd3.nv-sparklineplus,
 582 .nvd3.nv-sparklineplus g {
 583   pointer-events: all;
 584 }
 585
 586 .nvd3 .nv-hoverArea {
 587   fill-opacity: 0;
 588   stroke-opacity: 0;
 589 }
 590
 591 .nvd3.nv-sparklineplus .nv-xValue,
 592 .nvd3.nv-sparklineplus .nv-yValue {
 593   /*
 594   stroke: #666;
 595   */
 596   stroke-width: 0;
 597   font-size: .9em;
 598   font-weight: normal;
 599 }
 600
 601 .nvd3.nv-sparklineplus .nv-yValue {
 602   stroke: #f66;
 603 }
 604
 605 .nvd3.nv-sparklineplus .nv-maxValue {
 606   stroke: #2ca02c;
 607   fill: #2ca02c;
 608 }
 609
 610 .nvd3.nv-sparklineplus .nv-minValue {
 611   stroke: #d62728;
 612   fill: #d62728;
 613 }
 614
 615 .nvd3.nv-sparklineplus .nv-currentValue {
 616   /*
 617   stroke: #444;
 618   fill: #000;
 619   */
 620   font-weight: bold;
 621   font-size: 1.1em;
 622 }
 623
 624 /**********
 625 * historical stock
 626 */
 627
 628 .nvd3.nv-ohlcBar .nv-ticks .nv-tick {
 629   stroke-width: 2px;
 630 }
 631
 632 .nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover {
 633   stroke-width: 4px;
 634 }
 635
 636 .nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive {
 637  stroke: #2ca02c;
 638 }
 639
 640 .nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative {
 641  stroke: #d62728;
 642 }
 643
 644 .nvd3.nv-historicalStockChart .nv-axis .nv-axislabel {
 645   font-weight: bold;
 646 }
 647
 648 .nvd3.nv-historicalStockChart .nv-dragTarget {
 649   fill-opacity: 0;
 650   stroke: none;
 651   cursor: move;
 652 }
 653
 654 .nvd3 .nv-brush .extent {
 655   /*
 656   cursor: ew-resize !important;
 657   */
 658   fill-opacity: 0 !important;
 659 }
 660
 661 .nvd3 .nv-brushBackground rect {
 662   stroke: #000;
 663   stroke-width: .4;
 664   fill: #fff;
 665   fill-opacity: .7;
 666 }
 667
 668
 669
 670 /**********
 671 * Indented Tree
 672 */
 673
 674
 675 /**
 676  * TODO: the following 3 selectors are based on classes used in the example.  I should either make them standard and leave them here, or move to a CSS file not included in the library
 677  */
 678 .nvd3.nv-indentedtree .name {
 679   margin-left: 5px;
 680 }
 681
 682 .nvd3.nv-indentedtree .clickable {
 683   color: #08C;
 684   cursor: pointer;
 685 }
 686
 687 .nvd3.nv-indentedtree span.clickable:hover {
 688   color: #005580;
 689   text-decoration: underline;
 690 }
 691
 692
 693 .nvd3.nv-indentedtree .nv-childrenCount {
 694   display: inline-block;
 695   margin-left: 5px;
 696 }
 697
 698 .nvd3.nv-indentedtree .nv-treeicon {
 699   cursor: pointer;
 700   /*
 701   cursor: n-resize;
 702   */
 703 }
 704
 705 .nvd3.nv-indentedtree .nv-treeicon.nv-folded {
 706   cursor: pointer;
 707   /*
 708   cursor: s-resize;
 709   */
 710 }
 711
 712 /**********
 713 * Parallel Coordinates
 714 */
 715
 716 .nvd3 .background path {
 717   fill: none;
 718   stroke: #ccc;
 719   stroke-opacity: .4;
 720   shape-rendering: crispEdges;
 721 }
 722
 723 .nvd3 .foreground path {
 724   fill: none;
 725   stroke: steelblue;
 726   stroke-opacity: .7;
 727 }
 728
 729 .nvd3 .brush .extent {
 730   fill-opacity: .3;
 731   stroke: #fff;
 732   shape-rendering: crispEdges;
 733 }
 734
 735 .nvd3 .axis line, .axis path {
 736   fill: none;
 737   stroke: #000;
 738   shape-rendering: crispEdges;
 739 }
 740
 741 .nvd3 .axis text {
 742   text-shadow: 0 1px 0 #fff;
 743 }
 744
 745 /****
 746 Interactive Layer
 747 */
 748 .nvd3 .nv-interactiveGuideLine {
 749   pointer-events:none;
 750 }
 751 .nvd3 line.nv-guideline {
 752   stroke: #ccc;
 753 }