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

Версия от 01:59, 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;               /* Не сжимаем изображение */
    width: 120px;                 /* Ширина изображения */
    height: 120px;                /* Высота изображения */
    overflow: hidden;             /* Прячем излишки, если изображение выходит за пределы */
    border-radius: 8px;           /* Округленные углы */
    display: flex;                /* Чтобы использовать центрирование */
    justify-content: center;      /* Центрируем изображение */
    align-items: center;          /* Центрируем изображение */
}

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

/* Стили для контента инфобокса */
.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;   /* Подчеркивание при наведении */
}