MediaWiki:Common.css

.circular-chart {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    list-style: none;
    margin: 0;
    padding: 0;
    background: conic-gradient(
        red 0deg 180deg,
        blue 180deg 252deg,
        yellow 252deg 324deg,
        green 324deg 360deg
    );
    clip-path: circle(50%);
}

.circular-chart .segment {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    clip-path: polygon(50% 50%, 0 0, 100% 0);
    transition: background 0.3s ease;
}

.circular-chart .red {
    background-color: red;
}

.circular-chart .blue {
    background-color: blue;
}

.circular-chart .yellow {
    background-color: yellow;
}

.circular-chart .green {
    background-color: green;
}

.circular-chart .segment:hover {
    filter: brightness(1.2);
}

.circular-chart:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    background-color: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1; /* Чтобы ссылка была выше других элементов */
}






.pie-chart3 .pie-80-20 {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  background: conic-gradient(
    #f00 0% 80%,  /* Красный сегмент (80%) */
    #ff0 80% 100% /* Желтый сегмент (20%) */
  );
}

.pie-chart3 .pie-80-20::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;  /* Размер пустоты в центре */
  height: 50%;
  background: white;  /* Цвет фона центрального отверстия */
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.pie-chart3 .pie-80-20 a {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 200px;
  color: white;
  text-decoration: none;
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
}




.pie-chart2 {
  list-style: none;
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background: conic-gradient(
    #f00 0% 25%, 
    #0f0 25% 50%, 
    #00f 50% 75%, 
    #ff0 75% 100%
  );
}

.pie-chart2::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  background: white; /* Цвет фона центрального отверстия */
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.pie-chart2 .segment {
  position: absolute;
  width: 200px;
  height: 200px;
  clip: rect(0, 200px, 200px, 100px);
}

.pie-chart2 .segment a {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 200px;
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.pie-chart2 .segment-1 {
  background-color: #f00;
  transform: rotate(0deg);
}

.pie-chart2 .segment-2 {
  background-color: #0f0;
  transform: rotate(90deg);
}

.pie-chart2 .segment-3 {
  background-color: #00f;
  transform: rotate(180deg);
}

.pie-chart2 .segment-4 {
  background-color: #ff0;
  transform: rotate(270deg);
}




.pie-chart {
  list-style: none;
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.pie-chart .segment {
  position: absolute;
  width: 200px;
  height: 200px;
  clip: rect(0, 200px, 200px, 100px);
}

.pie-chart .segment a {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 200px;
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.pie-chart .segment-1 {
  background-color: #f00;
  transform: rotate(0deg);
}

.pie-chart .segment-2 {
  background-color: #0f0;
  transform: rotate(90deg);
}

.pie-chart .segment-3 {
  background-color: #00f;
  transform: rotate(180deg);
}

.pie-chart .segment-4 {
  background-color: #ff0;
  transform: rotate(270deg);
}



.mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited {
    color: transparent;
}

.mw-parser-output a.external.free {
    word-break: break-all;
    color: transparent;
}


  .circle-container {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    position: relative;
    background: conic-gradient(
      red 0% 80%,   /* Красный сегмент от 0% до 80% */
      blue 80% 100% /* Синий сегмент от 80% до 100% */
    );
    overflow: hidden;
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  .circle-container::before,
  .circle-container::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: filter 0.3s; /* Плавное изменение яркости */
    pointer-events: none; /* Чтобы псевдоэлементы не мешали взаимодействию */
  }

  .circle-container::before {
    background: red;
    clip-path: polygon(0 0, 0 100%, 0 100%); /* Красный сегмент */
    transform: rotate(0deg) translateX(-50%);
    transform-origin: 100% 100%;
  }

  .circle-container::after {
    background: blue;
    clip-path: polygon(0 0, 100% 0, 100% 100%); /* Синий сегмент */
    transform: rotate(288deg) translateX(-50%);
    transform-origin: 100% 100%;
  }

  .circle-container:hover::before {
    filter: brightness(1.2); /* Яркость красного сегмента при наведении */
  }

  .circle-container:hover::after {
    filter: brightness(1.2); /* Яркость синего сегмента при наведении */
  }








ul {
  list-style-type: none;
  padding: 0;
}

.circle {
  position: relative;
  width: 250px;  /* Диаметр круга */
  height: 250px; /* Диаметр круга */
  margin: 20px;
}

.quarter {
  position: absolute;
  width: 50%;  /* Ширина четверти */
  height: 50%; /* Высота четверти */
  display: block; /* Для того чтобы <a> занимал всю область */
  text-decoration: none; /* Убираем подчеркивание текста */
}

.top-left {
  background-color: red;
  top: 0;
  left: 0;
}

.top-right {
  background-color: blue;
  top: 0;
  right: 2;
}

.bottom-left {
  background-color: green;
  bottom: 0;
  left: 0;
}

.bottom-right {
  background-color: yellow;
  bottom: 0;
  right: 0;
}

.hole {
  position: absolute;
  width: 100px; /* Диаметр внутреннего круга */
  height: 100px; /* Диаметр внутреннего круга */
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white; /* Цвет дырки (фон страницы) */
  border-radius: 50%; /* Делает внутренний круг */
}

.quarter:hover {
  opacity: 0.8; /* Эффект подсветки */
  filter: brightness(5.2);
}


.circle {
  border-radius: 50%; /* Делает элемент кругом */
  overflow: hidden; /* Скрывает выступающие элементы */
}

















.circular-table {
  position: relative;
  width: 200px; /* Задайте нужный размер */
  height: 200px; /* Задайте нужный размер */
  border-radius: 50%;
  overflow: hidden;
}

.large-cell {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 50%, 0% 100%, 50% 100%);
  transform-origin: center;
}

/* Настроим каждую ячейку, чтобы они занимали равные сектора */
.large-cell:nth-child(1) {
  background: #FF9999;
  transform: rotate(100deg);
}

.large-cell:nth-child(2) {
  background: #FFCC99;
  transform: rotate(280deg);
}

.large-cell:nth-child(3) {
  background: #FFFF99;
  transform: rotate(400deg);
}

.circular-table div:hover {
  filter: brightness(1.2);
  opacity: 1;
}



/* CSS placed here will be applied to all skins */

/* Стиль для элементов списка с адаптивным размером */
li.custom-adaptive-item {
    background-color: #DDD7CC; /* Цвет фона */
    border: 2px solid #999; /* Цвет и толщина рамки */
    border-radius: 10px; /* Закругленные углы */
    padding: 10px; /* Внутренние отступы */
    margin-bottom: 10px; /* Отступ между элементами списка */
    list-style-type: none; /* Убираем стандартные маркеры списка */
    display: inline-block; /* Для уменьшения ширины до содержимого */
    min-width: 150px; /* Минимальная ширина элемента */
    min-height: 50px; /* Минимальная высота элемента */
    max-width: 100%; /* Максимальная ширина до 100% контейнера */
    word-wrap: break-word; /* Перенос длинных слов на следующую строку */
    box-sizing: border-box; /* Учитываем рамку и отступы в размерах */
    position: relative; /* Необходим для позиционирования псевдоэлемента */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

li.custom-adaptive-item a {
    display: block; /* Занимает всю доступную ширину и высоту */
    height: 100%; /* Занимает полную высоту <li> */
    width: 100%; /* Занимает полную ширину <li> */
    text-decoration: none; /* Убираем подчеркивание текста */
    color: inherit; /* Наследуем цвет от родительского элемента */
}

/* Дополнительный эффект при наведении мыши */
li.custom-adaptive-item:hover {
    background-color: #CFC8B2; /* Цвет фона при наведении */
    border-color: #777; /* Цвет рамки при наведении */
}

/* Изменение оттенка для изображения при наведении на <li> */
li.custom-adaptive-item:hover img {
    filter: brightness(0.8); /* Темнее на 20% при наведении */
}

/* Текст "Discography" появляется только в уникальном элементе */
li.unique-item::after {
    content: "Discography"; /* Текст для отображения */
    color: white; /* Цвет текста */
    font-size: 20px; /* Размер шрифта */
    font-weight: bold; /* Полужирный шрифт */
    position: absolute; /* Абсолютное позиционирование */
    top: 50%; /* Центрирование по вертикали */
    left: 50%; /* Центрирование по горизонтали */
    transform: translate(-50%, -50%); /* Смещение на половину ширины и высоты */
    opacity: 0; /* Исходное состояние невидимо */
    transition: opacity 0.3s ease; /* Плавный переход */
}

li.unique-item2::after {
    content: "Tour"; /* Текст для отображения */
    color: white; /* Цвет текста */
    font-size: 20px; /* Размер шрифта */
    font-weight: bold; /* Полужирный шрифт */
    position: absolute; /* Абсолютное позиционирование */
    top: 50%; /* Центрирование по вертикали */
    left: 50%; /* Центрирование по горизонтали */
    transform: translate(-50%, -50%); /* Смещение на половину ширины и высоты */
    opacity: 0; /* Исходное состояние невидимо */
    transition: opacity 0.3s ease; /* Плавный переход */
}

/* Ссылка внутри псевдоэлемента */
li.unique-item2::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: 1; /* Чтобы ссылка была выше других элементов */
}

/* Отображение текста при наведении на уникальный элемент */
li.unique-item:hover::after {
    opacity: 1; /* Сделать текст видимым */
}

li.unique-item2:hover::after {
    opacity: 1; /* Сделать текст видимым */
}

/* Стиль для ссылки внутри псевдоэлемента */
li.unique-item2::after {
    content: "Tour";
    color: white;
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

li.unique-item2:hover::after {
    opacity: 1;
}

li.unique-item2 a::after {
    content: "Tour";
    color: white;
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

li.unique-item2 a:hover::after {
    opacity: 1;
}



.custom-table { background-color: #f9f9f9; border: 2px solid #ccc; width: 100%; border-collapse: collapse; }

.custom-table th, .custom-table td { border: 1px solid #ddd; padding: 8px; }

.custom-table .header-red { background-color: #ff0000; color: white; text-align: center; }

.custom-table .header-blue { background-color: #0000ff; color: white; text-align: center; }

.custom-table .header-green { background-color: #00ff00; color: white; text-align: center; }

/* Change the background color of the bottom and left of eath page, up to behind the logo: */
body { background: #AA3C14 url(/images/7/76/Photo_2024-02-28_12-04-11.jpg) no-repeat; font-family: 'Roboto', Arial, sans-serif; }

#content .client-darkmode { background: #AA3C14; font-family: "Roboto"; }

/* background color of the content and title of pages */ 
#content { background-color: #EFBB7F; } 
 
/* This is from the background color of the title of the Navigation menu in the left column */
#p-navigation { background-color: #F8D63A; border-radius: 10px 10px 0px 0px; border: 3px solid #722215; border-bottom:hidden; background-image:url(/images/9/97/Sidebar.png); }

/* This is from the background color of the title of the Twenty one pilots menu in the left column */
#p-Twenty_one_pilots { background-color: #F8D63A; border: 3px solid #722215; border-bottom:hidden; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); }

/* This is from the background color of the title of the Members menu in the left column */
#p-Members { background-color: #F8D63A; border: 3px solid #722215; border-bottom:hidden; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); }

.background-table { background-image: url(/images/3/3b/Clancy_background.png); background-size: cover;}

.wikitable > tr > th, .wikitable > * > tr > th { background:#}

#catlinks { background:#FFE281; border: 1px solid #C14424; }

.catlinks li { display: inline-block; line-height: 1.25em; border-left: 1px solid #C14424; margin: 0.125em 0; padding: 0 0.5em; }

.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading { background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#722215 100%); background-repeat: no-repeat; background-size: 1px 100%; }

:not(:checked) > .vector-menu-checkbox { background:#EFB737 }

li.gallerybox div.thumb { border: hidden; background-color: #C14424; text-align:center; }

.vector-menu-dropdown { background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#722215 100%); }

.c-actions { margin: 10px 5px 0px 0px; }

.c-item { background-color: #EFB737; border:2px solid #C14424; color: #722215; margin: 10px 0px 15px 0px; }

.c-avatar img { padding: 3px; border: 1px solid #dcdcdc; background-color: #bc1313; margin: 6px 0px 0px 6px; }

.c-score { right: 10px; }

.c-container { margin: 0px 0px 0px 75px; }

.c-user { margin: 1px 0px 6px 0px; }

.c-time { color: #af1414; }

.f-message { background-color: #FFE4AA; width: 445px; }

.c-comment { text-indent: 5px; }

.user-section-heading { margin: 0 0 23px 0; }

#profile-title { margin: 15px 20px 29px -6px; }

#profile-image img { margin: 15px 0px 0px 0px; }

.mwe-popups .mwe-popups-extract:after, .mwe-popups .mwe-popups-extract blockquote:after { content: ' '; position: absolute; bottom: 0; width: 25%; height: 20px; background-color: #EDC393; pointer-events: none; }

figure[typeof~='mw:File/Thumb'], figure[typeof~='mw:File/Frame'] { background-color: #D35232; border-color: #9E3A19; }

.mw-content-ltr figure[typeof~='mw:File/Thumb'] > figcaption, .mw-content-ltr figure[typeof~='mw:File/Frame'] > figcaption { background-color: #D35232; border-color: #9E3A19; }

.mwe-popups .mwe-popups-extract[dir='ltr']:after { right: 0; background-image: linear-gradient(to right,rgba(255,255,255,0),#EDC393 50%); }

.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { background-color: #; border: 1px solid #a2a9b1; padding: 0.2em 0.4em; }

input[type="checkbox" i] { color: #B0E0E6; }

.mwe-popups .mwe-popups-container { background: #EDC393; }

.mw-parser-output .infobox-above, .mw-parser-output .infobox-title { font-size: 125%; font-weight: bold; text-align: center; border-radius: 2px 2px; background-image:url(); }


#n-Discord a { color: #fff !important; font-weight: bold; border-radius: 4px; border: 1px solid #4c57d0; background-color: #5865f2; display: block; position: relative; padding: 4px 4px 5px calc(17px + 6.5px * 2); box-shadow: 0 2px 3px rgba(0,0,0,0.1); transition: 0.2s; }

.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading { display: block; color: #44180D; margin: 0.5em 0 0 0.66666667em; border: 0; padding: 0.25em 0; font-size: 0.80em; font-weight: bold; cursor: default; background-image: linear-gradient(to right,rgba(200,204,209,0) 0,#AA3C14 33%,#AA3C14 66%,rgba(200,204,209,0) 100%); background-position: center bottom; background-repeat: no-repeat; background-size: 100% 1px; }

.vectorTabs span a { background-color: #B0E0E6; }

#p-logo { ; } 

.featurebox-heading { background-image: url(/images/1/14/Scaled_transparent.png); color: #fff; }

element.style { width: 60%; background-color: ; background-image: url(/images/1/14/Scaled_transparent.png); }

.toc, .toccolours { border-radius: 8px 8px; border: 3px solid #C14424; background-color: #FFE3C9; }

#p-tb { background-color: #F8D63A; border-radius: 0px 0px 10px 10px; border: 3px solid #722215; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); }

#p-personal ul { background: #E2B076; border-radius: 3px 3px; border: 2px solid #C14424; padding:0.1em 0.5em; }

#mw-head { background-image: url(/images/4/42/Heared-3_%283%29.gif);}

.vector-menu-tabs-legacy .selected { background: #EFBB7F }

.vector-menu-checkbox { color: #C14424; }

.mp_header { background-image:url(/images/9/9c/Wikinews_banner_2024.png); background-repeat: no-repeat; background-position: top right; width: 100%;}

.mw-body { border: 4px solid #722215; margin-top: -4px; }

h1, h2 { border-color: #57544a; }

.vector-menu-dropdown .mw-list-item a:not(.mw-ui-icon) { background: #F4FFFF; }

img[Attributes Style] { height: 168px; }

.grid * { background: #E0C9AF; }

.vector-search-box-input { color: #312400; border: 1px solid #6D2614; }

.skin-vector .uls-search { border-bottom-color: #7A4D1D; }

.vector-menu-tabs-legacy li { background-image: linear-gradient(to top,#E2B076 0,#E2B076 1px,#E09947 100% ); 

.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading { background-image: linear-gradient(to right,rgba(200,204,209,0) 0,#C14424 33%,#F7572E 66%,rgba(200,204,209,0) 100%); background-position: center bottom; background-repeat: no-repeat; background-size: 100% 1px; font-weight: bold; }

.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading { background-image: linear-gradient(to bottom,rgba(68,137,145,0) 0,#C14424 100%); border: 4px solid #722215; background-repeat: no-repeat; background-size: 1px 100%; border: 4px solid #C14424; margin-top: -4px; }

.imagelink_telegram a {
  width:100px;
  height:100px;
  display:block;
  text-decoration:none;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Telegram_logo.svg/2048px-Telegram_logo.svg.png")

body.page-Main_Page h1.firstHeading { display:none; }

#title-para { background-color: #F0FFFF; }

.hoverimage:hover {
  transition: 0.2s ease;
  transform: scale(1.1);
}

#mw-content-text .featurebox .featurebox-heading{
 background-image:url("https://tfwiki.net/mediawiki/images2/2/26/Allsparkstrip_transparent.png");
}

.hover-highlight:hover {
    background-color: #ffffcc; /* Any desired color */
}

/* Hover Box for switching the visibility of the selected item */
.hoverbox { display:inline-block; padding:0em; }
.hoverbox .hoveritem { display:none; margin:0em; padding:0em; }
.hoverbox .hoveritem.selected { display:inline-block; }
.hoverbox:hover .hoveritem { display:inline-block; }
.hoverbox:hover .hoveritem.selected { display:none; }