MediaWiki:Common.css: Difference between revisions

Jump to navigation Jump to search

MediaWiki:Common.css (view source)

Revision as of 23:54, 20 March 2025

10,872 bytes removed ,  20 March
no edit summary
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 1,089: Line 1,089:
}
}


.styled-list {
    list-style-type: none; /* Убирает стандартные маркеры списка */
    padding: 0; /* Убирает отступы */
}


.styled-item {
    display: flex; /* Использует flexbox для размещения элементов в строке */
    border: 1px solid #D02019; /* Цвет рамки */
    margin: 5px 0; /* Отступы между элементами списка */
    padding: 5px; /* Внутренние отступы */
}


.styled-item-top {
    display: flex; /* Использует flexbox для размещения элементов в строке */
    margin: 5px 0; /* Отступы между элементами списка */
    padding: 5px; /* Внутренние отступы */
}


.table-cell {
    border-right: 1px solid #D02019; /* Рамка справа от каждого элемента */
    padding: 5px; /* Внутренние отступы */
}


.table-cell:last-child {
    border-right: none; /* Убирает рамку у последнего элемента */
}


.table-cell-top {
    border-right: 1px solid #D02019; /* Рамка справа от каждого элемента */
    padding: 5px; /* Внутренние отступы */
}






                   




Line 1,104: Line 1,129:




 
/* Скрываем всплывающее окно по умолчанию */
 
.popup-overlay {
 
     display: none;
 
     position: fixed;
/*111111111111111111111111111*/
     top: 0;
 
     left: 0;
 
     width: 100%;
 
     height: 100%;
 
     background: rgba(0, 0, 0, 0.7);
 
     justify-content: center;
 
     align-items: center;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/* Стили для таблицы "New pages" */
.new-pages-table {
     display: inline-block;
     margin-left: 7px;
     margin-right: 15px;
     float: left;
    border-radius: 10px 10px 0 0;
     width: 31%;
     height: 224px;
     background-color: #f9f9f9; /* Пример цвета фона */
     border: 1px solid #C14424;
     margin-top: 10px; /* Чтобы было немного пространства от сайдбара */
}
}


/* Стили для заголовка таблицы */
/* Показываем всплывающее окно, если оно активно */
.new-pages-table th {
#concert-list-trigger:focus + .popup-overlay {
    width: 40%;
     display: flex;
    background-color: #fff5ee; /* Пример цвета фона заголовка */
    border-radius: 10px 10px 0 0;
    border: 1px solid #C14424;
     text-align: center;
}
}


/* Стили для содержимого таблицы */
.popup-content {
.new-pages-table td {
     background: #fff;
     border: 1px solid #C14424;
     padding: 20px;
     background-color: #f9f9f9; /* Пример цвета фона */
    border-radius: 8px;
     text-align: left;
     max-width: 500px;
     padding: 10px;
     width: 80%;
}
}


 
.close-button {
 
     position: absolute;
 
     top: 10px;
 
     right: 10px;
.container2 {
     cursor: pointer;
    width: 50vw; /* Ширина контейнера */
     font-size: 20px;
    height: 100vh; /* Высота контейнера */
    overflow: hidden;
     position: relative;
     background-color: #fff; /* Цвет фона контейнера */
     display: flex;
     align-items: center;
    justify-content: center;
}
 
.gradient-text {
     font-size: 4rem; /* Размер текста */
    font-weight: bold;
    background: linear-gradient(45deg, lightcoral 25%, lightblue 25%, lightblue 50%, lightcoral 50%, lightcoral 55%, lightblue 65%);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: waveAnimation 4s infinite linear;
}
}


@keyframes waveAnimation {
/* Скрытие окна при потере фокуса */
    0% {
.popup-overlay:focus-within {
        background-position: 0% 0%;
     display: none;
    }
     100% {
        background-position: 100% 100%;
    }
}
}


Line 1,222: Line 1,179:




 
.square-list {
li.tooladd {
     list-style-type: none; /* Убираем стандартные маркеры списка */
     position: relative;
     display: inline-block; /* Делаем элемент блочным для центрирования */
     display: inline-block;
     width: 100px; /* Ширина квадрата */
     cursor: pointer;
     height: 100px; /* Высота квадрата */
     vertical-align: top; /* Добавлено для выравнивания по вертикали */
    position: relative; /* Позволяет наложить картинку */
    margin: 10px; /* Отступ между элементами списка */
    border: 1px solid #000; /* Граница квадрата (по желанию) */
}
}


li.tooladd .tooltiptext {
.square-list img {
     visibility: hidden;
     position: absolute; /* Позволяет наложить картинку */
     width: 120px;
     top: 0; /* Положение сверху */
     background-color: black;
     left: 0; /* Положение слева */
    color: #fff;
     width: 100%; /* Ширина картинки на 100% от элемента */
    text-align: center;
     height: 100%; /* Высота картинки на 100% от элемента */
    border-radius: 6px;
     object-fit: cover; /* Сохраняет пропорции изображения */
    padding: 5px 0;
     position: absolute;
    z-index: 1;
    top: -125%; /* Изменено на top для появления сверху */
     left: 50%;
     margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}
}
li.tooladd:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}






.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;
}


      .container {
.ring-chart27:after {
            position: relative;
  content: '';
            display: flex;
  position: absolute;
            align-items: center;
  top: 0;
            width: 150px; /* Ширина контейнера */
  left: 0;
            height: 50px;
  width: 100%;
            left: 697px;
  height: 100%;
            top: -37px;
  background: url('/images/a/a4/Circle_frame.svg.png') no-repeat center;
        }
  background-size: contain;
        .stripe {
  z-index: 3;
            width: 5px;
            height: 50%;
            background-color: #D02019;
        }
        .left-stripe {
            margin-right: 50px; /* Расстояние между полосками и линией */
        }
        .right-stripe {
            transform: rotate(20deg); /* Наклоняем на 20 градусов */
            margin-left: -35px; /* Подвигаем полоску на 5px влево */
        }
        .horizontal-line {
            position: absolute;
            width: 10px; /* Ширина линии */
            height: 5px; /* Толщина линии */
            background-color: #D02019;
            top: 50%; /* Центрируем вертикально по середине контейнера */
            left: calc(50% - 30px - 38px); /* Обновляем расчет для выравнивания линии */
            transform: translateY(-50%); /* Центрируем вертикально */
        }
 
.mail-icon { font-size: 48px; color: #000000; font-size: 96px; }
 
.custom-link-text2 a {
    color: inherit; /* Сохраняет цвет текста */
    text-decoration: none; /* Убирает подчеркивание */
    color: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
}
}


@keyframes blink {
.ring-chart27 ul {
    0% { opacity: 1; }
  list-style: none;
    50% { opacity: 0; }
  padding: 0;
    100% { opacity: 1; }
  margin: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}
}


.blinking-button {
.ring-chart27 ul li {
    animation: blink 1s infinite;
  position: absolute;
    background-color: red;
  width: 100%;
    color: white;
  height: 100%;
    border: none;
  clip-path: polygon(50% 50%, 100% 0%, 100% 100%);
    padding: 10px 20px;
  transition: background 0.3s ease;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
}
}


 
.ring-chart27 ul li a {
@keyframes blink {
  display: block;
    0% { opacity: 1; }
  width: 100%;
    50% { opacity: 0; }
  height: 100%;
    100% { opacity: 1; }
  text-decoration: none; /* Убираем подчеркивание у ссылок */
}
}


 
.ring-chart27 ul li:nth-child(1) {
.admin-chat-form {
  background-color: #4caf50;
    margin: 20px 0;
  transform: rotate(0deg);
}
}


.admin-chat-form textarea {
.ring-chart27 ul li:nth-child(1):hover {
    width: 100%;
  background-color: #66bb6a;
    margin-bottom: 10px;
}
}


.admin-chat-form-buttons {
.ring-chart27 ul li:nth-child(2) {
    text-align: right;
  background-color: #ff9800;
  transform: rotate(90deg);
}
}


.site-button {
.ring-chart27 ul li:nth-child(2):hover {
    background-image: url('/images/6/66/Button_Background.png');
  background-color: #ffb74d;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-position 0.5s ease-in-out;
}
}


.site-button:hover {
.ring-chart27 ul li:nth-child(3) {
    background-position: 5% 5%;
  background-color: #2196f3;
  transform: rotate(180deg);
}
}


textarea {
.ring-chart27 ul li:nth-child(3):hover {
    display: block;
  background-color: #64b5f6;
    order: -1;
}
}


.c-item {
.ring-chart27 ul li:nth-child(4) {
    order: 1;
  background-color: #f44336;
  transform: rotate(270deg);
}
}


#some-container {
.ring-chart27 ul li:nth-child(4):hover {
    display: flex;
  background-color: #ef5350;
    flex-direction: column;
}
}




.newcombutton {
    display: inline-block;
    padding: 10px 10px;
    border: 2px solid #191919;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    background-color: #007bff; /* Default color */
    transition: transform 0.3s ease, background-color 0.3s ease;
    margin-right: 5px;
    word-wrap: break-word;
    word-break: break-word;
    transform-origin: left; /* Масштабирование относительно левой стороны */
    color: inherit; /* Сохраняет цвет текста */
    text-decoration: none; /* Убирает подчеркивание */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
}


.newcombutton:hover {
    transform: scale(1.05); /* Slightly increase size */
    opacity: 1.1;
}








.butting-button {
                   
    display: inline-block; /* Make sure the link is displayed as a button */
    background-color: red;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    text-decoration: none; /* Remove underline from the link */
    transition: background-color 0.3s ease; /* Add a smooth transition for hover effect */
}


.butting-button:hover {
    background-color: darkred; /* Change color on hover for better UX */
}




.comment-item {
    background-color: #EFE9DE;
    border: 3px solid #84817B;
    padding: 10px; /* Добавьте отступы по вашему усмотрению */
    border-radius: 5px; /* При необходимости добавьте скругление углов */
    list-style: none;
    padding-left: 20px;
    width: 42%;
    transform-origin: left;
}


.comment-item comments {
    padding-left: 50px; /* Отступ слева для содержимого */
}


.comment-item2 {
    background-color: #E2DDD3;
    border: 3px solid #84817B;
    padding: 10px; /* Добавьте отступы по вашему усмотрению */
    border-radius: 5px; /* При необходимости добавьте скругление углов */
    list-style: none;
    width: 42%; /* Ограничение ширины */
    box-sizing: border-box; /* Включает padding и border в расчет ширины */
    overflow: hidden; /* Скрывает содержимое, выходящее за пределы элемента */
    white-space: normal; /* Разрешает перенос текста на новую строку */
}


.comment-item2 comments {
    padding-left: 50px; /* Отступ слева для содержимого */
    max-width: 100%; /* Убедитесь, что содержимое не выходит за пределы границ */
    box-sizing: border-box; /* Включает padding и border в расчет ширины */
    overflow: hidden; /* Скрывает содержимое, выходящее за пределы элемента */
    white-space: normal; /* Разрешает перенос текста на новую строку */
}


.rules-item {
    background-color: #EFE9DE;
    border: 3px solid #84817B;
    padding: 10px; /* Добавьте отступы по вашему усмотрению */
    border-radius: 5px; /* При необходимости добавьте скругление углов */
    list-style: none;
    padding-left: 20px;
    transform-origin: left;
    float:left;
}




.comment-item-second {
    background-color: #EFE9DE;
    border: 3px solid #84817B;
    padding: 10px; /* Добавьте отступы по вашему усмотрению */
    border-radius: 5px; /* При необходимости добавьте скругление углов */
    list-style: none;
    padding-left: 20px;
    width: 50%;
    transform-origin: right;
    float:right;
    text-align: center;
    align-items: center;
    justify-content: center;
}


.comment-item-second comments {
/*111111111111111111111111111*/
    padding-left: 50px; /* Отступ слева для содержимого */
}




Line 1,485: Line 1,317:




.map-item {
 
    background-color: white;
    border: 2px solid red;
 
    padding: 10px;
    margin: 10px;
    list-style: none; /* Убирает стандартные маркеры списка */
    text-align: center; /* Центрирует содержимое по горизонтали */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 900px; /* Задайте нужную высоту */
    overflow: hidden; /* Скрывает выходящее за пределы содержимое */
    position: relative;
}






/* Замените .custom-link-text на класс или идентификатор вашего элемента */
.custom-link-text a {
    color: inherit; /* Сохраняет цвет текста */
    text-decoration: none; /* Убирает подчеркивание */
}




.red-background {
  background-color: #D02019;
}


.twentyonewikilogo {
    font-family: 'MyCustomFont1';
    font-size: 100px;
    color: #D02019;
    cursor: pointer; /* Чтобы указать, что элемент кликабельный */
    line-height: 1; /* Устанавливаем высоту строки, чтобы минимизировать отступы */
}


.comment-rules-text {
    font-family: 'MyCustomFont1';
    font-size: 22px;
    color: #000;
    line-height: 1; /* Устанавливаем высоту строки, чтобы минимизировать отступы */
    margin-top: 10px;
    background: #F7F1E6;
}


.interactchoise {
    font-family: 'MyCustomFont1';
    font-size: 40px;
    color: #D02019;
    line-height: 1; /* Устанавливаем высоту строки, чтобы минимизировать отступы */
    margin-top: 10px;
}


.interactchoise:hover {
    color: #E5241D;
}


.choise {
    font-family: 'MyCustomFont1';
    font-size: 30px;
    color: #D02019;
    line-height: 1; /* Устанавливаем высоту строки, чтобы минимизировать отступы */
    margin-top: 10px;
}


.choise:hover {
    color: #E5241D;
}


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


.pie-chart11 .segment {
    width: 50%;
    height: 50%;
    background-color: var(--color);
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 0% 100%;
    transform: rotate(var(--rotate)) translateY(-100%);
    transition: transform 0.3s ease;
}


.pie-chart11 .segment:hover {
    transform: rotate(var(--rotate)) translateY(-120%);
}


.list-item {
    list-style-type: none;
    width: 100%; /* Ширина 100% родительского элемента */
    text-align: center;
    padding: 20px;
    box-sizing: border-box; /* Учитывает отступы в общей ширине */
}


.list-item span {
    display: inline-block;
    color: black;
    background: url(/images/1/1e/Clancy_Gif_Intro.gif) no-repeat center;
    background-size: contain; /* Сохраняет пропорции изображения */
    padding: 20px;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}


    .custom-li {
        list-style-type: none; /* Убираем маркеры у списка */
        width: 850px; /* Ширина элемента, можно настроить по вашему усмотрению */
        height: 850px; /* Высота элемента, можно настроить по вашему усмотрению */
        background-image: url('/images/3/37/Is-ø-lat-ed2.png');
        background-size: contain; /* Изображение не будет обрезаться */
        background-repeat: no-repeat; /* Убираем повторение изображения */
        background-position: center; /* Центрируем изображение */
        margin: 10px;
        display: flex;
        flex-direction: column; /* Направление содержимого по вертикали */
        align-items: center; /* Центрируем текст по горизонтали */
        justify-content: flex-start; /* Выравниваем текст по верхнему краю элемента */
        text-align: center; /* Выравнивание текста по центру внутри элемента */
        color: #000; /* Цвет текста, можно изменить по желанию */
        font-family: Arial, sans-serif; /* Шрифт текста, можно изменить по желанию */
        font-size: 14px; /* Размер текста, можно изменить по желанию */
        padding: 60px; /* Внутренний отступ внутри элемента, чтобы текст не примыкал к краям */
        box-sizing: border-box; /* Включаем отступы и границы в ширину и высоту элемента */
    }








@keyframes randomMovement {
    0% {
        top: 0;
        left: 0;
    }
    25% {
        top: 100px;
        left: 200px;
    }
    50% {
        top: 200px;
        left: 100px;
    }
    75% {
        top: 100px;
        left: 300px;
    }
    100% {
        top: 0;
        left: 0;
    }
}


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


.moving-li {
    background-color: #D02019;
    color: white;
    border: 2px solid #722215;
    font-size: 30px;
    padding: 10px 20px;
    position: absolute;
    border-radius: 5px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-family: 'MyCustomFont1', sans-serif;
    animation: randomMovement 12s infinite ease-in-out; /* Плавное движение */
}


.moving-li:hover {
    filter: brightness(1.2);
}


.table-with-spacing {
    border-spacing: 10px;
}




  .pie-chart {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background-image: conic-gradient(
      #49C2DB 0% 50%,  /* 50% голубого */
      #A2C063 50% 90%, /* 40% зелёного */
      #636363 90% 100% /* 10% серого */
    );
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }


  .pie-chart li {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    clip-path: polygon(50% 50%, 100% 0, 100% 100%);
  }


   .pie-chart li a {
   .pie-chart li a {
Retrieved from "https://twentyonewiki.info/index.php/Special:MobileDiff/10269"

Navigation menu