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

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


/* Стили для изображения */
/* Стили для изображения инфобокса */
.infobox-image {
.infobox-image {
     margin-right: 15px; /* Отступ справа от изображения */
     margin-right: 15px; /* Отступ справа от изображения */
Строка 17: Строка 21:


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


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


/* Стили для ссылок */
/* Стили для ссылок в инфобоксе */
.infobox-content a {
.infobox-content a {
     color: #0066cc; /* Цвет ссылок */
     color: #0066cc; /* Цвет ссылок */

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

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

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

.infobox-image img {
    width: 120px; /* Ширина изображения */
    height: auto; /* Автоматическая высота, пропорциональная ширине */
    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; /* Подчеркивание при наведении на ссылку */
}