MediaWiki:Common.css: Difference between revisions

MediaWiki:Common.css (view source)

1,299 bytes added , 11 October 2024

no edit summary

8,960

edits

@@ Line 1: / Line 1: @@
+.ring-chart {
+  --ring-size: 200px;
+  --ring-thickness: 50px;
+  position: relative;
+  width: var(--ring-size);
+  height: var(--ring-size);
+  border-radius: 50%;
+  overflow: hidden;
+}
+.ring-chart ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg); /* Start the segments from the top */
+}
+.ring-chart li {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  clip: rect(0, var(--ring-size), var(--ring-size), calc(var(--ring-size) / 2));
+}
+.ring-chart a {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  clip: rect(0, calc(var(--ring-size) / 2), var(--ring-size), 0);
+  background-color: lightgray; /* Default color, can be changed */
+  transform-origin: calc(var(--ring-size) / 2) calc(var(--ring-size) / 2);
+  transform: rotate(var(--start-angle)) translateX(calc(var(--ring-size) / 4)) rotate(calc(var(--end-angle) - var(--start-angle) / 2));
+}
+.ring-chart a:before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: solid calc(var(--ring-thickness) / 2) transparent;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 calc(var(--ring-thickness) / 2) lightblue; /* Color of the segment, can be changed */
+  transform: rotate(calc(var(--end-angle) - var(--start-angle)));
+}
 .ring-chart27 {
    position: relative;