From b33f34d58abd47b7f8148b8e8881b350ecdd9a0c Mon Sep 17 00:00:00 2001 From: Radomir Dopieralski Date: Tue, 27 May 2014 10:42:56 +0200 Subject: [PATCH] Add the CSS file --- xstatic/pkg/rickshaw/__init__.py | 2 +- xstatic/pkg/rickshaw/data/rickshaw.css | 320 +++++++++++++++++++++++++ 2 files changed, 321 insertions(+), 1 deletion(-) create mode 100644 xstatic/pkg/rickshaw/data/rickshaw.css diff --git a/xstatic/pkg/rickshaw/__init__.py b/xstatic/pkg/rickshaw/__init__.py index f88ef5a..431713a 100644 --- a/xstatic/pkg/rickshaw/__init__.py +++ b/xstatic/pkg/rickshaw/__init__.py @@ -13,7 +13,7 @@ NAME = __name__.split('.')[-1] # package name (e.g. 'foo' or 'foo_bar') VERSION = '1.4.6' # version of the packaged files, please use the upstream # version number -BUILD = '1' # our package build number, so we can release new builds +BUILD = '2' # our package build number, so we can release new builds # with fixes for xstatic stuff. PACKAGE_VERSION = VERSION + '.' + BUILD # version used for PyPi diff --git a/xstatic/pkg/rickshaw/data/rickshaw.css b/xstatic/pkg/rickshaw/data/rickshaw.css new file mode 100644 index 0000000..0502514 --- /dev/null +++ b/xstatic/pkg/rickshaw/data/rickshaw.css @@ -0,0 +1,320 @@ +.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; +} +.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, +.rickshaw_graph .x_axis_d3 { + fill: none; +} +.rickshaw_graph .y_ticks .tick, +.rickshaw_graph .x_ticks_d3 .tick { + stroke: rgba(0, 0, 0, 0.16); + stroke-width: 2px; + shape-rendering: crisp-edges; + pointer-events: none; +} +.rickshaw_graph .y_grid .tick, +.rickshaw_graph .x_grid_d3 .tick { + z-index: -1; + stroke: rgba(0, 0, 0, 0.20); + stroke-width: 1px; + stroke-dasharray: 1 1; +} +.rickshaw_graph .y_grid path, +.rickshaw_graph .x_grid_d3 path { + fill: none; + stroke: none; +} +.rickshaw_graph .y_ticks path, +.rickshaw_graph .x_ticks_d3 path { + fill: none; + stroke: #808080; +} +.rickshaw_graph .y_ticks text, +.rickshaw_graph .x_ticks_d3 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 { + margin: 0; + white-space: nowrap; + display: inline; + font-size: inherit; + background-color: transparent; + color: inherit; + font-weight: normal; + line-height: normal; + padding: 0px; + text-shadow: none; +} +.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; +}