editor.py aktualisiert

editor.py

@@ -1357,83 +1357,43 @@ th { color:var(--color-text-muted); font-weight:normal; }
 @media(max-width:900px) { .filter-bar { grid-template-columns:1fr 1fr; } .filter-bar .search { grid-column:auto; } }
 @media (max-width:800px) {
   body { padding:12px; }
+  .finished-table, .finished-table tbody, .finished-table tr, .finished-table td { display:block; }
+  .finished-table { background:transparent; border:0; overflow:visible; }
+  .finished-table thead { display:none; }
+  .finished-table tbody { display:grid; gap:18px; }
+  .finished-table tr { display:grid; grid-template-columns:1fr auto; grid-template-areas:"event date" "title title" "speaker speaker" "duration duration" "audio audio" "actions actions"; gap:0 12px; margin:0; padding:20px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:20px; box-shadow:0 8px 24px var(--color-shadow); }
+  .finished-table td { border:0; padding:0; min-width:0; }
+  .finished-table td:nth-child(4) { grid-area:event; justify-self:start; align-self:start; padding:6px 10px; color:var(--color-primary-hover); background:var(--color-selection); border-radius:999px; font-size:12px; font-weight:700; line-height:1.2; }
+  .finished-table td:nth-child(1) { grid-area:date; justify-self:end; align-self:center; color:var(--color-text-muted); font-size:12px; white-space:nowrap; }
+  .finished-table td:nth-child(3) { grid-area:title; margin-top:16px; color:var(--color-text); font-size:20px; font-weight:750; line-height:1.25; }
+  .finished-table td:nth-child(2) { grid-area:speaker; margin-top:6px; color:var(--color-text-muted); font-size:14px; font-weight:600; }
+  .finished-table td:nth-child(5) { grid-area:duration; margin-top:16px; color:var(--color-text-muted); font-size:13px; }
+  .finished-table td:nth-child(5)::before { content:"⏱ "; font-size:14px; }
+  .finished-table td:nth-child(6) { grid-area:audio; margin-top:4px; }
+  .finished-table td:nth-child(7) { grid-area:actions; margin-top:14px; padding-top:14px; border-top:1px solid var(--color-border-subtle); }
+  .finished-table audio { width:100%; height:42px; margin:0; }
+  .finished-table a.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 16px; margin:0; border-radius:12px; }
 
-  .recordings-table, .recordings-table tbody, .recordings-table tr, .recordings-table td,
+  .recordings-table, .recordings-table tbody, .recordings-table tr, .recordings-table td { display:block; }
-  .finished-table, .finished-table tbody, .finished-table tr, .finished-table td {
+  .recordings-table { background:transparent; border:0; overflow:visible; }
-    display:block;
+  .recordings-table thead { display:none; }
-  }
+  .recordings-table tbody { display:grid; gap:14px; }
-
+  .recordings-table tr { padding:16px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:16px; box-shadow:0 6px 18px var(--color-shadow); }
-  .recordings-table, .finished-table {
+  .recordings-table td { display:grid; grid-template-columns:72px minmax(0,1fr); gap:10px; align-items:baseline; border:0; padding:6px 0; min-width:0; }
-    background:transparent;
+  .recordings-table td::before { color:var(--color-text-muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
-  }
-
-  .recordings-table thead, .finished-table thead { display:none; }
-
-  .recordings-table tbody, .finished-table tbody {
-    display:grid;
-    gap:12px;
-  }
-
-  .recordings-table tr, .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);
-  }
-
-  .recordings-table td, .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;
-  }
-
-  .recordings-table td::before, .finished-table td::before {
-    color:var(--color-text-muted);
-    font-size:11px;
-    font-weight:600;
-    text-transform:uppercase;
-    letter-spacing:.04em;
-  }
-
   .recordings-table td:nth-child(1)::before { content:"Dateiname"; }
   .recordings-table td:nth-child(2)::before { content:"Größe"; }
   .recordings-table td:nth-child(3)::before { content:"Dauer"; }
-  .recordings-table td:nth-child(4) {
+  .recordings-table td:nth-child(4) { display:block; margin-top:8px; padding-top:12px; border-top:1px solid var(--color-border-subtle); }
-    display:block;
-    padding-top:9px;
-    border-top:1px solid var(--color-border-subtle);
-    margin-top:4px;
-  }
   .recordings-table td:nth-child(4)::before { content:none; }
+  .recordings-table audio { width:100%; }
+  .recordings-table .actions { display:flex; gap:8px; flex-wrap:wrap; }
 
-  .finished-table td:nth-child(1)::before { content:"Zeitpunkt"; }
+  .live-panel { display:block; }
-  .finished-table td:nth-child(2)::before { content:"Redner"; }
+  .live-item + .live-item { border-left:0; border-top:1px solid var(--color-recording-border); padding-left:0; padding-top:16px; margin-top:16px; }
-  .finished-table td:nth-child(3)::before { content:"Beschreibung"; }
+  a.button { margin-left:0; margin-right:8px; }
-  .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:9px;
-    border-top:1px solid var(--color-border-subtle);
-    margin-top:4px;
-  }
-  .finished-table td:nth-child(6)::before { content:none; }
-
-  .recordings-table .actions, .finished-table .actions {
-    display:flex;
-    gap:7px;
-    flex-wrap:wrap;
 }
 
-  .recordings-table .button, .finished-table .button {
-    margin:0;
-  }
-}
 </style>
 </head>
 <body>