Add icon bar partial template with navigation links and iconsHEADmain

1 files changed, 105 insertions, 1 deletions

diff --git a/static/css/tailwind.css b/static/css/tailwind.css
index a461c50..3b695cc 100644
--- a/static/css/tailwind.css
+++ b/static/css/tailwind.css
@@ -1 +1,105 @@
-@import "tailwindcss";
\ No newline at end of file
+@import "tailwindcss";
+
+@theme {
+  --color-dark: #000000;
+  --color-overlay: #1c1c1c;
+
+  --color-text: #ffffff;
+  --color-muted: #636363;
+
+  --color-primary: #6e61d8;
+  --color-primary-hover: #584fc1;
+  --color-secondary: #ff6b9d;
+  --color-secondary-hover: #e55a8c;
+  --color-warning: #f5a623;
+  --color-warning-hover: #d48e1f;
+  --color-success: #4caf50;
+  --color-success-hover: #3b8e3b;
+  --color-error: #f44336;
+  --color-error-hover: #d32f2f;
+
+  --text-xxs: 0.625rem;
+}
+
+/* @theme {
+  --color-bg-dark: #0a0a0f;
+  --color-bg-darker: #16161f;
+  --color-surface: #1e1e2e;
+  --color-surface-hover: #2a2a3e;
+
+  --color-purple: #6c63ff;
+  --color-pink: #ff6b9d;
+  --color-blue: #4dabf7;
+
+  --color-text: #e4e4e7;
+  --color-text-muted: #a1a1aa;
+  --color-text-dim: #71717a;
+}
+
+.gradient-message {
+  background: linear-gradient(135deg, #6c63ff 0%, #8a84ff 100%);
+}
+
+.gradient-primary {
+  background: linear-gradient(135deg, #6c63ff 0%, #ff6b9d 100%);
+}
+
+.glow-input {
+  box-shadow:
+    0 0 0 1px rgba(108, 99, 255, 0.1),
+    0 4px 12px rgba(108, 99, 255, 0.15);
+}
+
+.sidebar-icon {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
+.sidebar-icon:hover {
+  border-radius: 1rem;
+  background-color: var(--color-purple);
+}
+
+.channel-item {
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: all 0.15s;
+  color: var(--color-text-muted);
+}
+
+.channel-item:hover {
+  background-color: var(--color-surface-hover);
+  color: var(--color-text);
+}
+
+.channel-item.active {
+  background-color: var(--color-surface-hover);
+  color: var(--color-text);
+}
+
+.message-bubble {
+  padding: 0.75rem 1rem;
+  border-radius: 1.25rem;
+  max-width: 70%;
+  word-wrap: break-word;
+}
+
+.message-own {
+  background: linear-gradient(135deg, #6c63ff 0%, #8a84ff 100%);
+  color: white;
+  margin-left: auto;
+  border-bottom-right-radius: 0.25rem;
+}
+
+.message-other {
+  background-color: var(--color-surface);
+  color: var(--color-text);
+  border-bottom-left-radius: 0.25rem;
+} */