CanadianBacon/CanvasRefined
1
0
Fork 0
mirror of https://github.com/GuySandler/CanvasRefined.git synced 2026-11-03 13:57:17 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

more slight touch ups

Browse Source
This commit is contained in:
Guy Sandler 2026-10-31 12:34:57 -07:00
parent 8428d86f54
commit fec2d99c1b
5 changed files with 89 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
_locales/en/messages.json
View File

@ -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"
},

16
css/content.css
View File

@ -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) {

10
css/popup.css
View File

@ -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;}

20
html/popup.html
View File

@ -22,6 +22,22 @@
<div id="gradientbg"></div>
<div id="alert"></div>
<div class="main">
<!-- Update announcement: shown until dismissed; "Never show" opts out of all
future ones (opt back in from the Report issue tab). Demo content for now. -->
<div class="update-box" id="update-box" style="display:none;">
<h3 class="update-box-title">New update!</h3>
<div class="update-box-body">
<p>This is the new update alert system!<br>Go read the patch notes and please leave a review or join the discord server!</p>
<a class="github-button" href="https://github.com/GuySandler/CanvasRefined/releases/tag/Release1.2.0" target="_blank" rel="noopener noreferrer" data-i18n-title="view_on_github" title="View on GitHub">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12z"/></svg>
<span>GitHub</span>
</a>
</div>
<div class="update-box-actions">
<button type="button" class="customization-button" id="update-box-dismiss" data-i18n="dismiss">Dismiss</button>
<button type="button" class="customization-button" id="update-box-never" data-i18n="never_show_updates">Never show these ever again</button>
</div>
</div>
<div class="header">
<img id="bclogo" src="../icon/icon-128.png">
<h1 data-i18n="Canvas_Refined">Canvas Refined</h1>
@ -1638,6 +1654,10 @@
</div>
<p class="sub-text" style="margin:0;font-size:11px;opacity:0.85;">Email is still available at <strong>sandlerguy5@gmail.com</strong> for private matters.</p>
</div>
<div class="option-container">
<h3 class="header-small" data-i18n="announcements_header">Announcements</h3>
<button type="button" class="customization-button" id="update-box-restore" data-i18n="show_updates_future">Mark announcement as unseen and show these in the future</button>
</div>
<div class="option-container">
<h3 class="header-small" data-i18n="dev_tools">Dev tools</h3>
<div class="option" id="hide_personal_details">

38
js/popup.js
View File

@ -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: [