feat: global styles with Tabler dark theme, 3-column layout
This commit is contained in:
Ken
@@ -0,0 +1,300 @@
|
||||
/* Tabler CSS imports */
|
||||
@import "@tabler/core/dist/css/tabler.min.css";
|
||||
@import "@tabler/core/dist/css/tabler-vendors.min.css";
|
||||
|
||||
/* Force dark theme */
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* Base styles */
|
||||
body {
|
||||
background: #1a1a2e;
|
||||
color: #e0e0e0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
|
||||
"Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#root {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
3-COLUMN LAYOUT
|
||||
============================================================ */
|
||||
|
||||
.app-layout {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Left sidebar */
|
||||
.sidebar {
|
||||
width: 240px;
|
||||
min-width: 240px;
|
||||
background: #16213e;
|
||||
border-right: 1px solid #2a2a4a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Centre chat panel */
|
||||
.chat-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Right panel */
|
||||
.right-panel {
|
||||
width: 45%;
|
||||
min-width: 300px;
|
||||
background: #16213e;
|
||||
border-left: 1px solid #2a2a4a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
SIDEBAR COMPONENTS
|
||||
============================================================ */
|
||||
|
||||
.sidebar-header {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #2a2a4a;
|
||||
}
|
||||
|
||||
.sidebar-header h3 {
|
||||
font-size: 0.9rem;
|
||||
text-transform: uppercase;
|
||||
color: #8888aa;
|
||||
letter-spacing: 0.08em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.session-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.session-item {
|
||||
padding: 0.6rem 0.8rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
color: #c0c0d0;
|
||||
}
|
||||
|
||||
.session-item:hover {
|
||||
background: #1e2a4a;
|
||||
}
|
||||
|
||||
.session-item.active {
|
||||
background: #2a3a5a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.session-meta {
|
||||
font-size: 0.7rem;
|
||||
color: #6a6a8a;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
CHAT COMPONENTS
|
||||
============================================================ */
|
||||
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.chat-message {
|
||||
max-width: 85%;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.chat-message.user {
|
||||
margin-left: auto;
|
||||
background: #2a3a6a;
|
||||
border-radius: 12px 12px 4px 12px;
|
||||
padding: 0.8rem 1rem;
|
||||
}
|
||||
|
||||
.chat-message.assistant {
|
||||
background: #1e2a4a;
|
||||
border-radius: 12px 12px 12px 4px;
|
||||
padding: 0.8rem 1rem;
|
||||
}
|
||||
|
||||
.chat-message.assistant p {
|
||||
margin: 0.3rem 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.chat-input-area {
|
||||
padding: 1rem;
|
||||
border-top: 1px solid #2a2a4a;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.chat-input-area input,
|
||||
.chat-input-area textarea {
|
||||
background: #1e2a4a;
|
||||
border: 1px solid #3a3a5a;
|
||||
border-radius: 8px;
|
||||
color: #e0e0e0;
|
||||
flex: 1;
|
||||
padding: 0.6rem 0.8rem;
|
||||
}
|
||||
|
||||
.chat-input-area input:focus,
|
||||
.chat-input-area textarea:focus {
|
||||
border-color: #5a7aba;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.chat-input-area button {
|
||||
background: #3a5aba;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 0.6rem 1.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chat-input-area button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
TOOL CALL CARDS
|
||||
============================================================ */
|
||||
|
||||
.tool-call-card {
|
||||
background: #12192e;
|
||||
border: 1px solid #2a2a4a;
|
||||
border-radius: 8px;
|
||||
padding: 0.6rem 0.8rem;
|
||||
margin: 0.5rem 0;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.tool-name {
|
||||
color: #7aa2f7;
|
||||
font-weight: 600;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.tool-args {
|
||||
color: #8888aa;
|
||||
font-family: monospace;
|
||||
font-size: 0.75rem;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.tool-status {
|
||||
display: inline-block;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.7rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.tool-status.running {
|
||||
background: #2a4a3a;
|
||||
color: #7af7a2;
|
||||
}
|
||||
|
||||
.tool-status.complete {
|
||||
background: #2a3a4a;
|
||||
color: #7aa2f7;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
RIGHT PANEL TABS
|
||||
============================================================ */
|
||||
|
||||
.right-panel-tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #2a2a4a;
|
||||
}
|
||||
|
||||
.right-panel-tabs button {
|
||||
flex: 1;
|
||||
padding: 0.6rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
color: #8888aa;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.right-panel-tabs button.active {
|
||||
color: #fff;
|
||||
border-bottom-color: #5a7aba;
|
||||
}
|
||||
|
||||
.right-panel-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
LOGIN PAGE
|
||||
============================================================ */
|
||||
|
||||
.login-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: #16213e;
|
||||
border: 1px solid #2a2a4a;
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.login-card input {
|
||||
width: 100%;
|
||||
padding: 0.6rem;
|
||||
margin-bottom: 0.8rem;
|
||||
background: #1e2a4a;
|
||||
border: 1px solid #3a3a5a;
|
||||
border-radius: 6px;
|
||||
color: #e0e0e0;
|
||||
font-size: 0.9rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.login-card button {
|
||||
width: 100%;
|
||||
padding: 0.7rem;
|
||||
background: #3a5aba;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #f7607a;
|
||||
font-size: 0.85rem;
|
||||
text-align: center;
|
||||
}
|
||||
Reference in New Issue
Block a user