Center map

apps/volume.js

@@ -1,6 +1,6 @@
 const VolumeMap = {
     isOn: false,
-    size: 200,
+    size: 320,
     positions: new Map(),
     toggle() {
         VolumeMap.isOn = !VolumeMap.isOn
@@ -38,8 +38,6 @@ const VolumeMap = {
             'position': 'fixed',
             'height': VolumeMap.size + 'px',
             'width': VolumeMap.size + 'px',
-            'right': '0',
-            'top': '0',
         }
         return m('svg', {onclick: VolumeMap.moveNotify, style},
             m('style', 'text { pointer-events: none }'),

pico.js

@@ -99,13 +99,16 @@ const Shadow = {
     view({attrs}) {
         const style = {
             zIndex: 999,
-            backgroundColor: 'rgba(0, 0, 0, 0.8)',
+            backgroundColor: 'rgba(0, 0, 0, 0.2)',
             visibility: attrs.app.isOn ? 'unset' : 'hidden',
             position: 'fixed',
-            height: '100vh',
-            width: '100vw',
             right: 0,
             top: 0,
+            height: '100vh',
+            width: '100vw',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
         }
         const onclick = ({target: {classList}}) => {
             classList.contains('shadow') && signal({kind: attrs.key})