lotobo/pdf-tools
1
0
Fork 0
Code Issues 14 Pull Requests Releases 6 Wiki Activity

feat: add shared Toolbox header and themes

Browse Source
This commit is contained in:
Albrecht Degering
2026-07-23 00:29:21 +02:00
parent d40a288a4e
commit 8425d44658
19 changed files with 356 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/App.tsx
View File

@@ -1143,17 +1143,10 @@ const App: React.FC = () => {
<AppShell
app={toolboxApp}
className="pdf-toolbox-shell"
appActions={
<button
type="button"
className="app-help-button"
onClick={() => setHelpOpen(true)}
aria-haspopup="dialog"
title="Open help and keyboard shortcuts (F1 or ?)"
>
Help <span aria-hidden="true">?</span>
</button>
}
helpAction={{
onClick: () => setHelpOpen(true),
title: 'Open help and keyboard shortcuts (F1 or ?)',
}}
>
<FileLoader pdf={pdf} onFilesLoaded={handleFilesLoaded} />
@@ -1237,7 +1230,11 @@ const App: React.FC = () => {
{error && (
<div
className="card"
style={{ border: '1px solid #fecaca', background: '#fef2f2' }}
style={{
border: '1px solid var(--pdf-danger-border)',
background: 'var(--pdf-danger-surface)',
color: 'var(--pdf-danger-text)',
}}
>
<strong>Error:</strong> {error}
</div>

31
src/components/ActionDialog.tsx
View File

@@ -21,18 +21,18 @@ const backgroundByVariant: Record<
NonNullable<ActionDialogAction['variant']>,
string
> = {
primary: '#2563eb',
secondary: '#e5e7eb',
danger: '#dc2626',
primary: 'var(--pdf-primary)',
secondary: 'var(--pdf-control)',
danger: 'var(--pdf-danger-text)',
};
const colorByVariant: Record<
NonNullable<ActionDialogAction['variant']>,
string
> = {
primary: 'white',
secondary: '#111827',
danger: 'white',
primary: 'var(--pdf-on-primary)',
secondary: 'var(--pdf-control-text)',
danger: 'var(--pdf-on-primary)',
};
const ActionDialog: React.FC<ActionDialogProps> = ({
@@ -75,7 +75,7 @@ const ActionDialog: React.FC<ActionDialogProps> = ({
position: 'fixed',
inset: 0,
zIndex: 70,
background: 'rgba(15, 23, 42, 0.55)',
background: 'var(--pdf-overlay)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
@@ -86,9 +86,10 @@ const ActionDialog: React.FC<ActionDialogProps> = ({
style={{
width: '100%',
maxWidth: '440px',
background: 'white',
background: 'var(--pdf-surface-raised)',
color: 'var(--pdf-text)',
borderRadius: '0.75rem',
boxShadow: '0 20px 40px rgba(15, 23, 42, 0.35)',
boxShadow: 'var(--pdf-dialog-shadow)',
padding: '1rem',
display: 'flex',
flexDirection: 'column',
@@ -121,8 +122,8 @@ const ActionDialog: React.FC<ActionDialogProps> = ({
borderRadius: '999px',
width: '1.8rem',
height: '1.8rem',
background: '#e5e7eb',
color: '#111827',
background: 'var(--pdf-control)',
color: 'var(--pdf-control-text)',
cursor: 'pointer',
fontSize: '1.1rem',
lineHeight: 1,
@@ -139,7 +140,7 @@ const ActionDialog: React.FC<ActionDialogProps> = ({
<div
style={{
fontSize: '0.9rem',
color: '#4b5563',
color: 'var(--pdf-muted)',
lineHeight: 1.45,
}}
>
@@ -173,9 +174,11 @@ const ActionDialog: React.FC<ActionDialogProps> = ({
borderRadius: '0.5rem',
padding: '0.45rem 0.8rem',
background: action.disabled
? '#e5e7eb'
? 'var(--pdf-control)'
: backgroundByVariant[variant],
color: action.disabled ? '#6b7280' : colorByVariant[variant],
color: action.disabled
? 'var(--pdf-muted-soft)'
: colorByVariant[variant],
cursor: action.disabled ? 'default' : 'pointer',
fontSize: '0.9rem',
}}

2
src/components/ActionsPanel.tsx
View File

@@ -49,7 +49,7 @@ const ActionsPanel: React.FC<ActionsPanelProps> = ({
return (
<div className="card">
<h2>Tools</h2>
<p style={{ fontSize: '0.85rem', color: '#6b7280' }}>
<p style={{ fontSize: '0.85rem', color: 'var(--pdf-muted-soft)' }}>
Use these tools on the current in-memory document (reordered, rotated,
with deletions). Nothing is uploaded to a server.
</p>

8
src/components/FileLoader.tsx
View File

@@ -30,7 +30,13 @@ const FileLoader: React.FC<FileLoaderProps> = ({ pdf, onFilesLoaded }) => {
/>
{pdf && (
<div style={{ marginTop: '0.75rem', fontSize: '0.9rem' }}>
<div
style={{
marginTop: '0.75rem',
fontSize: '0.9rem',
color: 'var(--pdf-muted)',
}}
>
<div>
<strong>Loaded:</strong> {pdf.name}
</div>

15
src/components/MergeQueuePanel.tsx
View File

@@ -54,22 +54,25 @@ const MergeQueuePanel: React.FC<MergeQueuePanelProps> = ({
return (
<div
className="card merge-queue-card"
style={{ border: '1px solid #bfdbfe', background: '#eff6ff' }}
style={{
border: '1px solid var(--pdf-info-border)',
background: 'var(--pdf-info-surface)',
}}
>
<h2>Merge PDF queue</h2>
<p style={{ fontSize: '0.85rem', color: '#374151' }}>
<p style={{ fontSize: '0.85rem', color: 'var(--pdf-info-text)' }}>
Add several PDFs, reorder the queue, then merge them into a new unsaved
workspace. Processing still happens entirely in your browser.
</p>
{hasCurrentPdf ? (
<p style={{ fontSize: '0.85rem', color: '#374151' }}>
<p style={{ fontSize: '0.85rem', color: 'var(--pdf-info-text)' }}>
Current workspace:{' '}
<strong>{currentPdfName ?? 'Untitled document'}</strong> with{' '}
{currentPageCount} {currentPageCount === 1 ? 'page' : 'pages'}.
</p>
) : (
<p style={{ fontSize: '0.85rem', color: '#374151' }}>
<p style={{ fontSize: '0.85rem', color: 'var(--pdf-info-text)' }}>
No current workspace is open. The queue will become a new workspace.
</p>
)}
@@ -122,7 +125,7 @@ const MergeQueuePanel: React.FC<MergeQueuePanelProps> = ({
))}
</div>
<p style={{ fontSize: '0.85rem', color: '#374151' }}>
<p style={{ fontSize: '0.85rem', color: 'var(--pdf-info-text)' }}>
Queue total:{' '}
<strong>
{items.length} {items.length === 1 ? 'PDF' : 'PDFs'}
@@ -186,7 +189,7 @@ const MergeQueuePanel: React.FC<MergeQueuePanelProps> = ({
fontSize: '0.85rem',
}}
/>{' '}
<span style={{ color: '#6b7280' }}>
<span style={{ color: 'var(--pdf-muted-soft)' }}>
(1 = before first page, {currentPageCount + 1} = after last page)
</span>
</span>

31
src/components/PageWorkspace/CopyPagesDialog.tsx
View File

@@ -48,7 +48,7 @@ const CopyPagesDialog: React.FC<CopyPagesDialogProps> = ({
position: 'fixed',
inset: 0,
zIndex: 60,
background: 'rgba(15, 23, 42, 0.55)',
background: 'var(--pdf-overlay)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
@@ -60,9 +60,10 @@ const CopyPagesDialog: React.FC<CopyPagesDialogProps> = ({
style={{
width: '100%',
maxWidth: '420px',
background: 'white',
background: 'var(--pdf-surface-raised)',
color: 'var(--pdf-text)',
borderRadius: '0.75rem',
boxShadow: '0 20px 40px rgba(15, 23, 42, 0.35)',
boxShadow: 'var(--pdf-dialog-shadow)',
padding: '1rem',
display: 'flex',
flexDirection: 'column',
@@ -95,8 +96,8 @@ const CopyPagesDialog: React.FC<CopyPagesDialogProps> = ({
borderRadius: '999px',
width: '1.8rem',
height: '1.8rem',
background: '#e5e7eb',
color: '#111827',
background: 'var(--pdf-control)',
color: 'var(--pdf-control-text)',
cursor: 'pointer',
fontSize: '1.1rem',
lineHeight: 1,
@@ -114,7 +115,7 @@ const CopyPagesDialog: React.FC<CopyPagesDialogProps> = ({
style={{
margin: 0,
fontSize: '0.9rem',
color: '#4b5563',
color: 'var(--pdf-muted)',
}}
>
Copy{' '}
@@ -145,7 +146,7 @@ const CopyPagesDialog: React.FC<CopyPagesDialogProps> = ({
style={{
padding: '0.45rem 0.55rem',
borderRadius: '0.5rem',
border: '1px solid #d1d5db',
border: '1px solid var(--pdf-border-strong)',
fontSize: '0.95rem',
}}
/>
@@ -154,7 +155,7 @@ const CopyPagesDialog: React.FC<CopyPagesDialogProps> = ({
<div
style={{
fontSize: '0.8rem',
color: '#6b7280',
color: 'var(--pdf-muted-soft)',
lineHeight: 1.4,
}}
>
@@ -166,9 +167,9 @@ const CopyPagesDialog: React.FC<CopyPagesDialogProps> = ({
<div
style={{
borderRadius: '0.5rem',
background: '#fef2f2',
border: '1px solid #fecaca',
color: '#b91c1c',
background: 'var(--pdf-danger-surface)',
border: '1px solid var(--pdf-danger-border)',
color: 'var(--pdf-danger-text)',
padding: '0.5rem',
fontSize: '0.85rem',
}}
@@ -192,8 +193,8 @@ const CopyPagesDialog: React.FC<CopyPagesDialogProps> = ({
border: 'none',
borderRadius: '0.5rem',
padding: '0.45rem 0.8rem',
background: '#e5e7eb',
color: '#111827',
background: 'var(--pdf-control)',
color: 'var(--pdf-control-text)',
cursor: 'pointer',
fontSize: '0.9rem',
}}
@@ -207,8 +208,8 @@ const CopyPagesDialog: React.FC<CopyPagesDialogProps> = ({
border: 'none',
borderRadius: '0.5rem',
padding: '0.45rem 0.8rem',
background: '#16a34a',
color: 'white',
background: 'var(--pdf-success-text)',
color: 'var(--pdf-on-primary)',
cursor: 'pointer',
fontSize: '0.9rem',
}}

38
src/components/PageWorkspace/PageCard.tsx
View File

@@ -53,11 +53,11 @@ const PageCard: React.FC<PageCardProps> = ({
}) => {
const background = isDraggingCard
? isCopyDragging
? '#dcfce7'
: '#dbeafe'
? 'var(--pdf-success-soft)'
: 'var(--pdf-info-surface)'
: selected
? '#eff6ff'
: '#f9fafb';
? 'var(--pdf-info-surface)'
: 'var(--pdf-surface-soft)';
return (
<div
@@ -71,7 +71,7 @@ const PageCard: React.FC<PageCardProps> = ({
width: '162px',
padding: '0.4rem',
borderRadius: '0.5rem',
border: '1px solid #e5e7eb',
border: '1px solid var(--pdf-border)',
background,
display: 'flex',
flexDirection: 'column',
@@ -91,9 +91,11 @@ const PageCard: React.FC<PageCardProps> = ({
width: '20px',
height: '20px',
borderRadius: '0.4rem',
border: '1px solid #9ca3af',
background: selected ? '#2563eb' : 'rgba(255,255,255,0.9)',
color: selected ? 'white' : 'transparent',
border: '1px solid var(--pdf-border-strong)',
background: selected
? 'var(--pdf-primary)'
: 'color-mix(in srgb, var(--pdf-surface) 92%, transparent)',
color: selected ? 'var(--pdf-on-primary)' : 'transparent',
fontSize: '0.8rem',
display: 'flex',
alignItems: 'center',
@@ -131,8 +133,8 @@ const PageCard: React.FC<PageCardProps> = ({
height: 'auto',
objectFit: 'contain',
borderRadius: '0.25rem',
border: '1px solid #e5e7eb',
background: 'white',
border: '1px solid var(--pdf-paper-border)',
background: 'var(--pdf-paper)',
}}
/>
) : (
@@ -141,8 +143,8 @@ const PageCard: React.FC<PageCardProps> = ({
width: '60px',
height: '80px',
borderRadius: '0.25rem',
border: '1px dashed #d1d5db',
background: '#f3f4f6',
border: '1px dashed var(--pdf-paper-border)',
background: 'var(--pdf-paper-placeholder)',
}}
/>
)}
@@ -151,7 +153,7 @@ const PageCard: React.FC<PageCardProps> = ({
<span style={{ fontSize: '0.8rem' }}>
Page {page.sourcePageIndex + 1}
</span>
<span style={{ fontSize: '0.7rem', color: '#6b7280' }}>
<span style={{ fontSize: '0.7rem', color: 'var(--pdf-muted-soft)' }}>
Pos {visualIndex + 1} · Rot {page.rotation}°
</span>
@@ -170,7 +172,8 @@ const PageCard: React.FC<PageCardProps> = ({
}}
style={{
...pageActionButtonStyle,
background: '#e5e7eb',
background: 'var(--pdf-control)',
color: 'var(--pdf-control-text)',
}}
>
↻ 90°
@@ -184,7 +187,8 @@ const PageCard: React.FC<PageCardProps> = ({
}}
style={{
...pageActionButtonStyle,
background: '#e5e7eb',
background: 'var(--pdf-control)',
color: 'var(--pdf-control-text)',
}}
>
↺ 90°
@@ -198,8 +202,8 @@ const PageCard: React.FC<PageCardProps> = ({
}}
style={{
...pageActionButtonStyle,
background: '#fecaca',
color: '#b91c1c',
background: 'var(--pdf-danger-soft)',
color: 'var(--pdf-danger-text)',
}}
title="Remove this page from the exported PDF"
>

18
src/components/PageWorkspace/PageSelectionToolbar.tsx
View File

@@ -53,8 +53,8 @@ const PageSelectionToolbar: React.FC<PageSelectionToolbarProps> = ({
disabled={!hasSelection}
style={{
...pillButtonStyle,
background: '#dcfce7',
color: '#166534',
background: 'var(--pdf-success-soft)',
color: 'var(--pdf-success-text)',
cursor: 'pointer',
}}
title="Copy selected pages to another position"
@@ -69,8 +69,8 @@ const PageSelectionToolbar: React.FC<PageSelectionToolbarProps> = ({
onClick={onDeleteSelected}
style={{
...pillButtonStyle,
background: '#fee2e2',
color: '#b91c1c',
background: 'var(--pdf-danger-soft)',
color: 'var(--pdf-danger-text)',
cursor: 'pointer',
}}
>
@@ -83,8 +83,8 @@ const PageSelectionToolbar: React.FC<PageSelectionToolbarProps> = ({
onClick={onSelectAll}
style={{
...pillButtonStyle,
background: '#8dcd8d',
color: '#111827',
background: 'var(--pdf-success-border)',
color: 'var(--pdf-control-text)',
cursor: 'pointer',
}}
>
@@ -97,8 +97,10 @@ const PageSelectionToolbar: React.FC<PageSelectionToolbarProps> = ({
disabled={!hasSelection}
style={{
...pillButtonStyle,
background: '#e5e7eb',
color: hasSelection ? '#111827' : '#6b7280',
background: 'var(--pdf-control)',
color: hasSelection
? 'var(--pdf-control-text)'
: 'var(--pdf-muted-soft)',
cursor: hasSelection ? 'pointer' : 'default',
}}
>

6
src/components/ReorderPanel.tsx
View File

@@ -279,13 +279,15 @@ const ReorderPanel: React.FC<ReorderPanelProps> = ({
draggingPage != null &&
selectedPageIds.length > 0 &&
selectedPageIds.includes(draggingPage.id);
const dropIndicatorColor = isCopyDragging ? '#16a34a' : '#2563eb';
const dropIndicatorColor = isCopyDragging
? 'var(--pdf-success-text)'
: 'var(--pdf-primary)';
return (
<>
<div className="card">
<h2>Pages</h2>
<p style={{ fontSize: '0.85rem', color: '#6b7280' }}>
<p style={{ fontSize: '0.85rem', color: 'var(--pdf-muted-soft)' }}>
Tap/click a page to preview it. Use the checkbox to select pages
(Shift for ranges). Drag to reorder; dragging a selected page moves
the whole selection. Hold Ctrl/⌘ while dropping to copy instead of

48
src/components/WorkspacePanel.tsx
View File

@@ -54,7 +54,7 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
<div className="card">
<h2>Workspace</h2>
<p style={{ fontSize: '0.85rem', color: '#6b7280' }}>
<p style={{ fontSize: '0.85rem', color: 'var(--pdf-muted-soft)' }}>
Save named workspaces in this browser. PDF binaries are stored in
IndexedDB; nothing is uploaded.
</p>
@@ -78,7 +78,7 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
minWidth: 0,
padding: '0.45rem 0.55rem',
borderRadius: '0.5rem',
border: '1px solid #d1d5db',
border: '1px solid var(--pdf-border-strong)',
fontSize: '0.9rem',
}}
/>
@@ -140,7 +140,7 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
style={{
marginTop: '0.5rem',
fontSize: '0.8rem',
color: '#92400e',
color: 'var(--pdf-warning-text)',
}}
>
Unsaved workspace changes.
@@ -152,7 +152,7 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
style={{
marginTop: '0.5rem',
fontSize: '0.85rem',
color: '#166534',
color: 'var(--pdf-success-text)',
}}
>
{workspaceMessage}
@@ -178,10 +178,12 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
<div
key={workspace.id}
style={{
border: '1px solid #e5e7eb',
border: '1px solid var(--pdf-border)',
borderRadius: '0.5rem',
padding: '0.5rem',
background: active ? '#eff6ff' : '#f9fafb',
background: active
? 'var(--pdf-info-surface)'
: 'var(--pdf-surface-soft)',
display: 'flex',
justifyContent: 'space-between',
gap: '0.75rem',
@@ -193,11 +195,19 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
<div style={{ fontSize: '0.9rem' }}>
<strong>{workspace.name}</strong>
{active && (
<span style={{ color: '#2563eb' }}> · active</span>
<span style={{ color: 'var(--pdf-primary)' }}>
{' '}
· active
</span>
)}
</div>
<div style={{ fontSize: '0.75rem', color: '#6b7280' }}>
<div
style={{
fontSize: '0.75rem',
color: 'var(--pdf-muted-soft)',
}}
>
{workspace.pdfName} · source pages:{' '}
{workspace.sourcePageCount} · workspace pages:{' '}
{workspace.workspacePageCount} · undo:{' '}
@@ -228,8 +238,8 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
disabled={isBusy}
onClick={() => onDeleteWorkspace(workspace.id)}
style={{
background: '#fee2e2',
color: '#991b1b',
background: 'var(--pdf-danger-soft)',
color: 'var(--pdf-danger-text)',
}}
>
Delete
@@ -261,8 +271,8 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
key={entry.id}
style={{
fontSize: '0.8rem',
color: '#374151',
borderLeft: '3px solid #2563eb',
color: 'var(--pdf-muted)',
borderLeft: '3px solid var(--pdf-primary)',
paddingLeft: '0.45rem',
paddingTop: '0.2rem',
paddingBottom: '0.2rem',
@@ -272,7 +282,7 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
Undo {history.length - index}. {entry.label}
</strong>
<br />
<span style={{ color: '#6b7280' }}>
<span style={{ color: 'var(--pdf-muted-soft)' }}>
{new Date(entry.timestamp).toLocaleString()}
</span>
</div>
@@ -282,12 +292,12 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
style={{
margin: '0.25rem 0',
borderRadius: '999px',
background: '#ecfdf5',
color: '#166534',
background: 'var(--pdf-success-surface)',
color: 'var(--pdf-success-text)',
fontSize: '0.8rem',
fontWeight: 600,
alignSelf: 'flex-start',
border: '2px solid #166534',
border: '2px solid var(--pdf-success-text)',
width: '100%',
}}
></div>
@@ -300,8 +310,8 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
key={entry.id}
style={{
fontSize: '0.8rem',
color: '#9ca3af',
borderLeft: '3px solid #d1d5db',
color: 'var(--pdf-muted-faint)',
borderLeft: '3px solid var(--pdf-border-strong)',
paddingLeft: '0.45rem',
paddingTop: '0.2rem',
paddingBottom: '0.2rem',
@@ -312,7 +322,7 @@ const WorkspacePanel: React.FC<WorkspacePanelProps> = ({
Redo {index + 1}. {entry.label}
</strong>
<br />
<span style={{ color: '#9ca3af' }}>
<span style={{ color: 'var(--pdf-muted-faint)' }}>
{new Date(entry.timestamp).toLocaleString()}
</span>
</div>

314
src/styles.css
View File

@@ -12,89 +12,30 @@ body {
BlinkMacSystemFont,
'Segoe UI',
sans-serif;
background-color: #f3f4f6;
color: #111827;
background-color: var(--toolbox-background);
color: var(--toolbox-text);
}
#root {
min-height: 100vh;
}
.app-shell {
display: flex;
min-height: 100vh;
}
.app-sidebar {
width: 260px;
background: #111827;
color: #e5e7eb;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.app-sidebar h1 {
font-size: 1.1rem;
margin: 0;
}
.app-sidebar small {
color: #9ca3af;
}
.app-nav {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.app-nav button {
width: 100%;
text-align: left;
padding: 0.4rem 0.6rem;
border-radius: 0.375rem;
border: none;
background: transparent;
color: #d1d5db;
cursor: pointer;
font-size: 0.9rem;
}
.app-nav button.active {
background: #374151;
color: #f9fafb;
}
.app-nav button:disabled {
opacity: 0.5;
cursor: default;
}
.app-main {
flex: 1;
padding: 1rem 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.card {
background: white;
.pdf-toolbox-shell .toolbox-shell__main .card {
border: 1px solid var(--pdf-border);
background: var(--pdf-surface);
border-radius: 0.75rem;
padding: 1rem;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
box-shadow: var(--pdf-card-shadow);
}
.card h2 {
.pdf-toolbox-shell .toolbox-shell__main .card h2 {
margin-top: 0;
font-size: 1rem;
}
button.primary {
background: #2563eb;
color: white;
.pdf-toolbox-shell .toolbox-shell__main button.primary {
background: var(--pdf-primary);
color: var(--pdf-on-primary);
border-radius: 0.5rem;
padding: 0.45rem 0.9rem;
border: none;
@@ -102,14 +43,14 @@ button.primary {
font-size: 0.9rem;
}
button.primary:disabled {
.pdf-toolbox-shell .toolbox-shell__main button.primary:disabled {
opacity: 0.6;
cursor: default;
}
button.secondary {
background: #e5e7eb;
color: #111827;
.pdf-toolbox-shell .toolbox-shell__main button.secondary {
background: var(--pdf-control);
color: var(--pdf-control-text);
border-radius: 0.5rem;
padding: 0.45rem 0.9rem;
border: none;
@@ -117,7 +58,7 @@ button.secondary {
font-size: 0.9rem;
}
.button-row {
.pdf-toolbox-shell .toolbox-shell__main .button-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
@@ -125,14 +66,104 @@ button.secondary {
}
.pdf-toolbox-shell {
color-scheme: light;
--toolbox-background: #f3f4f6;
--toolbox-surface: #ffffff;
--toolbox-text: #111827;
--toolbox-muted: #4b5563;
--toolbox-border: #d1d5db;
--toolbox-accent: #2563eb;
--toolbox-accent-contrast: #ffffff;
--pdf-surface: var(--toolbox-surface);
--pdf-surface-soft: #f9fafb;
--pdf-surface-raised: #ffffff;
--pdf-text: var(--toolbox-text);
--pdf-muted: #4b5563;
--pdf-muted-soft: #6b7280;
--pdf-muted-faint: #9ca3af;
--pdf-border: #e5e7eb;
--pdf-border-strong: #d1d5db;
--pdf-primary: #2563eb;
--pdf-on-primary: #ffffff;
--pdf-control: #e5e7eb;
--pdf-control-text: #111827;
--pdf-info-surface: #eff6ff;
--pdf-info-border: #bfdbfe;
--pdf-info-text: #1e3a8a;
--pdf-success-surface: #ecfdf5;
--pdf-success-soft: #dcfce7;
--pdf-success-border: #86efac;
--pdf-success-text: #166534;
--pdf-warning-surface: #fff7ed;
--pdf-warning-border: #fed7aa;
--pdf-warning-text: #9a3412;
--pdf-danger-surface: #fef2f2;
--pdf-danger-soft: #fee2e2;
--pdf-danger-border: #fecaca;
--pdf-danger-text: #b91c1c;
--pdf-overlay: rgba(15, 23, 42, 0.62);
--pdf-dialog-shadow: 0 20px 40px rgba(15, 23, 42, 0.35);
--pdf-card-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
--pdf-paper: #ffffff;
--pdf-paper-placeholder: #f3f4f6;
--pdf-paper-border: #d1d5db;
--pdf-paper-text: #111827;
}
.pdf-toolbox-shell[data-toolbox-theme='dark'] {
--pdf-surface-soft: #20283a;
--pdf-surface-raised: #1b2334;
--pdf-muted: #b6bfd2;
--pdf-muted-soft: #a9b3ca;
--pdf-muted-faint: #8792aa;
--pdf-border: #303a50;
--pdf-border-strong: #465169;
--pdf-primary: #8798f5;
--pdf-on-primary: #101728;
--pdf-control: #293247;
--pdf-control-text: #edf1fb;
--pdf-info-surface: #182946;
--pdf-info-border: #345a8c;
--pdf-info-text: #c6dcff;
--pdf-success-surface: #12382e;
--pdf-success-soft: #174436;
--pdf-success-border: #33765d;
--pdf-success-text: #a7e8cf;
--pdf-warning-surface: #402814;
--pdf-warning-border: #80522d;
--pdf-warning-text: #ffd2a6;
--pdf-danger-surface: #421f29;
--pdf-danger-soft: #4f2530;
--pdf-danger-border: #81394b;
--pdf-danger-text: #ffc0cc;
--pdf-overlay: rgba(2, 6, 16, 0.76);
--pdf-dialog-shadow: 0 24px 52px rgba(0, 0, 0, 0.5);
--pdf-card-shadow: 0 2px 7px rgba(0, 0, 0, 0.26);
}
@media (prefers-color-scheme: dark) {
.pdf-toolbox-shell[data-toolbox-theme='system'] {
--pdf-surface-soft: #20283a;
--pdf-surface-raised: #1b2334;
--pdf-muted: #b6bfd2;
--pdf-muted-soft: #a9b3ca;
--pdf-muted-faint: #8792aa;
--pdf-border: #303a50;
--pdf-border-strong: #465169;
--pdf-primary: #8798f5;
--pdf-on-primary: #101728;
--pdf-control: #293247;
--pdf-control-text: #edf1fb;
--pdf-info-surface: #182946;
--pdf-info-border: #345a8c;
--pdf-info-text: #c6dcff;
--pdf-success-surface: #12382e;
--pdf-success-soft: #174436;
--pdf-success-border: #33765d;
--pdf-success-text: #a7e8cf;
--pdf-warning-surface: #402814;
--pdf-warning-border: #80522d;
--pdf-warning-text: #ffd2a6;
--pdf-danger-surface: #421f29;
--pdf-danger-soft: #4f2530;
--pdf-danger-border: #81394b;
--pdf-danger-text: #ffc0cc;
--pdf-overlay: rgba(2, 6, 16, 0.76);
--pdf-dialog-shadow: 0 24px 52px rgba(0, 0, 0, 0.5);
--pdf-card-shadow: 0 2px 7px rgba(0, 0, 0, 0.26);
}
}
.pdf-toolbox-shell .toolbox-shell__main {
@@ -143,46 +174,59 @@ button.secondary {
gap: 0.75rem;
}
/* Make cards full-width on mobile */
.card {
.pdf-toolbox-shell .toolbox-shell__main input,
.pdf-toolbox-shell .toolbox-shell__main select,
.pdf-toolbox-shell .toolbox-shell__main textarea {
border-color: var(--pdf-border-strong);
background: var(--pdf-surface);
color: var(--pdf-text);
}
.pdf-toolbox-shell .toolbox-shell__main input::placeholder,
.pdf-toolbox-shell .toolbox-shell__main textarea::placeholder {
color: var(--pdf-muted-soft);
}
.pdf-toolbox-shell .toolbox-shell__main a {
color: var(--toolbox-accent);
}
.pdf-toolbox-shell .toolbox-shell__main a:hover {
color: var(--toolbox-accent-hover);
}
.pdf-toolbox-shell .toolbox-shell__main button:disabled {
opacity: 0.58;
}
.pdf-toolbox-shell .toolbox-shell__main button:focus-visible,
.pdf-toolbox-shell .toolbox-shell__main a:focus-visible,
.pdf-toolbox-shell .toolbox-shell__main input:focus-visible,
.pdf-toolbox-shell .toolbox-shell__main select:focus-visible {
outline: 3px solid color-mix(in srgb, var(--toolbox-focus) 72%, transparent);
outline-offset: 2px;
}
.pdf-toolbox-shell .toolbox-shell__main .card {
width: 100%;
}
.download-link {
.pdf-toolbox-shell .toolbox-shell__main .download-link {
display: inline-block;
margin: 0.15rem 0;
font-size: 0.85rem;
}
.card hr {
.pdf-toolbox-shell .toolbox-shell__main .card hr {
border: none;
border-top: 1px solid #e5e7eb;
}
.app-help-button {
border: 1px solid var(--toolbox-border);
border-radius: 999px;
background: transparent;
color: var(--toolbox-accent);
padding: 0.35rem 0.65rem;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
line-height: 1;
}
.app-help-button:hover,
.app-help-button:focus-visible {
background: color-mix(in srgb, var(--toolbox-accent) 10%, transparent);
outline: 2px solid var(--toolbox-accent);
outline-offset: 2px;
border-top: 1px solid var(--pdf-border);
}
.help-dialog-backdrop {
position: fixed;
inset: 0;
z-index: 80;
background: rgba(15, 23, 42, 0.65);
background: var(--pdf-overlay);
display: flex;
align-items: center;
justify-content: center;
@@ -193,9 +237,9 @@ button.secondary {
width: min(920px, 100%);
max-height: min(88vh, 760px);
overflow: auto;
background: #ffffff;
background: var(--pdf-surface-raised);
border-radius: 0.9rem;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.4);
box-shadow: var(--pdf-dialog-shadow);
}
.help-dialog-header {
@@ -207,8 +251,8 @@ button.secondary {
align-items: flex-start;
gap: 1rem;
padding: 1rem;
background: #ffffff;
border-bottom: 1px solid #e5e7eb;
background: var(--pdf-surface-raised);
border-bottom: 1px solid var(--pdf-border);
}
.help-dialog-header h2 {
@@ -218,7 +262,7 @@ button.secondary {
.help-dialog-header p {
margin: 0.35rem 0 0;
color: #4b5563;
color: var(--pdf-muted);
font-size: 0.9rem;
line-height: 1.45;
}
@@ -229,8 +273,8 @@ button.secondary {
border-radius: 999px;
width: 2rem;
height: 2rem;
background: #e5e7eb;
color: #111827;
background: var(--pdf-control);
color: var(--pdf-control-text);
cursor: pointer;
font-size: 1.25rem;
line-height: 1;
@@ -244,10 +288,10 @@ button.secondary {
}
.help-section {
border: 1px solid #e5e7eb;
border: 1px solid var(--pdf-border);
border-radius: 0.75rem;
padding: 0.9rem;
background: #f9fafb;
background: var(--pdf-surface-soft);
}
.help-section h3 {
@@ -263,8 +307,8 @@ button.secondary {
.help-step {
border-radius: 0.65rem;
background: #ffffff;
border: 1px solid #e5e7eb;
background: var(--pdf-surface);
border: 1px solid var(--pdf-border);
padding: 0.75rem;
}
@@ -276,7 +320,7 @@ button.secondary {
.help-step p,
.help-note {
margin: 0.35rem 0 0;
color: #4b5563;
color: var(--pdf-muted);
font-size: 0.85rem;
line-height: 1.45;
}
@@ -292,18 +336,18 @@ button.secondary {
display: inline-flex;
justify-content: center;
border-radius: 0.4rem;
border: 1px solid #d1d5db;
background: #ffffff;
border: 1px solid var(--pdf-border-strong);
background: var(--pdf-surface);
padding: 0.2rem 0.45rem;
font-size: 0.78rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
color: #111827;
box-shadow: inset 0 -1px 0 #d1d5db;
color: var(--pdf-text);
box-shadow: inset 0 -1px 0 var(--pdf-border-strong);
white-space: nowrap;
}
.shortcut-grid span {
color: #4b5563;
color: var(--pdf-muted);
font-size: 0.85rem;
line-height: 1.35;
}
@@ -320,8 +364,8 @@ button.secondary {
}
.help-concepts dl > div {
background: #ffffff;
border: 1px solid #e5e7eb;
background: var(--pdf-surface);
border: 1px solid var(--pdf-border);
border-radius: 0.65rem;
padding: 0.75rem;
}
@@ -334,7 +378,7 @@ button.secondary {
.help-concepts dd {
margin: 0;
color: #4b5563;
color: var(--pdf-muted);
font-size: 0.82rem;
line-height: 1.4;
}
@@ -358,16 +402,16 @@ button.secondary {
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.75rem;
border: 1px solid #bfdbfe;
border: 1px solid var(--pdf-info-border);
border-radius: 0.75rem;
background: rgba(255, 255, 255, 0.8);
background: color-mix(in srgb, var(--pdf-surface) 86%, transparent);
padding: 0.6rem;
}
.merge-queue-order {
border-radius: 999px;
background: #dbeafe;
color: #1e3a8a;
background: var(--pdf-info-surface);
color: var(--pdf-info-text);
font-size: 0.8rem;
font-weight: 700;
padding: 0.2rem 0.5rem;
@@ -386,7 +430,7 @@ button.secondary {
}
.merge-queue-details span {
color: #4b5563;
color: var(--pdf-muted);
font-size: 0.8rem;
}
@@ -418,10 +462,10 @@ button.secondary {
.merge-warning {
margin: 0.75rem 0 0;
border: 1px solid #fed7aa;
border: 1px solid var(--pdf-warning-border);
border-radius: 0.5rem;
background: #fff7ed;
color: #9a3412;
background: var(--pdf-warning-surface);
color: var(--pdf-warning-text);
padding: 0.55rem 0.65rem;
font-size: 0.85rem;
}

7
src/toolboxApp.definition.json
View File

@@ -6,13 +6,6 @@
"icon": "./favicon.svg",
"categories": ["documents", "pdf"],
"tags": ["merge", "split", "rotate", "reorder"],
"actions": [
{
"id": "source",
"label": "Source",
"url": "https://git.add-ideas.de/zemion/pdf-tools/src/tag/v0.3.4"
}
],
"integration": {
"contextVersion": 1,
"launchModes": ["navigate", "new-tab"],

7
src/toolboxApp.test.ts
View File

@@ -7,4 +7,11 @@ describe('toolbox app definition', () => {
it('matches the generated public manifest', () => {
expect(toolboxApp).toEqual(parseToolboxApp(generatedManifest));
});
it('uses repository metadata for the shared source control', () => {
expect(toolboxApp.source?.repository).toBe(
'https://git.add-ideas.de/zemion/pdf-tools'
);
expect(toolboxApp.actions).toBeUndefined();
});
});

2
src/version.ts
View File

@@ -1 +1 @@
export const APP_VERSION = '0.3.4';
export const APP_VERSION = '0.4.0';