Move name UI to its own bar below status
This commit is contained in:
@@ -11,12 +11,12 @@
|
|||||||
<span class="status-dot"></span>
|
<span class="status-dot"></span>
|
||||||
<span id="phase-pill">Loading…</span>
|
<span id="phase-pill">Loading…</span>
|
||||||
<span class="counts" id="counts">—</span>
|
<span class="counts" id="counts">—</span>
|
||||||
<div class="name-inline">
|
</div>
|
||||||
<label for="name-input" class="label">Name</label>
|
<div class="name-bar">
|
||||||
<input id="name-input" maxlength="64" placeholder="Pick a name" />
|
<label for="name-input" class="label">Name</label>
|
||||||
<button id="save-name" class="ghost">Save</button>
|
<input id="name-input" maxlength="64" placeholder="Pick a name" />
|
||||||
<span class="hint warning hidden" id="name-warning">Name required</span>
|
<button id="save-name" class="ghost">Save</button>
|
||||||
</div>
|
<span class="hint warning hidden" id="name-warning">Name required</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main class="grid">
|
<main class="grid">
|
||||||
|
|||||||
@@ -33,17 +33,19 @@ body {
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.name-inline {
|
.name-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 10px;
|
||||||
}
|
padding: 10px 12px;
|
||||||
.name-inline input {
|
margin-top: 8px;
|
||||||
width: 160px;
|
background: rgba(15, 23, 42, 0.8);
|
||||||
}
|
border: 1px solid #1f2937;
|
||||||
.name-inline .hint {
|
border-radius: 10px;
|
||||||
margin: 0;
|
box-shadow: 0 6px 16px rgba(0,0,0,0.2);
|
||||||
}
|
}
|
||||||
|
.name-bar input { width: 180px; }
|
||||||
|
.name-bar .hint { margin: 0; }
|
||||||
|
|
||||||
.grid {
|
.grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|||||||
Reference in New Issue
Block a user