CanadianBacon/CanvasRefined
1
0
Fork 0
mirror of https://github.com/GuySandler/CanvasRefined.git synced 2026-09-21 04:24:53 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

list mode compatibility done

Browse Source
This commit is contained in:
Guy Sandler 2026-08-30 17:21:49 -07:00
parent b859108ac8
commit d715feb410
2 changed files with 44 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
css/darkmodecss.js
View File

@ -1217,6 +1217,39 @@ hr {
.PlannerHeader-styles__root svg { .PlannerHeader-styles__root svg {
fill: var(--bctext-0) !important; fill: var(--bctext-0) !important;
} }
/* The "Today" button's label span carries Canvas's dark ink color from its
emotion class, which beats the inherited root color above — dark text on
the dark header bar. Force the whole button chain to the theme text color. */
.PlannerHeader-styles__root button,
.PlannerHeader-styles__root button span {
color: var(--bctext-0) !important;
}
/* Solid themed surfaces for the header buttons. Canvas leaves the icon
buttons (Add To Do / Show My Grades / opportunities) fully transparent
and paints the Today button an unthemed color — on the dark header bar
they need solid backgrounds to read as buttons. #planner-today-btn:hover
is listed separately because the ID selector on the base background rule
above would otherwise out-specify the class-only :hover rule. */
.PlannerHeader-styles__root button {
background: var(--bcbackground-1) !important;
border: 1px solid var(--bcborders) !important;
border-radius: 4px !important;
}
.PlannerHeader-styles__root button:hover,
#planner-today-btn:hover {
background: var(--bcbackground-2) !important;
}
/* Instructure's Button variant paints its inner content span white (and a
light gray on hover / white + inset shadow on active). That span covers
the themed button background painted above, so the "Today" button still
rendered as a white box. Flatten the content span in every state so the
button's own surface shows through. */
.PlannerHeader-styles__root button [class$="-baseButton__content"],
.PlannerHeader-styles__root button:hover [class$="-baseButton__content"],
.PlannerHeader-styles__root button:active [class$="-baseButton__content"] {
background: transparent !important;
box-shadow: none !important;
}
/* Flash alert toasts (.flashalert-message, e.g. "Nothing planned today. /* Flash alert toasts (.flashalert-message, e.g. "Nothing planned today.
Selecting next item."): Canvas renders them as white cards with dark Selecting next item."): Canvas renders them as white cards with dark
text, unthemed in dark mode. Paint them with the theme background and text, unthemed in dark mode. Paint them with the theme background and

16
js/content.js
View File

@ -1104,16 +1104,22 @@ async function applyCustomBackground() {
padding: 8px 12px !important; padding: 8px 12px !important;
box-sizing: border-box !important; box-sizing: border-box !important;
} }
/* Inner surfaces Canvas keeps opaque (course-grouping title strip, /* Inner surfaces Canvas keeps opaque (the "Show N completed
"Show N completed item" facade, "Nothing Planned" filler, and the item" facade, "Nothing Planned" filler, and the Today/Add To Do
Today/Add To Do header cluster that sits on the glass dashboard header cluster that sits on the glass dashboard header bar):
header bar): flatten them so the glass behind shows through. */ flatten them so the glass behind shows through. The course-
#dashboard-planner .Grouping-styles__title, grouping label instead gets a subtle chip behind the course name —
it sits over the course hero image, so without a backdrop the
text can be hard to read on busy images. */
#dashboard-planner .CompletedItemsFacade-styles__root, #dashboard-planner .CompletedItemsFacade-styles__root,
#dashboard-planner .EmptyDays-styles__nothingPlanned, #dashboard-planner .EmptyDays-styles__nothingPlanned,
#dashboard-planner-header .PlannerHeader-styles__root { #dashboard-planner-header .PlannerHeader-styles__root {
background: transparent !important; background: transparent !important;
} }
#dashboard-planner .Grouping-styles__title {
background: var(--bcbackground-1) !important;
border-radius: 6px !important;
}
/* Item-row hover: subtle tint on the glass instead of Canvas's flat /* Item-row hover: subtle tint on the glass instead of Canvas's flat
gray, so rows feel alive on the translucent day cards. */ gray, so rows feel alive on the translucent day cards. */
#dashboard-planner .planner-item:hover, #dashboard-planner .planner-item:hover,