Template:Pie chart/styles.css

/** {{pp-template}} 
	Smooth piechart.
	
	[[Module:Piechart]]
	
	Note! Mobile screen breakpoint is set to 640px for MediaWiki Mobile.
*/
/* base structure */
.smooth-pie {
	display: none;
	position: relative;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: #333;
	color:black;
	border: 1px solid black;
}
/* slices (default = pie25/pieX) */
.smooth-pie div {
	position: absolute;
	transform-origin: left bottom;
	background-color: #655;
	color:black;

	top: 0; left: 50%;
	width: 50%; height: 50%;
	border-radius: 0 500% 0 0;
}
.smooth-pie div.pie50 {
	transform-origin: left center;
	height: 100%;
	border-radius: 0 100% 100% 0 / 50%;
}
.smooth-pie .pie12-5 {clip-path: polygon(0% 0%, 100% 0%, 0 100%);}
.smooth-pie    .pie5 {clip-path: polygon(0% 0%, 32.49197% 0%, 0 100%);}
.smooth-pie    .pie7 {clip-path: polygon(0% 0%, 47.056428% 0%, 0 100%);}
.smooth-pie    .pie1 {clip-path: polygon(0% 0%, 6.2914667% 0%, 0 100%);}
.smooth-pie div.smooth-pie-border {
	display: none;
}
/* Border around pie (on top of slices). *
.smooth-pie div.smooth-pie-border {
	position: absolute;
	background-color: transparent;
	border: 1px solid black;
	top: 0; left: 0;
	width: 100%; height: 100%;
	border-radius: 50%;
	box-sizing: border-box;
	z-index: 20;
	pointer-events: none;
}
/* unlock for supported browsers */
@supports(clip-path: circle(50%)) {
	.smooth-pie {
		display:block;
	}	
}
/* container and legend */
.smooth-pie-container {
  display: flex;
  align-items: flex-start;
  gap: 1em;
  flex-wrap: wrap;
}
.smooth-pie-legend {
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.smooth-pie-legend > li {
  display: flex;
  align-items: baseline;
  gap: .5em;
  margin: 0;
  margin-bottom: 0.1em;
}
.smooth-pie-legend > li > span {
  display: block;
  box-sizing: border-box;
}
.smooth-pie-legend > li > .l-color {
  border: 1px solid var(--color-base, black);
  width: .8em;
  height: .8em;
  flex-shrink: 0;
}
/* floating pie */
.pie-thumb .smooth-pie-container {
	padding: .5em;
	padding-bottom: 0;
	text-align: left;
}
.pie-thumb .smooth-pie-caption {
	margin-bottom: 1em;
	font-size: 94%;
}
/* Flow in a reverse column for thumbs (pie above the legend). */
.thumbinner > .smooth-pie-container {
	flex-direction: column-reverse;
}
/* Wide screen style for thumbs */
@media screen and (min-width: 641px) {
	.thumbinner > .smooth-pie-container {
		width: min-content;
	}
}

@media print {
	/*
	  Avoid breaking up the chart.
	  
	  Otherwise if the pie chart crosses a page line, 
	  the slices can end up e.g. squished to the bottom of the page.
	*/
	.smooth-pie-container {
		break-inside: avoid-page;
	}
}

/* 
	Ex-thumb layout for small screen 
	and adjustments for compatibility with MW's Mobile Frontend (mw-mf).
*/
/* center the pie */
body.mw-mf .thumbinner .smooth-pie-container {
	align-items: center;
}
/* style roughly the same as figcaption on mobile */
body.mw-mf .thumbinner .smooth-pie-legend-container {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--color-subtle, #54595d);
}
/* specifically for thin screens (when thumbinner becomes 100% width) */
@media screen and (max-width: 640px) {
	.thumbinner .smooth-pie-legend {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(190px, 1fr) ) ;
		gap: 0.3em;
	}
	.thumbinner .smooth-pie-footer {
		margin-top: .5em;
	}
}