| .rickshaw_graph .detail { |
| pointer-events: none; |
| position: absolute; |
| top: 0; |
| z-index: 2; |
| background: rgba(0, 0, 0, 0.1); |
| bottom: 0; |
| width: 1px; |
| transition: opacity 0.25s linear; |
| -moz-transition: opacity 0.25s linear; |
| -o-transition: opacity 0.25s linear; |
| -webkit-transition: opacity 0.25s linear; |
| } |
| .rickshaw_graph .detail.inactive { |
| opacity: 0; |
| } |
| .rickshaw_graph .detail .item.active { |
| opacity: 1; |
| } |
| .rickshaw_graph .detail .x_label { |
| font-family: Arial, sans-serif; |
| border-radius: 3px; |
| padding: 6px; |
| opacity: 0.5; |
| border: 1px solid #e0e0e0; |
| font-size: 12px; |
| position: absolute; |
| background: white; |
| white-space: nowrap; |
| } |
| .rickshaw_graph .detail .item { |
| position: absolute; |
| z-index: 2; |
| border-radius: 3px; |
| padding: 0.25em; |
| font-size: 12px; |
| font-family: Arial, sans-serif; |
| opacity: 0; |
| background: rgba(0, 0, 0, 0.4); |
| color: white; |
| border: 1px solid rgba(0, 0, 0, 0.4); |
| margin-left: 1em; |
| margin-top: -1em; |
| white-space: nowrap; |
| } |
| .rickshaw_graph .detail .item.active { |
| opacity: 1; |
| background: rgba(0, 0, 0, 0.8); |
| } |
| .rickshaw_graph .detail .item:before { |
| content: "\25c2"; |
| position: absolute; |
| left: -0.5em; |
| color: rgba(0, 0, 0, 0.7); |
| width: 0; |
| } |
| .rickshaw_graph .detail .dot { |
| width: 4px; |
| height: 4px; |
| margin-left: -4px; |
| margin-top: -3px; |
| border-radius: 5px; |
| position: absolute; |
| box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); |
| background: white; |
| border-width: 2px; |
| border-style: solid; |
| display: none; |
| background-clip: padding-box; |
| } |
| .rickshaw_graph .detail .dot.active { |
| display: block; |
| } |
| /* graph */ |
| |
| .rickshaw_graph { |
| position: relative; |
| } |
| .rickshaw_graph svg { |
| display: block; |
| overflow: hidden; |
| } |
| |
| /* ticks */ |
| |
| .rickshaw_graph .x_tick { |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| width: 0px; |
| border-left: 1px dotted rgba(0, 0, 0, 0.2); |
| pointer-events: none; |
| } |
| .rickshaw_graph .x_tick .title { |
| position: absolute; |
| font-size: 12px; |
| font-family: Arial, sans-serif; |
| opacity: 0.5; |
| white-space: nowrap; |
| margin-left: 3px; |
| bottom: 1px; |
| } |
| |
| /* annotations */ |
| |
| .rickshaw_annotation_timeline { |
| height: 1px; |
| border-top: 1px solid #e0e0e0; |
| margin-top: 10px; |
| position: relative; |
| } |
| .rickshaw_annotation_timeline .annotation { |
| position: absolute; |
| height: 6px; |
| width: 6px; |
| margin-left: -2px; |
| top: -3px; |
| border-radius: 5px; |
| background-color: rgba(0, 0, 0, 0.25); |
| } |
| .rickshaw_graph .annotation_line { |
| position: absolute; |
| top: 0; |
| bottom: -6px; |
| width: 0px; |
| border-left: 2px solid rgba(0, 0, 0, 0.3); |
| display: none; |
| } |
| .rickshaw_graph .annotation_line.active { |
| display: block; |
| } |
| |
| .rickshaw_graph .annotation_range { |
| background: rgba(0, 0, 0, 0.1); |
| display: none; |
| position: absolute; |
| top: 0; |
| bottom: -6px; |
| z-index: -10; |
| } |
| .rickshaw_graph .annotation_range.active { |
| display: block; |
| } |
| .rickshaw_graph .annotation_range.active.offscreen { |
| display: none; |
| } |
| |
| .rickshaw_annotation_timeline .annotation .content { |
| background: white; |
| color: black; |
| opacity: 0.9; |
| padding: 5px 5px; |
| box-shadow: 0 0 2px rgba(0, 0, 0, 0.8); |
| border-radius: 3px; |
| position: relative; |
| z-index: 20; |
| font-size: 12px; |
| padding: 6px 8px 8px; |
| top: 18px; |
| left: -11px; |
| width: 160px; |
| display: none; |
| cursor: pointer; |
| } |
| .rickshaw_annotation_timeline .annotation .content:before { |
| content: "\25b2"; |
| position: absolute; |
| top: -11px; |
| color: white; |
| text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.8); |
| } |
| .rickshaw_annotation_timeline .annotation.active, |
| .rickshaw_annotation_timeline .annotation:hover { |
| background-color: rgba(0, 0, 0, 0.8); |
| cursor: none; |
| } |
| .rickshaw_annotation_timeline .annotation .content:hover { |
| z-index: 50; |
| } |
| .rickshaw_annotation_timeline .annotation.active .content { |
| display: block; |
| } |
| .rickshaw_annotation_timeline .annotation:hover .content { |
| display: block; |
| z-index: 50; |
| } |
| .rickshaw_graph .y_axis { |
| fill: none; |
| } |
| .rickshaw_graph .y_ticks .tick { |
| stroke: rgba(0, 0, 0, 0.16); |
| stroke-width: 2px; |
| shape-rendering: crisp-edges; |
| pointer-events: none; |
| } |
| .rickshaw_graph .y_grid .tick { |
| z-index: -1; |
| stroke: rgba(0, 0, 0, 0.20); |
| stroke-width: 1px; |
| stroke-dasharray: 1 1; |
| } |
| .rickshaw_graph .y_grid path { |
| fill: none; |
| stroke: none; |
| } |
| .rickshaw_graph .y_ticks path { |
| fill: none; |
| stroke: #808080; |
| } |
| .rickshaw_graph .y_ticks text { |
| opacity: 0.5; |
| font-size: 12px; |
| pointer-events: none; |
| } |
| .rickshaw_graph .x_tick.glow .title, |
| .rickshaw_graph .y_ticks.glow text { |
| fill: black; |
| color: black; |
| text-shadow: |
| -1px 1px 0 rgba(255, 255, 255, 0.1), |
| 1px -1px 0 rgba(255, 255, 255, 0.1), |
| 1px 1px 0 rgba(255, 255, 255, 0.1), |
| 0px 1px 0 rgba(255, 255, 255, 0.1), |
| 0px -1px 0 rgba(255, 255, 255, 0.1), |
| 1px 0px 0 rgba(255, 255, 255, 0.1), |
| -1px 0px 0 rgba(255, 255, 255, 0.1), |
| -1px -1px 0 rgba(255, 255, 255, 0.1); |
| } |
| .rickshaw_graph .x_tick.inverse .title, |
| .rickshaw_graph .y_ticks.inverse text { |
| fill: white; |
| color: white; |
| text-shadow: |
| -1px 1px 0 rgba(0, 0, 0, 0.8), |
| 1px -1px 0 rgba(0, 0, 0, 0.8), |
| 1px 1px 0 rgba(0, 0, 0, 0.8), |
| 0px 1px 0 rgba(0, 0, 0, 0.8), |
| 0px -1px 0 rgba(0, 0, 0, 0.8), |
| 1px 0px 0 rgba(0, 0, 0, 0.8), |
| -1px 0px 0 rgba(0, 0, 0, 0.8), |
| -1px -1px 0 rgba(0, 0, 0, 0.8); |
| } |
| .rickshaw_legend { |
| font-family: Arial; |
| font-size: 12px; |
| color: white; |
| background: #404040; |
| display: inline-block; |
| padding: 12px 5px; |
| border-radius: 2px; |
| position: relative; |
| } |
| .rickshaw_legend:hover { |
| z-index: 10; |
| } |
| .rickshaw_legend .swatch { |
| width: 10px; |
| height: 10px; |
| border: 1px solid rgba(0, 0, 0, 0.2); |
| } |
| .rickshaw_legend .line { |
| clear: both; |
| line-height: 140%; |
| padding-right: 15px; |
| } |
| .rickshaw_legend .line .swatch { |
| display: inline-block; |
| margin-right: 3px; |
| border-radius: 2px; |
| } |
| .rickshaw_legend .label { |
| white-space: nowrap; |
| display: inline; |
| } |
| .rickshaw_legend .action:hover { |
| opacity: 0.6; |
| } |
| .rickshaw_legend .action { |
| margin-right: 0.2em; |
| font-size: 10px; |
| opacity: 0.2; |
| cursor: pointer; |
| font-size: 14px; |
| } |
| .rickshaw_legend .line.disabled { |
| opacity: 0.4; |
| } |
| .rickshaw_legend ul { |
| list-style-type: none; |
| margin: 0; |
| padding: 0; |
| margin: 2px; |
| cursor: pointer; |
| } |
| .rickshaw_legend li { |
| padding: 0 0 0 2px; |
| min-width: 80px; |
| white-space: nowrap; |
| } |
| .rickshaw_legend li:hover { |
| background: rgba(255, 255, 255, 0.08); |
| border-radius: 3px; |
| } |
| .rickshaw_legend li:active { |
| background: rgba(255, 255, 255, 0.2); |
| border-radius: 3px; |
| } |