diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 6e74676..89955a2 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -261,6 +261,6 @@
"message": "Center Cards"
},
"hide_new_canvas": {
- "message": "Hide New Canvas"
+ "message": "Hide New Dashboard"
}
}
\ No newline at end of file
diff --git a/css/content.css b/css/content.css
index 82db7e2..60e35a6 100644
--- a/css/content.css
+++ b/css/content.css
@@ -63,6 +63,10 @@
opacity: .95;
}
.canvasrefined-custom-btn {background: #f5f5f5; border: 1px solid #c7cdd1; border-radius:6px; padding: 2px 8px;}
+/* Better sidebar buttons sit on the --bcsidebar surface and use --bcsidebar-text
+ for labels/icons, so drop the light button chrome and use a subtle hover tint. */
+.better-sidebar-btn {background: transparent !important; border-color: transparent !important;}
+.better-sidebar-btn:hover {background: color-mix(in srgb, var(--bcsidebar-text) 14%, transparent) !important;}
.canvasrefined-viewmore-btn {display: block;margin:0 auto;margin-top: 8px;}
.canvasrefined-course-percent, .canvasrefined-course-credit {border: 1px solid #ccc; color: var(--ic-brand-font-color-dark)}
diff --git a/html/popup.html b/html/popup.html
index 7eefdf9..9883a90 100644
--- a/html/popup.html
+++ b/html/popup.html
@@ -351,7 +351,7 @@
Hide New Canvas
+ Hide New Dashboard
@@ -1084,7 +1084,6 @@
- 5.11.2
diff --git a/js/content.js b/js/content.js
index a6554e3..a94cc76 100644
--- a/js/content.js
+++ b/js/content.js
@@ -2497,7 +2497,7 @@ async function setupBetterSidebar(mode = getSidebarLayoutMode()) {
}
let sidebarList = makeElement("div", sidebarParent, { id: "better-sidebar-container",
- style: `display:flex;flex-direction:column;width:50px;justify-content:center;align-items:center;box-sizing:border-box;position:relative;background-color:var(--bcbackground-0);height:100vh;position:sticky;top:0;left:0;`
+ style: `display:flex;flex-direction:column;width:50px;justify-content:center;align-items:center;box-sizing:border-box;position:relative;background-color:var(--bcsidebar);height:100vh;position:sticky;top:0;left:0;`
}, true);
let sidebarContent = makeElement("div", sidebarList, {
style: "display:flex;flex-direction:column;gap:20px;width:100%;flex:1;justify-content:flex-start;align-items:center;margin:40px;"
@@ -2512,7 +2512,7 @@ async function setupBetterSidebar(mode = getSidebarLayoutMode()) {
-
+
`
@@ -2538,7 +2538,7 @@ async function setupBetterSidebar(mode = getSidebarLayoutMode()) {
}
function createSidebarButton(text, url, parent, icon) {
let button = makeElement("a", parent, {
- style: "width:40%;height:var(--bc-sidebar-btn-height,30px);cursor:pointer;text-align:center;text-decoration:none;display:inline-flex;justify-content:center;align-items:center;gap:var(--bc-sidebar-btn-gap,8px);color:var(--bctext-0) !important;font-weight:bold;position:relative;",
+ style: "width:40%;height:var(--bc-sidebar-btn-height,30px);cursor:pointer;text-align:center;text-decoration:none;display:inline-flex;justify-content:center;align-items:center;gap:var(--bc-sidebar-btn-gap,8px);color:var(--bcsidebar-text) !important;font-weight:bold;position:relative;",
className: "canvasrefined-custom-btn better-sidebar-btn",
href: url,
});
@@ -2566,13 +2566,13 @@ function addSidebarButtonBadge(button, count) {
function populateSidebarFromNav(sidebarContent) {
const excludeIds = ["global_nav_help_link", "global_nav_history_link"];
const customIcons = {
- "global_nav_profile_link": ``,
- "global_nav_dashboard_link": ``,
- "global_nav_conversations_link": ``,
- "global_nav_calendar_link": ``,
- "global_nav_courses_link": ``,
- "global_nav_groups_link": ``,
- "globalNavExternalTool-69": ``,
+ "global_nav_profile_link": ``,
+ "global_nav_dashboard_link": ``,
+ "global_nav_conversations_link": ``,
+ "global_nav_calendar_link": ``,
+ "global_nav_courses_link": ``,
+ "global_nav_groups_link": ``,
+ "globalNavExternalTool-69": ``,
};
const navMenu = document.getElementById("menu");
@@ -2614,25 +2614,25 @@ function populateSidebarFromNav(sidebarContent) {
// Check if svg already has a style attribute
if (icon.includes('style="')) {
// Append to existing style
- icon = icon.replace(/style="([^"]*)"/, `style="$1 width:20px;height:20px;flex-shrink:0;fill:white;stroke:white;"`);
+ icon = icon.replace(/style="([^"]*)"/, `style="$1 width:20px;height:20px;flex-shrink:0;fill:var(--bcsidebar-text);stroke:var(--bcsidebar-text);"`);
} else {
// Add new style attribute
- icon = icon.replace(" {
- css += " --bc" + key + ": " + options.dark_preset[key] + ";\n";
- });
- }
- css += "}\n\n";
- css += DARKMODE_CSS;
- css += options.device_dark === true ? "\n}" : "";
- return css;
+ // Always-on light-mode defaults so var(--bc*) resolves in light mode too.
+ let css = ":root{\n";
+ Object.keys(BC_LIGHT_DEFAULTS).forEach((key) => {
+ css += " --bc" + key + ": " + BC_LIGHT_DEFAULTS[key] + ";\n";
+ });
+ css += "}\n\n";
+
+ const darkOn = options.dark_mode === true || options.device_dark === true;
+ if (!darkOn) return css;
+
+ let darkBlock = ":root{\n";
+ if (options.dark_preset) {
+ Object.keys(options.dark_preset).forEach((key) => {
+ darkBlock += " --bc" + key + ": " + options.dark_preset[key] + ";\n";
+ });
+ }
+ darkBlock += "}\n\n";
+ darkBlock += DARKMODE_CSS;
+
+ if (options.device_dark === true) {
+ css += "@media (prefers-color-scheme: dark) {\n" + darkBlock + "\n}";
+ } else {
+ css += darkBlock;
+ }
+ return css;
}
let darkStyleInserted = false;
function toggleDarkMode() {
const css = generateDarkModeCSS();
- if ((options.dark_mode === true || options.device_dark === true) && !darkStyleInserted) {
+ const darkOn = options.dark_mode === true || options.device_dark === true;
+ if (!darkStyleInserted) {
let style = document.createElement('style');
style.textContent = css;
document.documentElement.append(style);
style.id = 'darkcss';
- style.className = "canvasrefined-darkmode-enabled";
+ style.className = darkOn ? "canvasrefined-darkmode-enabled" : "";
darkStyleInserted = true;
- } else if (darkStyleInserted) {
+ } else {
let style = document.querySelector("#darkcss");
- style.textContent = options.dark_mode === true || options.device_dark ? css : "";
- style.className = options.dark_mode === true || options.device_dark ? "canvasrefined-darkmode-enabled" : "";
+ style.textContent = css;
+ style.className = darkOn ? "canvasrefined-darkmode-enabled" : "";
}
runiframeChecker();
}