shire colors in styles.css

src/css/styles.css

@@ -1,24 +1,24 @@
 /* src/styles.css или куда ты добавляешь стили */
 
+/* CSS переменные, чтобы создать атмосферу Шира из "Властелина колец" */
 :root {
     /* Цвета сообщений чата */
-    --llm-user-border-color: #78B0E3;
+    --llm-user-border-color: #79A07E; /* Ширский зеленый */
-    --llm-user-background-color: #C5E1FF;
+    --llm-user-background-color: #E6F2E6; /* Очень светлый ширский зеленый */
-    --llm-llm-border-color: #A8D8AD;
+    --llm-llm-border-color: #B2A27E; /* Нейтральный, землистый оттенок */
-    --llm-llm-background-color: #DBF5DD;
+    --llm-llm-background-color: #F8F3E9; /* Светлый кремовый */
-    --llm-tool-border-color: #FFD180;
+    --llm-tool-border-color: #B08D57; /* Древесный коричневый */
-    --llm-tool-background-color: #FFF0C9;
+    --llm-tool-background-color: #FDF4E3; /* Светлый песочный */
-    --llm-error-border-color: #FF6666;
+    --llm-error-border-color: #C25B5B; /* Приглушенный красный */
-    --llm-error-background-color: #FFCCCC;
+    --llm-error-background-color: #F7E0E0; /* Светлый приглушенный красный */
-    --llm-assistant-border-color: #B0B0B0; /* Нейтральный серый для ассистента */
+    --llm-assistant-border-color: #9C9C8F; /* Серый камень */
-    --llm-assistant-background-color: #E0E0E0; /* Светло-серый фон */
+    --llm-assistant-background-color: #ECECE4; /* Светло-серый, землистый */
 
     /* Общие стили узлов графа */
     --node-padding: 10px;
     --node-border-radius: 5px;
     --node-font-size: 14px;
     --node-font-weight: bold;
-    --node-text-color: #333;
     --node-text-align: center;
 
     /* Переменные для текста */
@@ -28,6 +28,20 @@
     --background-secondary-alt: #f0f0f0;
     --font-monospace: 'Roboto Mono', monospace;
     --text-accent: #007bff;
+
+    /* Цвета для кнопок и интерактивных элементов */
+    --button-primary-background: #5A8F6A; /* Насыщенный ширский зеленый для кнопок */
+    --button-primary-hover-background: #4A7A5C; /* Темнее для наведения */
+    --button-primary-text-color: #FFFFFF; /* Белый текст */
+    --button-secondary-background: #D9D1BF; /* Светлый землистый для второстепенных кнопок */
+    --button-secondary-hover-background: #C4BDA9; /* Темнее для наведения */
+    --button-secondary-text-color: #333333; /* Темный текст для второстепенных */
+    --border-color-light: #D3CBBD; /* Светлая граница, землистая */
+    --border-color-dark: #A99B87; /* Темная граница, землистая */
+    --background-modifier-form-field: #F5EFE1; /* Светлый земляной фон для полей */
+    --background-modifier-form-field-highlighted: #E4DCCF; /* Немного темнее для выделенных полей */
+
+    --node-text-color: var(--text-normal); /* Используем общую переменную для текста узлов */
 }
 
 .llm-agent-chat-panel .message-type-user {
@@ -204,8 +218,8 @@
     /* Явно переопределяем стили, которые могли быть затронуты */
     width: auto; /* Убедимся, что ширина не ограничена */
     height: auto; /* Убедимся, что высота не ограничена */
-    background-color: #0078d4 !important; /* Или ваш основной цвет кнопки */
+    background-color: var(--button-primary-background) !important; /* Используем переменную для основного цвета кнопки */
-    color: white !important; /* Цвет текста на кнопке */
+    color: var(--button-primary-text-color) !important; /* Используем переменную для цвета текста кнопки */
     opacity: 1; /* Если .clickable-icon устанавливает opacity */
     display: inline-flex; /* Или flex, если нужно выравнивание элементов внутри */
     align-items: center; /* Для вертикального выравнивания контента, если display: flex */
@@ -213,7 +227,7 @@
 }
 
 #send-button:hover {
-    background-color: #0056b3 !important;
+    background-color: var(--button-primary-hover-background) !important; /* Переменная для наведения */
 }
 
 
@@ -280,16 +294,16 @@
     padding: 4px 8px;
     border: none;
     border-radius: 8px;
-    background-color: var(--background-modifier-form-field);
+    background-color: var(--button-secondary-background); /* Используем переменную для второстепенных кнопок */
-    color: var(--text-muted);
+    color: var(--button-secondary-text-color); /* Используем переменную для текста второстепенных кнопок */
     cursor: pointer;
     font-size: 11px;
     transition: all 0.2s;
 }
 
 .model-select-button:hover {
-    background-color: var(--background-modifier-form-field-highlighted);
+    background-color: var(--button-secondary-hover-background); /* Используем переменную для наведения второстепенных кнопок */
-    filter: brightness(1.1);
+    filter: brightness(1.1); /* Можно оставить или скорректировать под тему */
 }
 
 .model-name {
@@ -313,10 +327,10 @@
     /* right: 0; */ /* Это может привести к растягиванию, лучше оставить auto или задать ширину */
     width: max-content; /* Чтобы дропдаун не растягивался на всю ширину родителя */
     min-width: 150px; /* Минимальная ширина */
-    background-color: var(--background-primary);
+    background-color: var(--background-primary); /* Предполагается, что --background-primary есть и подходит */
-    border: 1px solid var(--background-modifier-border);
+    border: 1px solid var(--border-color-dark); /* Используем новую переменную для границы */
     border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Можно скорректировать тень в соответствии с темой */
     z-index: 1000;
     /* margin-bottom: 4px; */ /* Это будет задавать JS через top/bottom */
     max-height: 200px;
@@ -371,14 +385,14 @@
     bottom: 100%;
     left: 0;
     right: 0;
-    background-color: var(--background-primary);
+    background-color: var(--background-primary); /* Предполагается, что --background-primary есть и подходит */
-    border: 1px solid var(--background-modifier-border);
+    border: 1px solid var(--border-color-dark); /* Используем новую переменную для границы */
     border-radius: 8px;
     max-height: 150px;
     overflow-y: auto;
     z-index: 100;
     margin-bottom: 4px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Можно скорректировать тень в соответствии с темой */
 }
 
 .suggestion-item {