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:
.ring-chart28 {
    list-style: none;
    position: relative;
    width: 200px; /* Ширина диаграммы */
    height: 200px; /* Высота диаграммы */
    border-radius: 50%;
    overflow: hidden;
}
.segment {
    position: absolute;
    width: 50%;
    height: 100%;
    clip: rect(0px, 200px, 200px, 100px);
}
.segment1 {
    background-color: #FF5733; /* Цвет сегмента 1 */
    transform: rotate(0deg);
}
.segment2 {
    background-color: #33FF57; /* Цвет сегмента 2 */
    transform: rotate(108deg); /* 30% + 20% */
}
.segment3 {
    background-color: #3357FF; /* Цвет сегмента 3 */
    transform: rotate(180deg); /* 30% + 20% + 25% */
}
.segment4 {
    background-color: #FF33A8; /* Цвет сегмента 4 */
    transform: rotate(252deg); /* 30% + 20% + 25% + 25% */
}


.segment::after {
    content: "";
    position: absolute;
    left: 100%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: white; /* Цвет внутренней части кольца */
    transform: translateX(-100%);
}




Line 135: Line 90:


/* Новый слой с изображением */
/* Новый слой с изображением */
.ring-chart27 ul li.overlay {
.ring-chart27 .overlay {
   position: absolute;
   position: absolute;
   top: 0;
   top: 0;
Line 141: Line 96:
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
   z-index: 4; /* Поверх всех сегментов */
   z-index: 3; /* Поверх всех сегментов, но под изображением */
  display: flex;
  justify-content: center;
  align-items: center;
}
}


.ring-chart27 ul li.overlay img {
.ring-chart27 .overlay img {
  display: block;
   width: 70%; /* Настройте размер изображения */
   width: 100%;
   height: auto;
   height: 100%;
   object-fit: contain;
   object-fit: contain;
   pointer-events: none;
   pointer-events: none;
}
}




Navigation menu