From f24b1b77597b45242504f8f90f467f57bc029387 Mon Sep 17 00:00:00 2001 From: Nico Verbruggen Date: Tue, 24 Mar 2026 12:46:49 +0100 Subject: [PATCH] Restructured CSS files --- tests/e2e/integration.spec.js | 6 +- tests/e2e/screenshots.mjs | 2 +- web/build.mjs | 11 +- web/src/css/base.css | 66 ++ web/src/css/components/banner.css | 95 ++ web/src/css/components/button.css | 59 + web/src/css/components/info-card.css | 33 + web/src/css/components/modal.css | 105 ++ web/src/css/components/selection-card.css | 144 +++ web/src/css/components/step-nav.css | 73 ++ web/src/css/critical.css | 6 + web/src/css/features/build.css | 119 ++ web/src/css/features/device.css | 25 + web/src/css/features/install.css | 66 ++ web/src/css/features/nickelmenu.css | 47 + web/src/css/features/patches.css | 157 +++ web/src/css/layout/footer.css | 34 + web/src/css/layout/hero.css | 37 + web/src/css/layout/steps.css | 75 ++ web/src/css/style.css | 1251 +-------------------- web/src/index.html | 84 +- web/src/js/app.js | 14 +- web/src/js/nickelmenu-flow.js | 4 +- 23 files changed, 1222 insertions(+), 1291 deletions(-) create mode 100644 web/src/css/base.css create mode 100644 web/src/css/components/banner.css create mode 100644 web/src/css/components/button.css create mode 100644 web/src/css/components/info-card.css create mode 100644 web/src/css/components/modal.css create mode 100644 web/src/css/components/selection-card.css create mode 100644 web/src/css/components/step-nav.css create mode 100644 web/src/css/features/build.css create mode 100644 web/src/css/features/device.css create mode 100644 web/src/css/features/install.css create mode 100644 web/src/css/features/nickelmenu.css create mode 100644 web/src/css/features/patches.css create mode 100644 web/src/css/layout/footer.css create mode 100644 web/src/css/layout/hero.css create mode 100644 web/src/css/layout/steps.css diff --git a/tests/e2e/integration.spec.js b/tests/e2e/integration.spec.js index ccf4f8b..fc87719 100644 --- a/tests/e2e/integration.spec.js +++ b/tests/e2e/integration.spec.js @@ -235,7 +235,7 @@ test.describe('NickelMenu', () => { await expect(page.locator('#step-nickelmenu')).not.toBeHidden(); // Remove option should be disabled (no device connected) - await expect(page.locator('#nm-option-remove')).toHaveClass(/nm-option-disabled/); + await expect(page.locator('#nm-option-remove')).toHaveClass(/selection-card--disabled/); await expect(page.locator('input[name="nm-option"][value="remove"]')).toBeDisabled(); }); @@ -257,7 +257,7 @@ test.describe('NickelMenu', () => { await expect(page.locator('#step-nickelmenu')).not.toBeHidden(); // Remove option should be disabled (no NickelMenu installed) - await expect(page.locator('#nm-option-remove')).toHaveClass(/nm-option-disabled/); + await expect(page.locator('#nm-option-remove')).toHaveClass(/selection-card--disabled/); // Select "Install NickelMenu and configure" await page.click('input[name="nm-option"][value="preset"]'); @@ -360,7 +360,7 @@ test.describe('NickelMenu', () => { await expect(page.locator('#step-nickelmenu')).not.toBeHidden(); // Remove option should be enabled (NickelMenu is installed) - await expect(page.locator('#nm-option-remove')).not.toHaveClass(/nm-option-disabled/); + await expect(page.locator('#nm-option-remove')).not.toHaveClass(/selection-card--disabled/); await expect(page.locator('input[name="nm-option"][value="remove"]')).not.toBeDisabled(); // Select remove diff --git a/tests/e2e/screenshots.mjs b/tests/e2e/screenshots.mjs index 9d24707..3b5615e 100644 --- a/tests/e2e/screenshots.mjs +++ b/tests/e2e/screenshots.mjs @@ -44,7 +44,7 @@ test('capture all steps', async ({ page }, testInfo) => { await shot(page, '02-connect-instructions', testInfo); // 2b. Connection instructions with disclaimer open - await page.click('.disclaimer summary'); + await page.click('details.banner--accent summary'); await page.waitForTimeout(100); await shot(page, '03-connect-instructions-disclaimer', testInfo); diff --git a/web/build.mjs b/web/build.mjs index a627ff9..5bd3985 100644 --- a/web/build.mjs +++ b/web/build.mjs @@ -50,14 +50,15 @@ async function build() { // Copy all of src/ to dist/, skipping js/ (bundled separately), css/ (minified), and index.html (generated) copyDir(srcDir, distDir, new Set(['js', 'css', 'index.html'])); - // Minify CSS + // Bundle and minify CSS (@import statements are resolved by esbuild) mkdirSync(join(distDir, 'css'), { recursive: true }); - const cssSrc = readFileSync(join(srcDir, 'css', 'style.css'), 'utf-8'); - const { code: cssMinified } = await esbuild.transform(cssSrc, { - loader: 'css', + await esbuild.build({ + entryPoints: [join(srcDir, 'css', 'style.css')], + bundle: true, + outfile: join(distDir, 'css', 'style.css'), minify: !isDev && !isWatch, + logLevel: 'warning', }); - writeFileSync(join(distDir, 'css', 'style.css'), cssMinified); // Copy worker files from src/js/ (not bundled, served separately) mkdirSync(join(distDir, 'js'), { recursive: true }); diff --git a/web/src/css/base.css b/web/src/css/base.css new file mode 100644 index 0000000..9197846 --- /dev/null +++ b/web/src/css/base.css @@ -0,0 +1,66 @@ +/* Reset */ +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +button, input, select, textarea { + font-family: inherit; +} + +/* Typography & body */ +body { + font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; + background: var(--bg); + color: var(--text); + line-height: 1.6; + -webkit-font-smoothing: antialiased; +} + +main { + max-width: 640px; + margin: 0 auto; + padding: 2rem 1.5rem 4rem; +} + +h2 { + font-size: 1.1rem; + font-weight: 600; + margin-bottom: 0.75rem; + color: var(--text); +} + +/* Firmware file input */ +input[type="file"] { + display: block; + margin-bottom: 1rem; + font-size: 0.88rem; +} + +/* Select */ +select { + display: block; + width: 100%; + padding: 0.5rem 0.75rem; + font-size: 0.93rem; + border: 1px solid var(--border); + border-radius: 8px; + background: var(--card-bg); + color: var(--text); + 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; +} diff --git a/web/src/css/components/banner.css b/web/src/css/components/banner.css new file mode 100644 index 0000000..2a63539 --- /dev/null +++ b/web/src/css/components/banner.css @@ -0,0 +1,95 @@ +/* Unified banner component. + Replaces the old .notice, .warning, .error, .hint, .info-banner, .disclaimer + classes with a single base + color modifiers. */ + +.banner { + padding: 0.75rem 1rem; + border: 1px solid; + border-radius: 8px; + font-size: 0.88rem; + line-height: 1.5; +} + +.banner-heading { + font-size: 0.7rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.04em; + margin-bottom: 0.3rem; +} + +/* --- Color modifiers --- */ + +.banner--info { + background: var(--info-bg); + border-color: var(--info-border); + color: var(--info-text); + + & a { + color: var(--info-text); + text-decoration: underline; + } +} + +.banner--warning { + background: var(--warning-bg); + border-color: var(--warning-border); + color: var(--warning-text); + + & a { + color: var(--warning-text); + text-decoration: underline; + } +} + +.banner--error { + background: var(--error-bg); + border-color: var(--error-border); + color: var(--error-text); +} + +.banner--success { + background: var(--success-bg); + border-color: var(--success-border); + color: var(--success-text); +} + +.banner--accent { + background: var(--primary-light); + border-color: var(--accent-border); + color: var(--accent-text); +} + +/* --- Context-specific margins --- */ + +#step-connect > .banner { margin-bottom: 1.5rem; } +#device-unknown-warning { margin-bottom: 1.5rem; } +#existing-tgz-warning { margin-bottom: 1.5rem; } +#error-message { margin-top: 1rem; } + +.install-instructions .banner--warning { margin-bottom: 0.75rem; } +.install-instructions .banner--success { margin-top: 0; } + +.step .banner--success { margin-top: 1rem; } + +/* --- Disclaimer (details/summary variant) --- */ + +details.banner--accent { + font-size: 0.80rem; + line-height: 1.55; + + & summary { + cursor: pointer; + font-size: 0.83rem; + } + + & ol { + margin: 0.5rem 0 0 1.25rem; + font-size: 0.80rem; + color: inherit; + } + + & li { + margin-bottom: 0.25rem; + } +} diff --git a/web/src/css/components/button.css b/web/src/css/components/button.css new file mode 100644 index 0000000..9fe321a --- /dev/null +++ b/web/src/css/components/button.css @@ -0,0 +1,59 @@ +button { + font-size: 0.9rem; + padding: 0.55rem 1.25rem; + border-radius: 8px; + border: 1px solid var(--border); + cursor: pointer; + font-weight: 500; + transition: all 0.15s ease; + + &.primary { + background: var(--primary); + color: #fff; + border-color: var(--primary); + box-shadow: var(--shadow); + + &:hover { + background: var(--primary-hover); + border-color: var(--primary-hover); + box-shadow: var(--shadow-md); + } + } + + &.secondary { + background: var(--card-bg); + color: var(--text); + box-shadow: var(--shadow); + + &:hover { + background: #f9fafb; + border-color: #9ca3af; + } + } + + &.danger { + background: #fff; + color: var(--error-text); + border-color: var(--error-border); + + &:hover { + background: var(--error-bg); + border-color: var(--error-text); + } + } + + &:disabled { + opacity: 0.4; + cursor: not-allowed; + box-shadow: none; + } + + &.btn-success, + &.btn-success:hover { + background: var(--success-text); + border-color: var(--success-text); + color: #fff; + cursor: default; + opacity: 0.7; + } +} diff --git a/web/src/css/components/info-card.css b/web/src/css/components/info-card.css new file mode 100644 index 0000000..92306e8 --- /dev/null +++ b/web/src/css/components/info-card.css @@ -0,0 +1,33 @@ +.info-card { + background: var(--card-bg); + border: 1px solid var(--border-light); + border-radius: 10px; + padding: 0.75rem 1.25rem; + margin-bottom: 1rem; + box-shadow: var(--shadow); +} + +.info-row { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem 0; + border-bottom: 1px solid var(--border-light); + + &:last-child { + border-bottom: none; + } + + & .label { + font-weight: 500; + color: var(--text-secondary); + font-size: 0.85rem; + text-transform: uppercase; + letter-spacing: 0.03em; + } + + & .value { + font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace; + font-size: 0.88rem; + } +} diff --git a/web/src/css/components/modal.css b/web/src/css/components/modal.css new file mode 100644 index 0000000..fbce146 --- /dev/null +++ b/web/src/css/components/modal.css @@ -0,0 +1,105 @@ +.modal { + border: none; + border-radius: 12px; + padding: 0; + max-width: 560px; + width: calc(100% - 2rem); /* 1rem breathing room on each side */ + max-height: 80vh; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + margin: 0; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05); + + &::backdrop { + background: rgba(0, 0, 0, 0.4); + } +} + +.modal-content { + display: flex; + flex-direction: column; + max-height: 80vh; +} + +.modal-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 1.25rem; + border-bottom: 1px solid var(--border-light); + flex-shrink: 0; + + & h2 { + margin-bottom: 0; + font-size: 1rem; + } +} + +.modal-close { + background: none; + border: none; + font-size: 1.4rem; + color: var(--text-secondary); + cursor: pointer; + padding: 0 0.25rem; + line-height: 1; + box-shadow: none; + + &:hover { + color: var(--text); + } +} + +.modal-body { + padding: 1.25rem; + overflow-y: auto; + font-size: 0.88rem; + color: var(--text-secondary); + line-height: 1.7; + + & h3 { + font-size: 0.88rem; + font-weight: 600; + color: var(--text); + margin-top: 1.25rem; + margin-bottom: 0.5rem; + } + + & p { + margin-bottom: 0.75rem; + } + + & ol, + & ul { + margin: 0 0 0.75rem 1.25rem; + } + + & li { + margin-bottom: 0.5rem; + } + + & a { + color: var(--primary); + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + + & code { + font-size: 0.8rem; + background: #f1f5f9; + padding: 0.1rem 0.35rem; + border-radius: 3px; + } +} + +.modal-footer { + padding: 1rem 1.25rem; + border-top: 1px solid var(--border-light); + display: flex; + justify-content: flex-end; +} diff --git a/web/src/css/components/selection-card.css b/web/src/css/components/selection-card.css new file mode 100644 index 0000000..349666c --- /dev/null +++ b/web/src/css/components/selection-card.css @@ -0,0 +1,144 @@ +/* Unified selection card component. + Replaces the old .mode-card and .nm-option classes with a single base + modifiers. */ + +.selection-cards { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.selection-card { + display: flex; + align-items: flex-start; + gap: 0.75rem; + padding: 1rem 1.25rem; + background: var(--card-bg); + border: 2px solid var(--border-light); + border-radius: 10px; + cursor: pointer; + transition: border-color 0.15s, box-shadow 0.15s; + box-shadow: var(--shadow); + + &:hover { + border-color: var(--border); + } + + & input[type="radio"] { + margin-top: 0.2rem; + flex-shrink: 0; + accent-color: var(--primary); + } +} + +.selection-card-icon { + width: 28px; + height: 28px; + flex-shrink: 0; + color: var(--text-secondary); +} + +.selection-card-title { + display: flex; + align-items: center; + gap: 0.5rem; + font-weight: 600; + font-size: 0.93rem; + color: var(--text); + margin-bottom: 0.25rem; +} + +.selection-card-desc { + font-size: 0.83rem; + color: var(--text-secondary); + line-height: 1.5; +} + +.recommended-label { + font-size: 0.7rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--primary); + margin-bottom: 0.35rem; +} + +/* --- State modifiers --- */ + +.selection-card--selected { + border-color: var(--primary); + box-shadow: 0 0 0 1px var(--primary), var(--shadow); +} + +.selection-card--disabled { + opacity: 0.45; + cursor: not-allowed; + + &:hover { + border-color: var(--border-light); + } +} + +.selection-card--recommended { + border-left-color: var(--primary); +} + +/* --- Button variant (connect step cards with SVG icons) --- */ + +.selection-card--btn { + text-align: left; + width: 100%; + + &:hover { + border-color: var(--primary); + box-shadow: 0 0 0 1px var(--primary), var(--shadow); + } + + &:disabled { + opacity: 0.45; + cursor: not-allowed; + box-shadow: var(--shadow); + + &:hover { + border-color: var(--border-light); + box-shadow: var(--shadow); + } + } +} + +/* --- Danger variant (remove NickelMenu) --- */ + +.selection-card--danger { + &:not(.selection-card--disabled) { + border-color: var(--error-border); + + &:hover { + border-color: var(--error-text); + } + } + + &.selection-card--selected { + border-color: var(--error-text); + box-shadow: 0 0 0 1px var(--error-text), var(--shadow); + } + + & input[type="radio"] { + accent-color: var(--error-text); + } +} + +/* --- Uninstall options nested inside selection cards --- */ + +#nm-uninstall-options { + display: flex; + flex-direction: column; + margin-top: 0.5rem; + margin-left: 1.5rem; + + & input[type="checkbox"] { + accent-color: var(--error-text); + } +} + +#mode-patches-hint { + margin-top: 15px; +} diff --git a/web/src/css/components/step-nav.css b/web/src/css/components/step-nav.css new file mode 100644 index 0000000..1de2df7 --- /dev/null +++ b/web/src/css/components/step-nav.css @@ -0,0 +1,73 @@ +.step-nav { + margin-bottom: 1.5rem; + + & ol { + display: flex; + list-style: none; + gap: 0; + counter-reset: step; + } + + & li { + flex: 1; + text-align: center; + padding: 0.5rem 0; + font-size: 0.8rem; + font-weight: 500; + color: var(--text-secondary); + position: relative; + counter-increment: step; + + /* Step number circles (1.6rem diameter to fit two-digit numbers) */ + &::before { + content: counter(step); + display: block; + width: 1.6rem; + height: 1.6rem; + line-height: 1.6rem; + margin: 0 auto 0.3rem; + border-radius: 50%; + background: var(--border-light); + color: var(--text-secondary); + font-size: 0.75rem; + font-weight: 600; + } + + &.active { + color: var(--primary); + font-weight: 600; + + &::before { + background: var(--primary); + color: #fff; + } + } + + &.done { + color: var(--success-text); + + &::before { + background: var(--success-text); + color: #fff; + content: "\2713"; + } + } + + /* Connector lines between steps (vertically centered on the 1.6rem circle) */ + & + li::after { + content: ''; + position: absolute; + top: 1.3rem; + right: 50%; + width: 100%; + height: 2px; + background: var(--border-light); + z-index: -1; + } + + &.done + li::after, + &.done + li.active::after { + background: var(--success-text); + } + } +} diff --git a/web/src/css/critical.css b/web/src/css/critical.css index f457a57..90dfdf3 100644 --- a/web/src/css/critical.css +++ b/web/src/css/critical.css @@ -30,6 +30,12 @@ --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); + --info-bg: #e8f7fa; + --info-border: #b2e4ed; + --info-text: #0b6e80; + --accent-border: #bfdbfe; + --accent-text: #1e40af; + --text-muted: #9ca3af; } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; margin: 0; } diff --git a/web/src/css/features/build.css b/web/src/css/features/build.css new file mode 100644 index 0000000..9f19775 --- /dev/null +++ b/web/src/css/features/build.css @@ -0,0 +1,119 @@ +#build-actions { + display: flex; + justify-content: space-between; + gap: 0.75rem; + margin-top: 1.25rem; +} + +/* Build header (spinner + progress text) */ +.build-header { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 0.25rem; + + & p { + margin-bottom: 0; + font-weight: 500; + color: var(--text); + } +} + +/* Spinner */ +.spinner { + width: 22px; + height: 22px; + border: 2.5px solid var(--border-light); + border-top-color: var(--primary); + border-radius: 50%; + animation: spin 0.7s linear infinite; + flex-shrink: 0; +} + +/* Also defined in critical.css (inlined into ) for the pre-CSS loading spinner */ +@keyframes spin { + to { transform: rotate(360deg); } +} + +/* Build log terminal */ +.build-log { + margin-top: 0.75rem; + padding: 0.75rem 1rem; + background: #0f172a; + color: #94a3b8; + border-radius: 6px; + font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace; + font-size: 0.73rem; + white-space: pre-wrap; + height: calc(10 * 1.5em + 1.5rem); /* 10 visible lines at line-height 1.5 + padding */ + overflow-y: auto; + line-height: 1.5; +} + +/* Collapsible log on install step */ +.log-details { + margin-top: 0.5rem; + margin-bottom: 0.25rem; + + & summary { + font-size: 0.83rem; + color: var(--text-secondary); + cursor: pointer; + padding: 0.25rem 0; + + &:hover { + color: var(--text); + } + } +} + +/* Done screen log is shorter */ +.done-log { + height: calc(7 * 1.5em + 1.5rem); /* 7 visible lines */ +} + +.error-log { + margin-top: 0.75rem; + padding: 0.75rem 1rem; + background: #0f172a; + color: #e2e8f0; + border-radius: 6px; + font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace; + font-size: 0.78rem; + white-space: pre-wrap; + max-height: 300px; /* ~15 lines visible before scrolling */ + overflow-y: auto; +} + +/* Selected patches summary on build step */ +.selected-patches-list { + margin: 0 0 1rem; + padding: 0.5rem 1rem 0.5rem 1.75rem; + font-size: 0.85rem; + color: var(--text-secondary); + line-height: 1.5; + background: var(--card-bg); + border: 1px solid var(--border-light); + border-radius: 8px; + box-shadow: var(--shadow); + + & li { + padding: 0.05rem 0; + } +} + +#firmware-download-url { + display: inline-block; + margin: 0.4rem 0; + padding: 0.3rem 0.6rem; + font-size: 0.7rem; + word-break: break-all; + color: #64748b; + background: #f1f5f9; + border: 1px solid #e2e8f0; + border-radius: 4px; +} + +#firmware-verify-notice { + font-size: 12px; +} diff --git a/web/src/css/features/device.css b/web/src/css/features/device.css new file mode 100644 index 0000000..d7b99b8 --- /dev/null +++ b/web/src/css/features/device.css @@ -0,0 +1,25 @@ +#connect-unsupported-hint { + margin-top: 20px; + color: var(--error-text); + + & a { + color: var(--error-text); + text-decoration: underline; + } +} + +.device-unknown-ack { + display: flex; + align-items: flex-start; + gap: 0.6rem; + padding: 0.5rem 0; + font-size: 0.83rem; + color: var(--text); + cursor: pointer; + + & input[type="checkbox"] { + flex-shrink: 0; + margin-top: 0.15rem; + accent-color: var(--primary); + } +} diff --git a/web/src/css/features/install.css b/web/src/css/features/install.css new file mode 100644 index 0000000..89d7edb --- /dev/null +++ b/web/src/css/features/install.css @@ -0,0 +1,66 @@ +/* Install instructions card */ +.install-instructions { + margin-top: 1rem; + background: var(--card-bg); + border: 1px solid var(--border-light); + border-radius: 10px; + padding: 1rem 1.25rem; +} + +/* Connection instruction steps with numbered accent circles */ +.connect-steps { + list-style: none; + margin: 0.5rem 0 1rem; + padding-left: 2.35rem; + counter-reset: connect-step; + + & li { + padding: 0.4rem 0; + font-size: 0.88rem; + color: var(--text-secondary); + line-height: 1.6; + counter-increment: connect-step; + position: relative; + + /* Numbered circle: vertically centered relative to the first text line */ + &::before { + content: counter(connect-step); + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.6rem; + height: 1.6rem; + border-radius: 50%; + background: var(--primary); + color: #fff; + font-size: 0.78rem; + font-weight: 700; + line-height: 1; + position: absolute; + left: -2.35rem; + top: calc(0.55rem - 4px); + } + } +} + +.install-steps { + margin: 0.25rem 0 0 1.25rem; + font-size: 0.88rem; + color: var(--text-secondary); + line-height: 1.7; + + & li { + padding: 0.15rem 0; + } + + & code { + display: inline-block; + background: var(--bg); + border: 1px solid var(--border-light); + border-radius: 4px; + padding: 0.15rem 0.4rem; + font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace; + font-size: 0.82rem; + word-break: break-all; + } +} diff --git a/web/src/css/features/nickelmenu.css b/web/src/css/features/nickelmenu.css new file mode 100644 index 0000000..a961331 --- /dev/null +++ b/web/src/css/features/nickelmenu.css @@ -0,0 +1,47 @@ +/* NickelMenu feature checkboxes */ +.nm-config-options { + display: flex; + flex-direction: column; +} + +.nm-config-item { + display: flex; + align-items: flex-start; + gap: 0.75rem; + padding: 0.6rem 0; + color: var(--text); + cursor: pointer; + + & + .nm-config-item { + border-top: 1px solid var(--border-light); + } + + & input[type="checkbox"] { + flex-shrink: 0; + margin-top: 0.2rem; + accent-color: var(--primary); + + &:disabled { + opacity: 0.6; + } + } +} + +.nm-config-text { + user-select: none; +} + +.nm-config-title { + display: block; + font-weight: 600; + font-size: 0.93rem; + color: var(--text); +} + +.nm-config-desc { + display: block; + font-size: 0.83rem; + color: var(--text-secondary); + line-height: 1.5; + margin-top: 0.1rem; +} diff --git a/web/src/css/features/patches.css b/web/src/css/features/patches.css new file mode 100644 index 0000000..31940b4 --- /dev/null +++ b/web/src/css/features/patches.css @@ -0,0 +1,157 @@ +/* Scrollable patch container */ +.patch-container-scroll { + max-height: 50vh; /* ~15 visible lines before scrolling */ + overflow-y: auto; + border: 1px solid var(--border); + border-radius: 5px; +} + +/* Patch file sections */ +.patch-file-section { + background: var(--card-bg); + border-bottom: 1px solid var(--border-light); + + &:last-child { + border-bottom: none; + } + + & summary { + padding: 0.6rem 0.75rem; + cursor: pointer; + display: flex; + align-items: center; + font-weight: 500; + font-size: 0.93rem; + user-select: none; + transition: background 0.1s; + list-style: none; + + &::-webkit-details-marker { + display: none; + } + + &::before { + content: "\203A"; + display: inline-block; + width: 1rem; + margin-right: 0.35rem; + flex-shrink: 0; + text-align: center; + font-size: 1.1rem; + font-weight: 600; + color: var(--text-secondary); + transition: transform 0.15s ease; + } + + & .patch-count { + margin-left: auto; + } + + &:hover { + background: #f9fafb; + } + } + + &[open] summary { + border-bottom: 1px solid var(--border-light); + + &::before { + transform: rotate(90deg) translateX(0.1rem); + } + } +} + +.patch-count { + font-weight: 400; + font-size: 0.8rem; + background: var(--primary-light); + color: var(--primary); + padding: 0.15rem 0.6rem; + border-radius: 10px; +} + +.patch-list { + padding: 0.25rem 0; +} + +.patch-item { + padding: 0.4rem 1rem; + + & + .patch-item { + border-top: 1px solid var(--border-light); + } +} + +.patch-header { + display: flex; + align-items: center; + gap: 0.5rem; + cursor: pointer; + font-size: 0.85rem; + + & input { + flex-shrink: 0; + accent-color: var(--primary); + } +} + +.patch-name { + font-weight: 500; +} + +.patch-name-none { + color: var(--text-secondary); +} + +.patch-desc-toggle { + flex-shrink: 0; + background: none; + border: none; + padding: 0 0.3rem; + font-size: 0.7rem; + color: var(--text-secondary); + cursor: pointer; + box-shadow: none; + opacity: 0.6; + transition: opacity 0.1s; + + &:hover { + opacity: 1; + } +} + +/* Visual grouping for mutually exclusive patches */ +.patch-group { + background: #f8fafc; + border-left: 3px solid var(--primary); + margin: 0.35rem 0.5rem; + border-radius: 0 6px 6px 0; + + & .patch-item { + padding: 0.4rem 0.75rem; + } +} + +.patch-group-label { + font-size: 0.72rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.03em; + color: var(--primary); + padding: 0.45rem 0.75rem 0; +} + +.step .patch-description { + margin-top: 0.3rem; + margin-left: 1.6rem; + margin-bottom: 0; + font-size: 0.72rem; + color: var(--text-secondary); + white-space: pre-line; + line-height: 1.4; + padding: 0.25rem 0; +} + +.patch-description[hidden] { + display: none; +} diff --git a/web/src/css/layout/footer.css b/web/src/css/layout/footer.css new file mode 100644 index 0000000..6a18da5 --- /dev/null +++ b/web/src/css/layout/footer.css @@ -0,0 +1,34 @@ +.site-footer { + max-width: 640px; + margin: 0 auto; + padding: 1.5rem 1.5rem 2rem; + border-top: 1px solid var(--border-light); + text-align: center; + font-size: 0.8rem; + color: var(--text-secondary); + + & a { + color: var(--text-secondary); + text-decoration: underline; + + &.site-footer-link { + color: var(--primary); + } + + &:hover { + color: var(--text); + } + } + + & p { + margin-bottom: 0.75rem; + + &:last-child { + margin-bottom: 0; + } + } +} + +.site-footer-attribution { + font-size: 0.7rem; +} diff --git a/web/src/css/layout/hero.css b/web/src/css/layout/hero.css new file mode 100644 index 0000000..17688df --- /dev/null +++ b/web/src/css/layout/hero.css @@ -0,0 +1,37 @@ +.hero { + margin-bottom: 1.5rem; + padding-bottom: 1rem; + border-bottom: 1px solid var(--border-light); +} + +h1 { + font-size: 1.75rem; + font-weight: 700; + letter-spacing: -0.02em; +} + +.hero-accent { + color: var(--primary); + font-weight: 600; +} + +.beta-pill { + font-size: 0.7rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + background: var(--primary); + color: #fff; + padding: 0.35rem 0.7rem; + border-radius: 10px; + vertical-align: middle; + position: relative; + top: -0.15rem; /* optical alignment with heading baseline */ + margin-left: 5px; +} + +.subtitle { + color: var(--text-secondary); + font-size: 0.95rem; + margin-top: 0.25rem; +} diff --git a/web/src/css/layout/steps.css b/web/src/css/layout/steps.css new file mode 100644 index 0000000..c2731e6 --- /dev/null +++ b/web/src/css/layout/steps.css @@ -0,0 +1,75 @@ +.step { + margin-bottom: 1rem; + + & p { + color: var(--text-secondary); + margin-bottom: 1rem; + font-size: 0.93rem; + line-height: 1.6; + } + + & a { + color: var(--primary); + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + + & .fallback-hint { + margin-top: 0.5rem; + margin-bottom: 1rem; + font-size: 0.78rem; + color: var(--text-secondary); + line-height: 1.5; + } + + & .install-summary { + font-size: 0.93rem; + color: var(--text); + line-height: 1.6; + margin-bottom: 0.5rem; + } +} + +/* Step action buttons (back/next) */ +.step-actions { + display: flex; + justify-content: space-between; + gap: 0.75rem; + margin-top: 1.25rem; + + & .primary:first-child, + & > [hidden] + .primary { + margin-left: auto; + } +} + +.step-actions-right { + display: flex; + gap: 0.75rem; + margin-left: auto; +} + +@media (max-width: 500px) { + .step-actions:has(.step-actions-right) { + flex-wrap: wrap; + } + + .step-actions-right { + width: 100%; + justify-content: flex-end; + } +} + +/* Pulls fallback hint up to compensate for select's margin-bottom */ +select + .fallback-hint { + margin-top: -0.5rem; +} + +.restart-hint { + margin-top: 1.5rem; + font-size: 0.78rem; + color: var(--text-muted); +} diff --git a/web/src/css/style.css b/web/src/css/style.css index b22407b..25f56e2 100644 --- a/web/src/css/style.css +++ b/web/src/css/style.css @@ -1,1232 +1,21 @@ -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -button, input, select, textarea { - font-family: inherit; -} - /* Design tokens (:root variables) are defined in critical.css, which is - inlined into at build time — do not redefine them here. */ - -body { - font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; - background: var(--bg); - color: var(--text); - line-height: 1.6; - -webkit-font-smoothing: antialiased; -} - -main { - max-width: 640px; - margin: 0 auto; - padding: 2rem 1.5rem 4rem; -} - -/* Hero header */ -.hero { - margin-bottom: 1.5rem; - padding-bottom: 1rem; - border-bottom: 1px solid var(--border-light); -} - -h1 { - font-size: 1.75rem; - font-weight: 700; - letter-spacing: -0.02em; -} - -#connect-unsupported-hint { - margin-top: 20px; - color: var(--error-text); -} - -#connect-unsupported-hint a { - color: var(--error-text); - text-decoration: underline; -} - -.hero-accent { - color: var(--primary); - font-weight: 600; -} - -.beta-pill { - font-size: 0.7rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; - background: var(--primary); - color: #fff; - padding: 0.35rem 0.7rem; - border-radius: 10px; - vertical-align: middle; - position: relative; - top: -0.15rem; - margin-left: 5px; -} - -.subtitle { - color: var(--text-secondary); - font-size: 0.95rem; - margin-top: 0.25rem; -} - - - -h2 { - font-size: 1.1rem; - font-weight: 600; - margin-bottom: 0.75rem; - color: var(--text); -} - -/* Step navigation */ -.step-nav { - margin-bottom: 1.5rem; -} - -.step-nav ol { - display: flex; - list-style: none; - gap: 0; - counter-reset: step; -} - -.step-nav li { - flex: 1; - text-align: center; - padding: 0.5rem 0; - font-size: 0.8rem; - font-weight: 500; - color: var(--text-secondary); - position: relative; - counter-increment: step; -} - -.step-nav li::before { - content: counter(step); - display: block; - width: 1.6rem; - height: 1.6rem; - line-height: 1.6rem; - margin: 0 auto 0.3rem; - border-radius: 50%; - background: var(--border-light); - color: var(--text-secondary); - font-size: 0.75rem; - font-weight: 600; -} - -.step-nav li.active::before { - background: var(--primary); - color: #fff; -} - -.step-nav li.active { - color: var(--primary); - font-weight: 600; -} - -.step-nav li.done::before { - background: var(--success-text); - color: #fff; - content: "\2713"; -} - -.step-nav li.done { - color: var(--success-text); -} - -/* Connector lines between steps */ -.step-nav li + li::after { - content: ''; - position: absolute; - top: 1.3rem; - right: 50%; - width: 100%; - height: 2px; - background: var(--border-light); - z-index: -1; -} - -.step-nav li.done + li::after, -.step-nav li.done + li.active::after { - background: var(--success-text); -} - -/* Mode selection cards */ -.mode-cards { - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -.mode-card-icon { - width: 28px; - height: 28px; - flex-shrink: 0; - color: var(--text-secondary); -} - -.mode-card { - display: flex; - align-items: flex-start; - gap: 0.75rem; - padding: 1rem 1.25rem; - background: var(--card-bg); - border: 2px solid var(--border-light); - border-radius: 10px; - cursor: pointer; - transition: border-color 0.15s, box-shadow 0.15s; - box-shadow: var(--shadow); -} - -#step-connect-instructions .disclaimer { - background: var(--primary-light); - border: 1px solid #bfdbfe; - color: #1e40af; - padding: 0.65rem 1rem; - border-radius: 8px; - font-size: 0.80rem; - line-height: 1.55; -} - -#step-connect-instructions .disclaimer summary { - cursor: pointer; - font-size: 0.83rem; -} - -#step-connect-instructions .disclaimer ol { - margin: 0.5rem 0 0 1.25rem; - font-size: 0.80rem; - color: inherit; -} - -#step-connect-instructions .disclaimer li { - margin-bottom: 0.25rem; -} - -#mode-patches-hint { - margin-top: 15px; -} - -.mode-card:hover { - border-color: var(--border); -} - -.mode-card-disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.mode-card-selected { - border-color: var(--primary); - box-shadow: 0 0 0 1px var(--primary), var(--shadow); -} - -.mode-card-btn { - text-align: left; - width: 100%; -} - -.mode-card-btn:hover { - border-color: var(--primary); - box-shadow: 0 0 0 1px var(--primary), var(--shadow); -} - -.mode-card-btn:disabled { - opacity: 0.45; - cursor: not-allowed; - box-shadow: var(--shadow); -} - -.mode-card-btn:disabled:hover { - border-color: var(--border-light); - box-shadow: var(--shadow); -} - -.mode-card input[type="radio"] { - margin-top: 0.2rem; - flex-shrink: 0; - accent-color: var(--primary); -} - -.mode-card-title { - display: flex; - align-items: center; - gap: 0.5rem; - font-weight: 600; - font-size: 0.93rem; - color: var(--text); - margin-bottom: 0.25rem; -} - -.mode-card-desc { - font-size: 0.83rem; - color: var(--text-secondary); - line-height: 1.5; -} - -.mode-card-recommended { - border-left-color: var(--primary); -} - -.recommended-label { - font-size: 0.7rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.04em; - color: var(--primary); - margin-bottom: 0.35rem; -} - -/* NickelMenu option radio cards */ -.nm-options { - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -.nm-option { - display: flex; - align-items: flex-start; - gap: 0.75rem; - padding: 1rem 1.25rem; - background: var(--card-bg); - border: 2px solid var(--border-light); - border-radius: 10px; - cursor: pointer; - transition: border-color 0.15s, box-shadow 0.15s; - box-shadow: var(--shadow); -} - -.nm-option:hover { - border-color: var(--border); -} - -.nm-option-selected { - border-color: var(--primary); - box-shadow: 0 0 0 1px var(--primary), var(--shadow); -} - -.nm-option-disabled { - opacity: 0.45; - cursor: not-allowed; -} - -.nm-option-disabled:hover { - border-color: var(--border-light); -} - -.nm-option-remove:not(.nm-option-disabled) { - border-color: var(--error-border); -} - -.nm-option-remove:not(.nm-option-disabled):hover { - border-color: var(--error-text); -} - -.nm-option-remove.nm-option-selected { - border-color: var(--error-text); - box-shadow: 0 0 0 1px var(--error-text), var(--shadow); -} - -.nm-option-remove input[type="radio"] { - accent-color: var(--error-text) !important; -} - -#nm-uninstall-options { - display: flex; - flex-direction: column; - margin-top: 0.5rem; - margin-left: 1.5rem; -} - -#nm-uninstall-options input[type="checkbox"] { - accent-color: var(--error-text) !important; -} - -/* NickelMenu feature checkboxes */ -.nm-config-options { - display: flex; - flex-direction: column; -} - -.nm-config-item { - display: flex; - align-items: flex-start; - gap: 0.75rem; - padding: 0.6rem 0; - color: var(--text); - cursor: pointer; -} - -.nm-config-item + .nm-config-item { - border-top: 1px solid var(--border-light); -} - -.nm-config-item input[type="checkbox"] { - flex-shrink: 0; - margin-top: 0.2rem; - accent-color: var(--primary); -} - -.nm-config-item input[type="checkbox"]:disabled { - opacity: 0.6; -} - -.nm-config-text { - user-select: none; -} - -.nm-config-title { - display: block; - font-weight: 600; - font-size: 0.93rem; - color: var(--text); -} - -.nm-config-desc { - display: block; - font-size: 0.83rem; - color: var(--text-secondary); - line-height: 1.5; - margin-top: 0.1rem; -} - -.nm-option input[type="radio"] { - margin-top: 0.2rem; - flex-shrink: 0; - accent-color: var(--primary); -} - -.nm-option-title { - font-weight: 600; - font-size: 0.93rem; - color: var(--text); - margin-bottom: 0.25rem; -} - -.nm-option-desc { - font-size: 0.83rem; - color: var(--text-secondary); - line-height: 1.5; -} - -/* Steps */ -.step { - margin-bottom: 1rem; -} - -.step p { - color: var(--text-secondary); - margin-bottom: 1rem; - font-size: 0.93rem; - line-height: 1.6; -} - -/* Step action buttons (back/next) */ -.step-actions { - display: flex; - justify-content: space-between; - gap: 0.75rem; - margin-top: 1.25rem; -} - -.step-actions .primary:first-child, -.step-actions > [hidden] + .primary { - margin-left: auto; -} - -.step-actions-right { - display: flex; - gap: 0.75rem; - margin-left: auto; -} - -@media (max-width: 500px) { - .step-actions:has(.step-actions-right) { - flex-wrap: wrap; - } - - .step-actions-right { - width: 100%; - justify-content: flex-end; - } -} - -/* Buttons */ -button { - font-size: 0.9rem; - padding: 0.55rem 1.25rem; - border-radius: 8px; - border: 1px solid var(--border); - cursor: pointer; - font-weight: 500; - transition: all 0.15s ease; -} - -button.primary { - background: var(--primary); - color: #fff; - border-color: var(--primary); - box-shadow: var(--shadow); -} - -button.primary:hover { - background: var(--primary-hover); - border-color: var(--primary-hover); - box-shadow: var(--shadow-md); -} - -button.secondary { - background: var(--card-bg); - color: var(--text); - box-shadow: var(--shadow); -} - -button.secondary:hover { - background: #f9fafb; - border-color: #9ca3af; -} - -button.danger { - background: #fff; - color: var(--error-text); - border-color: var(--error-border); -} - -button.danger:hover { - background: var(--error-bg); - border-color: var(--error-text); -} - -button:disabled { - opacity: 0.4; - cursor: not-allowed; - box-shadow: none; -} - -button.btn-success, -button.btn-success:hover { - background: var(--success-text); - border-color: var(--success-text); - color: #fff; - cursor: default; - opacity: 0.7; -} - -/* Cards */ -.info-card { - background: var(--card-bg); - border: 1px solid var(--border-light); - border-radius: 10px; - padding: 0.75rem 1.25rem; - margin-bottom: 1rem; - box-shadow: var(--shadow); -} - -.info-row { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.5rem 0; - border-bottom: 1px solid var(--border-light); -} - -.info-row:last-child { - border-bottom: none; -} - -.info-row .label { - font-weight: 500; - color: var(--text-secondary); - font-size: 0.85rem; - text-transform: uppercase; - letter-spacing: 0.03em; -} - -.info-row .value { - font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace; - font-size: 0.88rem; -} - -.device-unknown-ack { - display: flex; - align-items: flex-start; - gap: 0.6rem; - padding: 0.5rem 0; - font-size: 0.83rem; - color: var(--text); - cursor: pointer; -} - -.device-unknown-ack input[type="checkbox"] { - flex-shrink: 0; - margin-top: 0.15rem; - accent-color: var(--primary); -} - -/* Status banners */ -.notice { - background: #e8f7fa; - border: 1px solid #b2e4ed; - color: #0b6e80; - padding: 0.75rem 1rem; - border-radius: 8px; - margin-bottom: 1.5rem; - font-size: 0.88rem; - line-height: 1.5; -} - -.notice-heading { - font-size: 0.7rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.04em; - margin-bottom: 0.3rem; -} - -.notice a { - color: #0b6e80; - text-decoration: underline; -} - -.warning { - background: var(--warning-bg); - border: 1px solid var(--warning-border); - color: var(--warning-text); - padding: 0.75rem 1rem; - border-radius: 8px; - margin-bottom: 1.5rem; - font-size: 0.88rem; - line-height: 1.5; -} - -.warning a { - color: var(--warning-text) !important; - text-decoration: underline !important; -} - -.error { - background: var(--error-bg); - border: 1px solid var(--error-border); - color: var(--error-text); - padding: 0.75rem 1rem; - border-radius: 8px; - font-size: 0.88rem; -} - -#error-message { - margin-top: 1rem; -} - -.status-supported { - background: var(--success-bg); - border: 1px solid var(--success-border); - color: var(--success-text); - padding: 0.65rem 1rem; - border-radius: 8px; - margin-bottom: 1rem; - font-size: 0.88rem; -} - -.status-unsupported { - background: var(--warning-bg); - border: 1px solid var(--warning-border); - color: var(--warning-text); - padding: 0.65rem 1rem; - border-radius: 8px; - margin-bottom: 1rem; - font-size: 0.88rem; -} - -/* Scrollable patch container */ -.patch-container-scroll { - max-height: 50vh; - overflow-y: auto; - border: 1px solid var(--border); - border-radius: 5px; -} - -/* Patch file sections */ -.patch-file-section { - background: var(--card-bg); - border-bottom: 1px solid var(--border-light); -} - -.patch-file-section:last-child { - border-bottom: none; -} - -.patch-file-section summary { - padding: 0.6rem 0.75rem; - cursor: pointer; - display: flex; - align-items: center; - font-weight: 500; - font-size: 0.93rem; - user-select: none; - transition: background 0.1s; - list-style: none; -} - -.patch-file-section summary::-webkit-details-marker { - display: none; -} - -.patch-file-section summary::before { - content: "\203A"; - display: inline-block; - width: 1rem; - margin-right: 0.35rem; - flex-shrink: 0; - text-align: center; - font-size: 1.1rem; - font-weight: 600; - color: var(--text-secondary); - transition: transform 0.15s ease; -} - -.patch-file-section[open] summary::before { - transform: rotate(90deg) translateX(0.1rem); -} - -.patch-file-section summary .patch-count { - margin-left: auto; -} - -.patch-file-section summary:hover { - background: #f9fafb; -} - -.patch-file-section[open] summary { - border-bottom: 1px solid var(--border-light); -} - -.patch-count { - font-weight: 400; - font-size: 0.8rem; - background: var(--primary-light); - color: var(--primary); - padding: 0.15rem 0.6rem; - border-radius: 10px; -} - -.patch-list { - padding: 0.25rem 0; -} - -.patch-item { - padding: 0.4rem 1rem; -} - -.patch-item + .patch-item { - border-top: 1px solid var(--border-light); -} - -.patch-header { - display: flex; - align-items: center; - gap: 0.5rem; - cursor: pointer; - font-size: 0.85rem; -} - -.patch-header input { - flex-shrink: 0; - accent-color: var(--primary); -} - -.patch-name { - font-weight: 500; -} - -.patch-name-none { - color: var(--text-secondary); -} - -.patch-desc-toggle { - flex-shrink: 0; - background: none; - border: none; - padding: 0 0.3rem; - font-size: 0.7rem; - color: var(--text-secondary); - cursor: pointer; - box-shadow: none; - opacity: 0.6; - transition: opacity 0.1s; -} - -.patch-desc-toggle:hover { - opacity: 1; -} - -/* Visual grouping for mutually exclusive patches */ -.patch-group { - background: #f8fafc; - border-left: 3px solid var(--primary); - margin: 0.35rem 0.5rem; - border-radius: 0 6px 6px 0; -} - -.patch-group .patch-item { - padding: 0.4rem 0.75rem; -} - -.patch-group-label { - font-size: 0.72rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.03em; - color: var(--primary); - padding: 0.45rem 0.75rem 0; -} - -.step .patch-description { - margin-top: 0.3rem; - margin-left: 1.6rem; - margin-bottom: 0; - font-size: 0.72rem; - color: var(--text-secondary); - white-space: pre-line; - line-height: 1.4; - padding: 0.25rem 0; -} - -.patch-description[hidden] { - display: none; -} - -/* Firmware input */ -input[type="file"] { - display: block; - margin-bottom: 1rem; - font-size: 0.88rem; -} - -#build-actions { - display: flex; - justify-content: space-between; - gap: 0.75rem; - margin-top: 1.25rem; -} - -/* Build header (spinner + progress text) */ -.build-header { - display: flex; - align-items: center; - gap: 0.75rem; - margin-bottom: 0.25rem; -} - -.build-header p { - margin-bottom: 0; - font-weight: 500; - color: var(--text); -} - -/* Spinner */ -.spinner { - width: 22px; - height: 22px; - border: 2.5px solid var(--border-light); - border-top-color: var(--primary); - border-radius: 50%; - animation: spin 0.7s linear infinite; - flex-shrink: 0; -} - -/* Also defined in critical.css (inlined into ) for the pre-CSS loading spinner */ -@keyframes spin { - to { transform: rotate(360deg); } -} - -/* Build log terminal */ -.build-log { - margin-top: 0.75rem; - padding: 0.75rem 1rem; - background: #0f172a; - color: #94a3b8; - border-radius: 6px; - font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace; - font-size: 0.73rem; - white-space: pre-wrap; - height: calc(10 * 1.5em + 1.5rem); - overflow-y: auto; - line-height: 1.5; -} - -/* Collapsible log on install step */ -.log-details { - margin-top: 0.5rem; - margin-bottom: 0.25rem; -} - -.log-details summary { - font-size: 0.83rem; - color: var(--text-secondary); - cursor: pointer; - padding: 0.25rem 0; -} - -.log-details summary:hover { - color: var(--text); -} - -/* Done screen log is shorter */ -.done-log { - height: calc(7 * 1.5em + 1.5rem); -} - -.step .hint { - margin-top: 1rem; - padding: 0.65rem 1rem; - background: var(--success-bg); - border: 1px solid var(--success-border); - color: var(--success-text); - border-radius: 8px; - font-size: 0.88rem; -} - -.restart-hint { - margin-top: 1.5rem; - font-size: 0.78rem; - color: var(--text-muted); -} - -.error-log { - margin-top: 0.75rem; - padding: 0.75rem 1rem; - background: #0f172a; - color: #e2e8f0; - border-radius: 6px; - font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace; - font-size: 0.78rem; - white-space: pre-wrap; - max-height: 300px; - overflow-y: auto; -} - -.step a { - color: var(--primary); - text-decoration: none; -} - -.step a:hover { - text-decoration: underline; -} - -.step .fallback-hint { - margin-top: 0.5rem; - margin-bottom: 1rem; - font-size: 0.78rem; - color: var(--text-secondary); - line-height: 1.5; -} - -select + .fallback-hint { - margin-top: -0.5rem; -} - -/* Install summary */ -.step .install-summary { - font-size: 0.93rem; - color: var(--text); - line-height: 1.6; - margin-bottom: 0.5rem; -} - -/* Install instructions */ -.install-instructions { - margin-top: 1rem; - background: var(--card-bg); - border: 1px solid var(--border-light); - border-radius: 10px; - padding: 1rem 1.25rem; -} - -.install-instructions .warning { - margin-bottom: 0.75rem; -} - -.step .install-instructions .hint { - margin-top: 0; -} - -/* Connection instruction steps with numbered accent circles */ -.connect-steps { - list-style: none; - margin: 0.5rem 0 1rem; - padding-left: 2.35rem; - counter-reset: connect-step; -} - -.connect-steps li { - padding: 0.4rem 0; - font-size: 0.88rem; - color: var(--text-secondary); - line-height: 1.6; - counter-increment: connect-step; - position: relative; -} - -.connect-steps li::before { - content: counter(connect-step); - display: inline-flex; - align-items: center; - justify-content: center; - width: 1.6rem; - height: 1.6rem; - border-radius: 50%; - background: var(--primary); - color: #fff; - font-size: 0.78rem; - font-weight: 700; - line-height: 1; - position: absolute; - left: -2.35rem; - top: calc(0.55rem - 4px); -} - -.install-steps { - margin: 0.25rem 0 0 1.25rem; - font-size: 0.88rem; - color: var(--text-secondary); - line-height: 1.7; -} - -.install-steps li { - padding: 0.15rem 0; -} - -.install-steps code { - display: inline-block; - background: var(--bg); - border: 1px solid var(--border-light); - border-radius: 4px; - padding: 0.15rem 0.4rem; - font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace; - font-size: 0.82rem; - word-break: break-all; -} - -.step .info-banner { - background: var(--primary-light); - border: 1px solid #bfdbfe; - color: #1e40af; - padding: 0.6rem 1rem; - border-radius: 8px; - font-size: 0.83rem; - margin-bottom: 1rem; -} - -/* Selected patches summary on build step */ -.selected-patches-list { - margin: 0 0 0.75rem; - padding: 0.6rem 1rem 0.6rem 2rem; - font-size: 0.85rem; - color: var(--text-secondary); - line-height: 1.7; - background: var(--card-bg); - border: 1px solid var(--border-light); - border-radius: 10px; - box-shadow: var(--shadow); -} - -.selected-patches-list li { - padding: 0.1rem 0; -} - -#firmware-download-url { - display: inline-block; - margin: 0.4rem 0; - padding: 0.3rem 0.6rem; - font-size: 0.7rem; - word-break: break-all; - color: #64748b; - background: #f1f5f9; - border: 1px solid #e2e8f0; - border-radius: 4px; -} - -#firmware-verify-notice { - font-size: 12px; -} - -[hidden] { - display: none !important; -} - -select { - display: block; - width: 100%; - padding: 0.5rem 0.75rem; - font-size: 0.93rem; - border: 1px solid var(--border); - border-radius: 8px; - background: var(--card-bg); - color: var(--text); - 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; -} - -/* Footer */ -.site-footer { - max-width: 640px; - margin: 0 auto; - padding: 1.5rem 1.5rem 2rem; - border-top: 1px solid var(--border-light); - text-align: center; - font-size: 0.8rem; - color: var(--text-secondary); -} - -.site-footer a { - color: var(--text-secondary); - text-decoration: underline; -} - -.site-footer a.site-footer-link { - color: var(--primary); -} - -.site-footer p { - margin-bottom: 0.75rem; -} - -.site-footer p:last-child { - margin-bottom: 0; -} - -.site-footer-attribution { - font-size: 0.7rem; -} - -.site-footer a:hover { - color: var(--text); -} - -/* Modal dialog */ -.modal { - border: none; - border-radius: 12px; - padding: 0; - max-width: 560px; - width: calc(100% - 2rem); - max-height: 80vh; - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - margin: 0; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05); -} - -.modal::backdrop { - background: rgba(0, 0, 0, 0.4); -} - -.modal-content { - display: flex; - flex-direction: column; - max-height: 80vh; -} - -.modal-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 1rem 1.25rem; - border-bottom: 1px solid var(--border-light); - flex-shrink: 0; -} - -.modal-header h2 { - margin-bottom: 0; - font-size: 1rem; -} - -.modal-close { - background: none; - border: none; - font-size: 1.4rem; - color: var(--text-secondary); - cursor: pointer; - padding: 0 0.25rem; - line-height: 1; - box-shadow: none; -} - -.modal-close:hover { - color: var(--text); -} - -.modal-body { - padding: 1.25rem; - overflow-y: auto; - font-size: 0.88rem; - color: var(--text-secondary); - line-height: 1.7; -} - -.modal-body h3 { - font-size: 0.88rem; - font-weight: 600; - color: var(--text); - margin-top: 1.25rem; - margin-bottom: 0.5rem; -} - -.modal-body p { - margin-bottom: 0.75rem; -} - -.modal-body ol, -.modal-body ul { - margin: 0 0 0.75rem 1.25rem; -} - -.modal-body li { - margin-bottom: 0.5rem; -} - -.modal-footer { - padding: 1rem 1.25rem; - border-top: 1px solid var(--border-light); - display: flex; - justify-content: flex-end; -} - -.modal-body a { - color: var(--primary); - text-decoration: none; -} - -.modal-body a:hover { - text-decoration: underline; -} - -.modal-body code { - font-size: 0.8rem; - background: #f1f5f9; - padding: 0.1rem 0.35rem; - border-radius: 3px; -} + inlined into at build time — do not redefine them here. + + This file is a manifest of @imports resolved by esbuild at build time. + The output is a single concatenated CSS file. */ + +@import './base.css'; +@import './components/banner.css'; +@import './components/selection-card.css'; +@import './components/button.css'; +@import './components/info-card.css'; +@import './components/step-nav.css'; +@import './components/modal.css'; +@import './layout/hero.css'; +@import './layout/steps.css'; +@import './layout/footer.css'; +@import './features/device.css'; +@import './features/patches.css'; +@import './features/build.css'; +@import './features/nickelmenu.css'; +@import './features/install.css'; diff --git a/web/src/index.html b/web/src/index.html index dca4d43..f0ee802 100644 --- a/web/src/index.html +++ b/web/src/index.html @@ -79,27 +79,27 @@