قالب:Pie chart/styles.css

/**
 * Smooth pie chart.
 *
 * [[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%);
}

/* Border around pie */
.smooth-pie div.smooth-pie-border {
	position: absolute;
	display: none;
	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;
}

/* 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: 0.5em;
	margin: 0 0 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: 0.8em;
	height: 0.8em;
	flex-shrink: 0;
}

/* Floating pie */
.pie-thumb .smooth-pie-container {
	padding: 0.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;
	}
}

/* Printing */
@media print {
	/*
	 * Avoid breaking up the chart.
	 * Otherwise, if the pie chart crosses a page boundary,
	 * the slices can become distorted.
	 */
	.smooth-pie-container {
		break-inside: avoid-page;
	}
}

/*
 * Ex-thumb layout for small screens
 * and adjustments for compatibility with
 * MediaWiki MobileFrontend (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 */
@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: 0.5em;
	}
}