Change all pixel definitions to responsive 'rem'.

modules/bar/media/index.js

@@ -86,6 +86,16 @@ const Media = () => {
     }),
     isVisible: false,
     name: "media",
+    props: {
+      on_primary_click: (_, event) => {
+        const clickPos = event.get_root_coords();
+        const coords = [clickPos[1], clickPos[2]];
+
+        globalMousePos.value = coords;
+
+        App.toggleWindow("mediamenu");
+      },
+    },
   };
 };
 

modules/menus/DropdownMenu.js

@@ -71,7 +71,7 @@ export default ({
           moveBoxToCursor(self, minWidth, minHeight);
         },
         child: Widget.Box({
-          css: "padding: 1px;",
+          css: "padding: 1px; margin: -1px;",
           child: Widget.Revealer({
             revealChild: false,
             setup: (self) =>
@@ -79,7 +79,7 @@ export default ({
                 if (wname === name) self.reveal_child = visible;
               }),
             transition: "crossfade",
-            transitionDuration: 500,
+            transitionDuration: 350,
             child: Widget.Box({
               class_name: "dropdown-menu-container",
               can_focus: true,

modules/menus/main.js

@@ -3,5 +3,6 @@ import Verification from "./power/verification.js";
 import AudioMenu from "./audio/index.js";
 import NetworkMenu from "./network/index.js";
 import BluetoothMenu from "./bluetooth/index.js";
+import MediaMenu from "./media/index.js";
 
-export default [PowerMenu(), Verification(), AudioMenu(), NetworkMenu(), BluetoothMenu()];
+export default [PowerMenu(), Verification(), AudioMenu(), NetworkMenu(), BluetoothMenu(), MediaMenu()];

modules/menus/media/index.js

@@ -0,0 +1,31 @@
+const audio = await Service.import("mpris");
+import DropdownMenu from "../DropdownMenu.js";
+
+export default () => {
+  return DropdownMenu({
+    name: "mediamenu",
+    transition: "crossfade",
+    child: Widget.Box({
+      class_name: "menu-items",
+      child: Widget.Box({
+        vertical: true,
+        class_name: "menu-items-container",
+        children: [
+          Widget.Box({
+            class_name: "menu-dropdown-label-container",
+            hpack: "start",
+            children: [
+              Widget.Label({
+                class_name: "menu-dropdown-label media",
+                label: "Media",
+              }),
+            ],
+          }),
+          Widget.Separator({
+            class_name: "menu-separator",
+          }),
+        ],
+      }),
+    }),
+  });
+};

modules/menus/power/verification.js

@@ -15,7 +15,7 @@ export default () =>
           children: [
             Widget.Label({
               class_name: "title",
-              label: powermenu.bind("title"),
+              label: powermenu.bind("title").as(t => t.toUpperCase()),
             }),
             Widget.Label({
               class_name: "desc",