| /*-- Chart --*/ |
| .c3 svg { |
| font: 10px sans-serif; |
| -webkit-tap-highlight-color: transparent; } |
| |
| .c3 path, .c3 line { |
| fill: none; |
| stroke: #000; } |
| |
| .chartModal .c3 text { |
| font: 14px sans-serif; |
| } |
| |
| .c3 text { |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| user-select: none; } |
| |
| .c3-legend-item text { |
| font: 12px sans-serif !important; |
| } |
| |
| .c3-legend-item-tile, |
| .c3-xgrid-focus, |
| .c3-ygrid, |
| .c3-event-rect, |
| .c3-bars path { |
| shape-rendering: crispEdges; } |
| |
| .c3-chart-arc path { |
| stroke: #fff; } |
| |
| .c3-chart-arc text { |
| fill: #fff; |
| font-size: 12px; } |
| |
| /*-- Axis --*/ |
| /*-- Grid --*/ |
| .c3-grid line { |
| stroke: #aaa; } |
| |
| .c3-grid text { |
| fill: #aaa; } |
| |
| .c3-xgrid, .c3-ygrid { |
| stroke-dasharray: 3 3; } |
| |
| /*-- Text on Chart --*/ |
| .c3-text.c3-empty { |
| fill: #808080; |
| font-size: 2em; } |
| |
| /*-- Line --*/ |
| .c3-line { |
| stroke-width: 1.75px; } |
| |
| /*-- Point --*/ |
| .c3-circle._expanded_ { |
| stroke-width: 2px; |
| stroke: white; } |
| |
| .c3-selected-circle { |
| fill: white; |
| stroke-width: 2px; } |
| |
| /*-- Bar --*/ |
| .c3-bar { |
| stroke-width: 0; } |
| |
| .c3-bar._expanded_ { |
| fill-opacity: 1; |
| fill-opacity: 0.75; } |
| |
| /*-- Focus --*/ |
| .c3-target.c3-focused { |
| opacity: 1; } |
| |
| .c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step { |
| stroke-width: 2px; } |
| |
| .c3-target.c3-defocused { |
| opacity: 0.3 !important; } |
| |
| /*-- Region --*/ |
| .c3-region { |
| fill: steelblue; |
| fill-opacity: .1; } |
| |
| /*-- Brush --*/ |
| .c3-brush .extent { |
| fill-opacity: .1; } |
| |
| /*-- Select - Drag --*/ |
| /*-- Legend --*/ |
| .c3-legend-item { |
| font-size: 12px; } |
| |
| .c3-legend-item-hidden { |
| opacity: 0.15; } |
| |
| .c3-legend-background { |
| opacity: 0.75; |
| fill: white; |
| stroke: lightgray; |
| stroke-width: 1; } |
| |
| /*-- Title --*/ |
| .c3-title { |
| font: 14px sans-serif; } |
| |
| /*-- Tooltip --*/ |
| .c3-tooltip-container { |
| z-index: 10; } |
| |
| .c3-tooltip { |
| |
| background-color: #fff; |
| empty-cells: show; |
| border-spacing: 0px; |
| -webkit-box-shadow: 7px 7px 12px -9px #777777; |
| -moz-box-shadow: 7px 7px 12px -9px #777777; |
| box-shadow: 7px 7px 12px -9px #777777; |
| border-radius: 3px; |
| border: 2px solid #333; |
| opacity: 0.9; } |
| |
| .c3-tooltip tr { |
| border: 1px solid #CCC; |
| font-family: sans-serif; |
| } |
| |
| .c3-tooltip th { |
| background-color: #333; |
| font-size: 14px; |
| padding: 2px 5px; |
| text-align: left; |
| color: #FFF; } |
| |
| .c3-tooltip td { |
| font-size: 13px; |
| padding: 3px 6px; |
| background-color: #eee; |
| border-left: 1px dotted #999; } |
| |
| .c3-tooltip td > span { |
| display: inline-block; |
| width: 10px; |
| height: 10px; |
| margin-right: 6px; } |
| |
| .c3-tooltip td.value { |
| text-align: right; } |
| |
| /*-- Area --*/ |
| .c3-area { |
| stroke-width: 0; |
| opacity: 0.65; } |
| |
| /*-- Arc --*/ |
| .c3-chart-arcs-title { |
| dominant-baseline: middle; |
| font-size: 1.3em; } |
| |
| .c3-chart-arcs .c3-chart-arcs-background { |
| fill: #e0e0e0; |
| stroke: none; } |
| |
| .c3-chart-arcs .c3-chart-arcs-gauge-unit { |
| fill: #000; |
| font-size: 16px; } |
| |
| .c3-chart-arcs .c3-chart-arcs-gauge-max { |
| fill: #777; } |
| |
| .c3-chart-arcs .c3-chart-arcs-gauge-min { |
| fill: #777; } |
| |
| .c3-chart-arc .c3-gauge-value { |
| fill: #000; |
| /* font-size: 28px !important;*/ } |
| |
| .c3-chart-arc.c3-target g path { |
| opacity: 1; } |
| |
| .c3-chart-arc.c3-target.c3-focused g path { |
| opacity: 1; } |
| |
| |
| .chartWrapper { |
| float: left; |
| width: 100%; |
| background: #FFF !important; |
| } |
| |
| .chartToolbar { |
| height: 32px; |
| width: 100%; |
| } |
| |
| .chartToolButton { |
| float: right; |
| width: 24px; |
| height: 22px; |
| border: 1px solid #999; |
| background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); |
| box-shadow: 7px 7px 12px -9px #777777; |
| margin-right: 6px; |
| padding-top: 3px; |
| opacity: 0.75; |
| text-align: center; |
| } |
| |
| .chartToolButton > i { |
| font-size: 16px; |
| } |
| |
| .chartToolButton:hover { |
| opacity: 1; |
| border: 1px solid #369; |
| cursor: pointer; |
| } |
| |
| .chartTitle { |
| text-align: center; |
| font-family:sans-serif; |
| font-size: 18px; |
| } |
| |
| |
| |
| .chartModal { |
| position: fixed; /* Stay in place */ |
| z-index: 1000; /* Sit on top */ |
| left: 0; |
| top: 0; |
| width: 100%; /* Full width */ |
| min-height: 100%; /* Full height */ |
| background-color: rgb(0,0,0); /* Fallback color */ |
| background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ |
| } |
| |
| .chartModalContent { |
| background-color: #fefefe; |
| margin: 15vh 15vh 15vh 15vh; /* 15% from the top and centered */ |
| padding: 20px; |
| border: 1px solid #888; |
| width: 80%; /* Could be more or less, depending on screen size */ |
| overflow-y: scroll; |
| max-height: calc(100vh - 30vh); |
| font-family: sans-serif; |
| font-size: 12px; |
| } |
| |
| .chartModalContent td { |
| padding: 3px; |
| text-align: right; |
| } |
| |
| .chartModalContent td:first-child { |
| text-align: left; |
| } |
| |
| .chartModelClose { |
| color: #aaa; |
| float: right; |
| font-size: 28px; |
| font-weight: bold; |
| } |
| |
| .chartModelClose:hover, |
| .chartModelClose:focus { |
| color: black; |
| text-decoration: none; |
| cursor: pointer; |
| } |
| |
| .linkedChart { |
| min-height: 600px; |
| } |