MediaWiki:Common.css: Difference between revisions

Jump to navigation Jump to search

MediaWiki:Common.css (view source)

Revision as of 00:36, 22 May 2025

4,578 bytes added ,  22 May
no edit summary
No edit summary
No edit summary
(48 intermediate revisions by the same user not shown)
Line 1: Line 1:
.licontent-actual {
    z-index: -2; /* Устанавливаем уровень слоя ниже upper_tables */
}
/*photo frames */
/* Стиль для контейнера изображения с рамкой и подписью */
.photo-frame {
    display: inline-block; /* Для корректного центрирования и отображения */
    text-align: center; /* Центрирование подписи */
    margin: 5px 5px; /* Верх/низ: 5px, лево/право: 5px */
    vertical-align: top; /* Выравнивание по верхнему краю, чтобы избежать смещений */
    opacity: 0; /* Изначально невидимый */
    animation: fadeIn 1s ease forwards; /* Анимация появления */
}
/* Анимация появления */
@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; /* Верх: 20px, Право: 40px, Низ: 20px, Лево: 40px */
    display: block; /* Убирает лишние отступы под изображением */
    width: 150px; /* Уменьшенная ширина изображения */
    height: 225px; /* Уменьшенная высота изображения */
    object-fit: cover; /* Обрезает изображение, чтобы оно вписалось в заданные размеры */
    transition: all 0.3s ease; /* Плавный переход для всех изменений */
}
/* Эффект при наведении */
.photo-frame img:hover {
    border-width: 23px 47px 23px 47px; /* Увеличиваем рамку при наведении */
    transform: scale(1.05); /* Увеличение изображения на 5% */
}
/* Стиль для подписи */
.photo-frame .caption {
    background: none; /* Без фона */
    font-size: 14px; /* Размер шрифта подписи */
    margin-top: 5px; /* Отступ сверху от изображения */
    color: #000; /* Цвет текста подписи (черный) */
}
/* 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 */
/* links */
.mw-parser-output a[href="/index.php/Special:Random"] {
.mw-parser-output a[href="/index.php/Special:Random"] {
Line 13: Line 115:
     bottom: -14px; /* Расширяем область снизу */
     bottom: -14px; /* Расширяем область снизу */
     z-index: 1; /* Убедимся, что псевдоэлемент не перекрывает текст */
     z-index: 1; /* Убедимся, что псевдоэлемент не перекрывает текст */
}
.copyable-text.copied::after {
    opacity: 1;
    animation: fadeOut 2s forwards;
}
@keyframes fadeOut {
    0% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}
}


.copyable-text {
.copyable-text {
     background-color: #EFE9DE; /* Цвет фона, как в вашем дизайне */
     background-color: #EFE9DE; /* Цвет фона */
     border: 2px solid #722215; /* Рамка, как в вашем дизайне */
     border: 2px solid #722215; /* Рамка */
     padding: 5px 10px; /* Внутренние отступы */
     padding: 5px 10px; /* Внутренние отступы */
     display: inline-block; /* Для компактного отображения */
     display: inline-block; /* Для компактного отображения */
     border-radius: 5px; /* Скругленные углы */
     border-radius: 5px; /* Скругленные углы */
     cursor: pointer; /* Курсор в виде указателя, чтобы показать, что текст кликабельный */
     cursor: pointer; /* Курсор в виде указателя */
     transition: background-color 0.3s ease, border-color 0.3s ease; /* Плавный переход для эффекта */
     transition: background-color 0.3s ease, border-color 0.3s ease; /* Плавный переход */
     font-family: 'MyCustomFont2', sans-serif; /* Шрифт из вашего дизайна */
     font-family: 'MyCustomFont2', sans-serif; /* Шрифт */
     color: #333; /* Цвет текста, как в .licontent .li-body */
     color: #333; /* Цвет текста */
    position: relative; /* Для позиционирования псевдоэлемента */
}
}


/* Эффект при наведении */
.copyable-text:hover {
.copyable-text:hover {
     background-color: #CFC8B2; /* Цвет фона при наведении, как в вашем дизайне */
     background-color: #CFC8B2; /* Цвет фона при наведении */
     border-color: #D02019; /* Цвет рамки при наведении, как в вашем дизайне */
     border-color: #D02019; /* Цвет рамки при наведении */
}
}


/* Стиль для уведомления о копировании */
/* Эффект затемнения при нажатии */
.copyable-text:active {
    background-color: #D5CFC0; /* Чуть темнее, чем #EFE9DE */
    border-color: #5A1A10; /* Чуть темнее, чем #722215 */
}
 
/* Стиль для текста "Copied" через псевдоэлемент */
.copyable-text.copied::after {
.copyable-text.copied::after {
     content: "Скопировано!";
     content: "Copied"; /* Текст "Copied" */
     position: absolute;
     position: absolute;
     top: -25px;
     left: -65px; /* Расположение над элементом */
     left: 50%;
     left: 50%;
     transform: translateX(-50%);
     transform: translateX(-50%); /* Центрируем по горизонтали */
     background-color: #D02019; /* Красный фон уведомления */
     background-color: #D02019; /* Красный фон */
     color: white; /* Белый текст */
     color: white; /* Белый текст */
     padding: 5px 10px;
     padding: 5px 10px;
     border-radius: 5px;
     border-radius: 5px;
     font-size: 0.8em;
     font-size: 0.8em;
     opacity: 0;
     opacity: 0; /* Изначально скрыт */
     transition: opacity 0.3s ease;
     transition: opacity 0.3s ease; /* Плавное исчезновение */
}
}


/* Показываем текст "Copied" и запускаем анимацию исчезновения */
.copyable-text.copied::after {
.copyable-text.copied::after {
     opacity: 1;
     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 Logo*/
Line 263: Line 370:




/* Изменение текста "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 421: Line 528:
     display: flex; /* Используем flexbox для управления внутренним содержимым */
     display: flex; /* Используем flexbox для управления внутренним содержимым */
     flex-direction: column; /* Вертикальная ориентация содержимого */
     flex-direction: column; /* Вертикальная ориентация содержимого */
     height: 1010px;
     height: 1015px;
    z-index: 10000; /* Устанавливаем высокий уровень слоя */
}
}


Line 3,179: Line 3,287:
#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/10453...10596"

Navigation menu

Help

Help Image

Here's pages that you can help us to get more information about them.

Stand with Ukraine

Ukrainian Flag