framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
1 lines • 3.65 kB
CSS
:root{--f7-area-chart-current-line-stroke-width:2px;--f7-area-chart-current-line-stroke:#00000026;--f7-area-chart-axis-text-color:inherit;--f7-area-chart-axis-height:1px;--f7-area-chart-axis-font-size:10px;--f7-area-chart-axis-font-weight:500;--f7-area-chart-tooltip-font-size:12px;--f7-area-chart-tooltip-total-font-size:16px;--f7-area-chart-tooltip-total-font-weight:bold;--f7-area-chart-tooltip-color-size:10px;--f7-area-chart-legend-font-size:14px;--f7-area-chart-legend-font-weight:500;--f7-area-chart-legend-text-color:inherit;--f7-area-chart-legend-padding:4px 8px;--f7-area-chart-legend-border-radius:4px;--f7-area-chart-legend-color-size:14px;--f7-area-chart-line-stroke-width:2px;--f7-area-chart-axis-bg-color:#00000026;--f7-area-chart-legend-disabled-text-color:#00000038}:root .dark,:root.dark{--f7-area-chart-axis-bg-color:#ffffff26;--f7-area-chart-legend-disabled-text-color:#ffffff38}.ios{--f7-area-chart-tooltip-total-label-text-color:#ffffffbf}.md{--f7-area-chart-tooltip-total-label-text-color:inherit}.area-chart{position:relative}.area-chart svg{display:block;font-size:0;height:auto;margin:0 auto;width:100%}.area-chart path{fill:none;stroke-width:var(--f7-area-chart-line-stroke-width)}.area-chart-current-line{stroke:var(--f7-area-chart-current-line-stroke);stroke-width:var(--f7-area-chart-current-line-stroke-width)}.area-chart-axis{background:var(--f7-area-chart-axis-bg-color);color:var(--f7-area-chart-axis-text-color);display:flex;font-size:var(--f7-area-chart-axis-font-size);font-weight:var(--f7-area-chart-axis-font-weight);height:var(--f7-area-chart-axis-height);justify-content:space-between;line-height:1;margin-bottom:2em}.area-chart-axis>span{align-items:flex-start;display:flex;justify-content:center;padding-top:10px;white-space:nowrap;width:0}.area-chart-axis>span:first-child{justify-content:flex-start}.area-chart-axis>span:last-child{justify-content:flex-end}.area-chart-tooltip{font-size:var(--f7-area-chart-tooltip-font-size);line-height:1.4;pointer-events:none;text-align:left}.area-chart-tooltip-label{color:var(--f7-area-chart-tooltip-total-label-text-color)}.area-chart-tooltip-total{font-size:var(--f7-area-chart-tooltip-total-font-size);font-weight:var(--f7-area-chart-tooltip-total-font-weight)}.area-chart-tooltip-list{list-style:none;margin:0;padding:0}.area-chart-tooltip-list li{white-space:nowrap}.area-chart-tooltip-list span{border-radius:50%;display:inline-block;height:var(--f7-area-chart-tooltip-color-size);margin-right:4px;width:var(--f7-area-chart-tooltip-color-size)}.area-chart-axis~.area-chart-legend{margin-top:2em}.area-chart-legend{align-items:center;display:flex;flex-wrap:wrap;font-size:var(--f7-area-chart-legend-font-size);justify-content:center;margin-top:1em;width:100%}.area-chart-legend-button{appearance:none;background-color:initial;border:none;border-radius:0;box-shadow:none;cursor:pointer;font-family:inherit;font-size:inherit;outline:0}.area-chart-legend-item{align-items:center;border-radius:var(--f7-area-chart-legend-border-radius);color:var(--f7-area-chart-legend-text-color);display:flex;font-weight:var(--f7-area-chart-legend-font-weight);overflow:hidden;padding:var(--f7-area-chart-legend-padding);position:relative;transition-duration:.2s;width:auto}.area-chart-legend-item span{border-radius:50%;height:var(--f7-area-chart-legend-color-size);margin-right:4px;transition-duration:.2s;width:var(--f7-area-chart-legend-color-size)}.area-chart-legend-item-hidden{color:var(--f7-area-chart-legend-disabled-text-color)}.area-chart-legend-item-hidden span{background-color:var(--f7-area-chart-legend-disabled-text-color)}