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:
Chris Frankland-Wright 2025-08-12 16:19:53 +01:00
parent 22ac073922
commit cbacf14ca1
2 changed files with 43 additions and 16 deletions

View file

@ -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>

View file

@ -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;