mirror of
https://github.com/cjfranko/NTP-Timeturner.git
synced 2025-11-08 18:32:02 +00:00
Style: Improve Timeturner offset layout with compact inputs and side labels
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
This commit is contained in:
parent
22ac073922
commit
cbacf14ca1
2 changed files with 43 additions and 16 deletions
|
|
@ -72,26 +72,26 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
<label>Timeturner Offset</label>
|
<label>Timeturner Offset</label>
|
||||||
<div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start;">
|
<div class="offset-controls-container">
|
||||||
<div style="display: flex; flex-direction: column;">
|
<div class="offset-control">
|
||||||
<label for="offset-h">Hours</label>
|
<input type="number" id="offset-h" min="-99" max="99">
|
||||||
<input type="number" id="offset-h" style="width: 60px;">
|
<label for="offset-h">hr</label>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; flex-direction: column;">
|
<div class="offset-control">
|
||||||
<label for="offset-m">Minutes</label>
|
<input type="number" id="offset-m" min="-99" max="99">
|
||||||
<input type="number" id="offset-m" style="width: 60px;">
|
<label for="offset-m">min</label>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; flex-direction: column;">
|
<div class="offset-control">
|
||||||
<label for="offset-s">Seconds</label>
|
<input type="number" id="offset-s" min="-99" max="99">
|
||||||
<input type="number" id="offset-s" style="width: 60px;">
|
<label for="offset-s">sec</label>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; flex-direction: column;">
|
<div class="offset-control">
|
||||||
<label for="offset-f">Frames</label>
|
<input type="number" id="offset-f" min="-99" max="99">
|
||||||
<input type="number" id="offset-f" style="width: 60px;">
|
<label for="offset-f">fr</label>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; flex-direction: column;">
|
<div class="offset-control">
|
||||||
<label for="offset-ms">Milliseconds</label>
|
<input type="number" id="offset-ms">
|
||||||
<input type="number" id="offset-ms" style="width: 60px;">
|
<label for="offset-ms">ms</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -132,6 +132,33 @@ button:hover {
|
||||||
background-color: #166999;
|
background-color: #166999;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.offset-controls-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1.5rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.offset-control {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.offset-control input[type="number"] {
|
||||||
|
width: 40px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.offset-control label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
#offset-ms {
|
||||||
|
width: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
#sync-message {
|
#sync-message {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
color: #555;
|
color: #555;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue