-
对话场景
-
-
+ 
+
+
+
+ 
+
+
+
+
{
$primary-color: #4CAF50;
$text-color: #333;
$text-color-dark: #fff;
-$background-color: #ffffff;
+$background-color: #F7F7F7;
$background-color-dark: #1e1e1e;
$border-color: #e0e0e0;
$border-color-dark: #333;
@@ -169,19 +183,25 @@ $hover-color-dark: #2d2d2d;
width: 64px;
min-width: 64px;
- .mode-title {
- display: none;
+ .mode-header {
+ justify-content: center;
+ padding: 0;
}
.mode-item {
- padding: 15px;
+ padding: 15px 0;
justify-content: center;
.mode-name {
display: none;
}
- }
+ .emoji-icon {
+ font-size: 24px;
+ width: 32px;
+ }
+ }
+
.header-actions {
width: 100%;
justify-content: center;
@@ -189,14 +209,13 @@ $hover-color-dark: #2d2d2d;
}
.mode-header {
- padding: 0 20px;
+ padding: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
- gap: 10px;
height: 60px;
border-bottom: 1px solid #e5e5e5;
-
+
.header-actions {
display: flex;
align-items: center;
@@ -211,6 +230,28 @@ $hover-color-dark: #2d2d2d;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .lgoo-icon {
+ vertical-align: middle;
+ transition: all 0.3s ease;
+ height: 36px;
+ width: auto;
+ }
+ }
+
+ .collapsed-logo {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+
+ .lgoo-icon-small {
+ height: 36px;
+ width: auto;
+ }
}
.history-btn {
@@ -264,6 +305,7 @@ $hover-color-dark: #2d2d2d;
display: flex;
flex-direction: column;
gap: 5px;
+ margin-top: 10px;
}
.mode-item {
@@ -293,6 +335,7 @@ $hover-color-dark: #2d2d2d;
.emoji-icon {
font-size: 20px;
width: 24px;
+ height: 24px;
text-align: center;
line-height: 1;
display: inline-flex;
@@ -385,7 +428,13 @@ $hover-color-dark: #2d2d2d;
z-index: 1000;
&.collapsed {
- transform: translateX(-240px);
+ transform: translateX(-100%);
+ width: 64px;
+ min-width: 64px;
+
+ .collapsed-logo {
+ padding: 0 5px;
+ }
}
&:not(.collapsed) {