refactor

film.py

@@ -41,7 +41,7 @@ button.go:hover{background:#ef1b1b}
 #bug .txt{max-width:360px;font:500 12px var(--sans);color:#d3def2;line-height:1.25}
 /* body */
 #main{flex:1;min-height:0;display:flex}
-#stage{flex:1;min-width:0;position:relative;background:#04101f}
+#stage{flex:1;min-width:0;display:flex;background:#04101f}
 svg#field{width:100%;height:100%;display:block;touch-action:none;user-select:none}
 #viewbar{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap;z-index:3}
 #viewbar .grp{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:rgba(5,15,34,.86);backdrop-filter:blur(3px)}
@@ -100,7 +100,8 @@ select{background:var(--navy3);color:var(--ink);border:1px solid var(--line);bor
 .rt svg{width:34px;height:34px;display:block}
 .rt .cap{padding:0 14px 8px;color:var(--mute);font-size:11.5px}
 svg#field.drawing{cursor:crosshair}
-#tools{position:absolute;left:10px;top:92px;z-index:4;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px;width:62px;border:1px solid var(--line);border-radius:12px;background:rgba(5,15,34,.92);backdrop-filter:blur(4px);box-shadow:0 8px 24px rgba(0,0,0,.5);max-height:calc(100% - 108px);overflow-y:auto}
+#tools{flex:none;width:68px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 5px;background:var(--navy2);border-right:1px solid var(--line);overflow-y:auto}
+#fw{flex:1;min-width:0;position:relative}
 #tools button{width:50px;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 0 4px;border-radius:8px;font:700 10.5px var(--cond);letter-spacing:.8px;text-transform:uppercase}
 #tools button .ic{font-size:18px;line-height:20px;font-family:var(--sans)}
 #tools button.on{background:var(--blue)}#tools button:hover:not(.on):not(:disabled){background:#17376a}
@@ -120,15 +121,6 @@ svg#field.drawing{cursor:crosshair}
 <div id="bug"></div>
 <div id="main">
  <div id="stage">
-  <div id="viewbar">
-   <div class="grp" id="gmode"></div>
-   <div class="grp" id="gcam"><button data-c="fixed">Coach</button><button data-c="follow">Follow</button><button data-c="full">Full</button></div>
-   <div class="grp"><button id="bghost">Other hash</button></div>
-  </div>
-  <div id="legend"></div>
-  <svg id="field" xmlns="http://www.w3.org/2000/svg"></svg>
-  <div id="chy"></div>
-  <div id="layers"></div><div id="toast"></div>
   <div id="tools">
    <span class="lab">Players</span>
    <button data-t="move" id="tmove" title="Move (V): scrub to a moment, drag a player to where he should be, or drag the cyan points"><span class="ic">&#10021;</span>Move</button>
@@ -145,6 +137,17 @@ svg#field.drawing{cursor:crosshair}
    <button id="bredo" title="Redo (Ctrl+Shift+Z)"><span class="ic">&#8631;</span>Redo</button>
    <button id="bclr" title="Clear all ink (right-click one mark to delete it)"><span class="ic">&#10005;</span>Clear</button>
   </div>
+  <div id="fw">
+  <div id="viewbar">
+   <div class="grp" id="gmode"></div>
+   <div class="grp" id="gcam"><button data-c="fixed">Coach</button><button data-c="follow">Follow</button><button data-c="full">Full</button></div>
+   <div class="grp"><button id="bghost">Other hash</button></div>
+  </div>
+  <div id="legend"></div>
+  <svg id="field" xmlns="http://www.w3.org/2000/svg"></svg>
+  <div id="chy"></div>
+  <div id="layers"></div><div id="toast"></div>
+  </div>
  </div>
  <div id="side"></div>
 </div>