mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2025-08-26 14:19:24 +00:00
Theme tweaks
This commit is contained in:
parent
2c5354fa1d
commit
1a6e1fea2a
@ -132,12 +132,12 @@ const PageEditorControls = ({
|
||||
|
||||
{/* Undo/Redo */}
|
||||
<Tooltip label="Undo">
|
||||
<ActionIcon onClick={onUndo} disabled={!canUndo} size="lg">
|
||||
<ActionIcon onClick={onUndo} disabled={!canUndo} variant="subtle" radius="md" size="lg">
|
||||
<UndoIcon />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip label="Redo">
|
||||
<ActionIcon onClick={onRedo} disabled={!canRedo} size="lg">
|
||||
<ActionIcon onClick={onRedo} disabled={!canRedo} variant="subtle" radius="md" size="lg">
|
||||
<RedoIcon />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
@ -149,8 +149,9 @@ const PageEditorControls = ({
|
||||
<ActionIcon
|
||||
onClick={() => onRotate('left')}
|
||||
disabled={selectionMode && selectedPages.length === 0}
|
||||
variant={selectionMode && selectedPages.length > 0 ? "light" : "default"}
|
||||
color={selectionMode && selectedPages.length > 0 ? "blue" : undefined}
|
||||
variant="subtle"
|
||||
style={{ color: 'var(--mantine-color-dimmed)' }}
|
||||
radius="md"
|
||||
size="lg"
|
||||
>
|
||||
<RotateLeftIcon />
|
||||
@ -160,8 +161,9 @@ const PageEditorControls = ({
|
||||
<ActionIcon
|
||||
onClick={() => onRotate('right')}
|
||||
disabled={selectionMode && selectedPages.length === 0}
|
||||
variant={selectionMode && selectedPages.length > 0 ? "light" : "default"}
|
||||
color={selectionMode && selectedPages.length > 0 ? "blue" : undefined}
|
||||
variant="subtle"
|
||||
style={{ color: 'var(--mantine-color-dimmed)' }}
|
||||
radius="md"
|
||||
size="lg"
|
||||
>
|
||||
<RotateRightIcon />
|
||||
@ -172,8 +174,8 @@ const PageEditorControls = ({
|
||||
<ActionIcon
|
||||
onClick={onDelete}
|
||||
disabled={selectedPages.length === 0}
|
||||
color="red"
|
||||
variant={selectedPages.length > 0 ? "light" : "default"}
|
||||
variant={selectedPages.length > 0 ? "light" : "subtle"}
|
||||
radius="md"
|
||||
size="lg"
|
||||
>
|
||||
<DeleteIcon />
|
||||
@ -184,8 +186,9 @@ const PageEditorControls = ({
|
||||
<ActionIcon
|
||||
onClick={selectionMode ? onSplit : onSplitAll}
|
||||
disabled={selectionMode && selectedPages.length === 0}
|
||||
variant={selectionMode && selectedPages.length > 0 ? "light" : "default"}
|
||||
color={selectionMode && selectedPages.length > 0 ? "blue" : undefined}
|
||||
variant="subtle"
|
||||
style={{ color: 'var(--mantine-color-dimmed)' }}
|
||||
radius="md"
|
||||
size="lg"
|
||||
>
|
||||
<ContentCutIcon />
|
||||
@ -195,8 +198,9 @@ const PageEditorControls = ({
|
||||
<ActionIcon
|
||||
onClick={selectionMode ? onPageBreak : onPageBreakAll}
|
||||
disabled={selectionMode && selectedPages.length === 0}
|
||||
variant={selectionMode && selectedPages.length > 0 ? "light" : "default"}
|
||||
color={selectionMode && selectedPages.length > 0 ? "orange" : undefined}
|
||||
variant="subtle"
|
||||
style={{ color: 'var(--mantine-color-dimmed)' }}
|
||||
radius="md"
|
||||
size="lg"
|
||||
>
|
||||
<InsertPageBreakIcon />
|
||||
@ -209,8 +213,8 @@ const PageEditorControls = ({
|
||||
<ActionIcon
|
||||
onClick={onExportSelected}
|
||||
disabled={exportLoading || selectedPages.length === 0}
|
||||
color="blue"
|
||||
variant={selectedPages.length > 0 ? "light" : "default"}
|
||||
variant={selectedPages.length > 0 ? "light" : "subtle"}
|
||||
radius="md"
|
||||
size="lg"
|
||||
>
|
||||
<DownloadIcon />
|
||||
@ -221,8 +225,8 @@ const PageEditorControls = ({
|
||||
<ActionIcon
|
||||
onClick={onExportAll}
|
||||
disabled={exportLoading}
|
||||
color="green"
|
||||
variant="light"
|
||||
radius="md"
|
||||
size="lg"
|
||||
>
|
||||
<DownloadIcon />
|
||||
|
@ -379,8 +379,8 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
|
||||
className={styles.pageNumber}
|
||||
size="sm"
|
||||
fw={500}
|
||||
c="white"
|
||||
style={{
|
||||
color: 'white', // Keep white for page numbers as they have colored backgrounds
|
||||
position: 'absolute',
|
||||
top: 5,
|
||||
left: 5,
|
||||
@ -402,7 +402,8 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
|
||||
bottom: 8,
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
background: 'rgba(0, 0, 0, 0.8)',
|
||||
backgroundColor: 'var(--mantine-color-default-hover)',
|
||||
border: '1px solid rgba(128, 128, 128, 0.3)',
|
||||
padding: '6px 12px',
|
||||
borderRadius: 20,
|
||||
opacity: 0,
|
||||
@ -421,7 +422,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
|
||||
<ActionIcon
|
||||
size="md"
|
||||
variant="subtle"
|
||||
c="white"
|
||||
style={{ color: 'var(--mantine-color-dimmed)' }}
|
||||
disabled={index === 0}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
@ -444,7 +445,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
|
||||
<ActionIcon
|
||||
size="md"
|
||||
variant="subtle"
|
||||
c="white"
|
||||
style={{ color: 'var(--mantine-color-dimmed)' }}
|
||||
disabled={index === totalPages - 1}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
@ -467,7 +468,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
|
||||
<ActionIcon
|
||||
size="md"
|
||||
variant="subtle"
|
||||
c="white"
|
||||
style={{ color: 'var(--mantine-color-dimmed)' }}
|
||||
onClick={handleRotateLeft}
|
||||
>
|
||||
<RotateLeftIcon style={{ fontSize: 20 }} />
|
||||
@ -478,7 +479,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
|
||||
<ActionIcon
|
||||
size="md"
|
||||
variant="subtle"
|
||||
c="white"
|
||||
style={{ color: 'var(--mantine-color-dimmed)' }}
|
||||
onClick={handleRotateRight}
|
||||
>
|
||||
<RotateRightIcon style={{ fontSize: 20 }} />
|
||||
@ -501,7 +502,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
|
||||
<ActionIcon
|
||||
size="md"
|
||||
variant="subtle"
|
||||
c="white"
|
||||
style={{ color: 'var(--mantine-color-dimmed)' }}
|
||||
onClick={handleSplit}
|
||||
>
|
||||
<ContentCutIcon style={{ fontSize: 20 }} />
|
||||
|
Loading…
x
Reference in New Issue
Block a user