feat: улучшение дизайна таблицы деталей автомобиля - обавлены карточки для мобильных устройств - лучшен контраст и читаемость - птимизированы отступы и размеры - обавлены тени и скругления - лучшена структура информации

This commit is contained in:
Vlad 2025-04-20 01:41:11 +03:00
parent 1799493a4a
commit e2f00a2713

View File

@ -173,6 +173,110 @@
font-size: 12px;
}
}
.details-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.car-details {
margin-bottom: 30px;
}
#one-column-emphasis {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
font-size: 16px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
border-radius: 8px;
overflow: hidden;
}
#one-column-emphasis td {
padding: 12px;
border-bottom: 1px solid #ddd;
word-break: break-word;
}
#one-column-emphasis td:first-child {
font-weight: bold;
width: 30%;
background-color: #f5f5f5;
color: #333;
}
.search-container {
text-align: center;
margin-top: 20px;
}
.search-container h2 {
margin-bottom: 20px;
}
.search-wrapper {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
.search-wrapper input {
width: 100%;
max-width: 400px;
}
@media (max-width: 768px) {
.details-container {
padding: 10px;
}
#one-column-emphasis {
font-size: 15px;
border: none;
box-shadow: none;
}
#one-column-emphasis td {
padding: 12px 15px;
display: block;
width: 100%;
border-bottom: none;
position: relative;
}
#one-column-emphasis td:first-child {
background-color: #007bff;
color: white;
font-weight: 600;
padding: 12px 15px;
border-radius: 6px 6px 0 0;
margin-top: 10px;
}
#one-column-emphasis td:last-child {
background-color: #f8f9fa;
border-radius: 0 0 6px 6px;
margin-bottom: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
#one-column-emphasis tr {
border: none;
margin-bottom: 0;
display: block;
}
.car-details {
padding: 0 10px;
}
.search-wrapper input {
width: 100%;
}
}
</style>