From 718f7869d5ccb321c6e05fb00a0e709d5f7f1d4e Mon Sep 17 00:00:00 2001 From: Guy Sandler Date: Sat, 24 Oct 2026 15:06:59 -0700 Subject: [PATCH] ligth changes to widgets --- _locales/en/messages.json | 6 ++++++ css/content.css | 20 +++++++++++++------- css/popup.css | 4 ++-- html/popup.html | 10 ++++++++++ js/background.js | 2 ++ js/content.js | 25 +++++++++++++++++++++++++ js/popup.js | 23 +++++++++++++++++++---- 7 files changed, 77 insertions(+), 13 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 1fa2764..33cf628 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1913,6 +1913,12 @@ "quick_links": { "message": "Quick Links" }, + "quick_links_font_size": { + "message": "Link label size" + }, + "quick_links_icon_size": { + "message": "Icon size" + }, "quick_links_hint_edit": { "message": "Click a link to edit it." }, diff --git a/css/content.css b/css/content.css index 2959ead..84c8ce1 100644 --- a/css/content.css +++ b/css/content.css @@ -566,8 +566,12 @@ .canvasrefined-widget-slot .canvasrefined-widget-card {width:100%;margin:0;height:100%;} .cr-widget-head {display:flex;align-items:center;justify-content:space-between;padding:12px 14px 10px;border-bottom:1px solid var(--bcborders,#c7cdd1);} .cr-widget-title {font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bctext-2,#9aa3ab);} -.cr-widget-btn {flex:1;border:none;border-radius:8px;padding:9px 12px;font:inherit;font-weight:600;font-size:13px;cursor:pointer;background:var(--ic-brand-primary,#0374b5);color:#fff;} -.cr-widget-btn:hover {filter:brightness(1.07);} +/* Primary action uses the dark palette's "Background Other" surface + (--bcbackground-2) instead of Canvas' brand color, which stays light-theme + blue against the always-dark widget card. */ +.cr-widget-btn {flex:1;border:1px solid var(--bcborders,#c7cdd1);border-radius:8px;padding:9px 12px;font:inherit;font-weight:600;font-size:13px;cursor:pointer;background:var(--bcbackground-2,#d9d9d9);color:var(--bctext-0,#2d3b45);} +.cr-widget-btn:hover {background:color-mix(in srgb, var(--bcbackground-2,#d9d9d9) 80%, var(--bctext-0,#2d3b45));} +.cr-widget-btn:focus-visible {outline:2px solid color-mix(in srgb, var(--bclinks,#0374b5) 70%, transparent);outline-offset:2px;} .cr-widget-btn-ghost {background:transparent;color:var(--bctext-0,#2d3b45);border:1px solid var(--bcborders,#c7cdd1);} .cr-time-box {position:relative;margin:14px 14px 0;border-radius:12px;background:color-mix(in srgb, var(--bctext-0,#2d3b45) 6%, transparent);border:1px solid var(--bcborders,#c7cdd1);overflow:hidden;} /* the time rectangle is the progress bar, tinted with the theme link color */ @@ -649,19 +653,21 @@ .cr-ql-tile:active {transform:scale(.97);} .cr-ql-tile:focus-visible {outline:2px solid var(--bclinks,#0374b5);outline-offset:2px;} .cr-ql-tile.is-editing {cursor:pointer;} -.cr-ql-icon {display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border-radius:10px;overflow:hidden;background:color-mix(in srgb, var(--bclinks,#0374b5) 12%, transparent);color:var(--bclinks,#0374b5);} -.cr-ql-icon svg {width:21px;height:21px;display:block;} +/* --cr-ql-icon-size is set by the content script (Quick Links settings); the + glyphs scale with the box so preset and custom icons stay proportionate. */ +.cr-ql-icon {display:flex;align-items:center;justify-content:center;width:var(--cr-ql-icon-size,36px);height:var(--cr-ql-icon-size,36px);flex:none;border-radius:10px;overflow:hidden;background:color-mix(in srgb, var(--bclinks,#0374b5) 12%, transparent);color:var(--bclinks,#0374b5);} +.cr-ql-icon svg {width:calc(var(--cr-ql-icon-size,36px) * .5833);height:calc(var(--cr-ql-icon-size,36px) * .5833);display:block;} .cr-ql-icon img {width:100%;height:100%;object-fit:contain;display:block;} -.cr-ql-icon-letter {display:none;font-size:16px;font-weight:800;line-height:1;color:var(--bclinks,#0374b5);} +.cr-ql-icon-letter {display:none;font-size:calc(var(--cr-ql-icon-size,36px) * .4444);font-weight:800;line-height:1;color:var(--bclinks,#0374b5);} .cr-ql-tile.cr-ql-img-broken .cr-ql-icon img, .cr-ql-tile.cr-ql-img-broken .cr-ql-icon svg {display:none;} .cr-ql-tile.cr-ql-img-broken .cr-ql-icon-letter {display:block;} -.cr-ql-label {display:-webkit-box;max-width:100%;overflow:hidden;font-size:12px;font-weight:600;line-height:1.25;text-align:center;word-break:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical;} +.cr-ql-label {display:-webkit-box;max-width:100%;overflow:hidden;font-size:var(--cr-ql-label-size,12px);font-weight:600;line-height:1.25;text-align:center;word-break:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical;} .cr-ql-tile-delete {position:absolute;top:4px;right:4px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:6px;background:transparent;color:var(--bctext-2,#9aa3ab);font-size:14px;line-height:1;cursor:pointer;} .cr-ql-tile-delete:hover {background:color-mix(in srgb, #e5484d 18%, transparent);color:#e5484d !important;} .cr-ql-add {border-style:dashed;color:var(--bctext-2,#9aa3ab);} .cr-ql-add:hover {color:var(--bclinks,#0374b5) !important;} -.cr-ql-add-plus {display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:color-mix(in srgb, var(--bctext-0,#2d3b45) 7%, transparent);font-size:22px;font-weight:400;line-height:1;} +.cr-ql-add-plus {display:flex;align-items:center;justify-content:center;width:var(--cr-ql-icon-size,36px);height:var(--cr-ql-icon-size,36px);border-radius:10px;background:color-mix(in srgb, var(--bctext-0,#2d3b45) 7%, transparent);font-size:calc(var(--cr-ql-icon-size,36px) * .6111);font-weight:400;line-height:1;} .cr-ql-empty {display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px 6px;text-align:center;color:var(--bctext-2,#9aa3ab);font-size:12px;} .cr-ql-empty .cr-widget-btn {flex:none;} .cr-ql-hint {margin:0 0 8px;color:var(--bctext-2,#9aa3ab);font-size:11px;} diff --git a/css/popup.css b/css/popup.css index 34ce7cb..0f26ae6 100644 --- a/css/popup.css +++ b/css/popup.css @@ -22,8 +22,8 @@ h2 {font-size:24px;} .header {font-size: 16px;display: flex;align-items: center;gap:12px; margin-bottom:14px;} .header h1 { font-weight: 600; font-size:24px; } #bclogo {height: 30px;width:30px;filter: none} -#numAssignmentsSlider, #numTodoItemsSlider, #sidebarScaleSlider, #customBackgroundScale, #bgOpacitySlider, #sidebarOpacitySlider, #bgBlurSlider, #sidebarBlurSlider, #cardOpacitySlider, #cardBlurSlider {display: block;margin-top: 14px;width: 100%;-webkit-appearance: none; appearance: none;background:var(--inputbg);outline: none;height:6px;border-radius:20px;} -#numAssignmentsSlider::-webkit-slider-thumb, #numTodoItemsSlider::-webkit-slider-thumb, #sidebarScaleSlider::-webkit-slider-thumb, #customBackgroundScale::-webkit-slider-thumb, #bgOpacitySlider::-webkit-slider-thumb, #sidebarOpacitySlider::-webkit-slider-thumb, #bgBlurSlider::-webkit-slider-thumb, #sidebarBlurSlider::-webkit-slider-thumb, #cardOpacitySlider::-webkit-slider-thumb, #cardBlurSlider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none;height: 18px; width: 18px;background: #727272;cursor: pointer;border-radius:30px;} +#numAssignmentsSlider, #numTodoItemsSlider, #sidebarScaleSlider, #customBackgroundScale, #bgOpacitySlider, #sidebarOpacitySlider, #bgBlurSlider, #sidebarBlurSlider, #cardOpacitySlider, #cardBlurSlider, #quickLinksFontSizeSlider, #quickLinksIconSizeSlider {display: block;margin-top: 14px;width: 100%;-webkit-appearance: none; appearance: none;background:var(--inputbg);outline: none;height:6px;border-radius:20px;} +#numAssignmentsSlider::-webkit-slider-thumb, #numTodoItemsSlider::-webkit-slider-thumb, #sidebarScaleSlider::-webkit-slider-thumb, #customBackgroundScale::-webkit-slider-thumb, #bgOpacitySlider::-webkit-slider-thumb, #sidebarOpacitySlider::-webkit-slider-thumb, #bgBlurSlider::-webkit-slider-thumb, #sidebarBlurSlider::-webkit-slider-thumb, #cardOpacitySlider::-webkit-slider-thumb, #cardBlurSlider::-webkit-slider-thumb, #quickLinksFontSizeSlider::-webkit-slider-thumb, #quickLinksIconSizeSlider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none;height: 18px; width: 18px;background: #727272;cursor: pointer;border-radius:30px;} .option-container {font-size: 14px; margin-top: 8px;background: var(--containerbg);padding: 18px;border-radius: 14px;box-sizing:border-box} .options .option-container {padding: 14px;} .options .option-container > .option + .option {margin-top: 10px;} diff --git a/html/popup.html b/html/popup.html index ba1a87e..9938498 100644 --- a/html/popup.html +++ b/html/popup.html @@ -1376,6 +1376,16 @@ px +
+ + 12px +
+ +
+ + 36px +
+ diff --git a/js/background.js b/js/background.js index a719eb1..a04385b 100644 --- a/js/background.js +++ b/js/background.js @@ -63,6 +63,8 @@ chrome.runtime.onInstalled.addListener(function () { "breathing_height": 0, "daily_quotes_height": 0, "quick_links_height": 0, + "quick_links_font_size": 12, + "quick_links_icon_size": 36, "better_todo": true, "todo_hr24": false, "todo_separate_scrollbar": false, diff --git a/js/content.js b/js/content.js index 7a3a4dd..e5a13e8 100644 --- a/js/content.js +++ b/js/content.js @@ -1110,6 +1110,10 @@ function applyOptionsChanges(changes) { case "quick_links_height": loadQuickLinksWidget(); break; + case "quick_links_font_size": + case "quick_links_icon_size": + document.querySelectorAll(".canvasrefined-quick-links").forEach(quickLinksApplySizes); + break; case "quick_links_items": updateQuickLinksWidget(); break; @@ -8563,6 +8567,26 @@ function quickLinksItems() { return raw.map(quickLinksSanitizeItem).filter(Boolean); } +// Per-tile sizes (px): stored per setting, exposed as CSS vars on the widget so +// the grid, edit mode and the "add" tile all follow one value. Unset keeps the +// stylesheet default. +const QUICK_LINKS_SIZE_SETTINGS = [ + { key: "quick_links_font_size", cssVar: "--cr-ql-label-size", min: 8, max: 24 }, + { key: "quick_links_icon_size", cssVar: "--cr-ql-icon-size", min: 20, max: 64 }, +]; + +function quickLinksApplySizes(el) { + if (!el) return; + QUICK_LINKS_SIZE_SETTINGS.forEach(({ key, cssVar, min, max }) => { + const n = parseInt(options[key], 10); + if (!Number.isFinite(n) || n <= 0) { + el.style.removeProperty(cssVar); + return; + } + el.style.setProperty(cssVar, Math.min(max, Math.max(min, n)) + "px"); + }); +} + function quickLinksIconMarkup(item) { const image = item.icon === "image" ? quickLinksSafeUrl(item.image, true) : ""; if (image) return ``; @@ -8644,6 +8668,7 @@ function quickLinksEditorHtml(item) { function renderQuickLinks(el) { if (!el) return; + quickLinksApplySizes(el); const body = el.querySelector(".cr-ql-body"); const toggle = el.querySelector(".cr-ql-edit-toggle"); if (!body) return; diff --git a/js/popup.js b/js/popup.js index 62f0203..64bb9ec 100644 --- a/js/popup.js +++ b/js/popup.js @@ -37,6 +37,8 @@ const syncedSubOptions = [ "breathing_height", "daily_quotes_height", "quick_links_height", + "quick_links_font_size", + "quick_links_icon_size", "auto_dark", "auto_dark_start", "auto_dark_end", @@ -280,6 +282,10 @@ const defaultOptions = { "breathing_height": 0, "daily_quotes_height": 0, "quick_links_height": 0, + // Quick Links tile label font size in px. + "quick_links_font_size": 12, + // Quick Links tile icon box size in px. + "quick_links_icon_size": 36, "better_todo": true, "better_sidebar": false, "sidebar_scale": 100, @@ -507,12 +513,13 @@ function setupSidebarScaleSlider(initial) { }); } -// Slider 0..max; `unit` is appended to the displayed value ("%" / "px"). -function setupRangeSlider(key, sliderId, valueId, resetId, defaultValue, max, unit, initial) { +// Slider min..max; `unit` is appended to the displayed value ("%" / "px"). +function setupRangeSlider(key, sliderId, valueId, resetId, defaultValue, max, unit, initial, min) { const el = document.querySelector("#" + sliderId); const out = document.querySelector("#" + valueId); if (!el || !out) return; - const value = Math.max(0, Math.min(max, parseInt(initial))); + const floor = Number.isFinite(parseInt(min, 10)) ? parseInt(min, 10) : 0; + const value = Math.max(floor, Math.min(max, parseInt(initial))); if (isNaN(value)) return; el.value = value; out.textContent = `${value}${unit}`; @@ -523,7 +530,7 @@ function setupRangeSlider(key, sliderId, valueId, resetId, defaultValue, max, un const reset = document.querySelector("#" + resetId); if (reset) { reset.addEventListener("click", () => { - const v = Math.max(0, Math.min(max, parseInt(defaultValue))); + const v = Math.max(floor, Math.min(max, parseInt(defaultValue))); el.value = v; out.textContent = `${v}${unit}`; chrome.storage.sync.set({ [key]: v }); @@ -1992,6 +1999,14 @@ async function setup() { identifier: "quick_links_height", setup: (initial) => setupWidgetHeightInput("quick_links_height", initial), }, + { + identifier: "quick_links_font_size", + setup: (initial) => setupRangeSlider("quick_links_font_size", "quickLinksFontSizeSlider", "quickLinksFontSizeValue", null, 12, 24, "px", initial, 8), + }, + { + identifier: "quick_links_icon_size", + setup: (initial) => setupRangeSlider("quick_links_icon_size", "quickLinksIconSizeSlider", "quickLinksIconSizeValue", null, 36, 64, "px", initial, 20), + }, { identifier: "focus_timer_preset_1", setup: (initial) => setupWidgetTimeInput("focus_timer_preset_1", initial),