mirror of
https://we.phorge.it/source/phorge.git
synced 2024-10-23 17:18:51 +02:00
c6052b41a6
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
95 lines
1.4 KiB
CSS
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;
|
|
}
|