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(50,50,50,1.0);
  33   padding: 1px;
  34   border: none;
  35   z-index: 10000;
  36
  37   font-family: sans-serif;
  38   font-size: 6px;
  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(100,100,100,0.75);
  76   text-align: center;
  77
  78   border-bottom: 1px solid #gray;
  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: 2px;
  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 sans-serif;
 146   fill: rgb(200, 200, 200);
 147 }
 148
 149 svg .title {
 150  font: bold 14px Arial;
 151 }
 152
 153 .nvd3 .nv-background {
 154   fill: white;
 155   fill-opacity: 0;
 156   /*
 157   pointer-events: none;
 158   */
 159 }
 160
 161 .nvd3.nv-noData {
 162   font-size: 18px;
 163   font-weight: bold;
 164 }
 165
 166
 167 /**********
 168 *  Brush
 169 */
 170
 171 .nv-brush .extent {
 172   fill-opacity: .125;
 173   shape-rendering: crispEdges;
 174 }
 175
 176
 177
 178 /**********
 179 *  Legend
 180 */
 181
 182 .nvd3 .nv-legend .nv-series {
 183   cursor: pointer;
 184 }
 185
 186 .nvd3 .nv-legend .disabled circle {
 187   fill-opacity: 0;
 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: rgb(200, 200, 200);
 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   stroke: rgb(50, 50, 50);
 217   stroke-opacity: .65;
 218   shape-rendering: crispEdges;
 219 }
 220
 221 .nvd3 .nv-axis .zero line,
 222 /*this selector may not be necessary*/ .nvd3 .nv-axis line.zero {
 223   stroke-opacity: .75;
 224 }
 225
 226 .nvd3 .nv-axis .nv-axisMaxMin text {
 227   font-weight: bold;
 228 }
 229
 230 .nvd3 .x  .nv-axis .nv-axisMaxMin text,
 231 .nvd3 .x2 .nv-axis .nv-axisMaxMin text,
 232 .nvd3 .x3 .nv-axis .nv-axisMaxMin text {
 233   text-anchor: middle;
 234 }
 235
 236
 237
 238 /**********
 239 *  Brush
 240 */
 241
 242 .nv-brush .resize path {
 243   fill: #eee;
 244   stroke: #666;
 245 }
 246
 247
 248
 249 /**********
 250 *  Bars
 251 */
 252
 253 .nvd3 .nv-bars .negative rect {
 254     zfill: brown;
 255 }
 256
 257 .nvd3 .nv-bars rect {
 258   zfill: steelblue;
 259   fill-opacity: .75;
 260
 261   transition: fill-opacity 250ms linear;
 262   -moz-transition: fill-opacity 250ms linear;
 263   -webkit-transition: fill-opacity 250ms linear;
 264 }
 265
 266 .nvd3 .nv-bars rect.hover {
 267   fill-opacity: 1;
 268 }
 269
 270 .nvd3 .nv-bars .hover rect {
 271   fill: lightblue;
 272 }
 273
 274 .nvd3 .nv-bars text {
 275   fill: rgba(0,0,0,0);
 276 }
 277
 278 .nvd3 .nv-bars .hover text {
 279   fill: rgba(0,0,0,1);
 280 }
 281
 282
 283 /**********
 284 *  Bars
 285 */
 286
 287 .nvd3 .nv-multibar .nv-groups rect,
 288 .nvd3 .nv-multibarHorizontal .nv-groups rect,
 289 .nvd3 .nv-discretebar .nv-groups rect {
 290   stroke-opacity: 0;
 291
 292   transition: fill-opacity 250ms linear;
 293   -moz-transition: fill-opacity 250ms linear;
 294   -webkit-transition: fill-opacity 250ms linear;
 295 }
 296
 297 .nvd3 .nv-multibar .nv-groups rect:hover,
 298 .nvd3 .nv-multibarHorizontal .nv-groups rect:hover,
 299 .nvd3 .nv-discretebar .nv-groups rect:hover {
 300   fill-opacity: 1;
 301 }
 302
 303 .nvd3 .nv-discretebar .nv-groups text,
 304 .nvd3 .nv-multibarHorizontal .nv-groups text {
 305   font-weight: bold;
 306   fill: rgba(0,0,0,1);
 307   stroke: rgba(0,0,0,0);
 308 }
 309
 310 /***********
 311 *  Pie Chart
 312 */
 313
 314 .nvd3.nv-pie path {
 315   stroke-opacity: 0;
 316   transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
 317   -moz-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
 318   -webkit-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
 319
 320 }
 321
 322 .nvd3.nv-pie .nv-slice text {
 323   stroke: #000;
 324   stroke-width: 0;
 325 }
 326
 327 .nvd3.nv-pie path {
 328   stroke: #fff;
 329   stroke-width: 1px;
 330   stroke-opacity: 1;
 331 }
 332
 333 .nvd3.nv-pie .hover path {
 334   fill-opacity: .7;
 335 }
 336 .nvd3.nv-pie .nv-label {
 337   pointer-events: none;
 338 }
 339 .nvd3.nv-pie .nv-label rect {
 340   fill-opacity: 0;
 341   stroke-opacity: 0;
 342 }
 343
 344 /**********
 345 * Lines
 346 */
 347
 348 .nvd3 .nv-groups path.nv-line {
 349   fill: none;
 350   stroke-width: 1.5px;
 351   /*
 352   stroke-linecap: round;
 353   shape-rendering: geometricPrecision;
 354
 355   transition: stroke-width 250ms linear;
 356   -moz-transition: stroke-width 250ms linear;
 357   -webkit-transition: stroke-width 250ms linear;
 358
 359   transition-delay: 250ms
 360   -moz-transition-delay: 250ms;
 361   -webkit-transition-delay: 250ms;
 362   */
 363 }
 364
 365 .nvd3 .nv-groups path.nv-line.nv-thin-line {
 366   stroke-width: 1px;
 367 }
 368
 369
 370 .nvd3 .nv-groups path.nv-area {
 371   stroke: none;
 372   /*
 373   stroke-linecap: round;
 374   shape-rendering: geometricPrecision;
 375
 376   stroke-width: 2.5px;
 377   transition: stroke-width 250ms linear;
 378   -moz-transition: stroke-width 250ms linear;
 379   -webkit-transition: stroke-width 250ms linear;
 380
 381   transition-delay: 250ms
 382   -moz-transition-delay: 250ms;
 383   -webkit-transition-delay: 250ms;
 384   */
 385 }
 386
 387 .nvd3 .nv-line.hover path {
 388   stroke-width: 6px;
 389 }
 390
 391 /*
 392 .nvd3.scatter .groups .point {
 393   fill-opacity: 0.1;
 394   stroke-opacity: 0.1;
 395 }
 396   */
 397
 398 .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
 399   fill-opacity: 0;
 400   stroke-opacity: 0;
 401 }
 402
 403 .nvd3.nv-scatter.nv-single-point .nv-groups .nv-point {
 404   fill-opacity: .5 !important;
 405   stroke-opacity: .5 !important;
 406 }
 407
 408
 409 .with-transitions .nvd3 .nv-groups .nv-point {
 410   transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
 411   -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
 412   -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
 413
 414 }
 415
 416 .nvd3.nv-scatter .nv-groups .nv-point.hover,
 417 .nvd3 .nv-groups .nv-point.hover {
 418   stroke-width: 7px;
 419   fill-opacity: .95 !important;
 420   stroke-opacity: .95 !important;
 421 }
 422
 423
 424 .nvd3 .nv-point-paths path {
 425   stroke: #aaa;
 426   stroke-opacity: 0;
 427   fill: #eee;
 428   fill-opacity: 0;
 429 }
 430
 431
 432
 433 .nvd3 .nv-indexLine {
 434   cursor: ew-resize;
 435 }
 436
 437
 438 /**********
 439 * Distribution
 440 */
 441
 442 .nvd3 .nv-distribution {
 443   pointer-events: none;
 444 }
 445
 446
 447
 448 /**********
 449 *  Scatter
 450 */
 451
 452 /* **Attempting to remove this for useVoronoi(false), need to see if it's required anywhere
 453 .nvd3 .nv-groups .nv-point {
 454   pointer-events: none;
 455 }
 456 */
 457
 458 .nvd3 .nv-groups .nv-point.hover {
 459   stroke-width: 20px;
 460   stroke-opacity: .5;
 461 }
 462
 463 .nvd3 .nv-scatter .nv-point.hover {
 464   fill-opacity: 1;
 465 }
 466
 467 /*
 468 .nv-group.hover .nv-point {
 469   fill-opacity: 1;
 470 }
 471 */
 472
 473
 474 /**********
 475 *  Stacked Area
 476 */
 477
 478 .nvd3.nv-stackedarea path.nv-area {
 479   fill-opacity: .7;
 480   /*
 481   stroke-opacity: .65;
 482   fill-opacity: 1;
 483   */
 484   stroke-opacity: 0;
 485
 486   transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
 487   -moz-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
 488   -webkit-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
 489
 490   /*
 491   transition-delay: 500ms;
 492   -moz-transition-delay: 500ms;
 493   -webkit-transition-delay: 500ms;
 494   */
 495
 496 }
 497
 498 .nvd3.nv-stackedarea path.nv-area.hover {
 499   fill-opacity: .9;
 500   /*
 501   stroke-opacity: .85;
 502   */
 503 }
 504 /*
 505 .d3stackedarea .groups path {
 506   stroke-opacity: 0;
 507 }
 508   */
 509
 510
 511
 512 .nvd3.nv-stackedarea .nv-groups .nv-point {
 513   stroke-opacity: 0;
 514   fill-opacity: 0;
 515 }
 516
 517 /*
 518 .nvd3.nv-stackedarea .nv-groups .nv-point.hover {
 519   stroke-width: 20px;
 520   stroke-opacity: .75;
 521   fill-opacity: 1;
 522 }*/
 523
 524
 525
 526 /**********
 527 *  Line Plus Bar
 528 */
 529
 530 .nvd3.nv-linePlusBar .nv-bar rect {
 531   fill-opacity: .75;
 532 }
 533
 534 .nvd3.nv-linePlusBar .nv-bar rect:hover {
 535   fill-opacity: 1;
 536 }
 537
 538
 539 /**********
 540 *  Bullet
 541 */
 542
 543 .nvd3.nv-bullet { font: 10px sans-serif; }
 544 .nvd3.nv-bullet .nv-measure { fill-opacity: .8; }
 545 .nvd3.nv-bullet .nv-measure:hover { fill-opacity: 1; }
 546 .nvd3.nv-bullet .nv-marker { stroke: #000; stroke-width: 2px; }
 547 .nvd3.nv-bullet .nv-markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; }
 548 .nvd3.nv-bullet .nv-tick line { stroke: #666; stroke-width: .5px; }
 549 .nvd3.nv-bullet .nv-range.nv-s0 { fill: #eee; }
 550 .nvd3.nv-bullet .nv-range.nv-s1 { fill: #ddd; }
 551 .nvd3.nv-bullet .nv-range.nv-s2 { fill: #ccc; }
 552 .nvd3.nv-bullet .nv-title { font-size: 14px; font-weight: bold; }
 553 .nvd3.nv-bullet .nv-subtitle { fill: #999; }
 554
 555
 556 .nvd3.nv-bullet .nv-range {
 557   fill: #bababa;
 558   fill-opacity: .4;
 559 }
 560 .nvd3.nv-bullet .nv-range:hover {
 561   fill-opacity: .7;
 562 }
 563
 564
 565
 566 /**********
 567 * Sparkline
 568 */
 569
 570 .nvd3.nv-sparkline path {
 571   fill: none;
 572 }
 573
 574 .nvd3.nv-sparklineplus g.nv-hoverValue {
 575   pointer-events: none;
 576 }
 577
 578 .nvd3.nv-sparklineplus .nv-hoverValue line {
 579   stroke: #333;
 580   stroke-width: 1.5px;
 581  }
 582
 583 .nvd3.nv-sparklineplus,
 584 .nvd3.nv-sparklineplus g {
 585   pointer-events: all;
 586 }
 587
 588 .nvd3 .nv-hoverArea {
 589   fill-opacity: 0;
 590   stroke-opacity: 0;
 591 }
 592
 593 .nvd3.nv-sparklineplus .nv-xValue,
 594 .nvd3.nv-sparklineplus .nv-yValue {
 595   /*
 596   stroke: #666;
 597   */
 598   stroke-width: 0;
 599   font-size: .9em;
 600   font-weight: normal;
 601 }
 602
 603 .nvd3.nv-sparklineplus .nv-yValue {
 604   stroke: #f66;
 605 }
 606
 607 .nvd3.nv-sparklineplus .nv-maxValue {
 608   stroke: #2ca02c;
 609   fill: #2ca02c;
 610 }
 611
 612 .nvd3.nv-sparklineplus .nv-minValue {
 613   stroke: #d62728;
 614   fill: #d62728;
 615 }
 616
 617 .nvd3.nv-sparklineplus .nv-currentValue {
 618   /*
 619   stroke: #444;
 620   fill: #000;
 621   */
 622   font-weight: bold;
 623   font-size: 1.1em;
 624 }
 625
 626 /**********
 627 * historical stock
 628 */
 629
 630 .nvd3.nv-ohlcBar .nv-ticks .nv-tick {
 631   stroke-width: 2px;
 632 }
 633
 634 .nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover {
 635   stroke-width: 4px;
 636 }
 637
 638 .nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive {
 639  stroke: #2ca02c;
 640 }
 641
 642 .nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative {
 643  stroke: #d62728;
 644 }
 645
 646 .nvd3.nv-historicalStockChart .nv-axis .nv-axislabel {
 647   font-weight: bold;
 648 }
 649
 650 .nv-axislabel { font-weight: bold; }
 651
 652 .nvd3.nv-historicalStockChart .nv-dragTarget {
 653   fill-opacity: 0;
 654   stroke: none;
 655   cursor: move;
 656 }
 657
 658 .nvd3 .nv-brush .extent {
 659   /*
 660   cursor: ew-resize !important;
 661   */
 662   fill-opacity: 0 !important;
 663 }
 664
 665 .nvd3 .nv-brushBackground rect {
 666   stroke: #000;
 667   stroke-width: .4;
 668   fill: #fff;
 669   fill-opacity: .7;
 670 }
 671
 672
 673
 674 /**********
 675 * Indented Tree
 676 */
 677
 678
 679 /**
 680  * 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
 681  */
 682 .nvd3.nv-indentedtree .name {
 683   margin-left: 5px;
 684 }
 685
 686 .nvd3.nv-indentedtree .clickable {
 687   color: #08C;
 688   cursor: pointer;
 689 }
 690
 691 .nvd3.nv-indentedtree span.clickable:hover {
 692   color: #005580;
 693   text-decoration: underline;
 694 }
 695
 696
 697 .nvd3.nv-indentedtree .nv-childrenCount {
 698   display: inline-block;
 699   margin-left: 5px;
 700 }
 701
 702 .nvd3.nv-indentedtree .nv-treeicon {
 703   cursor: pointer;
 704   /*
 705   cursor: n-resize;
 706   */
 707 }
 708
 709 .nvd3.nv-indentedtree .nv-treeicon.nv-folded {
 710   cursor: pointer;
 711   /*
 712   cursor: s-resize;
 713   */
 714 }
 715
 716 /**********
 717 * Parallel Coordinates
 718 */
 719
 720 .nvd3 .background path {
 721   fill: none;
 722   stroke: #ccc;
 723   stroke-opacity: .4;
 724   shape-rendering: crispEdges;
 725 }
 726
 727 .nvd3 .foreground path {
 728   fill: none;
 729   stroke: steelblue;
 730   stroke-opacity: .7;
 731 }
 732
 733 .nvd3 .brush .extent {
 734   fill-opacity: .3;
 735   stroke: #fff;
 736   shape-rendering: crispEdges;
 737 }
 738
 739 .nvd3 .axis line, .axis path {
 740   fill: none;
 741   stroke: #000;
 742   shape-rendering: crispEdges;
 743 }
 744
 745 .nvd3 .axis text {
 746   text-shadow: 0 1px 0 #fff;
 747 }
 748
 749 /****
 750 Interactive Layer
 751 */
 752 .nvd3 .nv-interactiveGuideLine {
 753   pointer-events:none;
 754 }
 755 .nvd3 line.nv-guideline {
 756   stroke: #ccc;
 757 }