feat(presenting): CoreWeave blue and white highlight, same in both themes

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "presenter",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Pointer and fading highlights for live demos, plus toggleable UX enhancements for before/after clips.",
   "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAzSA8AU/9KdGceK/m1e9ke5Gi7B4HObymgejDydm3gAlJXrqcAys1TV5HsphZF/XG4ZNew/Ui2EzRGpJ3ryN9vP90EklOAgHIT4QLSL8zwTarwubELnoLHhqDFtxX/xe8fBb7zQsbXcZbcPHHlj0Fm2qkZgWHjrR1M+6/YzrxkFWOl0tgPibihEarn33hCCBvej/8AXDjF0JEV+farFxSc1f7jVNAgSe7O976GKlrXY6mYurJnXGv6G4EhPG1VGrsrVY/HcKHR3dotAcgp4qPIMHSNOfScxc75UWUKJarqCXKlX5NL9H3Vb84MmMwpOvo01SpDJZc/ZQRrxPOtMCRzQIDAQAB",
   "permissions": [

src/content/presenting.css

@@ -1,6 +1,5 @@
 /* The overlay */
 #pointer-surface {
-  filter: invert(100%) hue-rotate(180deg) contrast(80%) brightness(120%) !important;
   background-color: transparent;
   z-index: 99999999999999999999;
   position: fixed;
@@ -12,34 +11,27 @@
 #pointer-led {
   border: solid 1px transparent;
   border-radius: 12px;
-  background-color: #7777;
+  background-color: #a1a1a177; /* idle: translucent grey */
   position: absolute;
 }
 
-/* The box highlight style */
+/* The box highlight style: CoreWeave Primary Blue outer band, white inner line. One dark and
+   one light tone keep the ring visible on any background, so the same colours serve light and
+   dark themes alike. */
 .outer-box {
-  border-color: #222222 !important;
+  border-color: #0541e9 !important;
   z-index: 99999999999999999999;
   opacity: 1.0;
   position: fixed;
   transition: opacity 4s;
   pointer-events: none;
 }
 
-.night-mode .outer-box {
-  border-color: #ffffff !important;
-}
-
 .inner-box {
-  border-color: #FF93AC !important;
+  border-color: #ffffff !important;
   position: relative;
 }
 
-.night-mode .inner-box {
-  border-color: rgb(255, 61, 90) !important;
-}
-
-
 /* The Enhanced badge — top centre, clear of Loom's default bottom-left camera bubble */
 #presenter-enhanced-badge {
   position: fixed;
@@ -49,7 +41,7 @@
   z-index: 2147483647;
   padding: 4px 10px;
   border-radius: 999px;
-  background-color: rgba(34, 34, 34, 0.85);
+  background-color: #0541e9; /* CoreWeave Primary Blue, solid so the white text reads at 7:1 */
   color: #ffffff;
   font: 600 12px/1.4 system-ui, -apple-system, sans-serif;
   letter-spacing: 0.02em;

src/content/presenting.js

@@ -19,6 +19,10 @@ export function createPresenting(doc, win) {
   const thickness = 15;
   const surfaceSize = 48;
   const pointerSize = 12;
+  // CoreWeave Primary Blue #0541E9 at 60%: over a white page it reads rgb(105, 141, 242), the
+  // same wash the original red had under the old pointer filter.
+  const ARMED_COLOR = "rgba(5, 65, 233, 0.6)";
+  const IDLE_COLOR = "#a1a1a177";
 
   const createStackDiv = (posX, posY) => {
     const index = divStack.length;
@@ -60,14 +64,14 @@ export function createPresenting(doc, win) {
     if (event.key === "Shift") {
       event.preventDefault();
       pointerSurface.style.pointerEvents = "all";
-      pointerLED.style.backgroundColor = "rgb(255, 61, 90)";
+      pointerLED.style.backgroundColor = ARMED_COLOR;
     }
   };
 
   const onKeyUp = (event) => {
     if (event.key === "Shift") {
       event.preventDefault();
-      pointerLED.style.backgroundColor = "#7777";
+      pointerLED.style.backgroundColor = IDLE_COLOR;
       pointerSurface.style.pointerEvents = "none";
     }
   };