diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css index 3665b42..8083ee4 100644 --- a/frontend/src/styles/global.css +++ b/frontend/src/styles/global.css @@ -62,4 +62,91 @@ html, body { .post-content tr:hover td { background: #f8fafc; +} + +/* АДАПТИВНАЯ ТАБЛИЦА (DIV-STRUCTURE) */ +/* Десктоп: 3 колонки в ряд */ +.post-content > div:has(> div > div:nth-child(3)) { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 0; + margin: 2rem 0; + border-radius: 0.5rem; + overflow: hidden; + box-shadow: 0 1px 3px rgba(0,0,0,0.1); +} + +.post-content > div:has(> div > div:nth-child(3)) > div { + display: contents; +} + +.post-content > div:has(> div > div:nth-child(3)) > div > div { + padding: 1rem; + border-bottom: 1px solid #e2e8f0; + background: #fff; + font-size: 0.95rem; +} + +/* Заголовки (первая строка) */ +.post-content > div:has(> div > div:nth-child(3)) > div:first-child > div { + background: #1e3a5f; + color: #fff; + font-weight: 700; + text-align: center; +} + +/* Последняя строка без границы */ +.post-content > div:has(> div > div:nth-child(3)) > div:last-child > div { + border-bottom: none; +} + +/* Hover эффект */ +.post-content > div:has(> div > div:nth-child(3)) > div:hover > div { + background: #f8fafc; +} + +/* Мобильная версия */ +@media (max-width: 768px) { + .post-content > div:has(> div > div:nth-child(3)) { + display: flex; + flex-direction: column; + gap: 0.75rem; + } + + .post-content > div:has(> div > div:nth-child(3)) > div { + display: flex; + flex-direction: column; + background: #fff; + border-radius: 0.5rem; + overflow: hidden; + box-shadow: 0 1px 2px rgba(0,0,0,0.08); + } + + /* Скрываем заголовки в мобильном */ + .post-content > div:has(> div > div:nth-child(3)) > div:first-child { + display: none; + } + + .post-content > div:has(> div > div:nth-child(3)) > div > div { + padding: 0.75rem 1rem; + border: none; + border-bottom: 1px solid #f1f5f9; + } + + .post-content > div:has(> div > div:nth-child(3)) > div > div:last-child { + border-bottom: none; + } + + /* Первый элемент в строке - метка */ + .post-content > div:has(> div > div:nth-child(3)) > div > div:first-child { + background: #1e3a5f; + color: #fff; + font-weight: 600; + } + + /* Остальные элементы - значения */ + .post-content > div:has(> div > div:nth-child(3)) > div > div:not(:first-child) { + color: #64748b; + font-size: 0.85rem; + } } \ No newline at end of file