recorder.py aktualisiert

recorder.py

@@ -824,24 +824,74 @@ a.button:hover {
         padding: 12px;
     }
 
-    table, thead, tbody, th, td, tr {
+    .finished-table,
+    .finished-table tbody,
+    .finished-table tr,
+    .finished-table td {
         display: block;
     }
 
-    thead {
+    .finished-table {
+        background: transparent;
+    }
+
+    .finished-table thead {
         display: none;
     }
 
-    tr {
-        border-bottom: 1px solid var(--color-border);
-        padding: 12px 0;
+    .finished-table tbody {
+        display: grid;
+        gap: 12px;
     }
 
-    td {
-        border: 0;
-        padding: 6px 0;
+    .finished-table tr {
+        padding: 12px 14px;
+        border: 1px solid var(--color-border);
+        border-radius: 12px;
+        background: var(--color-surface);
+        box-shadow: 0 2px 8px var(--color-shadow);
     }
 
+    .finished-table td {
+        display: grid;
+        grid-template-columns: 92px minmax(0, 1fr);
+        gap: 10px;
+        align-items: baseline;
+        border: 0;
+        padding: 7px 0;
+        min-width: 0;
+    }
+
+    .finished-table td::before {
+        color: var(--color-text-muted);
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: .04em;
+    }
+
+    .finished-table td:nth-child(1)::before { content: "Zeitpunkt"; }
+    .finished-table td:nth-child(2)::before { content: "Redner"; }
+    .finished-table td:nth-child(3)::before { content: "Beschreibung"; }
+    .finished-table td:nth-child(4)::before { content: "Veranstaltung"; }
+    .finished-table td:nth-child(5)::before { content: "Dauer"; }
+    .finished-table td:nth-child(6) {
+        display: block;
+        padding-top: 10px;
+    }
+    .finished-table td:nth-child(6)::before {
+        content: "Wiedergabe";
+        display: block;
+        margin-bottom: 6px;
+    }
+    .finished-table td:nth-child(7) {
+        display: block;
+        padding-top: 8px;
+        border-top: 1px solid var(--color-border-subtle);
+        margin-top: 4px;
+    }
+    .finished-table td:nth-child(7)::before { content: none; }
+
     audio {
         width: 100%;
     }
@@ -963,7 +1013,7 @@ a.button:hover {
 
 {% if recordings %}
 
-<table id="finishedTable">
+<table id="finishedTable" class="finished-table">
 <thead>
 <tr>
     <th>Zeitpunkt</th>