Gecko [ quelfutur.org ]

Name	Size	Permission	Action
spip_d3_graph.css	3.28 KB	-rw----r--
spip_d3_statistiques.css	319 B	-rw----r--

Code Editor : spip_d3_graph.css

.spip_d3_nav {
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: .5em 0 .25em;
}

.spip_d3_nav_caption {
	font-size:1.3em;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	margin:0;
}

.spip_d3_graph {

--spip-d3--text-color: var(--spip-color-gray-darker);
	--spip-d3--border-color: var(--spip-color-gray-lighter);
	--spip-d3--background-color: hsl(0, 0%, 98%);

--spip-d3--loader-color: var(--spip-color-theme);
	--spip-d3--loader-color--loading: var(--spip-color-theme-dark);

--spip-d3--line-color: var(--spip-color-theme);
	--spip-d3--line-color--primary: var(--spip-color-theme);
	--spip-d3--line-color--secondary: hsl(calc(var(--spip-color-theme--h) + 120), var(--spip-color-theme--s), var(--spip-color-theme--l));
	--spip-d3--line-color--tertiary: hsl(calc(var(--spip-color-theme--h) + 240), var(--spip-color-theme--s), var(--spip-color-theme--l));

--spip-d3--bar-color: var(--spip-color-theme-light);
	--spip-d3--bar-color--hover: var(--spip-color-theme);

--spip-d3--grid-color: var(--spip-color-gray-lighter);
}

.spip_d3_graph {
	display: grid;
	place-items: center;
	border: 1px solid var(--spip-d3--border-color);
	background-color: var(--spip-d3--background-color);
	margin-bottom: 3em;
}
.spip_d3_nav + .spip_d3_graph {
	border-top: 2px solid var(--spip-d3--border-color);
}

.spip_d3_graph > * {
	grid-area: 1/1;
}

/** ratio */
.spip_d3_graph_ratio {}
/** loader */
.spip_d3_graph_loader {
	color: var(--spip-d3--loader-color);
	transition: width .3s, height .3s, color .3s;
	width: 60px; 
	height: 60px;
	display: none;
	z-index: 1000;
}
/** when loading */
.spip_d3_graph--loading .spip_d3_graph_loader {
	display: block;
}
/** graphique */
.spip_d3_graph_inner {
	width: 100%;
	position: relative; /** for tooltip */
	align-self: self-start;
}

/* ===================== */
.spip_d3_svg {}
.spip_d3_svg_title {
	text-anchor: middle;
	fill: var(--spip-d3--text-color);
}

.spip_d3_svg_grid line {
	stroke: var(--spip-d3--grid-color);
	shape-rendering: crispEdges;
	stroke-opacity: 0.7;
}
.spip_d3_svg_grid path {
	stroke-width: 0;
}
.spip_d3_svg_grid--horizontal line {
	stroke-opacity: 0.7;
}
.spip_d3_svg_grid--vertical line {
	stroke-opacity: 0.5;
}

.spip_d3_svg_xaxis,
.spip_d3_svg_yaxis {
	color: var(--spip-d3--text-color);
}

[dir=rtl] .spip_d3_svg_yaxis {
	text-anchor: start; /* force rtl to align left… for now… */
}

.spip_d3_svg_line {
	fill: none;
	stroke: var(--spip-d3--line-color);
	stroke-width: 2;
	stroke-miterLimit: 1;
}
.spip_d3_svg_line--average {
	stroke: var(--spip-d3--line-color--secondary);
}

.spip_d3_svg_histogram  {}
.spip_d3_svg_bar {
	fill: var(--spip-d3--bar-color);
	transition: fill .3s;
}
.spip_d3_svg_bar--hover,
.spip_d3_svg_bar:hover {
	fill: var(--spip-d3--bar-color--hover);
}

.spip_d3_svg_overlay {
	fill: none;
	pointer-events: all;
}

/* ===================== */
.spip_d3_tooltip {
	position: absolute;
	opacity: 0;
	border-radius: 5px;
	background-color: var(--spip-color-theme-lightest);
	border: 1px solid var(--spip-color-theme);
}
.spip_d3_tooltip_list {
	list-style-type: none;
	margin: 0; 
	padding: .5em;
}
.spip_d3_tooltip_label {
	font-weight: bold;
	color: var(--spip-color-theme-darker);
	padding-right: .5em;
}
.spip_d3_tooltip_value {
	
}

/* ====================== */
.spip_d3_table {
	margin-bottom: 2em;
}

${this.title}

Code Editor : spip_d3_graph.css