move mesh / render tools to top center

src/kiri/main.js

@@ -845,9 +845,11 @@ gapp.register("kiri.main", [], (root, exports) => {
         ['view-arrange','act-slice','act-preview','act-animate'].forEach(el => {
             $(el).classList.remove('selected')
         });
+        $('render-tools').classList.add('hide');
         switch (mode) {
             case VIEWS.ARRANGE:
                 $('view-arrange').classList.add('selected');
+                $('render-tools').classList.remove('hide');
                 api.function.clear_progress();
                 kiri.client.clear();
                 STACKS.clear();

web/kiri/index.css

@@ -255,6 +255,7 @@ th, tr, td, label {
 {
     background-color: #555 !important;
 }
+.dark #render-tools svg,
 .dark #lang-pop,
 .dark .pop-tics > div,
 .dark #top,
@@ -275,6 +276,7 @@ th, tr, td, label {
     background-color: #222;
     color: white;
 }
+.dark #render-tools svg,
 .dark .cam-pop-op {
     border-color: #555;
 }
@@ -325,7 +327,7 @@ th, tr, td, label {
 .dark .top-menu label {
     color: var(--dark-menu-text)
 }
-.dark .render-tools svg:hover {
+.dark #render-tools svg:hover {
     background-color: var(--blue-1);
     border-color: var(--blue-3);
 }
@@ -853,7 +855,6 @@ th, tr, td, label {
     left: -100%;
 }
 .slideshow #slide-show {
-    /* transition: left 0.15s ease-in-out; */
     position: absolute;
     top: 5px;
     left: 0;
@@ -985,7 +986,7 @@ th, tr, td, label {
 #float-tools {
     position: absolute;
     margin: 0;
-    top: 50px;
+    top: 90px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 16;
@@ -1067,30 +1068,27 @@ th, tr, td, label {
 #ft-mesh {
     min-width: 200px;
 }
-.render-tools {
+#render-tools {
-    display: grid;
+    pointer-events: all;
-    margin: 4px 0 0 0;
+    position: absolute;
-    /* gap: 3px; */
+    gap: 2px;
-    grid-template-columns: 1fr 1fr 1fr;
+    top: 3px;
+    left: 0;
+    right: 0;
+    align-items: center;
+    justify-content: center;
+    flex-direction: row;
+    z-index: 102;
 }
-.render-tools > span {
+#render-tools svg {
-    justify-self: center;
+    font-size: 20px;
-    width: 25px;
+    aspect-ratio: 1/1;
-    height: 25px;
+    background-color: #fff;
-    display: flex;
+    border: 1px solid var(--blue-4);
-    flex-shrink: 0;
-    flex-direction: column;
-}
-.render-tools > span > * {
-    padding: 0;
-    margin: 0;
-}
-.render-tools svg {
-    border: 1px solid transparent;
     border-radius: 3px;
-    padding: 3px;
+    padding: 8px;
 }
-.render-tools svg:hover {
+#render-tools svg:hover {
     border: 1px solid blue;
     background-color: var(--blue-4);
 }
@@ -1307,7 +1305,7 @@ th, tr, td, label {
 }
 #oplist div:hover .del {
     color: #888;
-    z-index: 10000;
+    z-index: 103;
 }
 #oplist div .del:hover {
     color: #000;

web/kiri/index.html

@@ -254,6 +254,17 @@
 
         <!-- main workspace -->
         <div id="mid-mid" class="grow">
+            <div id="render-tools">
+                <span id="tool-rotate"><i class="fas fa-sync-alt" title="rotate"></i></span>
+                <span id="tool-scale"><i class="fas fa-expand" title="scale"></i></span>
+                <span id="tool-mesh"><i class="fas fa-dice-d20" title="mesh tool"></i></span>
+                <span id="context-mirror" xlk="rc_mirr"><i class="fas fa-arrows-left-right-to-line" title="mirror"></i></span>
+                <span id="context-duplicate" xlk="rc_dupl"><i class="fas fa-copy" title="duplicate"></i></span>
+                <span id="context-layflat" xlk="rc_lafl"><i class="fas fa-arrows-down-to-line" title="lay flat"></i></span>
+                <span id="render-solid" class="j-center" title="view solid"><i class="fas fa-square"></i></span>
+                <span id="render-wire" class="j-center" title="view wireframe"><i class="fas fa-border-all"></i></span>
+                <span id="render-ghost" class="a-center" title="view transparent"><i class="fas fa-border-none"></i></span>
+            </div>
             <div id="layer-slider" class="f-col a-stretch">
                 <div id="layers" class="f-row j-center gap2"></div>
                 <div id="slider" class="f-row russo">
@@ -282,20 +293,6 @@
                     <div><label>Device</label><span id="mode-device"></span></div>
                     <div><label>Profile</label><span id="mode-profile"></span></div>
                 </div>
-                <div class="set2-group f-col">
-                    <div class="set-header"><a>mesh tools</a></div>
-                    <div class="render-tools">
-                        <span id="tool-rotate"><i class="fas fa-sync-alt" title="rotate"></i></span>
-                        <span id="tool-scale"><i class="fas fa-expand" title="scale"></i></span>
-                        <span id="tool-mesh"><i class="fas fa-dice-d20" title="mesh tool"></i></span>
-                        <span id="context-mirror" xlk="rc_mirr"><i class="fas fa-arrows-left-right-to-line" title="mirror"></i></span>
-                        <span id="context-duplicate" xlk="rc_dupl"><i class="fas fa-copy" title="duplicate"></i></span>
-                        <span id="context-layflat" xlk="rc_lafl"><i class="fas fa-arrows-down-to-line" title="lay flat"></i></span>
-                        <span id="render-solid" class="j-center" title="view solid"><i class="fas fa-square"></i></span>
-                        <span id="render-wire" class="j-center" title="view wireframe"><i class="fas fa-border-all"></i></span>
-                        <span id="render-ghost" class="a-center" title="view transparent"><i class="fas fa-border-none"></i></span>
-                    </div>
-                </div>
                 <div class="set2-group f-col">
                     <div class="set-header"><a>objects</a></div>
                     <div id="ws-widgets" class="f-col"></div>