jgamboa/miniSCP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adopt Oxide's color scheme and a square design

Browse Source 
The palette now follows Oxide's design system (docs.oxide.computer): a cool
neutral scale at hue 260 with almost no chroma, opaque strokes, and Oxide's
green as the only accent. The accent-color option is gone: selection, the
cursor row, focus rings and the active-panel line all read green.

The file panel's header strip now steps toward the list, one shade per row
(session strip, path bar, column headers), derived by color-mix so every
theme, AMOLED included, follows on its own.

Everything is square: every rounded utility and the radius tokens are gone,
and checkboxes, radios, selects, number spinners and scrollbars are
restyled to match (square scrollbars are always visible on macOS, the cost
of styling them).

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
jgamboa
2026-10-05 10:21:50 +02:00
co-authored by Claude
parent 318760efa6
commit bfc2147c77
30 changed files with 372 additions and 475 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/app/core/settings.service.ts
-21
View File
@@ -9,7 +9,6 @@ export class SettingsService {
readonly locale = signal<AppSettings['locale']>(DEFAULT_SETTINGS.locale);
readonly theme = signal<AppSettings['theme']>(DEFAULT_SETTINGS.theme);
readonly darkTone = signal<AppSettings['darkTone']>(DEFAULT_SETTINGS.darkTone);
readonly accent = signal<AppSettings['accent']>(DEFAULT_SETTINGS.accent);
readonly columns = signal<ColumnKey[]>(DEFAULT_SETTINGS.columns);
readonly speedUnit = signal<AppSettings['speedUnit']>(DEFAULT_SETTINGS.speedUnit);
readonly uiScale = signal<number>(DEFAULT_SETTINGS.uiScale);
@@ -37,8 +36,6 @@ export class SettingsService {
window
.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', (e) => this.systemDark.set(e.matches));
// the default accent is not the CSS default — apply before first paint
this.applyAccent();
if (!this.rpc.available) return;
void this.rpc.request.getSettings({}).then((res) => {
if (res.ok) this.applyAll(res.settings);
@@ -51,7 +48,6 @@ export class SettingsService {
this.locale.set(settings.locale);
this.theme.set(settings.theme);
this.darkTone.set(settings.darkTone);
this.accent.set(settings.accent);
this.columns.set(settings.columns);
this.speedUnit.set(settings.speedUnit);
this.uiScale.set(settings.uiScale);
@@ -62,7 +58,6 @@ export class SettingsService {
this.editorApp.set(settings.editorApp);
this.applyTheme();
this.applyDarkTone();
this.applyAccent();
this.applyUiScale();
this.applyLocale();
}
@@ -85,12 +80,6 @@ export class SettingsService {
void this.persist();
}
setAccent(tone: AppSettings['accent']): void {
this.accent.set(tone);
this.applyAccent();
void this.persist();
}
toggleColumn(key: ColumnKey): void {
this.columns.update((list) =>
list.includes(key) ? list.filter((c) => c !== key) : [...list, key],
@@ -152,15 +141,6 @@ export class SettingsService {
}
}
private applyAccent(): void {
const tone = this.accent();
if (tone === 'graphite') {
delete document.documentElement.dataset['accent'];
} else {
document.documentElement.dataset['accent'] = tone;
}
}
/** The whole interface scale is ONE declaration: every size in the app is
* rem, so moving the root font-size moves the whole UI. 1 = the
* browser-default 16px root; delete-when-default keeps the pristine state
@@ -184,7 +164,6 @@ export class SettingsService {
locale: this.locale(),
theme: this.theme(),
darkTone: this.darkTone(),
accent: this.accent(),
columns: this.columns(),
speedUnit: this.speedUnit(),
uiScale: this.uiScale(),
ui/src/app/skins/shadlike/app.html
+3 -3
View File
@@ -1,7 +1,7 @@
<div class="flex h-screen flex-col bg-background text-foreground">
@if (!rpc.available) {
<div class="flex flex-1 items-center justify-center">
<div class="max-w-sm rounded-lg border border-border bg-card p-6 text-center shadow-sm">
<div class="max-w-sm border border-border bg-card p-6 text-center shadow-sm">
<ng-icon name="tdesignCloseCircle" size="1.5rem" class="text-destructive" />
<p class="mt-2 text-sm font-medium">{{ i18n.t('app.notConnectedTitle') }}</p>
<p class="mt-1 text-xs text-muted-foreground">
@@ -27,11 +27,11 @@
class="fixed inset-0 z-60 flex items-center justify-center bg-black/40"
(mousedown)="focusManager()"
>
<div class="rounded-lg border border-border bg-card px-5 py-4 text-center shadow-xl">
<div class="border border-border bg-card px-5 py-4 text-center shadow-xl">
<ng-icon name="tdesignServer" size="1.25rem" class="text-muted-foreground" />
<p class="mt-1.5 text-xs text-muted-foreground">{{ i18n.t('app.managerOpen') }}</p>
<button
class="mt-3 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90"
class="mt-3 bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90"
>
{{ i18n.t('app.showConnections') }}
</button>
ui/src/app/skins/shadlike/connection-manager/connection-manager.html
+23 -26
View File
@@ -16,7 +16,7 @@
(click)="importWinScp()"
[disabled]="importing()"
[title]="i18n.t('connMgr.importWinscpHint')"
class="flex items-center gap-1.5 rounded-md px-2 py-1 text-[0.6875rem] text-muted-foreground electrobun-webkit-app-region-no-drag hover:bg-accent hover:text-foreground disabled:opacity-50"
class="flex items-center gap-1.5 px-2 py-1 text-[0.6875rem] text-muted-foreground electrobun-webkit-app-region-no-drag hover:bg-accent hover:text-foreground disabled:opacity-50"
>
@if (importing()) {
<ng-icon name="tdesignLoading" size="0.85rem" class="animate-spin" />
@@ -34,14 +34,14 @@
<button
(click)="newConnection()"
[title]="i18n.t('connMgr.newConnectionHint')"
class="flex items-center gap-1 rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
class="flex items-center gap-1 px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
>
<ng-icon name="tdesignAdd" size="0.85rem" /> {{ i18n.t('connMgr.newConnection') }}
</button>
<button
(click)="newStack()"
[title]="i18n.t('connMgr.newStackHint')"
class="flex items-center gap-1 rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
class="flex items-center gap-1 px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
>
<ng-icon name="tdesignFolderAdd" size="0.85rem" /> {{ i18n.t('connMgr.newStack') }}
</button>
@@ -54,7 +54,6 @@
(dragover)="onDragOver($event, group.stack.id)"
(dragleave)="dropTarget() === group.stack.id && dropTarget.set(null)"
(drop)="onDrop($event, group.stack.id)"
class="rounded-md"
[class.bg-primary/10]="dropTarget() === group.stack.id"
[class.ring-1]="dropTarget() === group.stack.id"
[class.ring-inset]="dropTarget() === group.stack.id"
@@ -63,7 +62,7 @@
<div class="group flex items-center gap-1 px-2 pt-2 pb-0.5">
<button
(click)="toggleStack(group.stack)"
class="grid size-4 shrink-0 place-items-center rounded text-muted-foreground hover:text-foreground"
class="grid size-4 shrink-0 place-items-center text-muted-foreground hover:text-foreground"
[title]="group.stack.collapsed ? i18n.t('connMgr.expand') : i18n.t('connMgr.collapse')"
>
<ng-icon
@@ -86,14 +85,14 @@
<button
(click)="renameStack(group.stack)"
[title]="i18n.t('connMgr.renameStack')"
class="grid size-4 place-items-center rounded text-muted-foreground hover:text-foreground"
class="grid size-4 place-items-center text-muted-foreground hover:text-foreground"
>
<ng-icon name="tdesignEdit" size="0.75rem" />
</button>
<button
(click)="deleteStack(group.stack)"
[title]="i18n.t('connMgr.deleteStack')"
class="grid size-4 place-items-center rounded text-muted-foreground hover:text-destructive"
class="grid size-4 place-items-center text-muted-foreground hover:text-destructive"
>
<ng-icon name="tdesignDelete" size="0.75rem" />
</button>
@@ -101,7 +100,7 @@
<button
(click)="openStack(group.stack.id)"
[title]="i18n.t('connMgr.openStack')"
class="grid size-4 place-items-center rounded text-muted-foreground hover:text-primary"
class="grid size-4 place-items-center text-muted-foreground hover:text-primary"
>
<ng-icon name="tdesignArrowRight" size="0.8rem" />
</button>
@@ -134,7 +133,7 @@
(dragover)="onDragOver($event, 'loose')"
(dragleave)="dropTarget() === 'loose' && dropTarget.set(null)"
(drop)="onDrop($event, null)"
class="min-h-8 rounded-md pb-1"
class="min-h-8 pb-1"
[class.bg-primary/10]="dropTarget() === 'loose'"
[class.ring-1]="dropTarget() === 'loose'"
[class.ring-inset]="dropTarget() === 'loose'"
@@ -183,7 +182,7 @@
(input)="patch('name', $any($event.target).value)"
[placeholder]="i18n.t('connMgr.namePlaceholder')"
spellcheck="false"
class="h-7 rounded-md border border-input bg-transparent px-2 outline-none focus:ring-2 focus:ring-ring"
class="h-7 border border-input bg-transparent px-2 outline-none focus:ring-2 focus:ring-ring"
/>
</label>
@@ -194,7 +193,7 @@
(input)="patch('host', $any($event.target).value)"
placeholder="192.168.1.10"
spellcheck="false"
class="h-7 rounded-md border border-input bg-transparent px-2 font-mono outline-none focus:ring-2 focus:ring-ring"
class="h-7 border border-input bg-transparent px-2 font-mono outline-none focus:ring-2 focus:ring-ring"
/>
</label>
<div class="grid grid-cols-2 gap-3">
@@ -204,14 +203,14 @@
type="number"
[value]="d.port"
(input)="patch('port', +$any($event.target).value)"
class="h-7 rounded-md border border-input bg-transparent px-2 font-mono outline-none focus:ring-2 focus:ring-ring"
class="h-7 border border-input bg-transparent px-2 font-mono outline-none focus:ring-2 focus:ring-ring"
/>
</label>
<label class="flex flex-col gap-1 text-xs">
<span class="text-muted-foreground">{{ i18n.t('connMgr.stack') }}</span>
<select
(change)="patch('stackId', $any($event.target).value || null)"
class="h-7 rounded-md border border-input bg-background px-1 outline-none focus:ring-2 focus:ring-ring"
class="h-7 border border-input bg-background pl-1 outline-none focus:ring-2 focus:ring-ring"
>
<!-- [selected] per option: binding [value] on the <select> runs
before the options render and silently shows "(none)" -->
@@ -231,7 +230,7 @@
[value]="d.username"
(input)="patch('username', $any($event.target).value)"
spellcheck="false"
class="h-7 rounded-md border border-input bg-transparent px-2 font-mono outline-none focus:ring-2 focus:ring-ring"
class="h-7 border border-input bg-transparent px-2 font-mono outline-none focus:ring-2 focus:ring-ring"
/>
</label>
<label class="flex flex-col gap-1 text-xs">
@@ -241,7 +240,7 @@
(input)="patch('initialPath', $any($event.target).value)"
[placeholder]="i18n.t('connMgr.remotePathPlaceholder')"
spellcheck="false"
class="h-7 rounded-md border border-input bg-transparent px-2 font-mono outline-none focus:ring-2 focus:ring-ring"
class="h-7 border border-input bg-transparent px-2 font-mono outline-none focus:ring-2 focus:ring-ring"
/>
</label>
@@ -253,7 +252,6 @@
name="authKind"
[checked]="d.authKind === 'password'"
(change)="patch('authKind', 'password')"
class="accent-primary"
/>
{{ i18n.t('connMgr.authPassword') }}
</label>
@@ -263,7 +261,6 @@
name="authKind"
[checked]="d.authKind === 'key'"
(change)="patch('authKind', 'key')"
class="accent-primary"
/>
{{ i18n.t('connMgr.authKey') }}
</label>
@@ -276,7 +273,7 @@
type="password"
[value]="d.password"
(input)="patch('password', $any($event.target).value)"
class="h-7 rounded-md border border-input bg-transparent px-2 outline-none focus:ring-2 focus:ring-ring"
class="h-7 border border-input bg-transparent px-2 outline-none focus:ring-2 focus:ring-ring"
/>
</label>
} @else {
@@ -288,12 +285,12 @@
(input)="patch('privateKeyPath', $any($event.target).value)"
placeholder="~/.ssh/id_ed25519"
spellcheck="false"
class="h-7 min-w-0 flex-1 rounded-md border border-input bg-transparent px-2 font-mono outline-none focus:ring-2 focus:ring-ring"
class="h-7 min-w-0 flex-1 border border-input bg-transparent px-2 font-mono outline-none focus:ring-2 focus:ring-ring"
/>
<button
type="button"
(click)="pickKeyFile()"
class="h-7 shrink-0 rounded-md border border-border px-2 text-[0.6875rem] hover:bg-accent"
class="h-7 shrink-0 border border-border px-2 text-[0.6875rem] hover:bg-accent"
>
{{ i18n.t('common.choose') }}
</button>
@@ -305,7 +302,7 @@
type="password"
[value]="d.passphrase"
(input)="patch('passphrase', $any($event.target).value)"
class="h-7 rounded-md border border-input bg-transparent px-2 outline-none focus:ring-2 focus:ring-ring"
class="h-7 border border-input bg-transparent px-2 outline-none focus:ring-2 focus:ring-ring"
/>
</label>
}
@@ -318,7 +315,7 @@
(input)="patch('localDir', $any($event.target).value)"
[placeholder]="i18n.t('connMgr.localDirPlaceholder')"
spellcheck="false"
class="h-7 rounded-md border border-input bg-transparent px-2 font-mono outline-none focus:ring-2 focus:ring-ring"
class="h-7 border border-input bg-transparent px-2 font-mono outline-none focus:ring-2 focus:ring-ring"
/>
<span class="text-[0.625rem] text-muted-foreground/80">
{{ i18n.t('connMgr.localDirHint') }}
@@ -330,13 +327,13 @@
<div class="flex items-center gap-2 border-t border-border bg-chrome px-4 py-2.5">
<button
(click)="deleteCurrent()"
class="flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-destructive"
class="flex items-center gap-1.5 px-2 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-destructive"
>
<ng-icon name="tdesignDelete" size="0.85rem" /> {{ i18n.t('common.delete') }}
</button>
<button
(click)="moreOpen.set(!moreOpen())"
class="rounded-md border border-border px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
class="border border-border px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
>
{{ moreOpen() ? i18n.t('connMgr.less') : i18n.t('connMgr.more') }}
</button>
@@ -344,14 +341,14 @@
<button
(click)="save()"
[disabled]="!valid()"
class="rounded-md px-3 py-1.5 text-xs font-medium hover:bg-accent disabled:opacity-50"
class="px-3 py-1.5 text-xs font-medium hover:bg-accent disabled:opacity-50"
>
{{ i18n.t('common.save') }}
</button>
<button
(click)="saveAndConnect()"
[disabled]="!valid() || busy()"
class="flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
class="flex items-center gap-1.5 bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
>
@if (busy()) {
<ng-icon name="tdesignLoading" size="0.85rem" class="animate-spin" />
ui/src/app/skins/shadlike/context-menu.ts
+1 -1
View File
@@ -43,7 +43,7 @@ const EDGE_GAP = 6; // px on purpose: a viewport-edge margin, not a UI size
(keydown)="onKeydown($event)"
[style.left.px]="position().x"
[style.top.px]="position().y"
class="fixed z-50 w-56 rounded-lg border border-border bg-card py-1 text-card-foreground shadow-xl outline-none"
class="fixed z-50 w-56 border border-border bg-card py-1 text-card-foreground shadow-xl outline-none"
>
@for (item of req.items; track $index) {
@if (item.type === 'separator') {
ui/src/app/skins/shadlike/dialogs/chmod-dialog.ts
+5 -5
View File
@@ -11,7 +11,7 @@ const PERMS = ['r', 'w', 'x'] as const;
template: `
<div class="fixed inset-0 z-40 grid place-items-center bg-black/40" (mousedown)="cancel()">
<div
class="w-80 rounded-lg border border-border bg-card p-4 text-card-foreground shadow-xl"
class="w-80 border border-border bg-card p-4 text-card-foreground shadow-xl"
(mousedown)="$event.stopPropagation()"
(keydown.escape)="cancel()"
>
@@ -37,7 +37,7 @@ const PERMS = ['r', 'w', 'x'] as const;
type="checkbox"
[checked]="hasBit(r, p)"
(change)="toggleBit(r, p)"
class="size-3.5 accent-primary"
class="size-3.5"
/>
</td>
}
@@ -53,20 +53,20 @@ const PERMS = ['r', 'w', 'x'] as const;
(input)="setOctal($any($event.target).value)"
maxlength="4"
spellcheck="false"
class="h-7 w-20 rounded-md border border-input bg-transparent px-2 font-mono text-xs outline-none focus:ring-2 focus:ring-ring"
class="h-7 w-20 border border-input bg-transparent px-2 font-mono text-xs outline-none focus:ring-2 focus:ring-ring"
/>
</div>
<div class="mt-4 flex justify-end gap-2">
<button
(click)="cancel()"
class="rounded-md px-3 py-1.5 text-xs font-medium hover:bg-accent"
class="px-3 py-1.5 text-xs font-medium hover:bg-accent"
>
{{ i18n.t('common.cancel') }}
</button>
<button
(click)="submit()"
class="rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90"
class="bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90"
>
{{ i18n.t('common.apply') }}
</button>
ui/src/app/skins/shadlike/dialogs/confirm-dialog.ts
+4 -4
View File
@@ -8,7 +8,7 @@ import { FocusService } from '@core/focus.service';
template: `
<div class="fixed inset-0 z-40 grid place-items-center bg-black/40" (mousedown)="cancel()">
<div
class="w-96 rounded-lg border border-border bg-card p-4 text-card-foreground shadow-xl"
class="w-96 border border-border bg-card p-4 text-card-foreground shadow-xl"
(mousedown)="$event.stopPropagation()"
(keydown.escape)="cancel()"
>
@@ -17,7 +17,7 @@ import { FocusService } from '@core/focus.service';
<div class="mt-4 flex justify-end gap-2">
<button
(click)="cancel()"
class="rounded-md px-3 py-1.5 text-xs font-medium hover:bg-accent"
class="px-3 py-1.5 text-xs font-medium hover:bg-accent"
>
{{ i18n.t('common.cancel') }}
</button>
@@ -26,8 +26,8 @@ import { FocusService } from '@core/focus.service';
(click)="submit()"
[class]="
request().destructive
? 'rounded-md bg-destructive px-3 py-1.5 text-xs font-medium text-destructive-foreground hover:bg-destructive/90'
: 'rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90'
? 'bg-destructive px-3 py-1.5 text-xs font-medium text-destructive-foreground hover:bg-destructive/90'
: 'bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90'
"
>
{{ request().confirmLabel }}
ui/src/app/skins/shadlike/dialogs/overwrite-dialog.ts
+9 -9
View File
@@ -21,7 +21,7 @@ import { FocusService } from '@core/focus.service';
(keydown.escape)="pick('cancel')"
>
<div
class="w-[26rem] rounded-lg border border-border bg-card p-4 text-card-foreground shadow-xl"
class="w-[26rem] border border-border bg-card p-4 text-card-foreground shadow-xl"
>
<div class="flex items-start justify-between gap-2">
<h2 class="min-w-0 text-sm font-semibold">
@@ -30,7 +30,7 @@ import { FocusService } from '@core/focus.service';
</h2>
@if (request().total > 1) {
<span
class="shrink-0 rounded-full bg-muted px-2 py-0.5 text-[0.625rem] font-medium text-muted-foreground"
class="shrink-0 bg-muted px-2 py-0.5 text-[0.625rem] font-medium text-muted-foreground"
>
{{ i18n.t('dialogs.ofTotal', { index: request().index, total: request().total }) }}
</span>
@@ -47,13 +47,13 @@ import { FocusService } from '@core/focus.service';
<!-- comparison -->
<div class="mt-3 grid grid-cols-2 gap-2">
@for (side of comparison(); track side.label) {
<div class="rounded-md border border-border p-2.5">
<div class="border border-border p-2.5">
<div class="flex items-center justify-between">
<span class="text-[0.625rem] font-medium tracking-wide text-muted-foreground uppercase">
{{ i18n.t('dialogs.' + side.label) }}
</span>
@if (side.newer) {
<span class="rounded-full bg-success/15 px-1.5 text-[0.625rem] font-medium text-success">
<span class="bg-success/15 px-1.5 text-[0.625rem] font-medium text-success">
{{ i18n.t('dialogs.newer') }}
</span>
}
@@ -79,7 +79,7 @@ import { FocusService } from '@core/focus.service';
<div class="mt-4 flex items-center gap-2">
<button
(click)="pick('cancel')"
class="rounded-md px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
class="px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
>
{{ i18n.t('common.cancel') }}
</button>
@@ -87,13 +87,13 @@ import { FocusService } from '@core/focus.service';
@if (request().total > 1) {
<button
(click)="pick('skipAll')"
class="rounded-md px-2.5 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
class="px-2.5 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
>
{{ i18n.t('dialogs.skipAll') }}
</button>
<button
(click)="pick('overwriteAll')"
class="rounded-md px-2.5 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
class="px-2.5 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
>
{{ isDir() ? i18n.t('dialogs.mergeAll') : i18n.t('dialogs.replaceAll') }}
</button>
@@ -101,14 +101,14 @@ import { FocusService } from '@core/focus.service';
}
<button
(click)="pick('skip')"
class="rounded-md px-3 py-1.5 text-xs font-medium hover:bg-accent"
class="px-3 py-1.5 text-xs font-medium hover:bg-accent"
>
{{ i18n.t('dialogs.skip') }}
</button>
<button
#primaryBtn
(click)="pick('overwrite')"
class="rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90"
class="bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90"
>
{{ isDir() ? i18n.t('dialogs.merge') : i18n.t('dialogs.replace') }}
</button>
ui/src/app/skins/shadlike/dialogs/prompt-dialog.ts
+4 -4
View File
@@ -16,7 +16,7 @@ import { FocusService } from '@core/focus.service';
template: `
<div class="fixed inset-0 z-40 grid place-items-center bg-black/40" (mousedown)="cancel()">
<div
class="w-96 rounded-lg border border-border bg-card p-4 text-card-foreground shadow-xl"
class="w-96 border border-border bg-card p-4 text-card-foreground shadow-xl"
(mousedown)="$event.stopPropagation()"
>
<h2 class="text-sm font-semibold">{{ request().title }}</h2>
@@ -28,19 +28,19 @@ import { FocusService } from '@core/focus.service';
(keydown.escape)="cancel()"
[placeholder]="request().placeholder ?? ''"
spellcheck="false"
class="mt-3 h-8 w-full rounded-md border border-input bg-transparent px-2 text-sm outline-none focus:ring-2 focus:ring-ring"
class="mt-3 h-8 w-full border border-input bg-transparent px-2 text-sm outline-none focus:ring-2 focus:ring-ring"
/>
<div class="mt-4 flex justify-end gap-2">
<button
(click)="cancel()"
class="rounded-md px-3 py-1.5 text-xs font-medium hover:bg-accent"
class="px-3 py-1.5 text-xs font-medium hover:bg-accent"
>
{{ i18n.t('common.cancel') }}
</button>
<button
(click)="submit()"
[disabled]="!value().trim()"
class="rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
class="bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
>
{{ request().confirmLabel }}
</button>
ui/src/app/skins/shadlike/editor-window/editor-window.html
+15 -15
View File
@@ -1,7 +1,7 @@
<div class="flex h-screen flex-col bg-background text-foreground">
@if (!ctx) {
<div class="flex flex-1 items-center justify-center">
<div class="max-w-sm rounded-lg border border-border bg-card p-6 text-center shadow-sm">
<div class="max-w-sm border border-border bg-card p-6 text-center shadow-sm">
<ng-icon name="tdesignCloseCircle" size="1.5rem" class="text-destructive" />
<p class="mt-2 text-sm font-medium">{{ i18n.t('editor.noFileTitle') }}</p>
<p class="mt-1 text-xs text-muted-foreground">
@@ -29,7 +29,7 @@
<button
(click)="toggleWrap()"
[title]="i18n.t('editor.wrapHint', { alt: altLabel })"
class="rounded-md px-2 py-1 text-[0.6875rem] electrobun-webkit-app-region-no-drag hover:bg-accent"
class="px-2 py-1 text-[0.6875rem] electrobun-webkit-app-region-no-drag hover:bg-accent"
[class.bg-accent]="wrap()"
[class.text-foreground]="wrap()"
[class.text-muted-foreground]="!wrap()"
@@ -39,7 +39,7 @@
<button
(click)="openFind()"
[title]="i18n.t('editor.findHint', { mod: modLabel })"
class="grid size-6 place-items-center rounded-md text-muted-foreground electrobun-webkit-app-region-no-drag hover:bg-accent hover:text-foreground"
class="grid size-6 place-items-center text-muted-foreground electrobun-webkit-app-region-no-drag hover:bg-accent hover:text-foreground"
>
<ng-icon name="tdesignSearch" size="0.85rem" />
</button>
@@ -55,7 +55,7 @@
(keydown)="onFindKeydown($event)"
[placeholder]="i18n.t('editor.findPlaceholder')"
spellcheck="false"
class="h-6 w-56 rounded-md border border-input bg-transparent px-2 text-xs outline-none focus:ring-2 focus:ring-ring"
class="h-6 w-56 border border-input bg-transparent px-2 text-xs outline-none focus:ring-2 focus:ring-ring"
/>
<span
class="text-[0.6875rem] tabular-nums"
@@ -67,14 +67,14 @@
<button
(click)="findStep(-1)"
[title]="i18n.t('editor.prevMatch')"
class="grid size-5 place-items-center rounded text-muted-foreground hover:bg-accent hover:text-foreground"
class="grid size-5 place-items-center text-muted-foreground hover:bg-accent hover:text-foreground"
>
<ng-icon name="tdesignChevronUp" size="0.8rem" />
</button>
<button
(click)="findStep(1)"
[title]="i18n.t('editor.nextMatch')"
class="grid size-5 place-items-center rounded text-muted-foreground hover:bg-accent hover:text-foreground"
class="grid size-5 place-items-center text-muted-foreground hover:bg-accent hover:text-foreground"
>
<ng-icon name="tdesignChevronDown" size="0.8rem" />
</button>
@@ -82,7 +82,7 @@
<button
(click)="closeFind()"
[title]="i18n.t('editor.closeHint')"
class="grid size-5 place-items-center rounded text-muted-foreground hover:bg-accent hover:text-foreground"
class="grid size-5 place-items-center text-muted-foreground hover:bg-accent hover:text-foreground"
>
<ng-icon name="tdesignClose" size="0.8rem" />
</button>
@@ -104,13 +104,13 @@
</div>
} @else if (loadError(); as error) {
<div class="flex flex-1 items-center justify-center">
<div class="max-w-md rounded-lg border border-border bg-card p-6 text-center shadow-sm">
<div class="max-w-md border border-border bg-card p-6 text-center shadow-sm">
<ng-icon name="tdesignCloseCircle" size="1.5rem" class="text-destructive" />
<p class="mt-2 text-sm font-medium">{{ i18n.t('editor.cantOpen', { name: ctx.name }) }}</p>
<p class="mt-1 text-xs text-muted-foreground">{{ error }}</p>
<button
(click)="discardAndClose()"
class="mt-4 rounded-md border border-border px-3 py-1.5 text-xs font-medium hover:bg-accent"
class="mt-4 border border-border px-3 py-1.5 text-xs font-medium hover:bg-accent"
>
{{ i18n.t('editor.closeWindow') }}
</button>
@@ -149,14 +149,14 @@
<div class="flex-1"></div>
<button
(click)="requestClose()"
class="rounded-md px-3 py-1.5 text-xs font-medium hover:bg-accent"
class="px-3 py-1.5 text-xs font-medium hover:bg-accent"
>
{{ i18n.t('editor.close') }}
</button>
<button
(click)="save()"
[disabled]="saving() || !dirty()"
class="flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
class="flex items-center gap-1.5 bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
>
@if (saving()) {
<ng-icon name="tdesignLoading" size="0.85rem" class="animate-spin" />
@@ -171,7 +171,7 @@
@if (closePrompt()) {
<div class="fixed inset-0 z-40 grid place-items-center bg-black/40" (mousedown)="cancelClose()">
<div
class="w-96 rounded-lg border border-border bg-card p-4 text-card-foreground shadow-xl"
class="w-96 border border-border bg-card p-4 text-card-foreground shadow-xl"
(mousedown)="$event.stopPropagation()"
>
<h2 class="text-sm font-semibold">{{ i18n.t('editor.saveChangesTitle', { name: ctx.name }) }}</h2>
@@ -181,21 +181,21 @@
<div class="mt-4 flex items-center gap-2">
<button
(click)="discardAndClose()"
class="rounded-md px-3 py-1.5 text-xs font-medium text-destructive hover:bg-accent"
class="px-3 py-1.5 text-xs font-medium text-destructive hover:bg-accent"
>
{{ i18n.t('editor.dontSave') }}
</button>
<div class="flex-1"></div>
<button
(click)="cancelClose()"
class="rounded-md px-3 py-1.5 text-xs font-medium hover:bg-accent"
class="px-3 py-1.5 text-xs font-medium hover:bg-accent"
>
{{ i18n.t('common.cancel') }}
</button>
<button
(click)="saveAndClose()"
[disabled]="saving()"
class="rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
class="bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
>
{{ i18n.t('common.save') }}
</button>
ui/src/app/skins/shadlike/file-panel/file-panel.html
+16 -16
View File
@@ -5,7 +5,7 @@
>
<button
(click)="toggleMenu()"
class="flex min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-(length:--path-font) font-medium hover:bg-accent"
class="flex min-w-0 items-center gap-1.5 px-2 py-1 text-(length:--path-font) font-medium hover:bg-accent"
[title]="i18n.t('panel.choosePanel')"
>
@if (panel().connecting()) {
@@ -31,7 +31,7 @@
<button
(click)="copyToOther()"
[title]="side() === 'left' ? i18n.t('panel.copyToRight') : i18n.t('panel.copyToLeft')"
class="flex h-(--action-h) shrink-0 items-center rounded-md px-1 text-muted-foreground hover:bg-accent hover:text-primary"
class="flex h-(--action-h) shrink-0 items-center px-1 text-muted-foreground hover:bg-accent hover:text-primary"
>
<ng-icon [name]="copyIcon()" size="var(--action-icon)" />
<span class="ml-1 hidden text-(length:--action-font) @[30rem]:inline">{{ i18n.t('panel.copy') }}</span>
@@ -39,7 +39,7 @@
<button
(click)="run('edit')"
[title]="i18n.t('panel.editFile')"
class="flex h-(--action-h) shrink-0 items-center rounded-md px-1 text-muted-foreground hover:bg-accent hover:text-foreground"
class="flex h-(--action-h) shrink-0 items-center px-1 text-muted-foreground hover:bg-accent hover:text-foreground"
>
<ng-icon name="tdesignFile1" size="var(--action-icon)" />
<span class="ml-1 hidden text-(length:--action-font) @[30rem]:inline">{{ i18n.t('panel.edit') }}</span>
@@ -47,7 +47,7 @@
<button
(click)="run('rename')"
[title]="i18n.t('panel.rename')"
class="flex h-(--action-h) shrink-0 items-center rounded-md px-1 text-muted-foreground hover:bg-accent hover:text-foreground"
class="flex h-(--action-h) shrink-0 items-center px-1 text-muted-foreground hover:bg-accent hover:text-foreground"
>
<ng-icon name="tdesignEdit" size="var(--action-icon)" />
<span class="ml-1 hidden text-(length:--action-font) @[30rem]:inline">{{ i18n.t('common.rename') }}</span>
@@ -55,14 +55,14 @@
<button
(click)="run('mkdir')"
[title]="i18n.t('panel.newFolder')"
class="grid size-(--action-h) shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
class="grid size-(--action-h) shrink-0 place-items-center text-muted-foreground hover:bg-accent hover:text-foreground"
>
<ng-icon name="tdesignFolderAdd" size="var(--action-icon)" />
</button>
<button
(click)="run('createFile')"
[title]="i18n.t('panel.newFile')"
class="grid size-(--action-h) shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
class="grid size-(--action-h) shrink-0 place-items-center text-muted-foreground hover:bg-accent hover:text-foreground"
>
<ng-icon name="tdesignFileAdd" size="var(--action-icon)" />
</button>
@@ -70,7 +70,7 @@
<button
(click)="run('chmod')"
[title]="i18n.t('panel.permissions')"
class="grid size-(--action-h) shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
class="grid size-(--action-h) shrink-0 place-items-center text-muted-foreground hover:bg-accent hover:text-foreground"
>
<ng-icon name="tdesignLockOn" size="var(--action-icon)" />
</button>
@@ -78,7 +78,7 @@
<button
(click)="run('delete')"
[title]="i18n.t('panel.deleteHint')"
class="flex h-(--action-h) shrink-0 items-center rounded-md px-1 text-muted-foreground hover:bg-accent hover:text-destructive"
class="flex h-(--action-h) shrink-0 items-center px-1 text-muted-foreground hover:bg-accent hover:text-destructive"
>
<ng-icon name="tdesignDelete" size="var(--action-icon)" />
<span class="ml-1 hidden text-(length:--action-font) @[30rem]:inline">{{ i18n.t('common.delete') }}</span>
@@ -87,7 +87,7 @@
@if (menuOpen()) {
<div class="fixed inset-0 z-20" (click)="menuOpen.set(false)"></div>
<div
class="absolute top-full left-2 z-30 mt-1 max-h-80 w-64 overflow-y-auto rounded-lg border border-border bg-card py-1 text-card-foreground shadow-xl"
class="absolute top-full left-2 z-30 mt-1 max-h-80 w-64 overflow-y-auto border border-border bg-card py-1 text-card-foreground shadow-xl"
>
<button
(click)="pickLocal()"
@@ -161,12 +161,12 @@
</div>
<!-- path bar -->
<div class="flex items-center gap-1 border-b border-border bg-toolbar px-2 py-1.5">
<div class="flex items-center gap-1 border-b border-border bg-toolbar-2 px-2 py-1.5">
<button
(click)="panel().up()"
[disabled]="blocked()"
[title]="i18n.t('panel.parentDir')"
class="grid size-(--path-ctl-h) shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:hover:bg-transparent"
class="grid size-(--path-ctl-h) shrink-0 place-items-center text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:hover:bg-transparent"
>
<ng-icon name="tdesignArrowUp" size="1rem" />
</button>
@@ -178,13 +178,13 @@
(keydown)="$event.stopPropagation()"
[disabled]="blocked()"
spellcheck="false"
class="h-(--path-ctl-h) min-w-0 flex-1 rounded-md border border-input bg-transparent px-2 font-mono text-(length:--path-font) outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
class="h-(--path-ctl-h) min-w-0 flex-1 border border-input bg-transparent px-2 font-mono text-(length:--path-font) outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
/>
<button
(click)="panel().refresh()"
[disabled]="blocked()"
[title]="i18n.t('panel.refresh')"
class="grid size-(--path-ctl-h) shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:hover:bg-transparent"
class="grid size-(--path-ctl-h) shrink-0 place-items-center text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:hover:bg-transparent"
>
@if (panel().loading()) {
<ng-icon name="tdesignLoading" size="1rem" class="animate-spin" />
@@ -198,7 +198,7 @@
<div
(contextmenu)="headerContextMenu($event)"
[style.grid-template-columns]="gridTemplate()"
class="grid border-b border-border bg-toolbar text-[0.6875rem] font-medium text-muted-foreground"
class="grid border-b border-border bg-toolbar-3 text-[0.6875rem] font-medium text-muted-foreground"
>
<button class="px-2 py-1 text-left hover:text-foreground" (click)="panel().toggleSort('name')">
{{ i18n.t('columns.name') }} {{ sortIndicator('name') }}
@@ -226,7 +226,7 @@
<button
(click)="clearFilter()"
[title]="i18n.t('panel.clearFilter')"
class="grid size-5 shrink-0 place-items-center rounded text-muted-foreground hover:bg-accent hover:text-foreground"
class="grid size-5 shrink-0 place-items-center text-muted-foreground hover:bg-accent hover:text-foreground"
>
<ng-icon name="tdesignClose" size="0.8rem" />
</button>
@@ -252,7 +252,7 @@
</span>
<button
(click)="cancelConnect()"
class="rounded-md border border-border px-3 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
class="border border-border px-3 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
>
{{ i18n.t('common.cancel') }}
</button>
ui/src/app/skins/shadlike/settings-window/settings-window.html
+25 -44
View File
@@ -19,7 +19,7 @@
@for (s of sections; track s) {
<button
(click)="section.set(s)"
class="rounded-md px-2.5 py-1.5 text-left text-xs hover:bg-accent hover:text-foreground"
class="px-2.5 py-1.5 text-left text-xs hover:bg-accent hover:text-foreground"
[class.bg-accent]="section() === s"
[class.font-medium]="section() === s"
[class.text-foreground]="section() === s"
@@ -40,7 +40,7 @@
<span class="text-xs">{{ i18n.t('options.language') }}</span>
<select
(change)="settings.setLocale($any($event.target).value)"
class="h-7 rounded-md border border-input bg-background px-1.5 text-[0.6875rem] outline-none focus:ring-2 focus:ring-ring"
class="h-7 border border-input bg-background pl-1.5 text-[0.6875rem] outline-none focus:ring-2 focus:ring-ring"
>
<option value="system" [selected]="settings.locale() === 'system'">
{{ i18n.t('options.system') }}
@@ -55,11 +55,11 @@
<div class="flex items-center justify-between gap-2">
<span class="text-xs">{{ i18n.t('options.theme.label') }}</span>
<div class="flex rounded-md border border-border p-0.5">
<div class="flex border border-border p-0.5">
@for (theme of themes; track theme) {
<button
(click)="settings.setTheme(theme)"
class="rounded px-2 py-0.5 text-[0.6875rem]"
class="px-2 py-0.5 text-[0.6875rem]"
[class.bg-accent]="settings.theme() === theme"
[class.text-foreground]="settings.theme() === theme"
[class.text-muted-foreground]="settings.theme() !== theme"
@@ -73,11 +73,11 @@
@if (settings.effectiveDark()) {
<div class="flex items-center justify-between gap-2">
<span class="text-xs">{{ i18n.t('options.tone.label') }}</span>
<div class="flex rounded-md border border-border p-0.5">
<div class="flex border border-border p-0.5">
@for (tone of darkTones; track tone) {
<button
(click)="settings.setDarkTone(tone)"
class="rounded px-2 py-0.5 text-[0.6875rem]"
class="px-2 py-0.5 text-[0.6875rem]"
[class.bg-accent]="settings.darkTone() === tone"
[class.text-foreground]="settings.darkTone() === tone"
[class.text-muted-foreground]="settings.darkTone() !== tone"
@@ -89,42 +89,24 @@
</div>
}
<div class="flex items-center justify-between gap-2">
<span class="text-xs">{{ i18n.t('options.accent.label') }}</span>
<div class="flex items-center gap-1.5">
@for (tone of accents; track tone.value) {
<button
(click)="settings.setAccent(tone.value)"
[title]="i18n.t('options.accentNames.' + tone.value)"
class="size-3 rounded-full border border-foreground/15"
[style.background-color]="tone.swatch"
[class.ring-2]="settings.accent() === tone.value"
[class.ring-foreground]="settings.accent() === tone.value"
[class.ring-offset-1]="settings.accent() === tone.value"
[class.ring-offset-background]="settings.accent() === tone.value"
></button>
}
</div>
</div>
<!-- Interface scale: a continuous stepper, 50%..400% in 10-point
steps. One lever moves the whole UI (root font-size; everything
is rem), this window included. -->
<div class="flex items-center justify-between gap-2">
<span class="text-xs">{{ i18n.t('options.interface.label') }}</span>
<div class="flex items-center rounded-md border border-border p-0.5">
<div class="flex items-center border border-border p-0.5">
<button
(click)="settings.setUiScale(settings.uiScale() - 0.1)"
[disabled]="settings.uiScale() <= 0.5"
[title]="i18n.t('options.interface.smaller')"
class="grid size-5 place-items-center rounded text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-40 disabled:hover:bg-transparent"
class="grid size-5 place-items-center text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-40 disabled:hover:bg-transparent"
>
−
</button>
<button
(click)="settings.setUiScale(1)"
[title]="i18n.t('options.interface.reset')"
class="w-11 rounded px-1 py-0.5 text-center text-[0.6875rem] tabular-nums hover:bg-accent"
class="w-11 px-1 py-0.5 text-center text-[0.6875rem] tabular-nums hover:bg-accent"
>
{{ scalePercent() }}
</button>
@@ -132,7 +114,7 @@
(click)="settings.setUiScale(settings.uiScale() + 0.1)"
[disabled]="settings.uiScale() >= 4"
[title]="i18n.t('options.interface.larger')"
class="grid size-5 place-items-center rounded text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-40 disabled:hover:bg-transparent"
class="grid size-5 place-items-center text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-40 disabled:hover:bg-transparent"
>
+
</button>
@@ -143,11 +125,11 @@
@case ('transfers') {
<div class="flex items-center justify-between gap-2">
<span class="text-xs">{{ i18n.t('options.speedUnit.label') }}</span>
<div class="flex rounded-md border border-border p-0.5">
<div class="flex border border-border p-0.5">
@for (unit of speedUnits; track unit.value) {
<button
(click)="settings.setSpeedUnit(unit.value)"
class="rounded px-2 py-0.5 text-[0.6875rem]"
class="px-2 py-0.5 text-[0.6875rem]"
[class.bg-accent]="settings.speedUnit() === unit.value"
[class.text-foreground]="settings.speedUnit() === unit.value"
[class.text-muted-foreground]="settings.speedUnit() !== unit.value"
@@ -160,11 +142,11 @@
<div class="flex items-center justify-between gap-2">
<span class="text-xs">{{ i18n.t('options.transfers.label') }}</span>
<div class="flex rounded-md border border-border p-0.5">
<div class="flex border border-border p-0.5">
@for (mode of transferModes; track mode) {
<button
(click)="settings.setTransferMode(mode)"
class="rounded px-2 py-0.5 text-[0.6875rem]"
class="px-2 py-0.5 text-[0.6875rem]"
[class.bg-accent]="settings.transferMode() === mode"
[class.text-foreground]="settings.transferMode() === mode"
[class.text-muted-foreground]="settings.transferMode() !== mode"
@@ -178,11 +160,11 @@
@if (settings.transferMode() === 'multi') {
<div class="flex items-center justify-between gap-2 pl-3">
<span class="text-xs text-muted-foreground">{{ i18n.t('options.atOnce') }}</span>
<div class="flex rounded-md border border-border p-0.5">
<div class="flex border border-border p-0.5">
@for (count of concurrencyChoices; track count) {
<button
(click)="settings.setTransferConcurrency(count)"
class="rounded px-2 py-0.5 text-[0.6875rem] tabular-nums"
class="px-2 py-0.5 text-[0.6875rem] tabular-nums"
[class.bg-accent]="settings.transferConcurrency() === count"
[class.text-foreground]="settings.transferConcurrency() === count"
[class.text-muted-foreground]="settings.transferConcurrency() !== count"
@@ -196,10 +178,10 @@
<div class="flex items-center justify-between gap-2">
<span class="text-xs">{{ i18n.t('options.finishedTransfers.label') }}</span>
<div class="flex rounded-md border border-border p-0.5">
<div class="flex border border-border p-0.5">
<button
(click)="settings.setAutoClearCompleted(true)"
class="rounded px-2 py-0.5 text-[0.6875rem]"
class="px-2 py-0.5 text-[0.6875rem]"
[class.bg-accent]="settings.autoClearCompleted()"
[class.text-foreground]="settings.autoClearCompleted()"
[class.text-muted-foreground]="!settings.autoClearCompleted()"
@@ -208,7 +190,7 @@
</button>
<button
(click)="settings.setAutoClearCompleted(false)"
class="rounded px-2 py-0.5 text-[0.6875rem]"
class="px-2 py-0.5 text-[0.6875rem]"
[class.bg-accent]="!settings.autoClearCompleted()"
[class.text-foreground]="!settings.autoClearCompleted()"
[class.text-muted-foreground]="settings.autoClearCompleted()"
@@ -222,10 +204,10 @@
@case ('editor') {
<div class="flex items-center justify-between gap-2">
<span class="text-xs">{{ i18n.t('options.editor.label') }}</span>
<div class="flex rounded-md border border-border p-0.5">
<div class="flex border border-border p-0.5">
<button
(click)="settings.setEditor('builtin')"
class="rounded px-2 py-0.5 text-[0.6875rem]"
class="px-2 py-0.5 text-[0.6875rem]"
[class.bg-accent]="settings.editor() === 'builtin'"
[class.text-foreground]="settings.editor() === 'builtin'"
[class.text-muted-foreground]="settings.editor() !== 'builtin'"
@@ -234,7 +216,7 @@
</button>
<button
(click)="settings.setEditor('custom')"
class="rounded px-2 py-0.5 text-[0.6875rem]"
class="px-2 py-0.5 text-[0.6875rem]"
[class.bg-accent]="settings.editor() === 'custom'"
[class.text-foreground]="settings.editor() === 'custom'"
[class.text-muted-foreground]="settings.editor() !== 'custom'"
@@ -252,7 +234,7 @@
<div class="flex shrink-0 items-center gap-1">
<button
(click)="pickEditorApp()"
class="rounded-md border border-border px-2 py-0.5 text-[0.6875rem] hover:bg-accent"
class="border border-border px-2 py-0.5 text-[0.6875rem] hover:bg-accent"
>
{{ i18n.t('common.choose') }}
</button>
@@ -260,7 +242,7 @@
<button
(click)="settings.setEditorApp('')"
[title]="i18n.t('options.resetDefault')"
class="grid size-5 place-items-center rounded text-muted-foreground hover:bg-accent hover:text-foreground"
class="grid size-5 place-items-center text-muted-foreground hover:bg-accent hover:text-foreground"
>
<ng-icon name="tdesignClose" size="0.7rem" />
</button>
@@ -277,7 +259,6 @@
<label class="flex items-center gap-2 text-xs">
<input
type="checkbox"
class="accent-primary"
[checked]="settings.columns().includes(key)"
(change)="settings.toggleColumn(key)"
/>
@@ -291,7 +272,7 @@
<!-- the old popover footer: opens the native About box -->
<button
(click)="showAbout()"
class="self-start rounded-md border border-border px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
class="self-start border border-border px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
>
{{ appName }} · {{ buildLabel }}
</button>
ui/src/app/skins/shadlike/settings-window/settings-window.ts
-15
View File
@@ -2,7 +2,6 @@ import { Component, computed, inject, signal } from '@angular/core';
import { NgIcon } from '@ng-icons/core';
import { BRANDING } from '@shared/branding';
import { LOCALE_LABELS, SUPPORTED } from '@shared/i18n';
import type { AccentTone } from '@shared/types';
import { COLUMN_KEYS } from '@core/context-menu.service';
import { I18nService } from '@core/i18n.service';
import { blockNativeContextMenu, IS_MAC_CHROME } from '@core/platform';
@@ -15,19 +14,6 @@ type Section = (typeof SECTIONS)[number];
const THEMES = ['system', 'light', 'dark'] as const;
const DARK_TONES = ['dark', 'darker'] as const;
// Swatch colors are fixed mid-tones so every dot reads on both light and dark
// pages (the live --primary values would vanish against one of them). Names are
// translated via options.accentNames.<value>.
const ACCENTS: readonly { value: AccentTone; swatch: string }[] = [
{ value: 'graphite', swatch: 'oklch(0.552 0.016 285.9)' },
{ value: 'blue', swatch: 'oklch(0.65 0.17 255)' },
{ value: 'indigo', swatch: 'oklch(0.65 0.19 277)' },
{ value: 'purple', swatch: 'oklch(0.65 0.17 305)' },
{ value: 'rose', swatch: 'oklch(0.65 0.17 8)' },
{ value: 'orange', swatch: 'oklch(0.68 0.17 50)' },
{ value: 'green', swatch: 'oklch(0.65 0.15 150)' },
{ value: 'teal', swatch: 'oklch(0.65 0.12 185)' },
];
const SPEED_UNITS = [
{ value: 'MBps', label: 'MB/s' },
{ value: 'Mbps', label: 'Mbps' },
@@ -62,7 +48,6 @@ export class SettingsWindow {
readonly localeLabels = LOCALE_LABELS;
readonly themes = THEMES;
readonly darkTones = DARK_TONES;
readonly accents = ACCENTS;
readonly speedUnits = SPEED_UNITS;
readonly transferModes = TRANSFER_MODES;
readonly concurrencyChoices = CONCURRENCY_CHOICES;
ui/src/app/skins/shadlike/tab-bar/tab-bar.ts
+7 -7
View File
@@ -28,7 +28,7 @@ import { UpdaterService } from '@core/updater.service';
@for (ws of panels.workspaces(); track ws.id; let i = $index) {
<div
[attr.data-tab-id]="ws.id"
class="group relative flex max-w-52 shrink-0 items-center rounded-md electrobun-webkit-app-region-no-drag"
class="group relative flex max-w-52 shrink-0 items-center electrobun-webkit-app-region-no-drag"
[class.bg-accent]="ws.id === panels.activeWorkspaceId()"
[class.opacity-50]="draggedId() === ws.id"
[style.box-shadow]="dropIndicatorShadow(i)"
@@ -64,7 +64,7 @@ import { UpdaterService } from '@core/updater.service';
tabindex="-1"
aria-hidden="true"
[title]="i18n.t('tabBar.closeTab', { mod: modLabel })"
class="mr-1 grid size-4 shrink-0 place-items-center rounded text-muted-foreground opacity-0 group-hover:opacity-100 hover:bg-border hover:text-foreground"
class="mr-1 grid size-4 shrink-0 place-items-center text-muted-foreground opacity-0 group-hover:opacity-100 hover:bg-border hover:text-foreground"
>
<ng-icon name="tdesignClose" size="0.7rem" />
</button>
@@ -72,7 +72,7 @@ import { UpdaterService } from '@core/updater.service';
<span class="mr-1 size-4 shrink-0"></span>
}
@if (ws.id === panels.activeWorkspaceId()) {
<div class="absolute inset-x-0 -bottom-px h-0.5 rounded-full bg-primary"></div>
<div class="absolute inset-x-0 -bottom-px h-0.5 bg-primary"></div>
}
</div>
}
@@ -80,7 +80,7 @@ import { UpdaterService } from '@core/updater.service';
<button
(click)="panels.newWorkspace()"
[title]="i18n.t('tabBar.newTab', { mod: modLabel })"
class="ml-0.5 grid size-6 place-items-center rounded-md text-muted-foreground electrobun-webkit-app-region-no-drag hover:bg-accent hover:text-foreground"
class="ml-0.5 grid size-6 place-items-center text-muted-foreground electrobun-webkit-app-region-no-drag hover:bg-accent hover:text-foreground"
>
<ng-icon name="tdesignAdd" size=".8rem" />
</button>
@@ -94,7 +94,7 @@ import { UpdaterService } from '@core/updater.service';
(click)="onUpdateClick()"
[disabled]="updater.state() === 'downloading'"
[title]="i18n.t('tabBar.updateTooltip', { version: updater.version() })"
class="relative mr-1 grid h-6 place-items-center overflow-hidden rounded-md px-2.5 text-[0.6875rem] font-medium bg-primary text-primary-foreground electrobun-webkit-app-region-no-drag hover:opacity-90 disabled:cursor-default"
class="relative mr-1 grid h-6 place-items-center overflow-hidden px-2.5 text-[0.6875rem] font-medium bg-primary text-primary-foreground electrobun-webkit-app-region-no-drag hover:opacity-90 disabled:cursor-default"
>
@if (updater.state() === 'downloading') {
<span
@@ -122,7 +122,7 @@ import { UpdaterService } from '@core/updater.service';
<button
(click)="openManager()"
[title]="i18n.t('tabBar.manageConnections')"
class="grid h-6 px-2 py-1 place-items-center rounded-md text-[0.6875rem] text-muted-foreground electrobun-webkit-app-region-no-drag hover:bg-accent hover:text-foreground"
class="grid h-6 px-2 py-1 place-items-center text-[0.6875rem] text-muted-foreground electrobun-webkit-app-region-no-drag hover:bg-accent hover:text-foreground"
>
<!-- <ng-icon name="tdesignSetting" size="0.9rem" /> -->
{{ i18n.t('tabBar.connections') }}
@@ -132,7 +132,7 @@ import { UpdaterService } from '@core/updater.service';
<button
(click)="openSettings()"
[title]="i18n.t('tabBar.options')"
class="grid size-6 place-items-center rounded-md text-muted-foreground electrobun-webkit-app-region-no-drag hover:bg-accent hover:text-foreground"
class="grid size-6 place-items-center text-muted-foreground electrobun-webkit-app-region-no-drag hover:bg-accent hover:text-foreground"
>
<ng-icon name="tdesignSetting" size="0.9rem" />
</button>
ui/src/app/skins/shadlike/toasts/toasts.ts
+1 -1
View File
@@ -12,7 +12,7 @@ import { ToastService } from '@core/toast.service';
<div
(mouseenter)="toast.pause(t.id)"
(mouseleave)="toast.resume(t.id)"
class="group pointer-events-auto relative flex items-start gap-2 overflow-hidden rounded-lg border border-border bg-card p-3 text-xs text-card-foreground shadow-lg"
class="group pointer-events-auto relative flex items-start gap-2 overflow-hidden border border-border bg-card p-3 text-xs text-card-foreground shadow-lg"
>
<ng-icon
[name]="toastIcon(t.kind)"
ui/src/app/skins/shadlike/transfer-bar/transfer-bar.html
+5 -5
View File
@@ -6,7 +6,7 @@
<button
(click)="transfers.clearFinished()"
[disabled]="!transfers.finishedJobs().length"
class="flex items-center gap-1 rounded px-1.5 py-0.5 hover:bg-accent hover:text-foreground disabled:opacity-40 disabled:hover:bg-transparent"
class="flex items-center gap-1 px-1.5 py-0.5 hover:bg-accent hover:text-foreground disabled:opacity-40 disabled:hover:bg-transparent"
>
<ng-icon name="tdesignDelete" size="0.75rem" /> {{ i18n.t('transfer.clearFinished') }}
</button>
@@ -25,10 +25,10 @@
aria-valuemax="100"
[attr.aria-valuenow]="jobPercent(job)"
[attr.aria-label]="job.name"
class="mt-0.5 h-1 overflow-hidden rounded-full bg-muted"
class="mt-0.5 h-1 overflow-hidden bg-muted"
>
<div
class="h-full rounded-full bg-primary transition-[width] duration-100"
class="h-full bg-primary transition-[width] duration-100"
[style.width.%]="jobPercent(job)"
></div>
</div>
@@ -38,7 +38,7 @@
<button
(click)="transfers.cancel(job.id)"
[title]="i18n.t('transfer.cancel')"
class="shrink-0 rounded p-1 text-muted-foreground hover:bg-accent hover:text-destructive"
class="shrink-0 p-1 text-muted-foreground hover:bg-accent hover:text-destructive"
>
<ng-icon name="tdesignClose" size="0.9rem" />
</button>
@@ -46,7 +46,7 @@
<button
(click)="transfers.dismiss(job.id)"
[title]="i18n.t('transfer.dismiss')"
class="shrink-0 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
class="shrink-0 p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
>
<ng-icon name="tdesignClose" size="0.9rem" />
</button>
ui/src/index.html
+3 -3
View File
@@ -13,11 +13,11 @@
attributes are baked in by the bun preload (buildPreload in
src/bun/windows.ts) so forced themes are correct at first paint. -->
<style>
html { background: oklch(1 0 0); }
html[data-theme='dark'] { background: oklch(0.2178 0.002 107); }
html { background: oklch(0.995 0.0001 260); }
html[data-theme='dark'] { background: oklch(0.195 0.009 260); }
html[data-theme='dark'][data-dark-tone='darker'] { background: oklch(0 0 0); }
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) { background: oklch(0.2178 0.002 107); }
html:not([data-theme='light']) { background: oklch(0.195 0.009 260); }
html:not([data-theme='light'])[data-dark-tone='darker'] { background: oklch(0 0 0); }
}
</style>
ui/src/styles.css
+198 -164
View File
@@ -1,50 +1,54 @@
@import "tailwindcss";
/* shadcn-style theme tokens. Light stays the zinc family; the dark neutrals are a
warm gray family (hue ~107) anchored on #1a1a19 — see the dark blocks below.
The app follows the OS light/dark preference automatically.
/* Theme tokens, adapted from Oxide's design system (docs.oxide.computer): a cool
neutral scale at hue 260 with almost no chroma, one green accent, opaque
strokes. Step names in the comments (n0…n1300, green-800, …) are Oxide's.
The app follows the OS light/dark preference unless a theme is forced.
Surface layers, each its own shade so the window reads as parts: --chrome
(frame strips: tab/transfer/status bars, window header/footer strips),
--toolbar (the file-panel header strip — toolbar, path bar, column header —
and secondary toolbars), --background (content: file lists, editor text,
forms; --row-alt stripes every other file row) and --card (popovers,
dialogs). Dark climbs frame < list < header < card; light steps greys out
from white content: frame < header < list = card. --accent is a translucent
overlay, not a surface: hover/selected states must read on every layer, and
an opaque hover vanishes on a surface of its own lightness. */
(frame strips: tab/transfer/status bars, window header/footer strips and
sidebars), --toolbar (the top row of a file panel's header strip, and
secondary toolbars) stepping through --toolbar-2/-3 toward --background
(content: file lists, editor text, forms; --row-alt stripes every other file
row), and --card (popovers, dialogs). Dark climbs frame < list < header <
card; light steps greys out from near-white content: frame < header < list
= card. --accent is a translucent overlay, not a surface: hover/selected
states must read on every layer, and an opaque hover vanishes on a surface
of its own lightness. The design is square: there are no radius tokens. */
:root {
/* Native UI (scrollbars, form controls) follows the OS unless a theme is forced. */
/* Native UI (form controls) follows the OS unless a theme is forced. */
color-scheme: light dark;
--background: oklch(1 0 0);
--chrome: oklch(0.935 0.002 286.375);
--toolbar: oklch(0.965 0.001 286.375);
--row-alt: oklch(0.978 0.001 286.375);
--foreground: oklch(0.141 0.005 285.823);
--card: oklch(1 0 0);
--card-foreground: oklch(0.141 0.005 285.823);
--primary: oklch(0.21 0.006 285.885);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.967 0.001 286.375);
--secondary-foreground: oklch(0.21 0.006 285.885);
--muted: oklch(0.967 0.001 286.375);
--muted-foreground: oklch(0.552 0.016 285.938);
--accent: oklch(0.21 0.006 285.885 / 6%);
--accent-foreground: oklch(0.21 0.006 285.885);
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.985 0 0);
--success: oklch(0.627 0.17 149.2);
--border: oklch(0.92 0.004 286.32);
--input: oklch(0.92 0.004 286.32);
--ring: oklch(0.705 0.015 286.067);
--radius: 0.5rem;
/* file-type icon colors — fixed category hues, muted chroma */
--icon-folder: oklch(0.58 0.13 250);
--icon-link: oklch(0.56 0.1 190);
--icon-image: oklch(0.58 0.13 295);
--icon-media: oklch(0.6 0.13 10);
--icon-archive: oklch(0.62 0.13 60);
--icon-code: oklch(0.56 0.12 155);
--background: oklch(0.995 0.0001 260); /* n1300 */
--chrome: oklch(0.925 0.0001 260); /* n1000 */
--toolbar: oklch(0.95 0.0001 260); /* n1100 */
--row-alt: oklch(0.975 0.0001 260); /* n1200 */
--foreground: oklch(0.162 0.01 260); /* n0 */
--card: oklch(0.995 0.0001 260);
--card-foreground: oklch(0.162 0.01 260);
--primary: oklch(0.474 0.1481 173.7); /* green-500 */
--primary-foreground: oklch(0.995 0.0001 260);
--muted: oklch(0.95 0.0001 260); /* n1100 */
--muted-foreground: oklch(0.483 0.0041 260); /* n500 */
--accent: oklch(0.162 0.01 260 / 5%);
--destructive: oklch(0.474 0.1285 21.3); /* red-500 */
--destructive-foreground: oklch(0.995 0.0001 260);
--success: oklch(0.474 0.1481 173.7); /* green-500 */
--border: oklch(0.9 0.0001 260); /* n900 */
--input: oklch(0.79 0.0011 260); /* n800 */
--ring: oklch(0.563 0.1714 170.4); /* green-600 */
--cursor-tint: color-mix(in oklab, var(--primary) 8%, transparent);
/* The file panel's header strip steps toward the list, a third per row.
Declared once: the var()s resolve on :root, so dark and AMOLED (where both
ends are black) follow without their own lines. */
--toolbar-2: color-mix(in oklab, var(--toolbar) 66%, var(--background));
--toolbar-3: color-mix(in oklab, var(--toolbar) 33%, var(--background));
/* file-type icon colors — fixed category hues from Oxide's scales (600 steps) */
--icon-folder: oklch(0.563 0.1139 278.7); /* blue-600 */
--icon-link: oklch(0.67 0.1216 275.3); /* blue-700 */
--icon-image: oklch(0.563 0.1328 312.1); /* purple-600 */
--icon-media: oklch(0.563 0.1487 18); /* red-600 */
--icon-archive: oklch(0.563 0.125 81.7); /* yellow-600 */
--icon-code: oklch(0.563 0.1714 170.4); /* green-600 */
}
/* Dark tokens apply when the user forces dark, or follows a dark system theme.
@@ -55,91 +59,80 @@
:root[data-theme='dark'] {
color-scheme: dark;
--background: oklch(0.2178 0.002 107);
--chrome: oklch(0.165 0.002 107);
--toolbar: oklch(0.265 0.002 107);
--row-alt: oklch(0.232 0.002 107);
--foreground: oklch(0.982 0.003 107);
--background: oklch(0.195 0.009 260); /* n50 */
--chrome: oklch(0.162 0.01 260); /* n0 */
--toolbar: oklch(0.275 0.0065 260); /* between n200 and n300 */
--row-alt: oklch(0.205 0.0085 260); /* between n50 and n100 */
--foreground: oklch(0.9 0.0001 260); /* n900 */
/* above --toolbar, so a popover never reads darker than the strip it covers */
--card: oklch(0.285 0.002 107);
--card-foreground: oklch(0.982 0.003 107);
--primary: oklch(0.92 0.004 107);
--primary-foreground: oklch(0.21 0.002 107);
--secondary: oklch(0.302 0.003 107);
--secondary-foreground: oklch(0.982 0.003 107);
--muted: oklch(0.335 0.003 107);
--muted-foreground: oklch(0.715 0.012 107);
--accent: oklch(1 0 0 / 9%);
--accent-foreground: oklch(0.982 0.003 107);
--destructive: oklch(0.704 0.191 22.216);
--destructive-foreground: oklch(0.982 0.003 107);
--success: oklch(0.696 0.17 149.2);
--border: oklch(1 0 0 / 14%);
--input: oklch(1 0 0 / 18%);
--ring: oklch(0.552 0.01 107);
--icon-folder: oklch(0.75 0.11 250);
--icon-link: oklch(0.74 0.09 190);
--icon-image: oklch(0.76 0.11 295);
--icon-media: oklch(0.76 0.11 10);
--icon-archive: oklch(0.77 0.11 65);
--icon-code: oklch(0.75 0.1 155);
--card: oklch(0.29 0.0065 260);
--card-foreground: oklch(0.9 0.0001 260);
--primary: oklch(0.77 0.1919 163.7); /* green-800 */
--primary-foreground: oklch(0.162 0.01 260);
--muted: oklch(0.316 0.006 260); /* n300 */
--muted-foreground: oklch(0.717 0.0021 260); /* n700 */
--accent: oklch(1 0 0 / 7%);
--destructive: oklch(0.712 0.185 11.3); /* red-800 */
--destructive-foreground: oklch(0.162 0.01 260);
--success: oklch(0.77 0.1919 163.7); /* green-800 */
--border: oklch(0.316 0.006 260); /* n300 */
--input: oklch(0.389 0.005 260); /* n400 */
--ring: oklch(0.563 0.1714 170.4); /* green-600 */
--cursor-tint: color-mix(in oklab, var(--primary) 12%, transparent);
--icon-folder: oklch(0.71 0.15 272); /* blue-800 */
--icon-link: oklch(0.67 0.1216 275.3); /* blue-700 */
--icon-image: oklch(0.74 0.175 305.4); /* purple-800 */
--icon-media: oklch(0.712 0.185 11.3); /* red-800 */
--icon-archive: oklch(0.837 0.14 75); /* yellow-800 */
--icon-code: oklch(0.77 0.1919 163.7); /* green-800 */
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
--background: oklch(0.2178 0.002 107);
--chrome: oklch(0.165 0.002 107);
--toolbar: oklch(0.265 0.002 107);
--row-alt: oklch(0.232 0.002 107);
--foreground: oklch(0.982 0.003 107);
--card: oklch(0.285 0.002 107);
--card-foreground: oklch(0.982 0.003 107);
--primary: oklch(0.92 0.004 107);
--primary-foreground: oklch(0.21 0.002 107);
--secondary: oklch(0.302 0.003 107);
--secondary-foreground: oklch(0.982 0.003 107);
--muted: oklch(0.335 0.003 107);
--muted-foreground: oklch(0.715 0.012 107);
--accent: oklch(1 0 0 / 9%);
--accent-foreground: oklch(0.982 0.003 107);
--destructive: oklch(0.704 0.191 22.216);
--destructive-foreground: oklch(0.982 0.003 107);
--success: oklch(0.696 0.17 149.2);
--border: oklch(1 0 0 / 14%);
--input: oklch(1 0 0 / 18%);
--ring: oklch(0.552 0.01 107);
--icon-folder: oklch(0.75 0.11 250);
--icon-link: oklch(0.74 0.09 190);
--icon-image: oklch(0.76 0.11 295);
--icon-media: oklch(0.76 0.11 10);
--icon-archive: oklch(0.77 0.11 65);
--icon-code: oklch(0.75 0.1 155);
--background: oklch(0.195 0.009 260);
--chrome: oklch(0.162 0.01 260);
--toolbar: oklch(0.275 0.0065 260);
--row-alt: oklch(0.205 0.0085 260);
--foreground: oklch(0.9 0.0001 260);
--card: oklch(0.29 0.0065 260);
--card-foreground: oklch(0.9 0.0001 260);
--primary: oklch(0.77 0.1919 163.7);
--primary-foreground: oklch(0.162 0.01 260);
--muted: oklch(0.316 0.006 260);
--muted-foreground: oklch(0.717 0.0021 260);
--accent: oklch(1 0 0 / 7%);
--destructive: oklch(0.712 0.185 11.3);
--destructive-foreground: oklch(0.162 0.01 260);
--success: oklch(0.77 0.1919 163.7);
--border: oklch(0.316 0.006 260);
--input: oklch(0.389 0.005 260);
--ring: oklch(0.563 0.1714 170.4);
--cursor-tint: color-mix(in oklab, var(--primary) 12%, transparent);
--icon-folder: oklch(0.71 0.15 272);
--icon-link: oklch(0.67 0.1216 275.3);
--icon-image: oklch(0.74 0.175 305.4);
--icon-media: oklch(0.712 0.185 11.3);
--icon-archive: oklch(0.837 0.14 75);
--icon-code: oklch(0.77 0.1919 163.7);
}
}
/* Dark tone "darker" (data-dark-tone set by SettingsService; absent = grey "dark").
True-black AMOLED palette: --chrome collapses into --background on purpose, so
the frame/content step of the default tone disappears and every large surface is
#000 (OLED pixels actually off). Elevation survives only through --card and
--accent; --border/--input are raised to 16%/18% because on pure black those
lines are the only thing defining panes, bars and rows. The surface layers
(--toolbar, --row-alt) collapse to black too: AMOLED stays one flat black on
purpose, so every NEW surface token needs a line here.
True-black AMOLED palette: every surface layer (--chrome, --toolbar and the
steps derived from it, --background, --row-alt) collapses to #000 on purpose
— OLED pixels actually off — so every NEW surface token needs a line here.
Elevation survives only through --card, --muted and --accent (opaque here:
an overlay on black is too faint); the opaque strokes already read on black.
Duplicated for forced-dark and system-dark like the token blocks above — the
extra attribute outranks them. Never declare a token both here and in the
accent dark formula blocks below: same (0,3,0) specificity, the later wins. */
extra attribute outranks them. */
:root[data-theme='dark'][data-dark-tone='darker'] {
--background: oklch(0 0 0);
--chrome: oklch(0 0 0);
--toolbar: oklch(0 0 0);
--row-alt: oklch(0 0 0);
--card: oklch(0.21 0.002 107);
--secondary: oklch(0.274 0.003 107);
--muted: oklch(0.274 0.003 107);
--muted-foreground: oklch(0.705 0.012 107);
--accent: oklch(0.274 0.003 107);
--border: oklch(1 0 0 / 16%);
--input: oklch(1 0 0 / 18%);
--card: oklch(0.216 0.008 260); /* n100 */
--muted: oklch(0.247 0.007 260); /* n200 */
--accent: oklch(0.247 0.007 260); /* n200 */
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light'])[data-dark-tone='darker'] {
@@ -147,13 +140,9 @@
--chrome: oklch(0 0 0);
--toolbar: oklch(0 0 0);
--row-alt: oklch(0 0 0);
--card: oklch(0.21 0.002 107);
--secondary: oklch(0.274 0.003 107);
--muted: oklch(0.274 0.003 107);
--muted-foreground: oklch(0.705 0.012 107);
--accent: oklch(0.274 0.003 107);
--border: oklch(1 0 0 / 16%);
--input: oklch(1 0 0 / 18%);
--card: oklch(0.216 0.008 260);
--muted: oklch(0.247 0.007 260);
--accent: oklch(0.247 0.007 260);
}
}
@@ -161,18 +150,17 @@
--color-background: var(--background);
--color-chrome: var(--chrome);
--color-toolbar: var(--toolbar);
--color-toolbar-2: var(--toolbar-2);
--color-toolbar-3: var(--toolbar-3);
--color-row-alt: var(--row-alt);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-success: var(--success);
@@ -186,12 +174,6 @@
--color-icon-media: var(--icon-media);
--color-icon-archive: var(--icon-archive);
--color-icon-code: var(--icon-code);
/* rem subtrahends (4px/2px at the 16px root), NOT px: --radius is rem, and a
mixed-unit calc would stop the derived radii from following the interface
scale — corners would sharpen as the UI grew. */
--radius-sm: calc(var(--radius) - 0.25rem);
--radius-md: calc(var(--radius) - 0.125rem);
--radius-lg: var(--radius);
}
/* Panel-chrome metrics: file list, path bar, action buttons, source picker.
@@ -238,43 +220,6 @@
animation-play-state: paused;
}
/* Accent tone (data-accent set by SettingsService; absent = graphite/zinc).
Each tone is one hue+chroma line; the formula blocks below derive --primary,
--ring and the cursor-row tint for light and both dark states. The dark
formula blocks (0,3,0) outrank the base dark token blocks and the light
formula block (0,2,0) in every dark state; graphite matches no [data-accent]
selector and keeps the zinc tokens untouched. */
:root {
/* graphite: cursor row identical to the old bg-accent highlight */
--cursor-tint: var(--accent);
}
:root[data-accent='blue'] { --tone-h: 255; --tone-c: 0.17; }
:root[data-accent='indigo'] { --tone-h: 277; --tone-c: 0.19; }
:root[data-accent='purple'] { --tone-h: 305; --tone-c: 0.17; }
:root[data-accent='rose'] { --tone-h: 8; --tone-c: 0.17; }
/* darkest orange that still reads orange; white button text lands ≈ 4.3:1 */
:root[data-accent='orange'] { --tone-h: 50; --tone-c: 0.18; --tone-l: 0.58; }
:root[data-accent='green'] { --tone-h: 150; --tone-c: 0.15; }
:root[data-accent='teal'] { --tone-h: 185; --tone-c: 0.12; }
:root[data-accent] {
--primary: oklch(var(--tone-l, 0.55) var(--tone-c) var(--tone-h));
--ring: oklch(0.62 calc(var(--tone-c) * 0.55) var(--tone-h));
--cursor-tint: color-mix(in oklab, var(--primary) 8%, transparent);
}
:root[data-theme='dark'][data-accent] {
--primary: oklch(0.72 calc(var(--tone-c) * 0.85) var(--tone-h));
--ring: oklch(0.62 calc(var(--tone-c) * 0.55) var(--tone-h));
--cursor-tint: color-mix(in oklab, var(--primary) 12%, transparent);
}
@media (prefers-color-scheme: dark) {
:root[data-accent]:not([data-theme='light']) {
--primary: oklch(0.72 calc(var(--tone-c) * 0.85) var(--tone-h));
--ring: oklch(0.62 calc(var(--tone-c) * 0.55) var(--tone-h));
--cursor-tint: color-mix(in oklab, var(--primary) 12%, transparent);
}
}
html,
body {
height: 100%;
@@ -286,3 +231,92 @@ body {
cursor: default;
}
/* Native controls, restyled square to match the rest. WebKit draws checkboxes,
radios and selects natively and ignores border-radius/background until
appearance: none. In @layer base so utilities (size-3.5, pl-1 …) still win —
which is also why the selects use pl-*, never px-*: a px utility would
override the padding-right the caret needs. */
@layer base {
input[type='checkbox'],
input[type='radio'] {
appearance: none;
display: inline-grid;
place-content: center;
flex-shrink: 0;
width: 0.875rem;
height: 0.875rem;
margin: 0;
border: 1px solid var(--input);
background-color: var(--background);
}
input[type='checkbox']:checked,
input[type='radio']:checked {
border-color: var(--primary);
background-color: var(--primary);
}
/* the check: an L of two borders, rotated */
input[type='checkbox']:checked::after {
content: '';
width: 0.5rem;
height: 0.28rem;
border: solid var(--primary-foreground);
border-width: 0 0 0.125rem 0.125rem;
transform: translateY(-0.06rem) rotate(-45deg);
}
/* radios are square too; a square dot tells them apart from checkboxes */
input[type='radio']:checked::after {
content: '';
width: 0.375rem;
height: 0.375rem;
background-color: var(--primary-foreground);
}
input[type='checkbox']:focus-visible,
input[type='radio']:focus-visible {
outline: 2px solid var(--ring);
outline-offset: 1px;
}
input[type='checkbox']:disabled,
input[type='radio']:disabled {
opacity: 0.5;
}
/* No native arrow: a caret drawn from two currentColor triangles follows the
theme (a data-URI svg can't). The opened option list stays native — macOS
draws that popup itself. */
select {
appearance: none;
padding-right: 1.5rem;
background-image:
linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position:
calc(100% - 0.8rem) 55%,
calc(100% - 0.5rem) 55%;
background-size: 0.3rem 0.3rem;
background-repeat: no-repeat;
}
/* number inputs (the manager's port field): no native spin buttons */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
appearance: none;
margin: 0;
}
/* Square scrollbars. Styling them replaces macOS's auto-hiding overlay
scrollbars with always-visible ones — the inherent cost. */
::-webkit-scrollbar {
width: 0.625rem;
height: 0.625rem;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: var(--border);
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--input);
}
}