From 11c44e38f2c8281b26ce1e1a304dc559f7150d53 Mon Sep 17 00:00:00 2001 From: dimitrievgs Date: Wed, 17 Sep 2025 02:30:25 +0300 Subject: [PATCH] shire colors in styles.css --- src/css/styles.css | 62 ++++++++++++++++++++++++++++------------------ 1 file changed, 38 insertions(+), 24 deletions(-) diff --git a/src/css/styles.css b/src/css/styles.css index ae4b24c..0bd57e7 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -1,24 +1,24 @@ /* src/styles.css или куда ты добавляешь стили */ +/* CSS переменные, чтобы создать атмосферу Шира из "Властелина колец" */ :root { /* Цвета сообщений чата */ - --llm-user-border-color: #78B0E3; - --llm-user-background-color: #C5E1FF; - --llm-llm-border-color: #A8D8AD; - --llm-llm-background-color: #DBF5DD; - --llm-tool-border-color: #FFD180; - --llm-tool-background-color: #FFF0C9; - --llm-error-border-color: #FF6666; - --llm-error-background-color: #FFCCCC; - --llm-assistant-border-color: #B0B0B0; /* Нейтральный серый для ассистента */ - --llm-assistant-background-color: #E0E0E0; /* Светло-серый фон */ + --llm-user-border-color: #79A07E; /* Ширский зеленый */ + --llm-user-background-color: #E6F2E6; /* Очень светлый ширский зеленый */ + --llm-llm-border-color: #B2A27E; /* Нейтральный, землистый оттенок */ + --llm-llm-background-color: #F8F3E9; /* Светлый кремовый */ + --llm-tool-border-color: #B08D57; /* Древесный коричневый */ + --llm-tool-background-color: #FDF4E3; /* Светлый песочный */ + --llm-error-border-color: #C25B5B; /* Приглушенный красный */ + --llm-error-background-color: #F7E0E0; /* Светлый приглушенный красный */ + --llm-assistant-border-color: #9C9C8F; /* Серый камень */ + --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; /* Или ваш основной цвет кнопки */ - color: white !important; /* Цвет текста на кнопке */ + background-color: var(--button-primary-background) !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); - color: var(--text-muted); + background-color: var(--button-secondary-background); /* Используем переменную для второстепенных кнопок */ + 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); - filter: brightness(1.1); + background-color: var(--button-secondary-hover-background); /* Используем переменную для наведения второстепенных кнопок */ + filter: brightness(1.1); /* Можно оставить или скорректировать под тему */ } .model-name { @@ -313,10 +327,10 @@ /* right: 0; */ /* Это может привести к растягиванию, лучше оставить auto или задать ширину */ width: max-content; /* Чтобы дропдаун не растягивался на всю ширину родителя */ min-width: 150px; /* Минимальная ширина */ - background-color: var(--background-primary); - border: 1px solid var(--background-modifier-border); + background-color: var(--background-primary); /* Предполагается, что --background-primary есть и подходит */ + 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); - border: 1px solid var(--background-modifier-border); + background-color: var(--background-primary); /* Предполагается, что --background-primary есть и подходит */ + 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 {