nico/kobopatch-webui
1
0
Fork 0
Code Activity

Functional first prototype
All checks were successful
Build & Test WASM / build-and-test (push) Successful in 2m42s

Browse Source
This commit is contained in:
Nico Verbruggen
2026-03-15 22:50:10 +01:00
parent 1af67eea4e
commit da74445f14
8 changed files with 248 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
kobopatch-wasm/build.sh
View File

@@ -16,8 +16,15 @@ GOOS=js GOARCH=wasm go build -o kobopatch.wasm .
echo "WASM binary size: $(du -h kobopatch.wasm | cut -f1)" echo "WASM binary size: $(du -h kobopatch.wasm | cut -f1)"
# Cache-busting timestamp
TS=$(date +%s)
echo "Copying artifacts to $PUBLIC_DIR..." echo "Copying artifacts to $PUBLIC_DIR..."
cp kobopatch.wasm "$PUBLIC_DIR/kobopatch.wasm" cp kobopatch.wasm "$PUBLIC_DIR/kobopatch.wasm"
cp wasm_exec.js "$PUBLIC_DIR/wasm_exec.js" cp wasm_exec.js "$PUBLIC_DIR/wasm_exec.js"
# Update the cache-busting timestamp in the worker
sed -i "s|kobopatch\.wasm?ts=[0-9]*|kobopatch.wasm?ts=$TS|g" "$PUBLIC_DIR/patch-worker.js"
echo "Build timestamp: $TS"
echo "Done." echo "Done."

26
kobopatch-wasm/main.go
View File

@@ -5,7 +5,6 @@ import (
"archive/zip" "archive/zip"
"bytes" "bytes"
"compress/gzip" "compress/gzip"
"crypto/sha1"
"errors" "errors"
"fmt" "fmt"
"io" "io"
@@ -132,7 +131,6 @@ func patchFirmware(configYAML []byte, firmwareZip []byte, patchFileContents map[
} }
// Parse config. // Parse config.
logf("Parsing config...")
var config Config var config Config
dec := yaml.NewDecoder(bytes.NewReader(configYAML)) dec := yaml.NewDecoder(bytes.NewReader(configYAML))
if err := dec.Decode(&config); err != nil { if err := dec.Decode(&config); err != nil {
@@ -143,8 +141,6 @@ func patchFirmware(configYAML []byte, firmwareZip []byte, patchFileContents map[
return nil, errors.New("invalid config: version and patches are required") return nil, errors.New("invalid config: version and patches are required")
} }
logf("Firmware version: %s", config.Version)
// Open the firmware zip from memory. // Open the firmware zip from memory.
logf("Opening firmware zip (%d MB)...", len(firmwareZip)/1024/1024) logf("Opening firmware zip (%d MB)...", len(firmwareZip)/1024/1024)
zipReader, err := zip.NewReader(bytes.NewReader(firmwareZip), int64(len(firmwareZip))) zipReader, err := zip.NewReader(bytes.NewReader(firmwareZip), int64(len(firmwareZip)))
@@ -182,7 +178,6 @@ func patchFirmware(configYAML []byte, firmwareZip []byte, patchFileContents map[
outGZ := gzip.NewWriter(&outBuf) outGZ := gzip.NewWriter(&outBuf)
outTar := tar.NewWriter(outGZ) outTar := tar.NewWriter(outGZ)
var outTarExpectedSize int64 var outTarExpectedSize int64
sums := map[string]string{}
// Iterate over firmware tar entries and apply patches. // Iterate over firmware tar entries and apply patches.
for { for {
@@ -210,7 +205,7 @@ func patchFirmware(configYAML []byte, firmwareZip []byte, patchFileContents map[
return nil, fmt.Errorf("could not patch '%s': not a regular file", h.Name) return nil, fmt.Errorf("could not patch '%s': not a regular file", h.Name)
} }
logf("Patching %s", h.Name) logf("\nPatching %s", h.Name)
entryBytes, err := io.ReadAll(tarReader) entryBytes, err := io.ReadAll(tarReader)
if err != nil { if err != nil {
@@ -220,7 +215,6 @@ func patchFirmware(configYAML []byte, firmwareZip []byte, patchFileContents map[
pt := patchlib.NewPatcher(entryBytes) pt := patchlib.NewPatcher(entryBytes)
for _, pfn := range matchingPatchFiles { for _, pfn := range matchingPatchFiles {
logf(" Loading patch file: %s", pfn)
patchData, ok := patchFileContents[pfn] patchData, ok := patchFileContents[pfn]
if !ok { if !ok {
@@ -240,14 +234,15 @@ func patchFirmware(configYAML []byte, firmwareZip []byte, patchFileContents map[
// Apply overrides. // Apply overrides.
if overrides, ok := config.Overrides[pfn]; ok { if overrides, ok := config.Overrides[pfn]; ok {
logf(" Applying overrides")
for name, enabled := range overrides { for name, enabled := range overrides {
if err := ps.SetEnabled(name, enabled); err != nil { if err := ps.SetEnabled(name, enabled); err != nil {
return nil, fmt.Errorf("could not set override '%s' in '%s': %w", name, pfn, err) return nil, fmt.Errorf("could not set override '%s' in '%s': %w", name, pfn, err)
} }
if enabled { if enabled {
logf(" ENABLE %s", name) logf(" ENABLE `%s`", name)
} else { } else {
logf(" DISABLE %s", name) logf(" DISABLE `%s`", name)
} }
} }
} }
@@ -256,9 +251,8 @@ func patchFirmware(configYAML []byte, firmwareZip []byte, patchFileContents map[
return nil, fmt.Errorf("invalid patch file '%s': %w", pfn, err) return nil, fmt.Errorf("invalid patch file '%s': %w", pfn, err)
} }
patchfile.Log = func(format string, a ...interface{}) { // patchfile.Log is debug-level output (goes to log file in native kobopatch)
logf(" "+format, a...) patchfile.Log = func(format string, a ...interface{}) {}
}
if err := ps.ApplyTo(pt); err != nil { if err := ps.ApplyTo(pt); err != nil {
return nil, fmt.Errorf("error applying patches from '%s': %w", pfn, err) return nil, fmt.Errorf("error applying patches from '%s': %w", pfn, err)
@@ -289,7 +283,6 @@ func patchFirmware(configYAML []byte, firmwareZip []byte, patchFileContents map[
return nil, fmt.Errorf("could not write patched '%s': %w", h.Name, err) return nil, fmt.Errorf("could not write patched '%s': %w", h.Name, err)
} }
sums[h.Name] = fmt.Sprintf("%x", sha1.Sum(patchedBytes))
} }
// Finalize the output tar.gz. // Finalize the output tar.gz.
@@ -301,7 +294,7 @@ func patchFirmware(configYAML []byte, firmwareZip []byte, patchFileContents map[
} }
// Verify consistency. // Verify consistency.
logf("Verifying output KoboRoot.tgz...") logf("\nChecking patched KoboRoot.tgz for consistency")
verifyReader, err := gzip.NewReader(bytes.NewReader(outBuf.Bytes())) verifyReader, err := gzip.NewReader(bytes.NewReader(outBuf.Bytes()))
if err != nil { if err != nil {
return nil, fmt.Errorf("could not verify output: %w", err) return nil, fmt.Errorf("could not verify output: %w", err)
@@ -322,11 +315,6 @@ func patchFirmware(configYAML []byte, firmwareZip []byte, patchFileContents map[
return nil, fmt.Errorf("output size mismatch: expected %d, got %d", outTarExpectedSize, verifySum) return nil, fmt.Errorf("output size mismatch: expected %d, got %d", outTarExpectedSize, verifySum)
} }
logf("Output verified. Size: %d bytes", outBuf.Len())
for f, s := range sums {
logf(" sha1 %s %s", s, f)
}
return &patchResult{ return &patchResult{
tgzBytes: outBuf.Bytes(), tgzBytes: outBuf.Bytes(),
log: logBuf.String(), log: logBuf.String(),

27
src/public/app.js
View File

@@ -41,6 +41,19 @@
const writeSuccess = document.getElementById('write-success'); const writeSuccess = document.getElementById('write-success');
const firmwareVersionLabel = document.getElementById('firmware-version-label'); const firmwareVersionLabel = document.getElementById('firmware-version-label');
// const firmwareVersionLabelManual = document.getElementById('firmware-version-label-manual'); // fallback // const firmwareVersionLabelManual = document.getElementById('firmware-version-label-manual'); // fallback
const patchCountHint = document.getElementById('patch-count-hint');
function updatePatchCount() {
const count = patchUI.getEnabledCount();
btnBuild.disabled = count === 0;
patchCountHint.textContent = count === 0
? 'Select at least one patch to continue.'
: count === 1
? '1 patch selected.'
: count + ' patches selected.';
}
patchUI.onChange = updatePatchCount;
const allSteps = [stepConnect, stepManual, stepDevice, stepPatches, stepFirmware, stepBuilding, stepDone, stepError]; const allSteps = [stepConnect, stepManual, stepDevice, stepPatches, stepFirmware, stepBuilding, stepDone, stepError];
@@ -112,6 +125,7 @@
await patchUI.loadFromURL('patches/' + match.filename); await patchUI.loadFromURL('patches/' + match.filename);
patchUI.render(patchContainer); patchUI.render(patchContainer);
updatePatchCount();
return true; return true;
} }
@@ -190,6 +204,7 @@
await patchUI.loadFromURL('patches/' + match.filename); await patchUI.loadFromURL('patches/' + match.filename);
patchUI.render(patchContainer); patchUI.render(patchContainer);
updatePatchCount();
configureFirmwareStep(info.firmware, info.serialPrefix); configureFirmwareStep(info.firmware, info.serialPrefix);
showSteps(stepDevice, stepPatches, stepFirmware); showSteps(stepDevice, stepPatches, stepFirmware);
@@ -278,19 +293,17 @@
const firmwareBytes = await downloadFirmware(firmwareURL); const firmwareBytes = await downloadFirmware(firmwareURL);
appendLog('Firmware downloaded: ' + (firmwareBytes.length / 1024 / 1024).toFixed(1) + ' MB'); appendLog('Firmware downloaded: ' + (firmwareBytes.length / 1024 / 1024).toFixed(1) + ' MB');
buildProgress.textContent = 'Loading WASM patcher...';
await runner.load();
appendLog('WASM module loaded');
buildProgress.textContent = 'Applying patches...'; buildProgress.textContent = 'Applying patches...';
const configYAML = patchUI.generateConfig(); const configYAML = patchUI.generateConfig();
const patchFiles = patchUI.getPatchFileBytes(); const patchFiles = patchUI.getPatchFileBytes();
const result = await runner.patchFirmware(configYAML, firmwareBytes, patchFiles, (msg) => { const result = await runner.patchFirmware(configYAML, firmwareBytes, patchFiles, (msg) => {
appendLog(msg); appendLog(msg);
// Update headline with the latest high-level step // Update headline with high-level steps
if (msg.startsWith('Patching ') || msg.startsWith('Extracting ') || msg.startsWith('Verifying ')) { const trimmed = msg.trimStart();
buildProgress.textContent = msg; if (trimmed.startsWith('Patching ') || trimmed.startsWith('Checking ') ||
trimmed.startsWith('Loading WASM') || trimmed.startsWith('WASM module')) {
buildProgress.textContent = trimmed;
} }
}); });

11
src/public/index.html
View File

@@ -3,14 +3,16 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kobopatch Web UI</title> <title>KoboPatch Web UI</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/jszip@3/dist/jszip.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jszip@3/dist/jszip.min.js"></script>
</head> </head>
<body> <body>
<main> <main>
<h1>Kobopatch Web UI</h1> <header class="hero">
<h1>KoboPatch <span class="hero-accent">Web UI</span></h1>
<p class="subtitle">Custom patches for your Kobo e-reader</p> <p class="subtitle">Custom patches for your Kobo e-reader</p>
</header>
<!-- Step 1: Connect device (automatic, Chromium only) --> <!-- Step 1: Connect device (automatic, Chromium only) -->
<section id="step-connect" class="step" hidden> <section id="step-connect" class="step" hidden>
@@ -90,7 +92,8 @@
</p> </p>
<input type="file" id="firmware-input" accept=".zip" hidden> <input type="file" id="firmware-input" accept=".zip" hidden>
--> -->
<button id="btn-build" class="primary">Build Patched Firmware</button> <button id="btn-build" class="primary" disabled>Build Patched Firmware</button>
<p id="patch-count-hint" class="fallback-hint"></p>
</section> </section>
<!-- Step 5: Building --> <!-- Step 5: Building -->
@@ -125,7 +128,7 @@
</section> </section>
</main> </main>
<script src="wasm_exec.js"></script> <!-- wasm_exec.js loaded by patch-worker.js inside the Web Worker -->
<script src="kobo-device.js"></script> <script src="kobo-device.js"></script>
<script src="kobopatch.js"></script> <script src="kobopatch.js"></script>
<script src="patch-ui.js"></script> <script src="patch-ui.js"></script>

65
src/public/kobopatch.js
View File

@@ -1,35 +1,13 @@
/** /**
* Loads and manages the kobopatch WASM module. * Runs kobopatch WASM in a Web Worker for non-blocking UI.
*/ */
class KobopatchRunner { class KobopatchRunner {
constructor() { constructor() {
this.ready = false; this._worker = null;
this._go = null;
} }
/** /**
* Load the WASM module. Must be called before patchFirmware(). * Run the patching pipeline in a Web Worker.
*/
async load() {
if (this.ready) return;
this._go = new Go();
const result = await WebAssembly.instantiateStreaming(
fetch('kobopatch.wasm'),
this._go.importObject
);
// Go WASM runs as a long-lived instance.
this._go.run(result.instance);
// Wait for the global function to become available.
if (typeof globalThis.patchFirmware !== 'function') {
throw new Error('WASM module loaded but patchFirmware() not found');
}
this.ready = true;
}
/**
* Run the patching pipeline.
* *
* @param {string} configYAML - kobopatch.yaml content * @param {string} configYAML - kobopatch.yaml content
* @param {Uint8Array} firmwareZip - firmware zip file bytes * @param {Uint8Array} firmwareZip - firmware zip file bytes
@@ -37,10 +15,39 @@ class KobopatchRunner {
* @param {Function} [onProgress] - optional callback(message) for progress updates * @param {Function} [onProgress] - optional callback(message) for progress updates
* @returns {Promise<{tgz: Uint8Array, log: string}>} * @returns {Promise<{tgz: Uint8Array, log: string}>}
*/ */
async patchFirmware(configYAML, firmwareZip, patchFiles, onProgress) { patchFirmware(configYAML, firmwareZip, patchFiles, onProgress) {
if (!this.ready) { return new Promise((resolve, reject) => {
throw new Error('WASM module not loaded. Call load() first.'); const worker = new Worker('patch-worker.js');
this._worker = worker;
worker.onmessage = (e) => {
const msg = e.data;
if (msg.type === 'progress') {
if (onProgress) onProgress(msg.message);
} else if (msg.type === 'done') {
worker.terminate();
this._worker = null;
resolve({ tgz: msg.tgz, log: msg.log });
} else if (msg.type === 'error') {
worker.terminate();
this._worker = null;
reject(new Error(msg.message));
} }
return globalThis.patchFirmware(configYAML, firmwareZip, patchFiles, onProgress || null); };
worker.onerror = (e) => {
worker.terminate();
this._worker = null;
reject(new Error('Worker error: ' + e.message));
};
// Transfer the firmwareZip buffer to avoid copying
worker.postMessage({
type: 'patch',
configYAML,
firmwareZip,
patchFiles,
}, [firmwareZip.buffer]);
});
} }
} }

14
src/public/patch-ui.js
View File

@@ -157,6 +157,8 @@ class PatchUI {
this.patchConfig = {}; this.patchConfig = {};
this.firmwareVersion = null; this.firmwareVersion = null;
this.configYAML = null; this.configYAML = null;
// Called when patch selection changes
this.onChange = null;
} }
/** /**
@@ -304,6 +306,18 @@ class PatchUI {
if (countEl) countEl.textContent = `${count} / ${patches.length} enabled`; if (countEl) countEl.textContent = `${count} / ${patches.length} enabled`;
idx++; idx++;
} }
if (this.onChange) this.onChange();
}
/**
* Count total enabled patches across all files.
*/
getEnabledCount() {
let count = 0;
for (const [, { patches }] of Object.entries(this.patchFiles)) {
count += patches.filter(p => p.enabled).length;
}
return count;
} }
/** /**

2
src/public/patch-worker.js
View File

@@ -10,7 +10,7 @@ async function loadWasm() {
const go = new Go(); const go = new Go();
const result = await WebAssembly.instantiateStreaming( const result = await WebAssembly.instantiateStreaming(
fetch('kobopatch.wasm'), fetch('kobopatch.wasm?ts=1773611308'),
go.importObject go.importObject
); );
go.run(result.instance); go.run(result.instance);

235
src/public/style.css
View File

@@ -7,13 +7,15 @@
} }
:root { :root {
--bg: #fafafa; --bg: #f5f5f7;
--card-bg: #fff; --card-bg: #fff;
--border: #e0e0e0; --border: #d1d5db;
--text: #1a1a1a; --border-light: #e5e7eb;
--text-secondary: #555; --text: #111827;
--primary: #1a6ed8; --text-secondary: #6b7280;
--primary-hover: #1558b0; --primary: #2563eb;
--primary-hover: #1d4ed8;
--primary-light: #eff6ff;
--error-bg: #fef2f2; --error-bg: #fef2f2;
--error-border: #fca5a5; --error-border: #fca5a5;
--error-text: #991b1b; --error-text: #991b1b;
@@ -23,37 +25,56 @@
--success-bg: #f0fdf4; --success-bg: #f0fdf4;
--success-border: #86efac; --success-border: #86efac;
--success-text: #166534; --success-text: #166534;
--shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
} }
body { body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
background: var(--bg); background: var(--bg);
color: var(--text); color: var(--text);
line-height: 1.6; line-height: 1.6;
-webkit-font-smoothing: antialiased;
} }
main { main {
max-width: 600px; max-width: 640px;
margin: 3rem auto; margin: 0 auto;
padding: 0 1.5rem; padding: 2rem 1.5rem 4rem;
}
/* Hero header */
.hero {
margin-bottom: 2.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border-light);
} }
h1 { h1 {
font-size: 1.5rem; font-size: 1.75rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.hero-accent {
color: var(--primary);
font-weight: 600; font-weight: 600;
} }
.subtitle { .subtitle {
color: var(--text-secondary); color: var(--text-secondary);
margin-bottom: 2rem; font-size: 0.95rem;
margin-top: 0.25rem;
} }
h2 { h2 {
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 600; font-weight: 600;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
color: var(--text);
} }
/* Steps */
.step { .step {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@@ -61,52 +82,67 @@ h2 {
.step p { .step p {
color: var(--text-secondary); color: var(--text-secondary);
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 0.95rem; font-size: 0.93rem;
line-height: 1.6;
} }
/* Buttons */
button { button {
font-size: 0.95rem; font-size: 0.9rem;
padding: 0.6rem 1.4rem; padding: 0.55rem 1.25rem;
border-radius: 6px; border-radius: 8px;
border: 1px solid var(--border); border: 1px solid var(--border);
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: 500;
transition: background 0.15s, border-color 0.15s; transition: all 0.15s ease;
} }
button.primary { button.primary {
background: var(--primary); background: var(--primary);
color: #fff; color: #fff;
border-color: var(--primary); border-color: var(--primary);
box-shadow: var(--shadow);
} }
button.primary:hover { button.primary:hover {
background: var(--primary-hover); background: var(--primary-hover);
border-color: var(--primary-hover); border-color: var(--primary-hover);
box-shadow: var(--shadow-md);
} }
button.secondary { button.secondary {
background: var(--card-bg); background: var(--card-bg);
color: var(--text); color: var(--text);
box-shadow: var(--shadow);
} }
button.secondary:hover { button.secondary:hover {
background: #f0f0f0; background: #f9fafb;
border-color: #9ca3af;
} }
button:disabled {
opacity: 0.4;
cursor: not-allowed;
box-shadow: none;
}
/* Cards */
.info-card { .info-card {
background: var(--card-bg); background: var(--card-bg);
border: 1px solid var(--border); border: 1px solid var(--border-light);
border-radius: 8px; border-radius: 10px;
padding: 1rem 1.25rem; padding: 0.75rem 1.25rem;
margin-bottom: 1rem; margin-bottom: 1rem;
box-shadow: var(--shadow);
} }
.info-row { .info-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0.4rem 0; align-items: center;
border-bottom: 1px solid var(--border); padding: 0.5rem 0;
border-bottom: 1px solid var(--border-light);
} }
.info-row:last-child { .info-row:last-child {
@@ -116,22 +152,25 @@ button.secondary:hover {
.info-row .label { .info-row .label {
font-weight: 500; font-weight: 500;
color: var(--text-secondary); color: var(--text-secondary);
font-size: 0.9rem; font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.03em;
} }
.info-row .value { .info-row .value {
font-family: "SF Mono", "Fira Code", monospace; font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
font-size: 0.9rem; font-size: 0.88rem;
} }
/* Status banners */
.warning { .warning {
background: var(--warning-bg); background: var(--warning-bg);
border: 1px solid var(--warning-border); border: 1px solid var(--warning-border);
color: var(--warning-text); color: var(--warning-text);
padding: 1rem 1.25rem; padding: 0.75rem 1rem;
border-radius: 8px; border-radius: 8px;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
font-size: 0.9rem; font-size: 0.88rem;
line-height: 1.5; line-height: 1.5;
} }
@@ -143,37 +182,39 @@ button.secondary:hover {
background: var(--error-bg); background: var(--error-bg);
border: 1px solid var(--error-border); border: 1px solid var(--error-border);
color: var(--error-text); color: var(--error-text);
padding: 1rem 1.25rem; padding: 0.75rem 1rem;
border-radius: 8px; border-radius: 8px;
font-size: 0.9rem; font-size: 0.88rem;
} }
.status-supported { .status-supported {
background: var(--success-bg); background: var(--success-bg);
border: 1px solid var(--success-border); border: 1px solid var(--success-border);
color: var(--success-text); color: var(--success-text);
padding: 0.75rem 1rem; padding: 0.65rem 1rem;
border-radius: 8px; border-radius: 8px;
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 0.9rem; font-size: 0.88rem;
} }
.status-unsupported { .status-unsupported {
background: var(--warning-bg); background: var(--warning-bg);
border: 1px solid var(--warning-border); border: 1px solid var(--warning-border);
color: var(--warning-text); color: var(--warning-text);
padding: 0.75rem 1rem; padding: 0.65rem 1rem;
border-radius: 8px; border-radius: 8px;
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 0.9rem; font-size: 0.88rem;
} }
/* Patch file sections */ /* Patch file sections */
.patch-file-section { .patch-file-section {
background: var(--card-bg); background: var(--card-bg);
border: 1px solid var(--border); border: 1px solid var(--border-light);
border-radius: 8px; border-radius: 10px;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
box-shadow: var(--shadow);
overflow: hidden;
} }
.patch-file-section summary { .patch-file-section summary {
@@ -183,23 +224,31 @@ button.secondary:hover {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
font-weight: 500; font-weight: 500;
font-size: 0.95rem; font-size: 0.93rem;
user-select: none; user-select: none;
transition: background 0.1s;
} }
.patch-file-section summary:hover { .patch-file-section summary:hover {
background: #f5f5f5; background: #f9fafb;
}
.patch-file-section[open] summary {
border-bottom: 1px solid var(--border-light);
} }
.patch-count { .patch-count {
font-weight: 400; font-weight: 400;
color: var(--text-secondary); color: var(--text-secondary);
font-size: 0.85rem; font-size: 0.8rem;
background: var(--primary-light);
color: var(--primary);
padding: 0.15rem 0.6rem;
border-radius: 10px;
} }
.patch-list { .patch-list {
border-top: 1px solid var(--border); padding: 0.25rem 0;
padding: 0.5rem 0;
} }
.patch-item { .patch-item {
@@ -207,7 +256,7 @@ button.secondary:hover {
} }
.patch-item + .patch-item { .patch-item + .patch-item {
border-top: 1px solid #f0f0f0; border-top: 1px solid var(--border-light);
} }
.patch-header { .patch-header {
@@ -215,11 +264,12 @@ button.secondary:hover {
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
cursor: pointer; cursor: pointer;
font-size: 0.9rem; font-size: 0.88rem;
} }
.patch-header input { .patch-header input {
flex-shrink: 0; flex-shrink: 0;
accent-color: var(--primary);
} }
.patch-name { .patch-name {
@@ -227,9 +277,10 @@ button.secondary:hover {
} }
.patch-group-badge { .patch-group-badge {
font-size: 0.75rem; font-size: 0.7rem;
background: #e8e8e8; font-weight: 500;
color: var(--text-secondary); background: var(--primary-light);
color: var(--primary);
padding: 0.1rem 0.5rem; padding: 0.1rem 0.5rem;
border-radius: 4px; border-radius: 4px;
margin-left: auto; margin-left: auto;
@@ -237,24 +288,19 @@ button.secondary:hover {
} }
.patch-description { .patch-description {
margin-top: 0.35rem; margin-top: 0.3rem;
margin-left: 1.6rem; margin-left: 1.6rem;
font-size: 0.8rem; font-size: 0.78rem;
color: var(--text-secondary); color: var(--text-secondary);
white-space: pre-line; white-space: pre-line;
line-height: 1.4; line-height: 1.45;
} }
/* Firmware input */ /* Firmware input */
input[type="file"] { input[type="file"] {
display: block; display: block;
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 0.9rem; font-size: 0.88rem;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
} }
#build-actions { #build-actions {
@@ -265,89 +311,116 @@ button:disabled {
/* Spinner */ /* Spinner */
.spinner { .spinner {
width: 32px; width: 28px;
height: 32px; height: 28px;
border: 3px solid var(--border); border: 3px solid var(--border-light);
border-top-color: var(--primary); border-top-color: var(--primary);
border-radius: 50%; border-radius: 50%;
animation: spin 0.8s linear infinite; animation: spin 0.7s linear infinite;
margin: 0.5rem 0;
} }
@keyframes spin { @keyframes spin {
to { transform: rotate(360deg); } to { transform: rotate(360deg); }
} }
/* Build log terminal */
.build-log { .build-log {
margin-top: 0.75rem; margin-top: 0.75rem;
padding: 0.75rem; padding: 0.75rem 1rem;
background: #1a1a1a; background: #0f172a;
color: #a0a0a0; color: #94a3b8;
border-radius: 6px; border-radius: 8px;
font-family: "SF Mono", "Fira Code", monospace; font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
font-size: 0.75rem; font-size: 0.73rem;
white-space: pre-wrap; white-space: pre-wrap;
height: calc(10 * 1.5em + 1.5rem); height: calc(10 * 1.5em + 1.5rem);
overflow-y: auto; overflow-y: auto;
line-height: 1.5; line-height: 1.5;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
} }
.hint { .hint {
margin-top: 1rem; margin-top: 1rem;
padding: 0.75rem 1rem; padding: 0.65rem 1rem;
background: var(--success-bg); background: var(--success-bg);
border: 1px solid var(--success-border); border: 1px solid var(--success-border);
color: var(--success-text); color: var(--success-text);
border-radius: 8px; border-radius: 8px;
font-size: 0.9rem; font-size: 0.88rem;
} }
.error-log { .error-log {
margin-top: 0.75rem; margin-top: 0.75rem;
padding: 0.75rem; padding: 0.75rem 1rem;
background: #1a1a1a; background: #0f172a;
color: #e0e0e0; color: #e2e8f0;
border-radius: 6px; border-radius: 8px;
font-family: "SF Mono", "Fira Code", monospace; font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
font-size: 0.8rem; font-size: 0.78rem;
white-space: pre-wrap; white-space: pre-wrap;
max-height: 300px; max-height: 300px;
overflow-y: auto; overflow-y: auto;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
} }
.step a { .step a {
color: var(--primary); color: var(--primary);
text-decoration: none;
}
.step a:hover {
text-decoration: underline;
} }
.fallback-hint { .fallback-hint {
margin-top: 1rem; margin-top: 1rem;
font-size: 0.85rem; font-size: 0.83rem;
color: var(--text-secondary); color: var(--text-secondary);
} }
.info-banner { .info-banner {
background: #eff6ff; background: var(--primary-light);
border: 1px solid #bfdbfe; border: 1px solid #bfdbfe;
color: #1e40af; color: #1e40af;
padding: 0.65rem 1rem; padding: 0.6rem 1rem;
border-radius: 8px; border-radius: 8px;
font-size: 0.85rem; font-size: 0.83rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
#firmware-download-url { #firmware-download-url {
font-size: 0.8rem; display: inline-block;
margin: 0.4rem 0;
padding: 0.3rem 0.6rem;
font-size: 0.7rem;
word-break: break-all; word-break: break-all;
color: var(--text-secondary); color: #64748b;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 4px;
} }
select { select {
display: block; display: block;
width: 100%; width: 100%;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
font-size: 0.95rem; font-size: 0.93rem;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 6px; border-radius: 8px;
background: var(--card-bg); background: var(--card-bg);
color: var(--text); color: var(--text);
margin-bottom: 1rem; margin-bottom: 1rem;
box-shadow: var(--shadow);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
padding-right: 2rem;
}
select:focus,
button:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
} }