mm/chess-pressure
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: playback buttons full-width with double-triangle ff/rw icons

Browse Source 
- btn-prev/next now use |◄ / ►| (single triangle + bar, was btn-start/end)
- btn-start/end now use |◄◄ / ►►| (double triangle + bar)
- playback-buttons row fills full width with flex:1 on all buttons
- outer two buttons (start/end) slightly smaller via flex:0.65 + 13px SVG
This commit is contained in:
Michael Pilosov 2026-06-25 19:08:00 +00:00
parent 1c04782db5
commit 4ab86fa6a0
2 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/chess_pressure/static/index.html
View File

@ -26,11 +26,11 @@
<div class="playback">
<input type="range" id="slider" min="0" max="0" value="0">
<div class="playback-buttons">
<button id="btn-start" title="Start"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="2" width="2" height="12"/><polygon points="14,2 6,8 14,14"/></svg></button>
<button id="btn-prev" title="Back"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><polygon points="13,2 3,8 13,14"/></svg></button>
<button id="btn-start" title="Start"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="2" width="2" height="12"/><polygon points="9,2 4,8 9,14"/><polygon points="15,2 10,8 15,14"/></svg></button>
<button id="btn-prev" title="Back"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="2" width="2" height="12"/><polygon points="14,2 6,8 14,14"/></svg></button>
<button id="btn-play" title="Play/Pause"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><polygon points="3,2 13,8 3,14"/></svg></button>
<button id="btn-next" title="Forward"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><polygon points="3,2 13,8 3,14"/></svg></button>
<button id="btn-end" title="End"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><polygon points="2,2 10,8 2,14"/><rect x="13" y="2" width="2" height="12"/></svg></button>
<button id="btn-next" title="Forward"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><polygon points="2,2 10,8 2,14"/><rect x="13" y="2" width="2" height="12"/></svg></button>
<button id="btn-end" title="End"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><polygon points="1,2 6,8 1,14"/><polygon points="7,2 12,8 7,14"/><rect x="13" y="2" width="2" height="12"/></svg></button>
</div>
<div class="pressure-mode">
<div class="pmode-toggle">

13
src/chess_pressure/static/style.css
View File

@ -127,21 +127,28 @@ main {
.playback-buttons {
display: flex;
gap: 0.3rem;
justify-content: center;
width: 100%;
}
.playback-buttons button {
flex: 1;
background: var(--bg2);
border: 1px solid var(--border);
color: var(--fg);
padding: 0.4rem 0.8rem;
padding: 0.4rem 0.5rem;
border-radius: 4px;
cursor: pointer;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.playback-buttons button:hover { background: var(--move-active); }
#btn-start, #btn-end {
flex: 0.65;
}
#btn-start svg, #btn-end svg {
width: 13px;
height: 13px;
}
.pressure-mode {
display: flex;