feat: tüit logo in header, clean transcript item layout with grouped action buttons

This commit is contained in:
2026-04-01 14:37:03 +02:00
parent 2ab6e7d73b
commit b74147967b
4 changed files with 133 additions and 9 deletions
+10 -7
View File
@@ -33,9 +33,9 @@
padding: 16px 24px;
border-bottom: 1px solid var(--border);
}
.logo-dot { width: 12px; height: 12px; background: var(--red); border-radius: 50%; }
header h1 { font-size: 1.1rem; font-weight: 600; letter-spacing: 0.04em; }
header h1 span { color: var(--red); }
.header-logo { height: 28px; width: auto; display: block; }
.header-divider { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }
.header-appname { font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.status-badge {
font-size: 0.75rem;
@@ -112,11 +112,13 @@
.transcript-item {
background: var(--surface); border: 1px solid var(--border);
border-radius: 6px; padding: 10px 14px;
display: flex; align-items: center; justify-content: space-between;
display: flex; align-items: center; gap: 10px;
font-size: 0.82rem; cursor: pointer; transition: border-color 0.1s;
}
.transcript-item:hover { border-color: var(--red); }
.transcript-item .meta { color: var(--muted); font-size: 0.75rem; }
.transcript-item .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transcript-item .meta { color: var(--muted); font-size: 0.75rem; flex-shrink: 0; }
.item-actions { display: flex; gap: 2px; flex-shrink: 0; }
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal.hidden { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); }
@@ -163,8 +165,9 @@
</head>
<body>
<header>
<div class="logo-dot"></div>
<h1>tüit <span>Transkriptor</span></h1>
<img src="/logo.svg" class="header-logo" alt="tüit">
<div class="header-divider"></div>
<span class="header-appname">Transkriptor</span>
<div class="header-right">
<span class="status-badge" id="header-status">Bereit</span>
<span class="user-chip" id="user-chip"></span>