MediaWiki:Common.css: Difference between revisions

Jump to navigation Jump to search

MediaWiki:Common.css (view source)

Revision as of 23:23, 2 April 2025

5 bytes added ,  2 April
no edit summary
No edit summary
No edit summary
Line 13: Line 13:
     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-tooltip {
    content: "Скопировано!";
     position: fixed; /* Позиционирование относительно окна браузера */
     position: absolute;
     background-color: #D02019; /* Красный фон */
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
     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;
    pointer-events: none; /* Чтобы табличка не мешала взаимодействию */
     transition: opacity 0.3s ease;
     opacity: 0; /* Изначально скрыта */
}
     transition: opacity 0.3s ease; /* Плавное исчезновение */
 
    z-index: 1000; /* Чтобы быть поверх других элементов */
.copyable-text.copied::after {
    opacity: 1;
}
}


Retrieved from "https://twentyonewiki.info/index.php/Special:MobileDiff/10454"

Navigation menu