MediaWiki:Common.css: Difference between revisions

Jump to navigation Jump to search

MediaWiki:Common.css (view source)

Revision as of 14:08, 8 August 2025

10,299 bytes added ,  8 August
no edit summary
No edit summary
No edit summary
 
(95 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Kitchen Sink Logo*/
.mw-kartographer-map,
.mw-kartographer-map .leaflet-container {
  height: 400px !important;
}




/* Kitchen Sink */
.infobox-venue {
.mw-parser-output .life-wrapper {
  width: 320px;
    display: flex;
  border: 1px solid #3a0a0a;
    width: 100%;
  background: #0f0f0f;
    max-width: 1390px;
  color: #eee;
    min-height: 6vh;
  font-size: 92%;
    margin-bottom: 1.5em;
  line-height: 1.45;
    padding: 0;
  border-radius: 10px;
    align-items: center;
  overflow: hidden;
    justify-content: center;
  box-shadow: 0 0 0 1px #5b1212 inset, 0 6px 18px rgba(0,0,0,.35);
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}
}


.mw-parser-output .life-wrapper-inner {
.infobox-venue > caption,
    display: flex;
.infobox-venue > tbody > tr:first-child > th[colspan="2"],
    align-items: center;
.infobox-venue > .infobox-title {
    justify-content: center;
  display: none;
    width: 1390px;
    margin-left: 60px; /* Смещаем вправо на 50px (настройте по желанию) */
}
}


.mw-parser-output .survival-text {
.infobox-venue > .ib-title {
    font-size: 16px;
  font-weight: 700;
    margin: 0;
    padding: 0;
    line-height: 1;
    margin-right: 0.5em;
    display: inline-block;
}
}


.mw-parser-output .kitchen_sink {
.infobox-venue .ib-image {
    position: relative;
  padding: 0;
    display: flex;
  background: #1a0b0b;
    align-items: center;
}
    width: 150px;
.infobox-venue .ib-img {
    margin: 0;
  display: block;
    padding: 0;
  width: 100%;
  height: auto;
  border-bottom: 1px solid #4a1111;
}
.infobox-venue .ib-caption {
  font-size: 85%;
  color: #ccc;
  padding: .4em .8em;
  border-bottom: 1px solid #311010;
  background: #130505;
}
}


.mw-parser-output .pillar {
.infobox-venue th {
    width: 5px;
  text-align: left;
    height: 28px;
  vertical-align: top;
    background-color: #D02019;
  width: 40%;
    margin: 0;
  white-space: nowrap;
  padding: .5em .7em;
  color: #ffd4d4;
  background: #170909;
  border-bottom: 1px solid #2d0e0e;
}
}


.mw-parser-output .left-pillar {
.infobox-venue td {
    margin-right: 50px;
  padding: .5em .7em;
  border-bottom: 1px solid #231010;
  vertical-align: top;
}
}


.mw-parser-output .right-pillar {
.infobox-venue .ib-note {
    transform: rotate(20deg);
  opacity: .8;
    margin-left: -35px;
  font-style: italic;
  font-size: 90%;
}
}


.mw-parser-output .bridge-beam {
.infobox-venue .ib-map {
    position: absolute;
  padding: 0;
    width: 10px;
  border-top: 1px solid #2d0e0e;
    height: 5px;
  background: #0f0f0f;
    background-color: #D02019;
    top: 50%;
    left: calc(50% - 30px - 38px);
    transform: translateY(-50%);
    margin: 0;
}
}


/* Setlist */


.count-songlist {
 
   margin: 0; /* Убираем внешние отступы */
.image-frame2 {
   padding: 0; /* Убираем внутренние отступы */
   display: inline-block;
   list-style: none; /* Убираем стандартные маркеры списка */
   border: none;
   counter-reset: count-songlist-counter; /* Инициализируем счетчик для нумерации */
   border-radius: 18px;
  overflow: hidden;
   box-shadow: 0 3px 16px rgba(70,15,25,0.09);
  margin: 8px;
  background: none;
}
}
 
.framed-img2, .image-frame2 img {
.count-songlist div {
   display: block;
   margin: 0.2em 0; /* Небольшой вертикальный отступ между элементами */
  width: 206px;
   padding-left: 2em; /* Увеличиваем отступ слева для текста, чтобы учесть смещение цифр */
  height: 206px;
   position: relative; /* Для позиционирования псевдоэлемента */
  border-radius: 0;
   counter-increment: count-songlist-counter; /* Увеличиваем счетчик для каждого элемента */
   border-left: 11px solid #c72a37;
  border-right: 11px solid #c72a37;
   border-top: 6px solid #c72a37;
   border-bottom: none;
  box-sizing: border-box;
  margin: 0 auto;
}
}
 
.image-caption2 {
.count-songlist div:first-child {
  background: #181217;
   margin-top: 0.5em; /* Отступ сверху только для первого элемента *
  color: #e0a6b4;
   padding-bottom: 1.5em; /* Отступ снизу для текста */
  border-bottom: 6px solid #c72a37;
  border-left: 11px solid #c72a37;
  border-right: 11px solid #c72a37;
   border-radius: 0 0 18px 18px;
  font-size: 1.11em;
   padding: 10px 0 7px 0;
  margin: 0;
  font-family: 'Segoe UI', 'Arial', sans-serif;
  letter-spacing: .02em;
  width: 206px;
  box-sizing: border-box;
  text-align: center;
}
}


.count-songlist div::before {
  content: counter(count-songlist-counter) "."; /* Отображаем номер с точкой (например, "1.") */
  position: absolute; /* Позиционируем номер */
  left: 0.5em; /* Добавляем отступ слева для цифр (было 0) */
  color: black; /* Цвет номера */
  font-size: 1em; /* Уменьшаем размер шрифта цифр (было 1em) */
}


.custom-songlist {
  margin: 0; /* Убираем внешние отступы */
  padding: 0; /* Убираем внутренние отступы */
}


.custom-songlist div {
  margin: 0.2em 0; /* Небольшой вертикальный отступ между элементами */
  padding-left: 1.5em; /* Отступ слева для текста */
  padding-bottom: 1.5em; /* Отступ снизу для текста */
  position: relative; /* Для позиционирования псевдоэлемента */
}


.custom-songlist div:first-child {
/* Стили для SetlistBox */
  margin-top: 0.5em; /* Отступ сверху только для первого элемента */
.setlist-anim {
    animation: setlist-fadein 0.8s ease;
}
}
 
@keyframes setlist-fadein {
.custom-songlist div::before {
    from { opacity: 0; transform: translateY(20px);}
  content: "•"; /* Символ точки */
    to { opacity: 1; transform: none;}
  position: absolute; /* Позиционируем точку */
  left: 0.5em; /* Расположение точки слева */
  color: black; /* Цвет точки */
  font-size: 1.2em; /* Увеличенный размер точки */
}
}
 
.setlist-label {
.mw-wiki-logo {
    color: #666;
     background-image: url(images/wiki2.png);
    font-size: 90%;
     transition: transform 0.3s ease-in-out; /* Добавляем плавную анимацию */
    padding-right: 0.5em;
}
    font-style: italic;
 
    white-space: nowrap;
.mw-wiki-logo:hover {
}
     transform: scale(1.1); /* Увеличиваем масштаб на 10% */
.setlist-row:hover {
}
    background: #f6fbf1;
 
    transition: background 0.3s;
ul {
}
   margin: 0.3em 0 0 1.6em; /* Отступ сверху и слева для всего списка */
 
   padding: 0; /* Убираем внутренние отступы контейнера */
 
   list-style-type: disc; /* Тип маркера — круглые точки */
.setlist-song {
}
    margin-right: 1.1em;
 
    display: inline-block;
ul li {
}
   margin: 0 0 0.2em 0; /* Небольшой отступ снизу между элементами списка */
 
   padding: 0; /* Без внутренних отступов для элементов */
 
}
.collapsible-setlist {
 
    font-size: 97%;
 
    padding-top: 0.3em;
ul {
    padding-bottom: 0.3em;
     padding-left: 0;
}
}
.collapsible-setlist-row {
 
    display: block;
::marker {
    margin-left: 0.5em;
     list-style-type: none !important;
    margin-bottom: 0.12em;
}
    color: #363636;
 
    white-space: nowrap;
.text-effect {
}
     font-size: 25px; /* начальный размер шрифта */
.collapsible-setlist-symbol {
     color: black; /* начальный цвет текста */
    font-size: 80%;
     transition: color 0.3s ease, font-size 0.3s ease; /* плавный переход для цвета и размера шрифта */
    margin-right: 0.5em;
}
    color: #aaa;
 
    font-family: 'Arial Unicode MS', Arial, sans-serif;
.text-effect:hover {
    vertical-align: middle;
     color: #b22222; /* тускло-красный цвет при наведении */
}
     font-size: 28px; /* немного увеличенный размер шрифта */
 
}
/* Стили для символа "?" */
 
.not-confirmed {
 
    cursor: pointer; /* Меняем курсор на указатель */
.c-form-title {
    position: relative; /* Для возможного позиционирования */
    text-decoration: none; /* Убираем подчеркивание по умолчанию */
}
 
/* Стили при наведении */
.not-confirmed:hover {
    text-decoration: underline; /* Добавляем подчеркивание */
    text-decoration-style: dotted; /* Подчеркивание в точку */
}
 
/* Добавляем title при наведении */
.not-confirmed[title]:hover:after {
    content: attr(title); /* Используем значение атрибута title */
    position: absolute;
    top: 100%; /* Позиционируем под элементом */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10;
}
 
.licontent-actual {
    z-index: -2; /* Устанавливаем уровень слоя ниже upper_tables */
}
 
/*photo frames */
/* Стиль для контейнера изображения с рамкой и подписью */
.photo-frame {
    display: inline-block; /* Для корректного центрирования и отображения */
    text-align: center; /* Центрирование подписи */
    margin: 10px; /* Отступ для визуального разделения */
    padding: 10px 10px 0; /* Уменьшен нижний отступ, чтобы подпись была ближе */
    vertical-align: top; /* Выравнивание по верхнему краю */
    opacity: 0; /* Изначально невидимый */
    animation: fadeIn 1s ease forwards; /* Анимация появления */
    box-sizing: border-box; /* Учитывает рамку и отступы в размерах */
}
 
/* Анимация появления */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px); /* Легкий сдвиг вниз */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
 
/* Стиль для самой фотографии */
.photo-frame img {
    border-style: solid; /* Тип рамки */
    border-color: #D02019; /* Красная рамка */
    border-width: 20px 40px; /* Верх/низ: 20px, лево/право: 40px */
    display: block; /* Убирает лишние отступы под изображением */
    max-width: 300px; /* Увеличенная максимальная ширина изображения */
    max-height: 450px; /* Увеличенная максимальная высота изображения */
    height: auto; /* Сохраняет пропорции изображения */
    object-fit: contain; /* Изображение не обрезается, а вписывается целиком */
    box-sizing: border-box; /* Рамка включается в размеры изображения */
    transition: all 0.3s ease; /* Плавный переход для всех изменений */
}
 
/* Эффект при наведении */
.photo-frame img:hover {
    border-width: 23px 47px; /* Увеличиваем рамку при наведении */
    transform: scale(1.05); /* Увеличение изображения на 5% */
}
 
/* Стиль для подписи */
.photo-frame .caption {
    margin-top: 5px; /* Минимальный отступ сверху для подписи */
    font-size: 14px; /* Размер шрифта подписи */
    color: #333; /* Цвет текста подписи */
    line-height: 1.2; /* Межстрочный интервал для компактности */
}
 
/* Media */
.social-media-row {
    display: flex; /* Располагаем элементы в ряд */
    gap: 10px; /* Отступ между контейнерами */
}
 
/* Стили для каждого контейнера */
.social-media {
    width: 75px;
    height: 75px;
    border: 2px solid #000;
    border-radius: 8px;
    background-color: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
}
 
.social-media-row {
    display: flex;
    gap: 10px;
    justify-content: center; /* Центрирует ряд по горизонтали */
}
 
.social-media:hover {
    transform: scale(1.1);
}
 
.social-media:active {
    background-color: #ccc;
}
 
.social-media a {
    width: 100%;
    height: 100%;
    background-image: url('your-image.png');
    background-size: 80%;
    background-position: center center;
    background-repeat: no-repeat;
    background-clip: content-box;
    display: block;
}
 
 
/* links */
.mw-parser-output a[href="/index.php/Special:Random"] {
    position: relative; /* Для позиционирования псевдоэлемента */
    display: inline-block; /* Убедимся, что ссылка ведет себя корректно */
}
 
.mw-parser-output a[href="/index.php/Special:Random"]::before {
    content: "";
    position: absolute;
    top: -14px; /* Расширяем область сверху */
    left: -17px; /* Расширяем область слева */
    right: -17px; /* Расширяем область справа */
    bottom: -14px; /* Расширяем область снизу */
    z-index: 1; /* Убедимся, что псевдоэлемент не перекрывает текст */
}
 
.copyable-text {
    background-color: #EFE9DE; /* Цвет фона */
    border: 2px solid #722215; /* Рамка */
    padding: 5px 10px; /* Внутренние отступы */
    display: inline-block; /* Для компактного отображения */
    border-radius: 5px; /* Скругленные углы */
    cursor: pointer; /* Курсор в виде указателя */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Плавный переход */
    font-family: 'MyCustomFont2', sans-serif; /* Шрифт */
    color: #333; /* Цвет текста */
    position: relative; /* Для позиционирования псевдоэлемента */
}
 
/* Эффект при наведении */
.copyable-text:hover {
    background-color: #CFC8B2; /* Цвет фона при наведении */
    border-color: #D02019; /* Цвет рамки при наведении */
}
 
/* Эффект затемнения при нажатии */
.copyable-text:active {
    background-color: #D5CFC0; /* Чуть темнее, чем #EFE9DE */
    border-color: #5A1A10; /* Чуть темнее, чем #722215 */
}
 
/* Стиль для текста "Copied" через псевдоэлемент */
.copyable-text.copied::after {
    content: "Copied"; /* Текст "Copied" */
    position: absolute;
    left: -65px; /* Расположение над элементом */
    left: 50%;
    transform: translateX(-50%); /* Центрируем по горизонтали */
    background-color: #D02019; /* Красный фон */
    color: white; /* Белый текст */
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8em;
    opacity: 0; /* Изначально скрыт */
    transition: opacity 0.3s ease; /* Плавное исчезновение */
}
 
/* Показываем текст "Copied" и запускаем анимацию исчезновения */
.copyable-text.copied::after {
    opacity: 1;
    animation: fadeOut 1.3s forwards; /* Анимация исчезновения */
}
 
/* Анимация для плавного исчезновения */
@keyframes fadeOut {
    0% { opacity: 1; }
    77% { opacity: 1; } /* 77% от 1.3s = ~1s, текст виден 1 секунду */
    100% { opacity: 0; }
}
 
/* Kitchen Sink Logo*/
 
 
/* Kitchen Sink */
.mw-parser-output .life-wrapper {
    display: flex;
    width: 100%;
    max-width: 1390px;
    min-height: 6vh;
    margin-bottom: 1.5em;
    padding: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}
 
.mw-parser-output .life-wrapper-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1390px;
    margin-left: 60px; /* Смещаем вправо на 50px (настройте по желанию) */
}
 
.mw-parser-output .survival-text {
    font-size: 16px;
    margin: 0;
    padding: 0;
    line-height: 1;
    margin-right: 0.5em;
    display: inline-block;
}
 
.mw-parser-output .kitchen_sink {
    position: relative;
    display: flex;
    align-items: center;
    width: 150px;
    margin: 0;
    padding: 0;
}
 
.mw-parser-output .pillar {
    width: 5px;
    height: 28px;
    background-color: #D02019;
    margin: 0;
}
 
.mw-parser-output .left-pillar {
    margin-right: 50px;
}
 
.mw-parser-output .right-pillar {
    transform: rotate(20deg);
    margin-left: -35px;
}
 
.mw-parser-output .bridge-beam {
    position: absolute;
    width: 10px;
    height: 5px;
    background-color: #D02019;
    top: 50%;
    left: calc(50% - 30px - 38px);
    transform: translateY(-50%);
    margin: 0;
}
 
/* Setlist */
 
.mw-parser-output .count-songlist {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: count-songlist-counter;
}
 
.mw-parser-output .count-songlist div {
    margin: 0.2em 0;
    padding-left: 2em;
    position: relative;
    counter-increment: count-songlist-counter;
}
 
.mw-parser-output .count-songlist div:first-child {
    margin-top: 0.5em;
}
 
.mw-parser-output .count-songlist div:last-child {
    margin-bottom: 1.5em;
}
 
.mw-parser-output .count-songlist div::before {
    content: counter(count-songlist-counter) ".";
    position: absolute;
    left: 0.5em;
    color: black;
    font-size: 1em;
}
 
.mw-wiki-logo {
     background-image: url(images/wiki2.png);
     transition: transform 0.3s ease-in-out; /* Добавляем плавную анимацию */
}
 
.mw-wiki-logo:hover {
     transform: scale(1.1); /* Увеличиваем масштаб на 10% */
}
 
ul {
   margin: 0.3em 0 0 1.6em; /* Отступ сверху и слева для всего списка */
   padding: 0; /* Убираем внутренние отступы контейнера */
   list-style-type: disc; /* Тип маркера — круглые точки */
}
 
ul li {
   margin: 0 0 0.2em 0; /* Небольшой отступ снизу между элементами списка */
   padding: 0; /* Без внутренних отступов для элементов */
}
 
 
ul {
     padding-left: 0;
}
 
::marker {
     list-style-type: none !important;
}
 
.text-effect {
     font-size: 25px; /* начальный размер шрифта */
     color: black; /* начальный цвет текста */
     transition: color 0.3s ease, font-size 0.3s ease; /* плавный переход для цвета и размера шрифта */
}
 
.text-effect:hover {
     color: #b22222; /* тускло-красный цвет при наведении */
     font-size: 28px; /* немного увеличенный размер шрифта */
}
 
 
.c-form-title {
     font-family: 'MyCustomFont1';
     font-family: 'MyCustomFont1';
     font-size: 40px;
     font-size: 40px;
Line 219: Line 568:




/* Изменение текста "Discussion" на "Comments" */
/* Скрытие оригинального текста и замена на "Comments" */
a[rel="discussion"] span::before {
    content: "Comments";
}
 
a[rel="discussion"] span {
a[rel="discussion"] span {
     visibility: hidden;
     display: inline-block; /* Для корректного позиционирования */
     position: relative;
     position: relative;
    color: transparent; /* Скрываем оригинальный текст для доступности */
}
}


/* Отображение текста "Comments" */
a[rel="discussion"] span::before {
a[rel="discussion"] span::before {
     visibility: visible;
     content: "Comments";
     position: absolute;
     position: absolute;
     top: 0;
     top: 0;
     left: 0;
     left: 0;
    color: #0645AD; /* Цвет текста, как у ссылок MediaWiki */
}
}


/* Подчёркивание при наведении */
/* Подчеркивание при наведении, как у ссылок */
a[rel="discussion"]:hover {
a[rel="discussion"]:hover span::before {
     text-decoration: underline;
     text-decoration: underline;
    text-decoration-color: #0645AD; /* Цвет подчеркивания, как у ссылок */
}
}


Line 377: Line 726:
     display: flex; /* Используем flexbox для управления внутренним содержимым */
     display: flex; /* Используем flexbox для управления внутренним содержимым */
     flex-direction: column; /* Вертикальная ориентация содержимого */
     flex-direction: column; /* Вертикальная ориентация содержимого */
     height: 990px;
     height: 1015px;
    z-index: 10000; /* Устанавливаем высокий уровень слоя */
}
}


Line 1,653: Line 2,003:
     text-decoration: none; /* Убирает подчеркивание */
     text-decoration: none; /* Убирает подчеркивание */
     color: #fff;
     color: #fff;
     margin-top: 10px;
     margin-top: 5px;
     margin-bottom: 10px;
     margin-bottom: 5px;
}
}


Line 1,862: Line 2,212:


/* Замените .custom-link-text на класс или идентификатор вашего элемента */
/* Замените .custom-link-text на класс или идентификатор вашего элемента */
.custom-link-text a {
/* Сбрасываем стили для родительского <p>, если он есть */
     color: inherit; /* Сохраняет цвет текста */
.mw-parser-output .custom-link-text-p {
     text-decoration: none; /* Убирает подчеркивание */
     margin: 0;
    padding: 0;
}
 
/* Стили для .custom-link-text */
.mw-parser-output .custom-link-text {
    margin: 0;
    padding: 0;
     text-align: center;
    line-height: 1;
    display: inline;
    margin-right: 50px;
}
 
/* Стили для ссылок */
.mw-parser-output .custom-link-text a {
    color: inherit;
    text-decoration: none;
    margin: 0;
    padding: 0;
    line-height: 1;
    display: inline;
}
}


Line 3,114: Line 3,485:
#p-personal ul { background: #DDD7CC; border-radius: 3px 3px; border: 2px solid #D33328; padding:0.1em 1.5em; height: 23px; }
#p-personal ul { background: #DDD7CC; border-radius: 3px 3px; border: 2px solid #D33328; padding:0.1em 1.5em; height: 23px; }


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


.vector-menu-tabs-legacy .selected { background: #DDD7CC }
.vector-menu-tabs-legacy .selected { background: #DDD7CC }
Retrieved from "https://twentyonewiki.info/index.php/Special:MobileDiff/10423...11159"

Navigation menu