From 39964b9877ea4eed08ad65cca9f2cbcdcac2cffa Mon Sep 17 00:00:00 2001
From: Guy Sandler <guy@sandler.co.il>
Date: Mon, 21 Sep 2026 16:36:17 -0700
Subject: [PATCH] more custom bg and dark mode patches

---
 css/content.css    |  8 +++++++
 css/darkmodecss.js | 11 ++++++++++
 js/content.js      | 53 ++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 72 insertions(+)

diff --git a/css/content.css b/css/content.css
index 94dfaf2..7abc507 100644
--- a/css/content.css
+++ b/css/content.css
@@ -406,3 +406,11 @@
     text-decoration: line-through !important;
     text-decoration-thickness: 2.5px !important;
 }
+
+/* InstUI View (emotion hash css-fkmnqn-view) ships a bottom margin that
+   leaves a stray gap below the discussion/announcement header card.
+   Hashed classes can shift between Canvas releases; an unmatched selector
+   here is simply inert. */
+.css-fkmnqn-view {
+    margin-bottom: 0 !important;
+}
diff --git a/css/darkmodecss.js b/css/darkmodecss.js
index fd6c07f..c044e34 100644
--- a/css/darkmodecss.js
+++ b/css/darkmodecss.js
@@ -172,6 +172,7 @@ span[style*='background: #fff'],
 .fOyUs_dUgE,
 .fOyUs_bvKN,
 .css-1fwux0x-view--block,
+.css-1n94jrf-view,
 .css-1v8v5q1-optionItem,
 #comments-tray,
 .css-d76rpr-view--inlineBlock[data-testid='tool-bar'],
@@ -1274,6 +1275,16 @@ hr {
     background: transparent !important;
     box-shadow: none !important;
 }
+/* InstUI Button whose inner content span ships a light background and its
+   own border, which reads as a bright chip on the dark theme. Paint it with
+   the themed button surface, drop the border entirely, and force the theme
+   text color: Canvas sets its own dark ink color on the content span, which
+   left labels/icons dark-on-dark inside the dark chip. */
+.css-1ta5ds2-baseButton__content {
+    background: var(--bcbackground-1) !important;
+    border: none !important;
+    color: var(--bctext-0) !important;
+}
 /* Dashboard list-view trays ("Add To Do" / "My Grades" opened from the
    header buttons): Instructure UI renders Tray panels as body-level
    portals — body > span > span[...-tray] — with a hardcoded white
diff --git a/js/content.js b/js/content.js
index 469a397..84fd1d3 100644
--- a/js/content.js
+++ b/js/content.js
@@ -1411,6 +1411,59 @@ async function applyCustomBackground() {
             -webkit-backdrop-filter: blur(${bgBlur}px) !important;
             border-radius: 5px !important;
         }
+        /* InstUI flex View panel (emotion hash css-fiozi7-view--flex-flex)
+           ships a hardcoded opaque surface that sits untinted on top of the
+           background image. Give it the same glass treatment as the other
+           content panels: theme tint at the bg_opacity slider value plus the
+           bg_blur backdrop. */
+        .css-fiozi7-view--flex-flex {
+            background-color: color-mix(in srgb, var(--bcbackground-0), transparent ${bgTransparent}%) !important;
+            backdrop-filter: blur(${bgBlur}px) !important;
+            -webkit-backdrop-filter: blur(${bgBlur}px) !important;
+            border-radius: 5px !important;
+        }
+        /* Inner InstUI Views of that panel (author row, title row, message
+           container...) keep their own opaque backgrounds, which read as
+           dark/light slabs covering the glass. Flatten them so the panel
+           reads as one glass surface — with exceptions:
+           - avatar circles (their backdrop is part of the picture),
+           - the whole role-pill subtree (Canvas pairs its white uppercase
+             text with a chip painted on the list items; flattening it left
+             white text on glass),
+           - base buttons: flattened to bare glass buttons instead. The
+             button root, its content span and its icon wrapper all go
+             transparent so the white label/icon read on the glass — this
+             also overrides the dark-mode baseButton__content chip, which
+             would otherwise double-stack inside the flattened panel. */
+        .css-fiozi7-view--flex-flex [class*="-view"]:not([class*="-avatar"]):not([data-testid="pill-container"]):not([data-testid="pill-container"] *):not([class*="-baseButton"]) {
+            background: none !important;
+        }
+        .css-fiozi7-view--flex-flex [class*="-baseButton"],
+        .css-fiozi7-view--flex-flex [class*="-baseButton"] [class*="-baseButton__content"],
+        .css-fiozi7-view--flex-flex [class*="-baseButton"] [class*="-baseButton__iconWrapper"] {
+            background: none !important;
+            border: none !important;
+            box-shadow: none !important;
+        }
+        /* De-dupe stacked surfaces: a nested copy of the panel (the header
+           renders one View inside another) must not add a second backdrop
+           blur over the outer glass. */
+        .css-fiozi7-view--flex-flex .css-fiozi7-view--flex-flex {
+            backdrop-filter: none !important;
+            -webkit-backdrop-filter: none !important;
+        }
+        /* The discussion threads toolbar (emotion hash css-1n94jrf-view,
+           themed opaque in dark mode) sits directly under the glass header
+           panel; with a custom background the two read as a double opaque
+           surface. Give the toolbar the same glass treatment so the area is
+           one continuous surface. */
+        .css-1n94jrf-view {
+            background-color: color-mix(in srgb, var(--bcbackground-0), transparent ${bgTransparent}%) !important;
+            backdrop-filter: blur(${bgBlur}px) !important;
+            -webkit-backdrop-filter: blur(${bgBlur}px) !important;
+            border-radius: 5px !important;
+            padding: 5px !important;
+        }
         #assignments {
             padding-top: 0px !important;
             padding-bottom: 0px !important;