Optimize images

web/css/main.css

@@ -31,20 +31,10 @@ body {
     margin-right: -50%;
     transform: translate(-50%, -50%);
 
-    background-image: url('/static/img/ui/bg.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-}
-
-#ui-emulator-bg {
-    width: 100%;
-    height: 100%;
-    display: block;
-    position: absolute;
-
-    background-image: url('/static/img/ui/bg.png');
+    background-image: url('/static/img/ui/bg.jpg');
     background-repeat: no-repeat;
     background-size: 100% 100%;
+    border-radius: 22px;
 }
 
 #help-overlay {

web/css/ui.css

@@ -139,8 +139,6 @@
     z-index: 1;
     position: relative;
 
-    opacity: .95;
-
     cursor: default;
 }
 

web/js/gui/gui.js

@@ -43,7 +43,7 @@ const gui = (() => {
         return el;
     }
 
-    const panel = (root, title = '', cc = '', content, buttons = []) => {
+    const panel = (root, title = '', cc = '', content, buttons = [], onToggle) => {
         const state = {
             shown: false,
             loading: false,
@@ -99,6 +99,9 @@ const gui = (() => {
 
         function toggle(show) {
             state.shown = show;
+            if (onToggle) {
+                onToggle(state.shown, _root)
+            }
             if (state.shown) {
                 gui.show(_root);
             } else {

web/js/workerManager.js

@@ -7,13 +7,19 @@ const workerManager = (() => {
         _class = 'server-list',
         trigger = document.getElementById('w'),
         panel = gui.panel(document.getElementById(id), 'WORKERS', 'server-list', null, [
-            {
-                caption: '⟳',
-                cl: ['bold'],
-                handler: utils.debounce(handleReload, 1000),
-                title: 'Reload server data',
-            }
-        ]),
+                {
+                    caption: '⟳',
+                    cl: ['bold'],
+                    handler: utils.debounce(handleReload, 1000),
+                    title: 'Reload server data',
+                }
+            ],
+            // hack not transparent jpeg corners :_;
+            ((br) => (state, el) => {
+                state ? el.parentElement.style.borderRadius = '0px' :
+                    br ? el.parentElement.style.borderRadius = br :
+                        br = window.getComputedStyle(el.parentElement).borderRadius
+            })()),
         index = ((i = 1) => ({v: () => i++, r: () => i = 1}))(),
         // caption -- the field caption
         // renderer -- an arbitrary DOM output for the field