CanadianBacon/CanvasRefined
1
0
Fork 0
mirror of https://github.com/GuySandler/CanvasRefined.git synced 2026-11-03 13:57:17 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

more custom bg and dark mode patches

Browse Source
This commit is contained in:
Guy Sandler 2026-09-21 16:36:17 -07:00
parent a6fbe396ec
commit 39964b9877
3 changed files with 72 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
css/content.css
View File

@ -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;
}

11
css/darkmodecss.js
View File

@ -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

53
js/content.js
View File

@ -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;