imported>Nux: test • Wikiploy

2025-08-02T18:25:27Z

New page

/**
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;
}
}

Template:Pie chart/sandbox/styles.css - Revision history

imported>Nux: test • Wikiploy