1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-23 22:10:55 +01:00
phorge-phorge/webroot/rsrc/css/phui/phui-chart.css
epriestley c6052b41a6 Label important data on charts
Summary:
Ref T13279. Adds client-side support for rendering function labels on charts, then labels every function as important data.

Works okay on mobile, although I'm not planning to target mobile terribly heavily for v0.

Test Plan: {F6438860}

Reviewers: amckinley

Reviewed By: amckinley

Subscribers: yelirekim

Maniphest Tasks: T13279

Differential Revision: https://secure.phabricator.com/D20500
2019-05-22 05:21:26 -07:00

95 lines
1.4 KiB
CSS

/**
* @provides phui-chart-css
*/
.chart .axis line,
.chart .axis path {
fill: none;
stroke: {$blueborder};
shape-rendering: crispEdges;
}
.chart .axis text {
font: {$basefont};
fill: {$darkgreytext};
}
.chart .outer,
.chart .inner {
shape-rendering: crispEdges;
}
.chart .outer {
fill: none;
stroke: none;
}
.chart .inner {
fill: {$lightbluebackground};
stroke: {$lightblueborder};
}
.chart .line {
fill: none;
stroke: {$blue};
stroke-width: 2px;
}
.chart .point {
fill: {$lightblue};
stroke: {$blue};
stroke-width: 1px;
}
.chart-tooltip {
position: absolute;
text-align: center;
width: 120px;
height: 16px;
overflow: hidden;
padding: 2px;
background: {$lightbluebackground};
border: 1px solid {$blueborder};
border-radius: 8px;
pointer-events: none;
}
.chart-hardpoint {
min-height: 480px;
overflow: hidden;
position: relative;
}
.device-desktop .chart-container {
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 300px;
}
.device .chart-container {
min-height: 480px;
}
.device-desktop .chart-curtain {
width: 300px;
position: absolute;
bottom: 0;
top: 0;
right: 0;
}
.chart-function-label-list {
background: {$lightbluebackground};
border: 1px solid {$lightblueborder};
padding: 8px 12px;
}
.device-desktop .chart-function-label-list {
margin-top: 23px;
}
.chart-function-label-list-item .phui-icon-view {
margin-right: 8px;
}