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

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


/* Стили для изображения */
/* Изображение в инфобоксе */
.infobox-image {
.infobox img {
    margin-right: 15px;          /* Отступ справа от изображения */
     width: 100%;                   /* Изображение растягивается по ширине блока */
    flex-shrink: 0;              /* Не сжимаем изображение */
     height: auto;                   /* Высота подстраивается по пропорциям */
     width: 120px;                 /* Ширина изображения */
     border-radius: 8px;             /* Округленные углы */
     height: 120px;               /* Высота изображения */
     margin-bottom: 10px;            /* Отступ снизу от изображения */
    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 {
.infobox-title {
     font-size: 18px;             /* Размер шрифта заголовка */
     font-size: 18px;               /* Размер шрифта для заголовка */
     color: #0044cc;               /* Цвет текста заголовка */
    font-weight: bold;              /* Жирный шрифт */
     margin-bottom: 10px;         /* Отступ снизу */
     color: #0044cc;                 /* Синий цвет */
     margin-bottom: 5px;             /* Отступ снизу */
}
}


/* Стили для параграфов */
/* Текстовое содержимое инфобокса */
.infobox-content p {
.infobox-content p {
     margin: 5px 0;                /* Отступы между строками */
     font-size: 14px;                /* Размер шрифта для текста */
}
     margin: 5px 0;                 /* Отступы между строками */
 
/* Стили для ссылок */
.infobox-content a {
     color: #0066cc;               /* Цвет ссылок */
    text-decoration: none;        /* Без подчеркивания */
}
 
.infobox-content a:hover {
    text-decoration: underline;  /* Подчеркивание при наведении */
}
}

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

/* Контейнер инфобокса */
.infobox {
    display: flex;                  /* Используем flexbox для размещения элементов */
    flex-direction: column;         /* Элементы располагаются вертикально */
    width: 250px;                   /* Фиксированная ширина инфобокса */
    padding: 10px;                  /* Отступы внутри инфобокса */
    border: 1px solid #ccc;         /* Рамка вокруг инфобокса */
    border-radius: 8px;             /* Округленные углы */
    background-color: #fafafa;      /* Светлый фон */
    margin-left: 10px;              /* Отступ слева */
    float: right;                   /* Позиционирование инфобокса справа */
    margin-bottom: 10px;            /* Отступ снизу */
}

/* Изображение в инфобоксе */
.infobox img {
    width: 100%;                    /* Изображение растягивается по ширине блока */
    height: auto;                   /* Высота подстраивается по пропорциям */
    border-radius: 8px;             /* Округленные углы */
    margin-bottom: 10px;            /* Отступ снизу от изображения */
}

/* Заголовок инфобокса */
.infobox-title {
    font-size: 18px;                /* Размер шрифта для заголовка */
    font-weight: bold;              /* Жирный шрифт */
    color: #0044cc;                 /* Синий цвет */
    margin-bottom: 5px;             /* Отступ снизу */
}

/* Текстовое содержимое инфобокса */
.infobox-content p {
    font-size: 14px;                /* Размер шрифта для текста */
    margin: 5px 0;                  /* Отступы между строками */
}