seitime-frappe/frappe/public/less/charts.less

/* charts */
.chart-container {
	// font-family: Verdana, Geneva, Tahoma, sans-serif;

	.graph-focus-margin {
		margin: 0px 5%;
	}

	.graphics {
		margin-top: 10px;
		padding-top: 10px;
		padding-bottom: 10px;
		position: relative;
	}

	.graph-stats-group {
		display: flex;
		justify-content: space-around;
		flex: 1;
	}

	.graph-stats-container {
		display: flex;
		justify-content: space-around;
		padding-top: 10px;

		.stats {
			padding-bottom: 15px;
		}

		// Custom (impactified) stats style
		.stats-title {
			color: #8D99A6;
		}
		.stats-value {
			font-size: 20px;
			font-weight: 300;
		}
		.stats-description {
			font-size: 12px;
			color: #8D99A6;
		}
		.graph-data .stats-value {
			color: #98d85b;
		}
	}

	.axis, .chart-label {
		font-size: 10px;
		fill: #555b51;

		line {
			stroke: rgba(27,31,35,0.2);
		}
	}

	.percentage-graph {
		.progress {
			margin-bottom: 0px;
		}
	}

	.data-points {
		circle {
			// fill: #28a745;
			stroke: #fff;
			stroke-width: 2;
		}

		g.mini {
			// fill: #98d85b;
		}

		path {
			fill: none;
			// stroke: #28a745;
			stroke-opacity: 1;
			stroke-width: 2px;
		}
	}

	line.dashed {
		stroke-dasharray: 5,3;
	}

	.tick {
		&.x-axis-label {
			display: block;
		}

		.specific-value {
			text-anchor: start;
		}

		.y-value-text {
			text-anchor: end;
		}

		.x-value-text {
			text-anchor: middle;
		}
	}
}

.graph-svg-tip {
	position: absolute;
	z-index: 99999;
	padding: 10px;
	font-size: 12px;
	color: #959da5;
	text-align: center;
	background: rgba(0,0,0,0.8);
	border-radius: 3px;

	&.comparison {
		padding: 0;
		text-align: left;
		pointer-events: none;

		.title {
			display: block;
			padding: 10px;
			margin: 0;
			font-weight: 600;
			line-height: 1;
			pointer-events: none;
		}

		ul {
			margin: 0;
			white-space: nowrap;
			list-style: none;
		}

		li {
			display: inline-block;
			padding: 5px 10px;
		}
	}

	ul, ol {
		padding-left: 0;
		display: flex;
	}

	ul.data-point-list li {
		min-width: 90px;
		flex: 1;
	}

	strong {
		color: #dfe2e5;
	}

	.svg-pointer {
		position: absolute;
		bottom: -10px;
		left: 50%;
		width: 5px;
		height: 5px;
		margin: 0 0 0 -5px;
		content: " ";
		border: 5px solid transparent;
		border-top-color: rgba(0,0,0,0.8);
	}
}

.stroke.grey {
	stroke: #F0F4F7;
}
.stroke.blue {
	stroke: #5e64ff;
}
.stroke.red {
	stroke: #ff5858;
}
.stroke.light-green {
	stroke: #98d85b;
}
.stroke.lightgreen {
	stroke: #98d85b;
}
.stroke.green {
	stroke: #28a745;
}
.stroke.orange {
	stroke: #ffa00a;
}
.stroke.purple {
	stroke: #743ee2;
}
.stroke.darkgrey {
	stroke: #b8c2cc;
}
.stroke.black {
	stroke: #36414C;
}
.stroke.yellow {
	stroke: #FEEF72;
}
.stroke.light-blue {
	stroke: #7CD6FD;
}
.stroke.lightblue {
	stroke: #7CD6FD;
}

.fill.grey {
	fill: #F0F4F7;
}
.fill.blue {
	fill: #5e64ff;
}
.fill.red {
	fill: #ff5858;
}
.fill.light-green {
	fill: #98d85b;
}
.fill.lightgreen {
	fill: #98d85b;
}
.fill.green {
	fill: #28a745;
}
.fill.orange {
	fill: #ffa00a;
}
.fill.purple {
	fill: #743ee2;
}
.fill.darkgrey {
	fill: #b8c2cc;
}
.fill.black {
	fill: #36414C;
}
.fill.yellow {
	fill: #FEEF72;
}
.fill.light-blue {
	fill: #7CD6FD;
}
.fill.lightblue {
	fill: #7CD6FD;
}

.background.grey {
	background: #F0F4F7;
}
.background.blue {
	background: #5e64ff;
}
.background.red {
	background: #ff5858;
}
.background.light-green {
	background: #98d85b;
}
.background.lightgreen {
	background: #98d85b;
}
.background.green {
	background: #28a745;
}
.background.orange {
	background: #ffa00a;
}
.background.purple {
	background: #743ee2;
}
.background.darkgrey {
	background: #b8c2cc;
}
.background.black {
	background: #36414C;
}
.background.yellow {
	background: #FEEF72;
}
.background.light-blue {
	background: #7CD6FD;
}
.background.lightblue {
	background: #7CD6FD;
}

.border-top.grey {
	border-top: 3px solid #F0F4F7;
}
.border-top.blue {
	border-top: 3px solid #5e64ff;
}
.border-top.red {
	border-top: 3px solid #ff5858;
}
.border-top.light-green {
	border-top: 3px solid #98d85b;
}
.border-top.lightgreen {
	border-top: 3px solid #98d85b;
}
.border-top.green {
	border-top: 3px solid #28a745;
}
.border-top.orange {
	border-top: 3px solid #ffa00a;
}
.border-top.purple {
	border-top: 3px solid #743ee2;
}
.border-top.darkgrey {
	border-top: 3px solid #b8c2cc;
}
.border-top.black {
	border-top: 3px solid #36414C;
}
.border-top.yellow {
	border-top: 3px solid #FEEF72;
}
.border-top.light-blue {
	border-top: 3px solid #7CD6FD;
}
.border-top.lightblue {
	border-top: 3px solid #7CD6FD;
}