diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 5f5b6bc..3e5548f 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -416,6 +416,9 @@ "disable_high_contrast": { "message": "Disable High Contrast UI" }, + "dismiss": { + "message": "Dismiss" + }, "do_you_want_submit": { "message": "Do you want to submit your theme for others to use?" }, @@ -1595,9 +1598,15 @@ "show_past_due": { "message": "Show Past Due" }, + "show_updates_future": { + "message": "Mark announcement as unseen and show these in the future" + }, "showing_submissions": { "message": "Showing your latest 3 submissions" }, + "never_show_updates": { + "message": "Never show these ever again" + }, "sidebar_blur": { "message": "Sidebar blur" }, diff --git a/css/content.css b/css/content.css index 7aee149..b474144 100644 --- a/css/content.css +++ b/css/content.css @@ -556,13 +556,21 @@ .cr-gpa-preset:hover {color:var(--bctext-0,#2d3b45);} .cr-gpa-preset.active {background:var(--bcbackground-0,#fff);color:var(--bctext-0,#2d3b45);border-color:var(--bctext-2,#9aa3ab);} .cr-gpa-scale-head {display:grid;grid-template-columns:40px 1fr 1fr;gap:8px;padding:0 2px 4px;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--bctext-2,#9aa3ab);} -.cr-gpa-row {display:grid;grid-template-columns:40px 1fr 1fr;gap:8px;align-items:center;padding:2px 0;} +.cr-gpa-row {display:grid;grid-template-columns:40px 1fr 1fr;gap:8px;align-items:center;padding:2px 0 0;} .cr-gpa-row:hover {background:color-mix(in srgb, var(--bctext-0,#2d3b45) 4%, transparent);border-radius:8px;} .cr-gpa-chip {display:flex;align-items:center;justify-content:center;height:24px;border-radius:7px;background:color-mix(in srgb, var(--bctext-0,#2d3b45) 7%, transparent);font-weight:700;font-size:12px;} -.cr-gpa-field {display:flex;align-items:center;min-width:0;border:1px solid var(--bcborders,#c7cdd1);border-radius:8px;height:28px;background:transparent;overflow:hidden;} +.cr-gpa-field {display:flex;align-items:center;min-width:0;border:1px solid var(--bcborders,#c7cdd1);border-radius:8px;height:24px;background:transparent;overflow:hidden;} .cr-gpa-field:focus-within {border-color:var(--cr-gpa-accent,var(--ic-brand-primary,#0374b5));box-shadow:0 0 0 2px color-mix(in srgb, var(--cr-gpa-accent,var(--ic-brand-primary,#0374b5)) 22%, transparent);} -.cr-gpa-input {width:100%;min-width:0;border:none;background:transparent;color:inherit;height:100%;padding:0 4px 0 8px;font:inherit;font-size:13px;text-align:right;box-sizing:border-box;} -.cr-gpa-input:focus {outline:none;box-shadow:none;} +/* The wrapper draws the only border. Canvas' dark-mode sheet styles input[type=text] + with !important border/background/radius, which at (0,1,1) out-specifies a plain + .cr-gpa-input rule (0,1,0) and painted a second border inside the field — so we match + its attribute selector to win outright. */ +.cr-gpa-input {width:100%;min-width:0;appearance:none;-webkit-appearance:none;background:transparent;color:inherit;height:100%;padding:0;font:inherit;font-size:13px;text-align:right;box-sizing:border-box;} +input.cr-gpa-input[type="text"] {border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;appearance:none !important;-webkit-appearance:none !important;/* Canvas' own input[type=text] rules (padding ~11px, margins) out-specify a bare + .cr-gpa-input rule, so force them off here too or the box grows under the text. */ + padding:0 !important;margin:0 !important;min-height:0 !important;} +input.cr-gpa-input[type="text"]:focus, +input.cr-gpa-input[type="text"]:focus-visible {outline:none !important;box-shadow:none !important;border-color:transparent !important;} .cr-gpa-suffix {flex:none;padding:0 8px 0 2px;font-size:11px;color:var(--bctext-2,#9aa3ab);} .cr-gpa-note {color:var(--bctext-2,#9aa3ab);font-size:12px;line-height:1.5;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--bcborders,#c7cdd1);} @media (max-width:720px) { diff --git a/css/popup.css b/css/popup.css index 818521e..9fea6f7 100644 --- a/css/popup.css +++ b/css/popup.css @@ -131,6 +131,16 @@ h2 {margin-top: 20px;font-weight:600} .github-button {display: flex;align-items: center;justify-content: center;gap: 7px;padding: 9px 10px;border: none;border-radius: 8px;background: #30363d;color: #fff;font-family: inherit;font-size: 13px;font-weight: 600;text-decoration: none;transition: .15s background} .github-button:hover {background: #21262d;cursor: pointer} .github-button:active {filter: brightness(85%)} +/* Update announcement box: blue attention banner at the very top of the main popup */ +.update-box {margin-bottom:14px;padding:14px 16px 12px;border:1px solid #2f81f7;border-radius:12px;background:linear-gradient(165deg, rgba(47,129,247,.28), rgba(47,129,247,.10) 70%, rgba(47,129,247,.05));box-shadow:0 0 0 1px rgba(47,129,247,.18), 0 4px 16px rgba(47,129,247,.28);} +.update-box-title {margin:0 0 6px;font-size:15px;font-weight:700;color:#58a6ff;letter-spacing:.02em;} +.update-box-body {display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:#e2e2e2;font-size:13px;} +.update-box-body p {margin:0;flex:1;min-width:130px;} +.update-box-body .github-button {flex:none;padding:6px 12px;font-size:12px;} +.update-box-actions {display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;} +/* fit-content, one line each: no stretching across the box */ +.update-box-actions .customization-button {flex:0 0 auto;padding:4px 12px;white-space:nowrap;} +.update-box-actions .customization-button:hover {background:#2f81f73a;} .discord-button svg, .github-button svg {flex-shrink: 0} .social-toggle {text-align: center;font-size: 12px;color: #9a9a9a;cursor: pointer;user-select: none;transition: .15s color;text-decoration: underline;text-underline-offset: 3px;padding: 4px 10px;border-radius: 6px;} .social-toggle:hover {color: #e2e2e2;background: #ffffff0a;} diff --git a/html/popup.html b/html/popup.html index 6c037ee..c1e3d5a 100644 --- a/html/popup.html +++ b/html/popup.html @@ -22,6 +22,22 @@
+ +

Canvas Refined

@@ -1638,6 +1654,10 @@

Email is still available at sandlerguy5@gmail.com for private matters.

+
+

Announcements

+ +

Dev tools

diff --git a/js/popup.js b/js/popup.js index 340fbda..4dc72d0 100644 --- a/js/popup.js +++ b/js/popup.js @@ -2035,8 +2035,46 @@ function setupFeatureSearch(menu) { }); } +/* +Update announcement box + +The box at the top of the main popup shows while the current announcement is unseen. +- Dismiss: marks UPDATE_BOX_ID seen (hidden until a new announcement gets a new id). +- "Never show these ever again": opts out of every future announcement too. +- The Report issue tab button opts back in and marks the current one unseen again. +Demo title/body live in popup.html; bump UPDATE_BOX_ID when they change. +*/ +const UPDATE_BOX_ID = "release-1.2.0"; + +function initUpdateBox() { + const box = document.getElementById("update-box"); + if (!box) return; + const refresh = () => { + chrome.storage.sync.get(["update_box_enabled", "update_box_seen"], sync => { + const enabled = sync.update_box_enabled !== false; + const seen = sync.update_box_seen === UPDATE_BOX_ID; + box.style.display = enabled && !seen ? "" : "none"; + }); + }; + refresh(); + document.getElementById("update-box-dismiss")?.addEventListener("click", () => { + chrome.storage.sync.set({ "update_box_seen": UPDATE_BOX_ID }); + box.style.display = "none"; + }); + document.getElementById("update-box-never")?.addEventListener("click", () => { + chrome.storage.sync.set({ "update_box_enabled": false, "update_box_seen": UPDATE_BOX_ID }); + box.style.display = "none"; + }); + // Report issue tab: "Mark announcement as unseen and show these in the future". + document.getElementById("update-box-restore")?.addEventListener("click", () => { + chrome.storage.sync.set({ "update_box_enabled": true, "update_box_seen": "" }); + refresh(); + }); +} + async function setup() { await initLanguageSelector(); + initUpdateBox(); const menu = { switches: syncedSwitches, checkboxes: [