8,960
edits
MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary Tag: Manual revert |
No edit summary |
||
| Line 1: | Line 1: | ||
.hole { | |||
position: absolute; | |||
width: 100px; /* Диаметр внутреннего круга */ | |||
height: 100px; /* Диаметр внутреннего круга */ | |||
top: 50%; | |||
left: 50%; | |||
transform: translate(-50%, -50%); | |||
background-color: white; /* Цвет дырки (фон страницы) */ | |||
border-radius: 50%; /* Делает внутренний круг */ | |||
} | |||
.circular-chart { | .circular-chart { | ||
position: relative; | position: relative; | ||
| Line 7: | Line 18: | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
clip-path: circle(50%); | clip-path: circle(50%); | ||
} | } | ||
.circular-chart . | .circular-chart::before, | ||
.circular-chart::after { | |||
content: ""; | |||
position: absolute; | position: absolute; | ||
top: 0; | |||
left: 0; | |||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
border-radius: 50%; | border-radius: 50%; | ||
transition: background-color 0.3s ease; | |||
transition: background 0.3s ease; | pointer-events: none; /* Это делает сами псевдоэлементы "проницаемыми" для кликов */ | ||
} | } | ||
.circular-chart . | .circular-chart { | ||
background- | background: conic-gradient( | ||
#49c2db 0deg 100deg, | |||
#a2c063 100deg 252deg, | |||
#636363 252deg 334deg, | |||
green 324deg 360deg | |||
); | |||
} | |||
.circular-chart:hover::before { | |||
background: conic-gradient( | |||
#6ae1ff 0deg 100deg, /* Немного осветленный голубой */ | |||
#a2c063 100deg 252deg, | |||
#636363 252deg 334deg, | |||
green 324deg 360deg | |||
); | |||
} | } | ||
.circular-chart | .circular-chart:hover::after { | ||
background- | background: conic-gradient( | ||
#49c2db 0deg 100deg, | |||
#bbd47d 100deg 252deg, /* Немного осветленный зеленый */ | |||
#636363 252deg 334deg, | |||
#32cd32 324deg 360deg /* Лайм грин вместо зеленого */ | |||
); | |||
} | } | ||
.circular-chart | /* Настройка каждого сектора */ | ||
background- | .circular-chart::before { | ||
background: conic-gradient( | |||
#49c2db 0deg 100deg, /* Голубой сектор */ | |||
transparent 100deg 360deg | |||
); | |||
} | } | ||
.circular-chart | .circular-chart:hover::before { | ||
background- | background: conic-gradient( | ||
#6ae1ff 0deg 100deg, /* Светло-голубой сектор */ | |||
transparent 100deg 360deg | |||
); | |||
} | } | ||
.circular-chart | .circular-chart::after { | ||
background: conic-gradient( | |||
transparent 0deg 100deg, | |||
#a2c063 100deg 252deg, /* Зеленый сектор */ | |||
transparent 252deg 360deg | |||
); | |||
} | } | ||
.circular-chart: | .circular-chart:hover::after { | ||
background: conic-gradient( | |||
transparent 0deg 100deg, | |||
#bbd47d 100deg 252deg, /* Светло-зеленый сектор */ | |||
transparent 252deg 360deg | |||
); | |||
} | } | ||