MediaWiki:Filters.css

/* Основной контейнер формы */
#filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Расстояние между элементами */
    align-items: center;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* Стили для всех элементов формы (label, input, select, button) */
#filter-form label {
    font-weight: bold;
    margin-right: 5px;
    white-space: nowrap; /* Чтобы текст не переносился на новую строку */
}

#filter-form input,
#filter-form select {
    padding: 5px; /* Уменьшенный padding */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px; /* Уменьшенный размер шрифта */
    flex: 0 1 auto; /* Элементы не растягиваются */
    min-width: 80px; /* Минимальная ширина для элементов */
    max-width: 120px; /* Максимальная ширина для элементов */
}

/* Уменьшаем ширину полей для цены и площади */
#filter-form input#цена-от,
#filter-form input#цена-до,
#filter-form input#площадь-от,
#filter-form input#площадь-до {
    width: 80px; /* Фиксированная ширина для полей цены и площади */
    padding: 4px; /* Уменьшенный padding */
    font-size: 12px; /* Уменьшенный размер шрифта */
    flex: 0 0 auto; /* Элементы не растягиваются */
}

/* Уменьшаем ширину поля "Номер дома" */
#filter-form input#номер-дома {
    width: 60px; /* Фиксированная ширина для поля "Номер дома" */
    padding: 4px; /* Уменьшенный padding */
    font-size: 12px; /* Уменьшенный размер шрифта */
    flex: 0 0 auto; /* Элементы не растягиваются */
}

/* Уменьшаем ширину выпадающих списков */
#filter-form select {
    min-width: 120px; /* Минимальная ширина для выпадающих списков */
    max-width: 200px; /* Максимальная ширина для выпадающих списков */
}

#filter-form button {
    padding: 8px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
    flex: 0 0 auto; /* Кнопка не растягивается */
}

#filter-form button:hover {
    background-color: #0056b3;
}

/* Стили для таблицы результатов */
#results {
    width: 100%;
    margin-top: 20px;
}

#results table {
    width: 100%;
    border-collapse: collapse;
}

#results th,
#results td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}

#results th {
    background-color: #f2f2f2;
    font-weight: bold;
}

#results tr:hover {
    background-color: #f9f9f9;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    #filter-form {
        flex-direction: column;
        align-items: stretch;
    }

    #filter-form input,
    #filter-form select {
        width: 100%;
        margin-bottom: 10px;
        max-width: 100%; /* На мобильных устройствах поля занимают всю ширину */
    }

    #filter-form button {
        width: 100%;
    }

    /* На мобильных устройствах поля цены, площади и номера дома занимают всю ширину */
    #filter-form input#цена-от,
    #filter-form input#цена-до,
    #filter-form input#площадь-от,
    #filter-form input#площадь-до,
    #filter-form input#номер-дома {
        width: 100%;
    }
}