MediaWiki:Common.css: Difference between revisions

Jump to navigation Jump to search
no edit summary
No edit summary
No edit summary
Line 1: Line 1:
.pie-chart27 {
.pia-chart27 {
    list-style-type: none;
     position: relative;
     position: relative;
     width: 200px;
     width: 200px; /* Ширина диаграммы */
     height: 200px;
     height: 200px; /* Высота диаграммы */
     border-radius: 50%;
     border-radius: 50%;
     clip-path: circle();
     overflow: hidden;
}
}


.pie-chart27 ul {
.sector {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: relative;
    clip-path: circle();
}
 
.pie-chart27 li {
    --rotate: calc(var(--offset) * 3.6deg);
    --slice: calc(var(--value) * 3.6deg);
   
     position: absolute;
     position: absolute;
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
    background-color: var(--bg);
     clip-path: polygon(50% 50%, 100% 0, 100% 100%);
     clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%);
     transform-origin: 50% 50%;
    transform: rotate(var(--rotate));
     transform-origin: center;
}
}


.pie-chart27 li::before {
.sector1 { background-color: #ff6384; transform: rotate(0deg) translate(50%); }
    content: "";
.sector2 { background-color: #36a2eb; transform: rotate(72deg) translate(50%); }
    position: absolute;
.sector3 { background-color: #cc65fe; transform: rotate(144deg) translate(50%); }
    top: 50%;
.sector4 { background-color: #ffce56; transform: rotate(216deg) translate(50%); }
    left: 50%;
.sector5 { background-color: #4bc0c0; transform: rotate(288deg) translate(50%); }
    width: 50%;
    height: 50%;
    background-color: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}




Navigation menu