https://prdmc.ca/w/index.php?action=history&feed=atom&title=Template%3APie_chart%2Fstyles.css 2026-04-17T13:32:22Z Revision history for this page on the wiki MediaWiki 1.45.1 https://prdmc.ca/w/index.php?title=Template:Pie_chart/styles.css&diff=1060&oldid=prev 2026-02-15T05:40:25Z

<p>1 revision imported</p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 05:40, 15 February 2026</td> </tr><tr><td colspan="4" class="diff-notice" lang="en"><div class="mw-diff-empty">(No difference)</div> </td></tr> <!-- diff cache key prd_wiki:diff:1.41:old-1059:rev-1060 --> </table>

RandomUser34 https://prdmc.ca/w/index.php?title=Template:Pie_chart/styles.css&diff=1059&oldid=prev 2025-05-12T07:50:55Z

<p>re-enable hover</p> <p><b>New page</b></p><div>/** {{pp-template}} <br /> Smooth piechart.<br /> <br /> [[Module:Piechart]]<br /> <br /> Note! Mobile screen breakpoint is set to 640px for MediaWiki Mobile.<br /> */<br /> /* base structure */<br /> .smooth-pie {<br /> display: none;<br /> position: relative;<br /> width: 100px;<br /> height: 100px;<br /> border-radius: 50%;<br /> background-color: #333;<br /> color:black;<br /> border: 1px solid black;<br /> }<br /> /* slices (default = pie25/pieX) */<br /> .smooth-pie div {<br /> position: absolute;<br /> transform-origin: left bottom;<br /> background-color: #655;<br /> color:black;<br /> <br /> top: 0; left: 50%;<br /> width: 50%; height: 50%;<br /> border-radius: 0 500% 0 0;<br /> }<br /> .smooth-pie div.pie50 {<br /> transform-origin: left center;<br /> height: 100%;<br /> border-radius: 0 100% 100% 0 / 50%;<br /> }<br /> .smooth-pie .pie12-5 {clip-path: polygon(0% 0%, 100% 0%, 0 100%);}<br /> .smooth-pie .pie5 {clip-path: polygon(0% 0%, 32.49197% 0%, 0 100%);}<br /> .smooth-pie .pie7 {clip-path: polygon(0% 0%, 47.056428% 0%, 0 100%);}<br /> .smooth-pie .pie1 {clip-path: polygon(0% 0%, 6.2914667% 0%, 0 100%);}<br /> .smooth-pie div.smooth-pie-border {<br /> display: none;<br /> }<br /> /* Border around pie (on top of slices). *<br /> .smooth-pie div.smooth-pie-border {<br /> position: absolute;<br /> background-color: transparent;<br /> border: 1px solid black;<br /> top: 0; left: 0;<br /> width: 100%; height: 100%;<br /> border-radius: 50%;<br /> box-sizing: border-box;<br /> z-index: 20;<br /> pointer-events: none;<br /> }<br /> /* unlock for supported browsers */<br /> @supports(clip-path: circle(50%)) {<br /> .smooth-pie {<br /> display:block;<br /> } <br /> }<br /> /* container and legend */<br /> .smooth-pie-container {<br /> display: flex;<br /> align-items: flex-start;<br /> gap: 1em;<br /> flex-wrap: wrap;<br /> }<br /> .smooth-pie-legend {<br /> list-style-type: none !important;<br /> margin: 0 !important;<br /> padding: 0 !important;<br /> }<br /> .smooth-pie-legend &gt; li {<br /> display: flex;<br /> align-items: baseline;<br /> gap: .5em;<br /> margin: 0;<br /> margin-bottom: 0.1em;<br /> }<br /> .smooth-pie-legend &gt; li &gt; span {<br /> display: block;<br /> box-sizing: border-box;<br /> }<br /> .smooth-pie-legend &gt; li &gt; .l-color {<br /> border: 1px solid var(--color-base, black);<br /> width: .8em;<br /> height: .8em;<br /> flex-shrink: 0;<br /> }<br /> /* floating pie */<br /> .pie-thumb .smooth-pie-container {<br /> padding: .5em;<br /> padding-bottom: 0;<br /> text-align: left;<br /> }<br /> .pie-thumb .smooth-pie-caption {<br /> margin-bottom: 1em;<br /> font-size: 94%;<br /> }<br /> /* Flow in a reverse column for thumbs (pie above the legend). */<br /> .thumbinner &gt; .smooth-pie-container {<br /> flex-direction: column-reverse;<br /> }<br /> /* Wide screen style for thumbs */<br /> @media screen and (min-width: 641px) {<br /> .thumbinner &gt; .smooth-pie-container {<br /> width: min-content;<br /> }<br /> }<br /> <br /> @media print {<br /> /*<br /> Avoid breaking up the chart.<br /> <br /> Otherwise if the pie chart crosses a page line, <br /> the slices can end up e.g. squished to the bottom of the page.<br /> */<br /> .smooth-pie-container {<br /> break-inside: avoid-page;<br /> }<br /> }<br /> <br /> /* <br /> Ex-thumb layout for small screen <br /> and adjustments for compatibility with MW&#039;s Mobile Frontend (mw-mf).<br /> */<br /> /* center the pie */<br /> body.mw-mf .thumbinner .smooth-pie-container {<br /> align-items: center;<br /> }<br /> /* style roughly the same as figcaption on mobile */<br /> body.mw-mf .thumbinner .smooth-pie-legend-container {<br /> font-size: 0.8125rem;<br /> line-height: 1.5;<br /> color: var(--color-subtle, #54595d);<br /> }<br /> /* specifically for thin screens (when thumbinner becomes 100% width) */<br /> @media screen and (max-width: 640px) {<br /> .thumbinner .smooth-pie-legend {<br /> display: grid;<br /> grid-template-columns: repeat(auto-fill, minmax(190px, 1fr) ) ;<br /> gap: 0.3em;<br /> }<br /> .thumbinner .smooth-pie-footer {<br /> margin-top: .5em;<br /> }<br /> }</div>

wp>Nux