diff --git a/src/renderer/selectionToolbar.html b/src/renderer/selectionToolbar.html
index 1a219f6472..34efa7effc 100644
--- a/src/renderer/selectionToolbar.html
+++ b/src/renderer/selectionToolbar.html
@@ -2,42 +2,45 @@
-
-
-
- Cherry Studio Selection Toolbar
+
+
+
+ Cherry Studio Selection Toolbar
-
-
-
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
+
+ #root {
+ margin: 0 !important;
+ padding: 0 !important;
+ width: max-content !important;
+ height: fit-content !important;
+ }
+
\ No newline at end of file
diff --git a/src/renderer/src/assets/styles/selection-toolbar.scss b/src/renderer/src/assets/styles/selection-toolbar.scss
index dfbb6bbd59..bfe329c696 100644
--- a/src/renderer/src/assets/styles/selection-toolbar.scss
+++ b/src/renderer/src/assets/styles/selection-toolbar.scss
@@ -5,22 +5,57 @@ html {
}
:root {
- --color-selection-toolbar-background: rgba(20, 20, 20, 0.95);
- --color-selection-toolbar-border: rgba(55, 55, 55, 0.5);
- --color-selection-toolbar-shadow: rgba(50, 50, 50, 0.3);
-
- --color-selection-toolbar-text: rgba(255, 255, 245, 0.9);
- --color-selection-toolbar-hover-bg: #222222;
-
+ // Basic Colors
--color-primary: #00b96b;
--color-error: #f44336;
+
+ --selection-toolbar-color-primary: var(--color-primary);
+ --selection-toolbar-color-error: var(--color-error);
+
+ // Toolbar
+ --selection-toolbar-height: 36px; // default: 36px max: 42px
+ --selection-toolbar-font-size: 14px; // default: 14px
+
+ --selection-toolbar-logo-display: flex; // values: flex | none
+ --selection-toolbar-logo-size: 22px; // default: 22px
+ --selection-toolbar-logo-margin: 0 0 0 5px; // default: 0 0 05px
+
+ // DO NOT MODIFY THESE VALUES, IF YOU DON'T KNOW WHAT YOU ARE DOING
+ --selection-toolbar-padding: 2px 4px 2px 2px; // default: 2px 4px 2px 2px
+ --selection-toolbar-margin: 2px 3px 5px 3px; // default: 2px 3px 5px 3px
+ // ------------------------------------------------------------
+
+ --selection-toolbar-border-radius: 6px;
+ --selection-toolbar-border: 1px solid rgba(55, 55, 55, 0.5);
+ --selection-toolbar-box-shadow: 0px 2px 3px rgba(50, 50, 50, 0.3);
+ --selection-toolbar-background: rgba(20, 20, 20, 0.95);
+
+ // Buttons
+
+ --selection-toolbar-button-icon-size: 16px; // default: 16px
+ --selection-toolbar-button-text-margin: 0 0 0 3px; // default: 0 0 0 3px
+ --selection-toolbar-button-margin: 0 2px; // default: 0 2px
+ --selection-toolbar-button-padding: 4px 6px; // default: 4px 6px
+ --selection-toolbar-button-border-radius: 4px; // default: 4px
+ --selection-toolbar-button-border: none; // default: none
+ --selection-toolbar-button-box-shadow: none; // default: none
+
+ --selection-toolbar-button-text-color: rgba(255, 255, 245, 0.9);
+ --selection-toolbar-button-icon-color: var(--selection-toolbar-button-text-color);
+ --selection-toolbar-button-text-color-hover: var(--selection-toolbar-color-primary);
+ --selection-toolbar-button-icon-color-hover: var(--selection-toolbar-color-primary);
+ --selection-toolbar-button-bgcolor: transparent; // default: transparent
+ --selection-toolbar-button-bgcolor-hover: #222222;
}
[theme-mode='light'] {
- --color-selection-toolbar-background: rgba(245, 245, 245, 0.95);
- --color-selection-toolbar-border: rgba(200, 200, 200, 0.5);
- --color-selection-toolbar-shadow: rgba(50, 50, 50, 0.3);
+ --selection-toolbar-border: 1px solid rgba(200, 200, 200, 0.5);
+ --selection-toolbar-box-shadow: 0px 2px 3px rgba(50, 50, 50, 0.3);
+ --selection-toolbar-background: rgba(245, 245, 245, 0.95);
- --color-selection-toolbar-text: rgba(0, 0, 0, 1);
- --color-selection-toolbar-hover-bg: rgba(0, 0, 0, 0.04);
+ --selection-toolbar-button-text-color: rgba(0, 0, 0, 1);
+ --selection-toolbar-button-icon-color: var(--selection-toolbar-button-text-color);
+ --selection-toolbar-button-text-color-hover: var(--selection-toolbar-color-primary);
+ --selection-toolbar-button-icon-color-hover: var(--selection-toolbar-color-primary);
+ --selection-toolbar-button-bgcolor-hover: rgba(0, 0, 0, 0.04);
}
diff --git a/src/renderer/src/windows/selection/toolbar/SelectionToolbar.tsx b/src/renderer/src/windows/selection/toolbar/SelectionToolbar.tsx
index 21c54a923f..af6a94372c 100644
--- a/src/renderer/src/windows/selection/toolbar/SelectionToolbar.tsx
+++ b/src/renderer/src/windows/selection/toolbar/SelectionToolbar.tsx
@@ -260,32 +260,29 @@ const Container = styled.div`
display: inline-flex;
flex-direction: row;
align-items: center;
- border-radius: 6px;
- background-color: var(--color-selection-toolbar-background);
- border-color: var(--color-selection-toolbar-border);
- box-shadow: 0px 2px 3px var(--color-selection-toolbar-shadow);
- padding: 2px;
- margin: 2px 3px 5px 3px;
+ height: var(--selection-toolbar-height);
+ border-radius: var(--selection-toolbar-border-radius);
+ border: var(--selection-toolbar-border);
+ box-shadow: var(--selection-toolbar-box-shadow);
+ background: var(--selection-toolbar-background);
+ padding: var(--selection-toolbar-padding) !important;
+ margin: var(--selection-toolbar-margin) !important;
user-select: none;
- border-width: 1px;
- border-style: solid;
- height: 36px;
- padding-right: 4px;
box-sizing: border-box;
`
const LogoWrapper = styled.div<{ $draggable: boolean }>`
- display: flex;
+ display: var(--selection-toolbar-logo-display);
align-items: center;
justify-content: center;
- margin-left: 5px;
+ margin: var(--selection-toolbar-logo-margin);
background-color: transparent;
${({ $draggable }) => $draggable && ' -webkit-app-region: drag;'}
`
const Logo = styled(Avatar)`
- height: 22px;
- width: 22px;
+ height: var(--selection-toolbar-logo-size);
+ width: var(--selection-toolbar-logo-size);
&.animate {
animation: rotate 1s ease;
}
@@ -318,37 +315,37 @@ const ActionButton = styled.div`
flex-direction: row;
align-items: center;
justify-content: center;
- margin: 0 2px;
- background-color: transparent;
- cursor: pointer;
- border-radius: 4px;
- padding: 4px 6px;
+ cursor: pointer !important;
+ margin: var(--selection-toolbar-button-margin);
+ padding: var(--selection-toolbar-button-padding);
+ background-color: var(--selection-toolbar-button-bgcolor);
+ border-radius: var(--selection-toolbar-button-border-radius);
+ border: var(--selection-toolbar-button-border);
+ box-shadow: var(--selection-toolbar-button-box-shadow);
transition: all 0.1s ease-in-out;
will-change: color, background-color;
.btn-icon {
- width: 16px;
- height: 16px;
- color: var(--color-selection-toolbar-text);
+ width: var(--selection-toolbar-button-icon-size);
+ height: var(--selection-toolbar-button-icon-size);
+ color: var(--selection-toolbar-button-icon-color);
background-color: transparent;
transition: color 0.1s ease-in-out;
will-change: color;
}
.btn-title {
- color: var(--color-selection-toolbar-text);
- --font-size: 14px;
+ color: var(--selection-toolbar-button-text-color);
transition: color 0.1s ease-in-out;
will-change: color;
}
&:hover {
- color: var(--color-primary);
.btn-icon {
- color: var(--color-primary);
+ color: var(--selection-toolbar-button-icon-color-hover);
}
.btn-title {
- color: var(--color-primary);
+ color: var(--selection-toolbar-button-text-color-hover);
}
- background-color: var(--color-selection-toolbar-hover-bg);
+ background-color: var(--selection-toolbar-button-bgcolor-hover);
}
`
const ActionIcon = styled.div`
@@ -356,8 +353,8 @@ const ActionIcon = styled.div`
align-items: center;
justify-content: center;
position: relative;
- height: 16px;
- width: 16px;
+ height: var(--selection-toolbar-button-icon-size);
+ width: var(--selection-toolbar-button-icon-size);
background-color: transparent;
.btn-icon {
@@ -372,11 +369,11 @@ const ActionIcon = styled.div`
}
.icon-fail {
- color: var(--color-error);
+ color: var(--selection-toolbar-color-error);
}
.icon-success {
- color: var(--color-primary);
+ color: var(--selection-toolbar-color-primary);
}
.icon-scale-in {
@@ -436,12 +433,12 @@ const ActionIcon = styled.div`
}
`
const ActionTitle = styled.span`
- font-size: 14px;
+ font-size: var(--selection-toolbar-font-size);
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- margin-left: 3px;
+ margin: var(--selection-toolbar-button-text-margin);
background-color: transparent;
`