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