feat: card headers, music art/seek, clearer build card

1 files changed, 80 insertions, 12 deletions

diff --git a/static/deck.css b/static/deck.css
index d6b62dc..5c4af84 100644
--- a/static/deck.css
+++ b/static/deck.css
@@ -22,34 +22,102 @@ body {
 
 .grid-stack { min-height: 100dvh; }
 
-.panel {
+.panel { min-height: 0; min-width: 0; }
+
+.grid-stack-item-content.panel {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  overflow: hidden;
+  border-radius: 16px;
   background: var(--udt-surface0);
   border: 1px solid var(--udt-surface1);
-  border-radius: 16px;
-  padding: 16px;
-  min-height: 0;
-  min-width: 0;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
 }
 
-.grid-stack-item-content.panel { position: absolute; }
-
-.panel-head { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; }
+.panel-head {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background: var(--udt-mantle);
+  border-bottom: 1px solid var(--udt-surface1);
+}
+.panel-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--udt-accent);
+  flex: none;
+}
 .panel .panel-head h2 {
-  margin: 0;
   flex: 1;
+  margin: 0;
   font-size: 13px;
-  font-weight: 500;
-  color: var(--udt-subtext0);
+  font-weight: 600;
+  letter-spacing: .02em;
+  color: var(--udt-text);
 }
 .panel-drag {
   font: inherit;
   color: var(--udt-overlay0);
   background: transparent;
   border: 0;
-  padding: 2px 8px;
+  padding: 2px 6px;
+  border-radius: 6px;
   cursor: grab;
   touch-action: none;
 }
+.panel-drag:hover { color: var(--udt-subtext0); background: var(--udt-surface1); }
+.panel-body { flex: 1; min-height: 0; overflow: auto; padding: 14px; }
+
+.section-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: .08em;
+  color: var(--udt-overlay0);
+  margin: 12px 0 6px;
+}
+.section-label:first-child { margin-top: 0; }
+
+.music .top { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
+.music .art {
+  width: 64px;
+  height: 64px;
+  border-radius: 10px;
+  object-fit: cover;
+  background: var(--udt-surface1);
+  flex: none;
+}
+.music .art.empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--udt-overlay0);
+  font-size: 22px;
+}
+.music .meta { min-width: 0; }
+.music .title {
+  font-size: 15px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.music .artist, .music .album { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.music .album { font-size: 12px; color: var(--udt-overlay0); }
+.music .seek { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
+.music .seek input { flex: 1; accent-color: var(--udt-accent); }
+.music .time { font-size: 12px; color: var(--udt-subtext0); white-space: nowrap; }
+.music .controls { display: flex; flex-wrap: wrap; gap: 8px; }
+
+.sbb .sbb-summary { margin-bottom: 8px; font-size: 12px; }
+.sbb .row.job .kind { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.grid-stack-item .ui-resizable-se { width: 22px; height: 22px; right: 2px; bottom: 2px; opacity: .45; }
+.grid-stack-item:hover .ui-resizable-se { opacity: 1; }
 
 .num {
   font-family: "Inconsolata Nerd Font Mono", ui-monospace, monospace;