From 33621442bad6ffe78840dc95984199d3b339d832 Mon Sep 17 00:00:00 2001 From: "A.J. Shulman" Date: Thu, 6 Jun 2024 11:36:59 -0400 Subject: added intro message --- src/client/views/nodes/ChatBox/ChatBox.scss | 77 ++++++++++++++--------------- 1 file changed, 37 insertions(+), 40 deletions(-) (limited to 'src/client/views/nodes/ChatBox/ChatBox.scss') diff --git a/src/client/views/nodes/ChatBox/ChatBox.scss b/src/client/views/nodes/ChatBox/ChatBox.scss index f1ad3d074..a08b98f50 100644 --- a/src/client/views/nodes/ChatBox/ChatBox.scss +++ b/src/client/views/nodes/ChatBox/ChatBox.scss @@ -24,15 +24,14 @@ $border-radius: 8px; padding: 10px; display: flex; flex-direction: column-reverse; - + &::-webkit-scrollbar { - width: 8px; + width: 8px; } &::-webkit-scrollbar-thumb { - background-color: darken($background-color, 10%); - border-radius: $border-radius; + background-color: darken($background-color, 10%); + border-radius: $border-radius; } - .chat-content { display: flex; @@ -52,10 +51,10 @@ $border-radius: 8px; align-items: center; max-width: 70%; word-break: break-word; - .message-footer { // Assuming this is the container for the toggle button + .message-footer { + // Assuming this is the container for the toggle button //max-width: 70%; - - + .toggle-logs-button { margin-top: 10px; // Padding on sides to align with the text above width: 95%; @@ -88,35 +87,34 @@ $border-radius: 8px; max-height: 150px; // Ensuring it does not grow too large overflow-y: auto; } - - } - + } + .custom-link { color: lightblue; text-decoration: underline; cursor: pointer; - } + } &.user { - align-self: flex-end; - background-color: $button-color; - color: #fff; + align-self: flex-end; + background-color: $button-color; + color: #fff; } - + &.chatbot { - align-self: flex-start; - background-color: $input-background; - color: $text-color; + align-self: flex-start; + background-color: $input-background; + color: $text-color; } - + span { - flex-grow: 1; - padding-right: 10px; + flex-grow: 1; + padding-right: 10px; } - + img { - max-width: 50px; - max-height: 50px; - border-radius: 50%; + max-width: 50px; + max-height: 50px; + border-radius: 50%; } } } @@ -132,8 +130,8 @@ $border-radius: 8px; padding: 10px; background-color: $input-background; box-shadow: inset 0 -1px 2px $shadow-color; - - input[type="text"] { + + input[type='text'] { flex-grow: 1; border: 1px solid darken($input-background, 10%); border-radius: $border-radius; @@ -143,16 +141,16 @@ $border-radius: 8px; button { padding: 8px 16px; - background-color: $button-color; - color: #fff; - border: none; - border-radius: $border-radius; - cursor: pointer; - transition: background-color 0.3s; - - &:hover { - background-color: $button-hover-color; - } + background-color: $button-color; + color: #fff; + border: none; + border-radius: $border-radius; + cursor: pointer; + transition: background-color 0.3s; + + &:hover { + background-color: $button-hover-color; + } } margin-bottom: 0; } @@ -178,7 +176,6 @@ $border-radius: 8px; } } - .modal { position: fixed; top: 0; @@ -217,7 +214,7 @@ $border-radius: 8px; border: none; border-radius: $border-radius; cursor: pointer; - margin: 5px; + //margin: 5px; transition: background-color 0.3s; &:hover { -- cgit v1.2.3-70-g09d2