MediaWiki:Common.css: различия между версиями

Версия от 01:56, 1 декабря 2024

/* Общий контейнер инфобокса */
.infobox {
    display: flex;             /* Используем flexbox для правильного размещения */
    justify-content: flex-start; /* Размещение элементов слева */
    align-items: flex-start;    /* Выравнивание элементов по верхнему краю */
    border: 1px solid #ccc;    /* Рамка вокруг инфобокса */
    border-radius: 8px;        /* Округленные углы */
    padding: 10px;             /* Отступы внутри */
    background-color: #fafafa; /* Светлый фон */
    margin: 10px 0;            /* Отступы сверху и снизу */
    width: 300px;              /* Фиксированная ширина */
    box-sizing: border-box;    /* Чтобы padding не выходил за пределы ширины */
    float: right;              /* Позиционируем инфобокс справа */
    clear: both;               /* Очищаем возможные обтекания */
}

/* Стили для изображения */
.infobox-image {
    margin-right: 15px;        /* Отступ справа от изображения */
    flex-shrink: 0;            /* Не сжимаем изображение */
}

.infobox-image img {
    width: 120px;              /* Ширина изображения */
    height: auto;              /* Автоматическая высота */
    border-radius: 8px;        /* Округленные углы */
    max-width: 100%;           /* Изображение не выходит за пределы контейнера */
}

/* Стили для контента инфобокса */
.infobox-content {
    flex-grow: 1;              /* Контент растягивается на оставшееся место */
    font-size: 14px;           /* Размер шрифта */
    color: #333;               /* Цвет текста */
}

/* Заголовок инфобокса */
.infobox-title {
    font-size: 18px;           /* Размер шрифта заголовка */
    color: #0044cc;            /* Цвет текста заголовка */
    margin-bottom: 10px;       /* Отступ снизу */
}

/* Стили для параграфов */
.infobox-content p {
    margin: 5px 0;             /* Отступы между строками */
}

/* Стили для ссылок */
.infobox-content a {
    color: #0066cc;            /* Цвет ссылок */
    text-decoration: none;     /* Без подчеркивания */
}

.infobox-content a:hover {
    text-decoration: underline; /* Подчеркивание при наведении */
}