|
|
| Line 984: |
Line 984: |
| } | | } |
|
| |
|
| | .pie-chart4 { |
| | width: 200px; |
| | height: 200px; |
| | border-radius: 50%; |
| | position: relative; |
| | list-style: none; |
| | margin: 0; |
| | padding: 0; |
| | background: url('/images/a/a4/Circle_frame.svg.png') no-repeat center center / cover; |
| | } |
|
| |
|
| | .pie-chart4 li { |
| | width: 100%; |
| | height: 100%; |
| | border-radius: 50%; |
| | position: absolute; |
| | clip: rect(0, 200px, 200px, 100px); |
| | } |
|
| |
|
| | .pie-chart4 li:before { |
| | content: ""; |
| | display: block; |
| | width: 100%; |
| | height: 100%; |
| | border-radius: 50%; |
| | clip: rect(0, 100px, 200px, 0); |
| | background-color: var(--color); |
| | transform: rotate(calc(var(--percentage) * 3.6deg)); |
| | transform-origin: 50% 50%; |
| | } |
|
| |
|
| | .pie-chart4 li:nth-child(2) { |
| | transform: rotate(calc(25 * 3.6deg)); |
| | } |
|
| |
|
| | .pie-chart4 li:nth-child(3) { |
| | transform: rotate(calc(75 * 3.6deg)); |
| | } |
|
| |
|
| | .pie-chart4 li:nth-child(4) { |
| | transform: rotate(calc(150 * 3.6deg)); |
| | } |
|
| |
|
|
| |
|
| | /* Основной стиль для <li> */ |
| | .tooltip23-container { |
| | display: inline-block; |
| | position: relative; |
| | cursor: pointer; |
| | } |
|
| |
|
| | /* Скрытый по умолчанию всплывающий блок */ |
| | .tooltip23-text { |
| | visibility: hidden; |
| | border: 2px solid #C14424; |
| | background-color: #EFE9DE; |
| | color: #000; |
| | text-align: center; |
| | border-radius: 6px; |
| | padding: 5px 10px; /* Увеличил боковые отступы для лучшего оформления */ |
| | position: absolute; |
| | z-index: 1; |
| | top: 125%; /* Позиция всплывающего блока теперь сверху */ |
| | right: 2px; /* Отступ от правой стороны страницы на 5 пикселей */ |
| | opacity: 0; |
| | transition: opacity 0.3s; |
| | white-space: nowrap; /* Запретить перенос текста на новую строку */ |
| | } |
|
| |
|
| | | /* Треугольник-указатель всплывающего блока */ |
|
| | .tooltip23-text::after { |
| | | content: ""; |
| | | position: absolute; |
| | | bottom: 100%; /* Установлено вверху всплывающего блока */ |
| | | left: 50%; |
| | | margin-left: -5px; |
| | | border-width: 5px; |
| | | border-style: solid; |
| | | border-color: transparent transparent #555 transparent; /* Изменён порядок цвета */ |
| | |
| | |
| /*111111111111111111111111111*/ | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
|
| |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| .styled-list {
| |
| list-style-type: none; /* Убирает стандартные маркеры списка */
| |
| padding: 0; /* Убирает отступы */
| |
| } | | } |
|
| |
|
| .styled-item {
| | /* Показывать всплывающий блок при наведении */ |
| display: flex; /* Использует flexbox для размещения элементов в строке */
| | .tooltip23-container:hover .tooltip23-text { |
| border: 1px solid #D02019; /* Цвет рамки */
| | visibility: visible; |
| margin: 5px 0; /* Отступы между элементами списка */
| | opacity: 1; |
| padding: 5px; /* Внутренние отступы */
| |
| } | | } |
|
| |
|
| .styled-item-top {
| | /* Concerts List Table */ |
| display: flex; /* Использует flexbox для размещения элементов в строке */
| | /* Вставьте этот код в ваш MediaWiki CSS файл (например, Common.css) */ |
| margin: 5px 0; /* Отступы между элементами списка */
| |
| padding: 5px; /* Внутренние отступы */
| |
| }
| |
|
| |
|
| .table-cell { | | .shows-list { |
| border-right: 1px solid #D02019; /* Рамка справа от каждого элемента */ | | width: 65%; |
| padding: 5px; /* Внутренние отступы */ | | border: 3px solid #D33328; |
| } | | } |
|
| |
|
| .table-cell:last-child { | | .shows-list th, |
| border-right: none; /* Убирает рамку у последнего элемента */ | | .shows-list td { |
| | border: 1px solid #D33328; |
| | text-align: center; |
| } | | } |
|
| |
|
| .table-cell-top { | | .shows-list th { |
| border-right: 1px solid #D02019; /* Рамка справа от каждого элемента */ | | background-color: #E6E6E6; /* Можно изменить на нужный цвет */ |
| padding: 5px; /* Внутренние отступы */
| |
| } | | } |
|
| |
|
| Line 1,064: |
Line 1,097: |
|
| |
|
|
| |
|
| /* Скрываем всплывающее окно по умолчанию */
| | |
| .popup-overlay {
| |
| display: none;
| |
| position: fixed;
| |
| top: 0;
| |
| left: 0;
| |
| width: 100%;
| |
| height: 100%;
| |
| background: rgba(0, 0, 0, 0.7);
| |
| justify-content: center;
| |
| align-items: center;
| |
| }
| |
| | |
| /* Показываем всплывающее окно, если оно активно */
| |
| #concert-list-trigger:focus + .popup-overlay {
| |
| display: flex;
| |
| }
| |
| | |
| .popup-content {
| |
| background: #fff;
| |
| padding: 20px;
| |
| border-radius: 8px;
| |
| max-width: 500px;
| |
| width: 80%;
| |
| }
| |
|
| |
|
| .close-button {
| |
| position: absolute;
| |
| top: 10px;
| |
| right: 10px;
| |
| cursor: pointer;
| |
| font-size: 20px;
| |
| }
| |
|
| |
|
| /* Скрытие окна при потере фокуса */
| |
| .popup-overlay:focus-within {
| |
| display: none;
| |
| }
| |
|
| |
|
|
| |
|
| Line 1,110: |
Line 1,108: |
|
| |
|
|
| |
|
| | /*111111111111111111111111111*/ |
|
| |
|
|
| |
|
|
| |
|
|
| |
|
| .square-list {
| |
| list-style-type: none; /* Убираем стандартные маркеры списка */
| |
| display: inline-block; /* Делаем элемент блочным для центрирования */
| |
| width: 100px; /* Ширина квадрата */
| |
| height: 100px; /* Высота квадрата */
| |
| position: relative; /* Позволяет наложить картинку */
| |
| margin: 10px; /* Отступ между элементами списка */
| |
| border: 1px solid #000; /* Граница квадрата (по желанию) */
| |
| }
| |
|
| |
|
| .square-list img {
| |
| position: absolute; /* Позволяет наложить картинку */
| |
| top: 0; /* Положение сверху */
| |
| left: 0; /* Положение слева */
| |
| width: 100%; /* Ширина картинки на 100% от элемента */
| |
| height: 100%; /* Высота картинки на 100% от элемента */
| |
| object-fit: cover; /* Сохраняет пропорции изображения */
| |
| }
| |
|
| |
|
| | |
| | |
|
| |
|
|
| |
|
| .ring-chart27 {
| |
| position: relative;
| |
| width: 200px;
| |
| height: 200px;
| |
| border-radius: 50%;
| |
| background: white;
| |
| }
| |
|
| |
| .ring-chart27:before {
| |
| content: '';
| |
| position: absolute;
| |
| top: 25px;
| |
| left: 25px;
| |
| width: 150px;
| |
| height: 150px;
| |
| background-color: white;
| |
| border-radius: 50%;
| |
| z-index: 1;
| |
| }
| |
|
| |
| .ring-chart27:after {
| |
| content: '';
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| width: 100%;
| |
| height: 100%;
| |
| background: url('/images/a/a4/Circle_frame.svg.png') no-repeat center;
| |
| background-size: contain;
| |
| z-index: 3;
| |
| }
| |
|
| |
| .ring-chart27 ul {
| |
| list-style: none;
| |
| padding: 0;
| |
| margin: 0;
| |
| position: absolute;
| |
| width: 100%;
| |
| height: 100%;
| |
| z-index: 2;
| |
| }
| |
|
| |
| .ring-chart27 ul li {
| |
| position: absolute;
| |
| width: 100%;
| |
| height: 100%;
| |
| clip-path: polygon(50% 50%, 100% 0%, 100% 100%);
| |
| transition: background 0.3s ease;
| |
| }
| |
|
| |
|
| .ring-chart27 ul li a {
| |
| display: block;
| |
| width: 100%;
| |
| height: 100%;
| |
| text-decoration: none; /* Убираем подчеркивание у ссылок */
| |
| }
| |
|
| |
|
| .ring-chart27 ul li:nth-child(1) {
| |
| background-color: #4caf50;
| |
| transform: rotate(0deg);
| |
| }
| |
|
| |
|
| .ring-chart27 ul li:nth-child(1):hover {
| |
| background-color: #66bb6a;
| |
| }
| |
|
| |
|
| .ring-chart27 ul li:nth-child(2) {
| |
| background-color: #ff9800;
| |
| transform: rotate(90deg);
| |
| }
| |
|
| |
|
| .ring-chart27 ul li:nth-child(2):hover {
| |
| background-color: #ffb74d;
| |
| }
| |
|
| |
|
| .ring-chart27 ul li:nth-child(3) {
| |
| background-color: #2196f3;
| |
| transform: rotate(180deg);
| |
| }
| |
|
| |
|
| .ring-chart27 ul li:nth-child(3):hover {
| |
| background-color: #64b5f6;
| |
| }
| |
|
| |
|
| .ring-chart27 ul li:nth-child(4) {
| |
| background-color: #f44336;
| |
| transform: rotate(270deg);
| |
| }
| |
|
| |
|
| .ring-chart27 ul li:nth-child(4):hover {
| |
| background-color: #ef5350;
| |
| }
| |
|
| |
|
|
| |
|