list mode compatibility done

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

View File

@ -1217,6 +1217,39 @@ hr {
.PlannerHeader-styles__root svg {
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.
Selecting next item."): Canvas renders them as white cards with dark
text, unthemed in dark mode. Paint them with the theme background and

View File

@ -1104,16 +1104,22 @@ async function applyCustomBackground() {
padding: 8px 12px !important;
box-sizing: border-box !important;
}
/* Inner surfaces Canvas keeps opaque (course-grouping title strip,
"Show N completed item" facade, "Nothing Planned" filler, and the
Today/Add To Do header cluster that sits on the glass dashboard
header bar): flatten them so the glass behind shows through. */
#dashboard-planner .Grouping-styles__title,
/* Inner surfaces Canvas keeps opaque (the "Show N completed
item" facade, "Nothing Planned" filler, and the Today/Add To Do
header cluster that sits on the glass dashboard header bar):
flatten them so the glass behind shows through. The course-
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 .EmptyDays-styles__nothingPlanned,
#dashboard-planner-header .PlannerHeader-styles__root {
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
gray, so rows feel alive on the translucent day cards. */
#dashboard-planner .planner-item:hover,