MediaWiki:Common.css: Difference between revisions

Jump to navigation Jump to search

MediaWiki:Common.css (view source)

Revision as of 12:40, 11 October 2024

2,496 bytes removed ,  11 October 2024
no edit summary
No edit summary
No edit summary
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 {
.ring-chart27 {
   position: relative;
   position: relative;
Line 55: Line 4:
   height: 200px;
   height: 200px;
   border-radius: 50%;
   border-radius: 50%;
   background: conic-gradient(
   background: white;
    #4caf50 0% 25%,
    #ff9800 25% 50%,
    #2196f3 50% 60%,
    #f44336 60% 100%
  );
}
}


Line 82: Line 26:
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
   z-index: 2;
   z-index: 2;
}
}
Line 90: Line 31:
.ring-chart27 ul li {
.ring-chart27 ul li {
   position: absolute;
   position: absolute;
  text-align: center;
   width: 100%;
  font-size: 14px;
   height: 100%;
  cursor: pointer; /* Указатель на элемент */
   clip-path: polygon(50% 50%, 100% 0%, 100% 100%); /* Обрезка для создания четверти круга */
   width: 50%; /* Ширина половины сегмента */
   transition: background 0.3s ease;
   height: 50%; /* Высота половины сегмента */
   transition: background 0.3s ease; /* Плавный переход для фона */
  border-radius: 0 100% 100% 0; /* Округление для создания полукруга */
   overflow: hidden;
}
}


.ring-chart27 ul li:nth-child(1) {
.ring-chart27 ul li:nth-child(1) {
  top: 0;
   background-color: #4caf50;
  left: 0;
   transform: rotate(0deg);
   background: #4caf50; /* Цвет для первого сегмента */
   transform: rotate(0deg); /* Начальный угол */
}
}


.ring-chart27 ul li:nth-child(1):hover {
.ring-chart27 ul li:nth-child(1):hover {
   background: #66bb6a; /* Цвет подсветки для первого сегмента */
   background-color: #66bb6a;
}
}


.ring-chart27 ul li:nth-child(2) {
.ring-chart27 ul li:nth-child(2) {
  top: 0;
   background-color: #ff9800;
  left: 0;
   transform: rotate(90deg);
   background: #ff9800; /* Цвет для второго сегмента */
   transform: rotate(90deg); /* Поворачиваем на 90 градусов */
}
}


.ring-chart27 ul li:nth-child(2):hover {
.ring-chart27 ul li:nth-child(2):hover {
   background: #ffb74d; /* Цвет подсветки для второго сегмента */
   background-color: #ffb74d;
}
}


.ring-chart27 ul li:nth-child(3) {
.ring-chart27 ul li:nth-child(3) {
  top: 0;
   background-color: #2196f3;
  left: 0;
   transform: rotate(180deg);
   background: #2196f3; /* Цвет для третьего сегмента */
   transform: rotate(180deg); /* Поворачиваем на 180 градусов */
}
}


.ring-chart27 ul li:nth-child(3):hover {
.ring-chart27 ul li:nth-child(3):hover {
   background: #64b5f6; /* Цвет подсветки для третьего сегмента */
   background-color: #64b5f6;
}
}


.ring-chart27 ul li:nth-child(4) {
.ring-chart27 ul li:nth-child(4) {
  top: 0;
   background-color: #f44336;
  left: 0;
   transform: rotate(270deg);
   background: #f44336; /* Цвет для четвертого сегмента */
   transform: rotate(270deg); /* Поворачиваем на 270 градусов */
}
}


.ring-chart27 ul li:nth-child(4):hover {
.ring-chart27 ul li:nth-child(4):hover {
   background: #ef5350; /* Цвет подсветки для четвертого сегмента */
   background-color: #ef5350;
}
}




Retrieved from "https://twentyonewiki.info/index.php/Special:MobileDiff/9343"

Navigation menu