From 65e2c27a7e327b9efa4055224501359142b150da Mon Sep 17 00:00:00 2001
From: sbosse <sbosse@uni-bremen.de>
Date: Mon, 21 Jul 2025 23:37:01 +0200
Subject: [PATCH] Mon 21 Jul 22:43:21 CEST 2025

---
 js/ui/botui/src/styles/themes/default.scss | 182 +++++++++++++++++++++
 1 file changed, 182 insertions(+)
 create mode 100644 js/ui/botui/src/styles/themes/default.scss

diff --git a/js/ui/botui/src/styles/themes/default.scss b/js/ui/botui/src/styles/themes/default.scss
new file mode 100644
index 0000000..16ce68e
--- /dev/null
+++ b/js/ui/botui/src/styles/themes/default.scss
@@ -0,0 +1,182 @@
+
+/*
+  Default theme for BotUI
+*/
+
+// you can use your own font.
+@import url('https://fonts.googleapis.com/css?family=Open+Sans');
+
+$font-family: 'Open Sans', sans-serif;
+$primary-color: #919292;
+
+.botui-container {
+  font-size: 14px;
+  background-color: #fff;
+  font-family: $font-family;
+}
+
+.botui-messages-container {
+  padding: 10px 20px;
+}
+
+.botui-actions-container {
+  padding: 10px 20px;
+}
+
+.botui-message {
+  min-height: 30px;
+}
+
+.botui-message-content {
+  padding: 7px 13px;
+  border-radius: 15px;
+  color: darken($primary-color, 22%);
+  background-color: lighten($primary-color, 35%);
+
+  &.human { // if human = true
+    color: lighten($primary-color, 40%);
+    background-color: $primary-color;
+  }
+
+  &.text {
+    line-height: 1.3;
+  }
+  &.loading {
+    background-color: rgba(206,206,206,0.50);
+    line-height: 1.3;
+    text-align: center;
+  }
+  &.embed {
+    padding: 5px;
+    border-radius: 5px;
+  }
+}
+
+.botui-message-content-link {
+  color: $primary-color;
+}
+
+.botui-actions-text-input {
+  border: 0;
+  outline: none;
+  border-radius: 0;
+  padding: 5px 7px;
+  font-family: $font-family;
+  background-color: transparent;
+  color: darken($primary-color, 22%);
+  border-bottom: 1px solid $primary-color;
+}
+
+.botui-actions-text-submit {
+  color: #fff;
+  width: 30px;
+  padding: 5px;
+  height: 30px;
+  line-height: 1;
+  border-radius: 50%;
+  border: 1px solid $primary-color;
+  background: darken($primary-color, 10%);
+}
+
+.botui-actions-buttons-button {
+  border: 0;
+  color: #fff;
+  line-height: 1;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 7px 15px;
+  border-radius: 4px;
+  font-family: $font-family;
+  background: darken($primary-color, 10%);
+  box-shadow: 2px 3px 4px 0 rgba(0,0,0,.25);
+}
+
+.botui-actions-text-select {
+    border: 0;
+    outline: 0;
+    border-radius: 0;
+    padding: 5px 7px;
+    font-family: "Open Sans",sans-serif;
+    background-color: transparent;
+    color: #595a5a;
+    border-bottom: 1px solid #919292;
+}
+
+.botui-actions-text-searchselect {
+    border: 0;
+    outline: 0;
+    border-radius: 0;
+    padding: 5px 7px;
+    font-family: "Open Sans",sans-serif;
+    background-color: transparent;
+    color: #595a5a;
+    border-bottom: 1px solid #919292;
+}
+.botui-actions-text-searchselect .dropdown-toggle {
+    border: none !important;
+}
+
+.botui-actions-text-searchselect .selected-tag {
+  background-color: transparent !important;
+  border: 0 !important;
+}
+
+/*
+  Animation of messages
+  For details on how to change, see: https://vuejs.org/v2/guide/transitions.html
+*/
+
+
+.slide-fade-enter-active {
+  transition: all .3s ease;
+}
+
+.slide-fade-enter,
+.slide-fade-leave-to {
+  opacity: 0;
+  transform: translateX(-10px);
+}
+
+/*
+  Animation of loading dots
+*/
+.dot {
+  width: .5rem;
+  height: .5rem;
+  border-radius: .5rem;
+  display: inline-block;
+  background-color: $primary-color;
+  &:nth-last-child(1) {
+    margin-left: .3rem;
+    animation: loading .6s .3s linear infinite;
+  }
+  &:nth-last-child(2) {
+    margin-left: .3rem;
+    animation: loading .6s .2s linear infinite;
+  }
+  &:nth-last-child(3) {
+    animation: loading .6s .1s linear infinite;
+  }
+}
+
+@keyframes loading {
+  0% {
+    transform: translate(0, 0);
+    background-color: lighten($primary-color, 10%);
+  }
+
+  25% {
+    transform: translate(0, -3px);
+  }
+  50% {
+    transform: translate(0, 0px);
+    background-color: lighten($primary-color, 10%);
+  }
+  75% {
+    transform: translate(0, 3px);
+  }
+  100% {
+    transform: translate(0, 0px);
+  }
+}