New Responsive design

2026-05-23 18:08:27 +02:00
parent 3fdbaf0285
commit 0d436d8190
19 changed files with 2152 additions and 607 deletions
@@ -38,3 +38,96 @@
    font-weight: bolder;
    font-size: 12pt;
 }
+
+/* ═══════════════════════════════════════════
+   RESPONSIVE – TABLET (640px – 1023px)
+═══════════════════════════════════════════ */
+@media (max-width: 1023px) {
+    .costunit-list table {
+        width: 100% !important;
+        font-size: 0.88rem;
+    }
+
+    .costunit-list table tr td input[type="button"] {
+        width: 100%;
+        margin-bottom: 6px;
+    }
+
+    .costunit-list table tr th {
+        width: 120px !important;
+        font-size: 0.88rem;
+    }
+}
+
+/* ═══════════════════════════════════════════
+   RESPONSIVE – SMARTPHONE (< 640px)
+═══════════════════════════════════════════ */
+@media (max-width: 639px) {
+    .costunit-list table {
+        width: 100% !important;
+        padding: 8px !important;
+    }
+
+    .costunit-list table thead,
+    .costunit-list table tbody,
+    .costunit-list table tfoot,
+    .costunit-list table tr,
+    .costunit-list table td,
+    .costunit-list table th {
+        display: block !important;
+        width: 100% !important;
+    }
+
+    .costunit-list table td[rowspan] {
+        width: 100% !important;
+    }
+
+    .costunit-list table tr {
+        display: flex !important;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 4px;
+        margin-bottom: 4px;
+    }
+
+    .costunit-list table tr th {
+        flex: 0 0 140px;
+        font-size: 0.82rem !important;
+        width: 140px !important;
+        padding-right: 8px;
+    }
+
+    .costunit-list table tr td {
+        flex: 1;
+        font-size: 0.82rem;
+        padding-right: 0;
+    }
+
+    .costunit-list table thead tr td {
+        font-size: 1rem !important;
+        padding: 6px 0 !important;
+        border-bottom: 1px solid #ddd;
+        margin-bottom: 8px;
+    }
+
+    .costunit-list table tr td:last-child {
+        flex: 0 0 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        padding-top: 8px;
+    }
+
+    .costunit-list table tr td input[type="button"] {
+        width: 100% !important;
+        margin: 0 !important;
+        font-size: 0.85rem;
+        padding: 10px;
+    }
+
+    .costunit-list .link {
+        display: inline-block;
+        margin: 4px 0;
+        font-size: 0.85rem;
+    }
+}