examples/htdocs/widgetsrising/nv.d3.css

   1
   2 /********************
   3   Default CSS for an svg element nvd3 used
   4 */
   5 svg.nvd3-svg {
   6     -webkit-touch-callout: none;
   7     -webkit-user-select: none;
   8     -khtml-user-select: none;
   9     -ms-user-select: none;
  10     -moz-user-select: none;
  11     user-select: none;
  12     display: block;
  13 }
  14
  15 /********************
  16   Box shadow and border radius styling
  17 */
  18 .nvtooltip.with-3d-shadow, .with-3d-shadow .nvtooltip {
  19   -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  20   -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  21   box-shadow: 0 5px 10px rgba(0,0,0,.2);
  22
  23   -webkit-border-radius: 5px;
  24   -moz-border-radius: 5px;
  25   border-radius: 5px;
  26 }
  27
  28 /********************
  29  * TOOLTIP CSS
  30  */
  31
  32 .nvtooltip {
  33   position: absolute;
  34   background-color: rgba(255,255,255,1.0);
  35   padding: 1px;
  36   border: 1px solid rgba(0,0,0,.2);
  37   z-index: 10000;
  38
  39   font-family: Arial;
  40   font-size: 13px;
  41   text-align: left;
  42   pointer-events: none;
  43
  44   white-space: nowrap;
  45
  46   -webkit-touch-callout: none;
  47   -webkit-user-select: none;
  48   -khtml-user-select: none;
  49   -moz-user-select: none;
  50   -ms-user-select: none;
  51   user-select: none;
  52 }
  53
  54 /*Give tooltips that old fade in transition by
  55     putting a "with-transitions" class on the container div.
  56 */
  57 .nvtooltip.with-transitions, .with-transitions .nvtooltip {
  58   transition: opacity 50ms linear;
  59   -moz-transition: opacity 50ms linear;
  60   -webkit-transition: opacity 50ms linear;
  61
  62   transition-delay: 200ms;
  63   -moz-transition-delay: 200ms;
  64   -webkit-transition-delay: 200ms;
  65 }
  66
  67 .nvtooltip.x-nvtooltip,
  68 .nvtooltip.y-nvtooltip {
  69   padding: 8px;
  70 }
  71
  72 .nvtooltip h3 {
  73   margin: 0;
  74   padding: 4px 14px;
  75   line-height: 18px;
  76   font-weight: normal;
  77   background-color: rgba(247,247,247,0.75);
  78   text-align: center;
  79
  80   border-bottom: 1px solid #ebebeb;
  81
  82   -webkit-border-radius: 5px 5px 0 0;
  83   -moz-border-radius: 5px 5px 0 0;
  84   border-radius: 1px 5px 0 0;
  85 }
  86
  87 .nvtooltip p {
  88   margin: 0;
  89   padding: 5px 14px;
  90   text-align: center;
  91 }
  92
  93 .nvtooltip span {
  94   display: inline-block;
  95   margin: 2px 0;
  96 }
  97
  98 .nvtooltip table {
  99   margin: 6px;
 100   border-spacing:0;
 101 }
 102
 103
 104 .nvtooltip table td {
 105   padding: 2px 9px 2px 0;
 106   vertical-align: middle;
 107 }
 108
 109 .nvtooltip table td.key {
 110   font-weight:normal;
 111 }
 112 .nvtooltip table td.value {
 113   text-align: right;
 114   font-weight: bold;
 115 }
 116
 117 .nvtooltip table tr.highlight td {
 118   padding: 1px 9px 1px 0;
 119   border-bottom-style: solid;
 120   border-bottom-width: 1px;
 121   border-top-style: solid;
 122   border-top-width: 1px;
 123 }
 124
 125 .nvtooltip table td.legend-color-guide div {
 126   width: 8px;
 127   height: 8px;
 128   vertical-align: middle;
 129 }
 130
 131 .nvtooltip .footer {
 132   padding: 3px;
 133   text-align: center;
 134 }
 135
 136 .nvtooltip-pending-removal {
 137   position: absolute;
 138   pointer-events: none;
 139 }
 140
 141 .nvd3 text {
 142   font: normal 12px Arial;
 143 }
 144
 145 .nvd3 .nv-background {
 146   fill: white;
 147   fill-opacity: 0;
 148 }
 149
 150 .nvd3.nv-noData {
 151   font-size: 18px;
 152   font-weight: bold;
 153 }
 154
 155
 156 /**********
 157 *  Brush
 158 */
 159
 160 .nv-brush .extent {
 161   fill-opacity: .125;
 162   shape-rendering: crispEdges;
 163 }
 164
 165
 166 /**********
 167 *  Legend
 168 */
 169
 170 .nvd3 .nv-legend .nv-series {
 171   cursor: pointer;
 172 }
 173
 174 .nvd3 .nv-legend .nv-disabled circle {
 175   fill-opacity: 0;
 176 }
 177
 178
 179 /**********
 180 *  Axes
 181 */
 182
 183 .axis {
 184   opacity: 1;
 185 }
 186
 187 .axis.nv-disabled {
 188   opacity: 0;
 189 }
 190
 191 .nvd3 .nv-axis {
 192   pointer-events:none;
 193 }
 194
 195 .nvd3 .nv-axis path {
 196   fill: none;
 197   stroke: #000;
 198   stroke-opacity: .75;
 199   shape-rendering: crispEdges;
 200 }
 201
 202 .nvd3 .nv-axis path.domain {
 203   stroke-opacity: .75;
 204 }
 205
 206 .nvd3 .nv-axis.nv-x path.domain {
 207   stroke-opacity: 0;
 208 }
 209
 210 .nvd3 .nv-axis line {
 211   fill: none;
 212   stroke: #e5e5e5;
 213   shape-rendering: crispEdges;
 214 }
 215
 216 .nvd3 .nv-axis .zero line,
 217 /*this selector may not be necessary*/ .nvd3 .nv-axis line.zero {
 218   stroke-opacity: .75;
 219 }
 220
 221 .nvd3 .nv-axis .nv-axisMaxMin text {
 222   font-weight: bold;
 223 }
 224
 225 .nvd3 .x  .nv-axis .nv-axisMaxMin text,
 226 .nvd3 .x2 .nv-axis .nv-axisMaxMin text,
 227 .nvd3 .x3 .nv-axis .nv-axisMaxMin text {
 228   text-anchor: middle
 229 }
 230
 231
 232 /**********
 233 *  Brush
 234 */
 235
 236 .nv-brush .resize path {
 237   fill: #eee;
 238   stroke: #666;
 239 }
 240
 241
 242 /**********
 243 *  Bars
 244 */
 245
 246 .nvd3 .nv-bars .negative rect {
 247     zfill: brown;
 248 }
 249
 250 .nvd3 .nv-bars rect {
 251   zfill: steelblue;
 252   fill-opacity: .75;
 253
 254   transition: fill-opacity 250ms linear;
 255   -moz-transition: fill-opacity 250ms linear;
 256   -webkit-transition: fill-opacity 250ms linear;
 257 }
 258
 259 .nvd3 .nv-bars rect.hover {
 260   fill-opacity: 1;
 261 }
 262
 263 .nvd3 .nv-bars .hover rect {
 264   fill: lightblue;
 265 }
 266
 267 .nvd3 .nv-bars text {
 268   fill: rgba(0,0,0,0);
 269 }
 270
 271 .nvd3 .nv-bars .hover text {
 272   fill: rgba(0,0,0,1);
 273 }
 274
 275
 276 /**********
 277 *  Bars
 278 */
 279
 280 .nvd3 .nv-multibar .nv-groups rect,
 281 .nvd3 .nv-multibarHorizontal .nv-groups rect,
 282 .nvd3 .nv-discretebar .nv-groups rect {
 283   stroke-opacity: 0;
 284
 285   transition: fill-opacity 250ms linear;
 286   -moz-transition: fill-opacity 250ms linear;
 287   -webkit-transition: fill-opacity 250ms linear;
 288 }
 289
 290 .nvd3 .nv-multibar .nv-groups rect:hover,
 291 .nvd3 .nv-multibarHorizontal .nv-groups rect:hover,
 292 .nvd3 .nv-discretebar .nv-groups rect:hover {
 293   fill-opacity: 1;
 294 }
 295
 296 .nvd3 .nv-discretebar .nv-groups text,
 297 .nvd3 .nv-multibarHorizontal .nv-groups text {
 298   font-weight: bold;
 299   fill: rgba(0,0,0,1);
 300   stroke: rgba(0,0,0,0);
 301 }
 302
 303 /***********
 304 *  Pie Chart
 305 */
 306
 307 .nvd3.nv-pie path {
 308   stroke-opacity: 0;
 309   transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
 310   -moz-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
 311   -webkit-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
 312
 313 }
 314
 315 .nvd3.nv-pie .nv-pie-title {
 316     font-size: 24px;
 317     fill: rgba(19, 196, 249, 0.59);
 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
 351 .nvd3 .nv-groups path.nv-line.nv-thin-line {
 352   stroke-width: 1px;
 353 }
 354
 355
 356 .nvd3 .nv-groups path.nv-area {
 357   stroke: none;
 358 }
 359
 360 .nvd3 .nv-line.hover path {
 361   stroke-width: 6px;
 362 }
 363
 364 .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
 365   fill-opacity: 0;
 366   stroke-opacity: 0;
 367 }
 368
 369 .nvd3.nv-scatter.nv-single-point .nv-groups .nv-point {
 370   fill-opacity: .5 !important;
 371   stroke-opacity: .5 !important;
 372 }
 373
 374
 375 .with-transitions .nvd3 .nv-groups .nv-point {
 376   transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
 377   -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
 378   -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
 379
 380 }
 381
 382 .nvd3.nv-scatter .nv-groups .nv-point.hover,
 383 .nvd3 .nv-groups .nv-point.hover {
 384   stroke-width: 7px;
 385   fill-opacity: .95 !important;
 386   stroke-opacity: .95 !important;
 387 }
 388
 389
 390 .nvd3 .nv-point-paths path {
 391   stroke: #aaa;
 392   stroke-opacity: 0;
 393   fill: #eee;
 394   fill-opacity: 0;
 395 }
 396
 397
 398
 399 .nvd3 .nv-indexLine {
 400   cursor: ew-resize;
 401 }
 402
 403
 404 /**********
 405 * Distribution
 406 */
 407
 408 .nvd3 .nv-distribution {
 409   pointer-events: none;
 410 }
 411
 412
 413 /**********
 414 *  Scatter
 415 */
 416
 417 .nvd3 .nv-groups .nv-point.hover {
 418   stroke-width: 20px;
 419   stroke-opacity: .5;
 420 }
 421
 422 .nvd3 .nv-scatter .nv-point.hover {
 423   fill-opacity: 1;
 424 }
 425
 426
 427 /**********
 428 *  Stacked Area
 429 */
 430
 431 .nvd3.nv-stackedarea path.nv-area {
 432   fill-opacity: .7;
 433   stroke-opacity: 0;
 434   transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
 435   -moz-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
 436   -webkit-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
 437 }
 438
 439 .nvd3.nv-stackedarea path.nv-area.hover {
 440   fill-opacity: .9;
 441 }
 442
 443
 444 .nvd3.nv-stackedarea .nv-groups .nv-point {
 445   stroke-opacity: 0;
 446   fill-opacity: 0;
 447 }
 448
 449
 450 /**********
 451 *  Line Plus Bar
 452 */
 453
 454 .nvd3.nv-linePlusBar .nv-bar rect {
 455   fill-opacity: .75;
 456 }
 457
 458 .nvd3.nv-linePlusBar .nv-bar rect:hover {
 459   fill-opacity: 1;
 460 }
 461
 462
 463 /**********
 464 *  Bullet
 465 */
 466
 467 .nvd3.nv-bullet { font: 10px sans-serif; }
 468 .nvd3.nv-bullet .nv-measure { fill-opacity: .8; }
 469 .nvd3.nv-bullet .nv-measure:hover { fill-opacity: 1; }
 470 .nvd3.nv-bullet .nv-marker { stroke: #000; stroke-width: 2px; }
 471 .nvd3.nv-bullet .nv-markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; }
 472 .nvd3.nv-bullet .nv-tick line { stroke: #666; stroke-width: .5px; }
 473 .nvd3.nv-bullet .nv-range.nv-s0 { fill: #eee; }
 474 .nvd3.nv-bullet .nv-range.nv-s1 { fill: #ddd; }
 475 .nvd3.nv-bullet .nv-range.nv-s2 { fill: #ccc; }
 476 .nvd3.nv-bullet .nv-title { font-size: 14px; font-weight: bold; }
 477 .nvd3.nv-bullet .nv-subtitle { fill: #999; }
 478
 479
 480 .nvd3.nv-bullet .nv-range {
 481   fill: #bababa;
 482   fill-opacity: .4;
 483 }
 484 .nvd3.nv-bullet .nv-range:hover {
 485   fill-opacity: .7;
 486 }
 487
 488
 489 /**********
 490 * Sparkline
 491 */
 492
 493 .nvd3.nv-sparkline path {
 494   fill: none;
 495 }
 496
 497 .nvd3.nv-sparklineplus g.nv-hoverValue {
 498   pointer-events: none;
 499 }
 500
 501 .nvd3.nv-sparklineplus .nv-hoverValue line {
 502   stroke: #333;
 503   stroke-width: 1.5px;
 504  }
 505
 506 .nvd3.nv-sparklineplus,
 507 .nvd3.nv-sparklineplus g {
 508   pointer-events: all;
 509 }
 510
 511 .nvd3 .nv-hoverArea {
 512   fill-opacity: 0;
 513   stroke-opacity: 0;
 514 }
 515
 516 .nvd3.nv-sparklineplus .nv-xValue,
 517 .nvd3.nv-sparklineplus .nv-yValue {
 518   stroke-width: 0;
 519   font-size: .9em;
 520   font-weight: normal;
 521 }
 522
 523 .nvd3.nv-sparklineplus .nv-yValue {
 524   stroke: #f66;
 525 }
 526
 527 .nvd3.nv-sparklineplus .nv-maxValue {
 528   stroke: #2ca02c;
 529   fill: #2ca02c;
 530 }
 531
 532 .nvd3.nv-sparklineplus .nv-minValue {
 533   stroke: #d62728;
 534   fill: #d62728;
 535 }
 536
 537 .nvd3.nv-sparklineplus .nv-currentValue {
 538   font-weight: bold;
 539   font-size: 1.1em;
 540 }
 541
 542 /**********
 543 * historical stock
 544 */
 545
 546 .nvd3.nv-ohlcBar .nv-ticks .nv-tick {
 547   stroke-width: 1px;
 548 }
 549
 550 .nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover {
 551   stroke-width: 2px;
 552 }
 553
 554 .nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive {
 555     stroke: #2ca02c;
 556 }
 557
 558 .nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative {
 559     stroke: #d62728;
 560 }
 561
 562 .nvd3.nv-historicalStockChart .nv-axis .nv-axislabel {
 563   font-weight: bold;
 564 }
 565
 566 .nvd3.nv-historicalStockChart .nv-dragTarget {
 567   fill-opacity: 0;
 568   stroke: none;
 569   cursor: move;
 570 }
 571
 572 .nvd3 .nv-brush .extent {
 573   fill-opacity: 0 !important;
 574 }
 575
 576 .nvd3 .nv-brushBackground rect {
 577   stroke: #000;
 578   stroke-width: .4;
 579   fill: #fff;
 580   fill-opacity: .7;
 581 }
 582
 583
 584 /**********
 585 * Parallel Coordinates
 586 */
 587
 588 .nvd3 .background path {
 589   fill: none;
 590   stroke: #EEE;
 591   stroke-opacity: .4;
 592   shape-rendering: crispEdges;
 593 }
 594
 595 .nvd3 .foreground path {
 596   fill: none;
 597   stroke-opacity: .7;
 598 }
 599
 600 .nvd3 .brush .extent {
 601   fill-opacity: .3;
 602   stroke: #fff;
 603   shape-rendering: crispEdges;
 604 }
 605
 606 .nvd3 .axis line, .axis path {
 607   fill: none;
 608   stroke: #000;
 609   shape-rendering: crispEdges;
 610 }
 611
 612 .nvd3 .axis text {
 613   text-shadow: 0 1px 0 #fff;
 614 }
 615
 616 /****
 617 Interactive Layer
 618 */
 619 .nvd3 .nv-interactiveGuideLine {
 620   pointer-events:none;
 621 }
 622 .nvd3 line.nv-guideline {
 623   stroke: #ccc;
 624 }