style(ui): make docked dialog look more like a Torn panel (full-width, accent border)
Previously the .tat-root.tat-anchored rule centered the dialog with a 720px max-width and no extra border, which made it look like a floating widget squeezed into the page rather than an embedded panel. The Torn gym page reference is a full-width panel with a thin dark border and a red top accent line. Changes: - margin: 0 0 12px 0 (full-width, no centering) - max-width: none (span the content area) - border-radius: 0 (Torn panels are flat, not rounded) - border: 1px solid #444 with border-top: 2px solid #c00 (red accent) - padding: 16px 20px (more breathing room, matching Torn panels) - .tat-root.tat-anchored .tat-header { cursor: default } (drag is disabled in anchored mode, so the move cursor was misleading) Free-floating mode is unchanged: the .tat-root base rule keeps its rounded shadowed look and .tat-header keeps cursor: move. Mirrored into the embedded TAT_STYLE in the bundle to keep the source and bundle in lockstep. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -10,10 +10,15 @@ const STYLE = `
|
|||||||
}
|
}
|
||||||
.tat-root.tat-anchored {
|
.tat-root.tat-anchored {
|
||||||
position: static;
|
position: static;
|
||||||
margin: 0 auto 12px;
|
margin: 0 0 12px 0;
|
||||||
max-width: 720px;
|
max-width: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
border-radius: 0;
|
||||||
|
border: 1px solid #444;
|
||||||
|
border-top: 2px solid #c00;
|
||||||
|
padding: 16px 20px;
|
||||||
}
|
}
|
||||||
|
.tat-root.tat-anchored .tat-header { cursor: default; }
|
||||||
.tat-header {
|
.tat-header {
|
||||||
display: flex; justify-content: space-between; align-items: center;
|
display: flex; justify-content: space-between; align-items: center;
|
||||||
padding-bottom: 8px; margin-bottom: 10px;
|
padding-bottom: 8px; margin-bottom: 10px;
|
||||||
|
|||||||
Reference in New Issue
Block a user