743 lines
25 KiB
CSS
743 lines
25 KiB
CSS
/* === Modern AI Chat Interface Styles === */
|
|
|
|
/* --- Global Styles & Variables --- */
|
|
:root {
|
|
/* Theme Agnostic */
|
|
--font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
--border-radius-small: 4px;
|
|
--border-radius-medium: 8px;
|
|
--border-radius-large: 18px; /* For chat bubbles/input */
|
|
--transition-speed: 0.2s;
|
|
--transition-func: ease;
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
|
|
/* Light Theme (Default) */
|
|
--bg-primary: #ffffff; /* Main background (chat area) */
|
|
--bg-secondary: #f0f2f5; /* Body background, input field */
|
|
--bg-tertiary: #e4e6eb; /* AI message bubble, subtle hover */
|
|
--text-primary: #1c1e21; /* Primary text */
|
|
--text-secondary: #606770; /* Muted text (timestamps, usage) */
|
|
--text-placeholder: #8a8d91; /* Input placeholder */
|
|
--border-color: #ced0d4; /* Borders, dividers */
|
|
--primary-color: #007bff; /* Main accent (buttons, links, user msg) */
|
|
--primary-hover: #0056b3; /* Accent hover */
|
|
--primary-text-on: #ffffff; /* Text on primary color bg */
|
|
--accent-color: #28a745; /* Success/New chat (Green) */
|
|
--accent-hover: #218838;
|
|
--error-color: #dc3545; /* Errors/Delete (Red) */
|
|
--error-hover: #c82333;
|
|
--user-msg-bg: var(--primary-color);
|
|
--user-msg-text: var(--primary-text-on);
|
|
--ai-msg-bg: var(--bg-tertiary);
|
|
--ai-msg-text: var(--text-primary);
|
|
--header-bg: var(--bg-primary);
|
|
--header-border: var(--border-color);
|
|
--sidebar-bg: #1f2937; /* Darker sidebar */
|
|
--sidebar-text: #e5e7eb;
|
|
--sidebar-text-muted: #9ca3af;
|
|
--sidebar-hover-bg: #374151;
|
|
--sidebar-active-bg: var(--primary-color); /* Active chat bg */
|
|
--sidebar-active-text: var(--primary-text-on);
|
|
--scrollbar-thumb: #bdc3c7;
|
|
--scrollbar-track: var(--bg-secondary);
|
|
--progress-bg: var(--bg-tertiary);
|
|
--icon-color: var(--text-secondary);
|
|
--icon-hover-color: var(--text-primary);
|
|
--icon-hover-bg: var(--bg-tertiary);
|
|
}
|
|
|
|
.dark-theme {
|
|
/* Dark Theme Overrides */
|
|
--bg-primary: #18191a; /* Dark main bg */
|
|
--bg-secondary: #242526; /* Slightly lighter dark bg */
|
|
--bg-tertiary: #3a3b3c; /* Darker hover, AI msg bubble */
|
|
--text-primary: #e4e6eb; /* Light text */
|
|
--text-secondary: #b0b3b8; /* Muted light text */
|
|
--text-placeholder: #7a7d80;
|
|
--border-color: #3e4042; /* Dark borders */
|
|
--primary-color: #0a84ff; /* Brighter blue for dark mode */
|
|
--primary-hover: #0060df;
|
|
/* --primary-text-on: #ffffff; (Often same) */
|
|
--accent-color: #30d158; /* Brighter green */
|
|
--accent-hover: #29b34a;
|
|
--error-color: #ff453a; /* Brighter red */
|
|
--error-hover: #ff3025;
|
|
/* --user-msg-bg: var(--primary-color); (Inherits) */
|
|
/* --user-msg-text: var(--primary-text-on); (Inherits) */
|
|
--ai-msg-bg: var(--bg-tertiary);
|
|
--ai-msg-text: var(--text-primary);
|
|
--header-bg: var(--bg-secondary); /* Slightly different header bg */
|
|
--header-border: var(--border-color);
|
|
--sidebar-bg: #111827; /* Even darker sidebar */
|
|
--sidebar-text: #d1d5db;
|
|
--sidebar-text-muted: #9ca3af;
|
|
--sidebar-hover-bg: #1f2937;
|
|
/* --sidebar-active-bg: var(--primary-color); (Inherits) */
|
|
/* --sidebar-active-text: var(--primary-text-on); (Inherits) */
|
|
--scrollbar-thumb: #555;
|
|
--scrollbar-track: var(--bg-secondary);
|
|
--progress-bg: var(--bg-tertiary);
|
|
--icon-color: var(--text-secondary);
|
|
--icon-hover-color: var(--text-primary);
|
|
--icon-hover-bg: var(--bg-tertiary);
|
|
}
|
|
|
|
/* --- Basic Reset & Body --- */
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
font-family: var(--font-main);
|
|
background-color: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
line-height: 1.5; /* Slightly tighter line height */
|
|
padding-top: 60px; /* Match header height */
|
|
font-size: 16px; /* Base font size */
|
|
transition: background-color var(--transition-speed) var(--transition-func),
|
|
color var(--transition-speed) var(--transition-func);
|
|
-webkit-font-smoothing: antialiased; /* Improve font rendering */
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* --- Header --- */
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 24px;
|
|
background-color: var(--header-bg);
|
|
border-bottom: 1px solid var(--header-border);
|
|
box-shadow: var(--shadow-sm);
|
|
position: fixed;
|
|
top: 0; left: 0;
|
|
width: 100%;
|
|
height: 60px;
|
|
z-index: 1000;
|
|
transition: background-color var(--transition-speed) var(--transition-func),
|
|
border-color var(--transition-speed) var(--transition-func);
|
|
}
|
|
|
|
.header-logo {
|
|
font-size: 1.3rem;
|
|
font-weight: 600; /* Semibold */
|
|
color: var(--text-primary);
|
|
transition: color var(--transition-speed) var(--transition-func);
|
|
}
|
|
/* Optional: Use primary color for logo?
|
|
.header-logo { color: var(--primary-color); }
|
|
*/
|
|
|
|
.header-user-info {
|
|
text-align: center;
|
|
color: var(--text-secondary);
|
|
font-size: 0.875rem; /* 14px */
|
|
transition: color var(--transition-speed) var(--transition-func);
|
|
}
|
|
.header-user-info p { margin: 0; line-height: 1.3; }
|
|
.header-user-info strong {
|
|
color: var(--text-primary);
|
|
font-weight: 500;
|
|
transition: color var(--transition-speed) var(--transition-func);
|
|
}
|
|
|
|
.header-buttons { display: flex; align-items: center; gap: 12px; }
|
|
|
|
.header-btn {
|
|
background-color: var(--primary-color);
|
|
color: var(--primary-text-on);
|
|
border: none;
|
|
border-radius: var(--border-radius-medium);
|
|
padding: 8px 14px;
|
|
cursor: pointer;
|
|
font-size: 0.9rem; /* 14.4px */
|
|
font-weight: 500;
|
|
font-family: var(--font-main);
|
|
transition: background-color var(--transition-speed) var(--transition-func);
|
|
line-height: 1;
|
|
}
|
|
.header-btn:hover { background-color: var(--primary-hover); }
|
|
|
|
/* Specific button styling */
|
|
#logoutBtn {
|
|
background-color: var(--bg-tertiary);
|
|
color: var(--text-secondary);
|
|
}
|
|
#logoutBtn:hover {
|
|
background-color: var(--border-color);
|
|
color: var(--text-primary);
|
|
}
|
|
.dark-theme #logoutBtn { background-color: var(--bg-tertiary); color: var(--text-secondary); }
|
|
.dark-theme #logoutBtn:hover { background-color: #4b4d4f; color: var(--text-primary); }
|
|
|
|
|
|
/* Theme Toggle Button */
|
|
.header-btn.theme-toggle {
|
|
background-color: transparent;
|
|
color: var(--icon-color);
|
|
font-size: 1.3rem;
|
|
padding: 6px;
|
|
border-radius: 50%; /* Make it circular */
|
|
width: 36px;
|
|
height: 36px;
|
|
display: inline-flex; /* Align icon nicely */
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.header-btn.theme-toggle:hover {
|
|
background-color: var(--icon-hover-bg);
|
|
color: var(--icon-hover-color);
|
|
}
|
|
|
|
/* --- Main Layout Container --- */
|
|
.main-container {
|
|
display: flex;
|
|
height: calc(100vh - 60px);
|
|
width: 100%;
|
|
}
|
|
|
|
/* --- Sidebar --- */
|
|
.sidebar {
|
|
width: 260px; /* Slightly wider */
|
|
background-color: var(--sidebar-bg);
|
|
color: var(--sidebar-text);
|
|
padding: 16px;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-shrink: 0; /* Prevent shrinking */
|
|
border-right: 1px solid var(--border-color);
|
|
transition: background-color var(--transition-speed) var(--transition-func),
|
|
border-color var(--transition-speed) var(--transition-func);
|
|
}
|
|
|
|
.sidebar h3 {
|
|
margin: 0 0 16px 0;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid var(--sidebar-hover-bg);
|
|
font-size: 0.875rem; /* 14px */
|
|
font-weight: 600;
|
|
color: var(--sidebar-text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
transition: color var(--transition-speed) var(--transition-func),
|
|
border-color var(--transition-speed) var(--transition-func);
|
|
}
|
|
|
|
#chatList { flex-grow: 1; overflow-y: auto; margin-right: -8px; padding-right: 8px; } /* Hide scrollbar slightly */
|
|
|
|
.sidebar-btn {
|
|
color: var(--sidebar-text);
|
|
border: none;
|
|
border-radius: var(--border-radius-medium);
|
|
padding: 10px 12px;
|
|
margin-bottom: 12px;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
width: 100%;
|
|
font-family: var(--font-main);
|
|
font-size: 0.95rem; /* 15.2px */
|
|
font-weight: 500;
|
|
transition: background-color var(--transition-speed) var(--transition-func),
|
|
color var(--transition-speed) var(--transition-func);
|
|
}
|
|
|
|
.new-chat-btn {
|
|
background-color: var(--accent-color);
|
|
color: var(--primary-text-on); /* White text */
|
|
}
|
|
.new-chat-btn:hover { background-color: var(--accent-hover); }
|
|
|
|
.chat-session-button-container {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 4px;
|
|
border-radius: var(--border-radius-medium);
|
|
transition: background-color var(--transition-speed) var(--transition-func);
|
|
position: relative; /* For potential active indicator */
|
|
}
|
|
.chat-session-button-container:hover { background-color: var(--sidebar-hover-bg); }
|
|
|
|
/* Active chat state */
|
|
.chat-session-button-container.active {
|
|
background-color: var(--sidebar-active-bg);
|
|
}
|
|
.chat-session-button-container.active .chat-session-button {
|
|
color: var(--sidebar-active-text);
|
|
font-weight: 600;
|
|
}
|
|
.chat-session-button-container.active .delete-chat-button {
|
|
color: var(--sidebar-active-text);
|
|
opacity: 0.7;
|
|
}
|
|
.chat-session-button-container.active .delete-chat-button:hover {
|
|
color: var(--error-color); /* Still allow delete hover color */
|
|
background-color: rgba(255, 255, 255, 0.1); /* Subtle bg on hover */
|
|
opacity: 1;
|
|
}
|
|
|
|
|
|
.chat-session-button {
|
|
flex-grow: 1;
|
|
background-color: transparent;
|
|
color: var(--sidebar-text);
|
|
padding: 10px 12px;
|
|
border: none;
|
|
border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
font-weight: 400;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin: 0;
|
|
transition: color var(--transition-speed) var(--transition-func),
|
|
font-weight var(--transition-speed) var(--transition-func);
|
|
}
|
|
/* No separate hover needed if container handles it */
|
|
|
|
.delete-chat-button {
|
|
flex-shrink: 0; /* Don't shrink */
|
|
background-color: transparent;
|
|
color: var(--sidebar-text-muted);
|
|
border: none;
|
|
border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
|
|
padding: 10px;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
line-height: 1;
|
|
transition: color var(--transition-speed) var(--transition-func),
|
|
background-color var(--transition-speed) var(--transition-func);
|
|
}
|
|
.delete-chat-button:hover {
|
|
color: var(--error-color);
|
|
background-color: rgba(220, 53, 69, 0.1); /* Subtle red background */
|
|
}
|
|
.dark-theme .delete-chat-button:hover {
|
|
background-color: rgba(255, 69, 58, 0.15); /* Dark theme subtle red */
|
|
}
|
|
|
|
/* Custom Scrollbar for Sidebar (WebKit) */
|
|
.sidebar::-webkit-scrollbar, #chatList::-webkit-scrollbar { width: 6px; }
|
|
.sidebar::-webkit-scrollbar-track, #chatList::-webkit-scrollbar-track { background: transparent; }
|
|
.sidebar::-webkit-scrollbar-thumb, #chatList::-webkit-scrollbar-thumb {
|
|
background-color: var(--sidebar-hover-bg);
|
|
border-radius: 3px;
|
|
}
|
|
.sidebar::-webkit-scrollbar-thumb:hover, #chatList::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--sidebar-text-muted);
|
|
}
|
|
|
|
|
|
/* --- Chat Container --- */
|
|
.chat-container {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: var(--bg-primary);
|
|
overflow: hidden;
|
|
transition: background-color var(--transition-speed) var(--transition-func);
|
|
}
|
|
|
|
/* Progress Bar Area */
|
|
#progress-main-div {
|
|
padding: 8px 24px; /* More horizontal padding */
|
|
border-bottom: 1px solid var(--border-color);
|
|
background-color: var(--bg-primary);
|
|
flex-shrink: 0; /* Prevent shrinking */
|
|
transition: background-color var(--transition-speed) var(--transition-func),
|
|
border-color var(--transition-speed) var(--transition-func);
|
|
}
|
|
#progress-container {
|
|
background-color: var(--progress-bg);
|
|
height: 8px; /* Thinner bar */
|
|
border-radius: 4px;
|
|
overflow: hidden; /* Ensure bar stays within bounds */
|
|
}
|
|
#progress-bar {
|
|
background-color: var(--primary-color);
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
transition: width 0.3s ease, background-color var(--transition-speed) var(--transition-func);
|
|
}
|
|
#usage-text {
|
|
text-align: center;
|
|
margin-top: 4px;
|
|
font-size: 0.75rem; /* 12px */
|
|
color: var(--text-secondary);
|
|
transition: color var(--transition-speed) var(--transition-func);
|
|
}
|
|
|
|
/* Chat Message Display Area */
|
|
.chat-box {
|
|
flex-grow: 1;
|
|
padding: 24px; /* More padding */
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px; /* More space between messages */
|
|
}
|
|
|
|
/* Custom Scrollbar Styling (WebKit browsers) */
|
|
.chat-box::-webkit-scrollbar { width: 8px; }
|
|
.chat-box::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 4px; }
|
|
.chat-box::-webkit-scrollbar-thumb {
|
|
background-color: var(--scrollbar-thumb);
|
|
border-radius: 4px;
|
|
border: 2px solid var(--scrollbar-track);
|
|
}
|
|
.chat-box::-webkit-scrollbar-thumb:hover { background-color: #a8a8a8; }
|
|
.dark-theme .chat-box::-webkit-scrollbar-thumb:hover { background-color: #666; }
|
|
|
|
|
|
.chat-message {
|
|
padding: 12px 16px; /* Adjusted padding */
|
|
border-radius: var(--border-radius-large);
|
|
max-width: 70%; /* Slightly narrower max width */
|
|
word-wrap: break-word;
|
|
line-height: 1.45;
|
|
font-size: 0.95rem; /* 15.2px */
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
animation: fadeInMessage 0.3s ease forwards;
|
|
transition: background-color var(--transition-speed) var(--transition-func),
|
|
color var(--transition-speed) var(--transition-func);
|
|
}
|
|
|
|
@keyframes fadeInMessage {
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.chat-message.user {
|
|
background-color: var(--user-msg-bg);
|
|
color: var(--user-msg-text);
|
|
align-self: flex-end;
|
|
border-bottom-right-radius: var(--border-radius-small); /* Tail effect */
|
|
margin-left: auto;
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); /* Subtle shadow */
|
|
}
|
|
|
|
.chat-message.assistant {
|
|
background-color: var(--ai-msg-bg);
|
|
color: var(--ai-msg-text);
|
|
align-self: flex-start;
|
|
border-bottom-left-radius: var(--border-radius-small); /* Tail effect */
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* Markdown Styling */
|
|
.chat-message.assistant p { margin-bottom: 0.5em; } /* Spacing for paragraphs */
|
|
.chat-message.assistant p:last-child { margin-bottom: 0; }
|
|
.chat-message.assistant strong { font-weight: 600; }
|
|
.chat-message.assistant a {
|
|
color: var(--primary-color);
|
|
text-decoration: none;
|
|
}
|
|
.chat-message.assistant a:hover { text-decoration: underline; }
|
|
|
|
.chat-message.assistant pre {
|
|
background-color: rgba(0, 0, 0, 0.05); /* Subtle code bg */
|
|
padding: 12px;
|
|
border-radius: var(--border-radius-medium);
|
|
overflow-x: auto;
|
|
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
|
font-size: 0.875em;
|
|
margin: 8px 0;
|
|
line-height: 1.3;
|
|
color: var(--text-primary); /* Ensure readable code text */
|
|
}
|
|
.dark-theme .chat-message.assistant pre {
|
|
background-color: rgba(255, 255, 255, 0.08);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.chat-message.assistant code:not(pre code) {
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
padding: 2px 5px;
|
|
border-radius: var(--border-radius-small);
|
|
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
|
font-size: 0.875em;
|
|
}
|
|
.dark-theme .chat-message.assistant code:not(pre code) {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* --- Chat Input Area --- */
|
|
.chat-input-container {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
padding: 12px 24px; /* Match chat box padding */
|
|
background-color: var(--bg-primary);
|
|
border-top: 1px solid var(--border-color);
|
|
gap: 12px;
|
|
flex-shrink: 0; /* Prevent shrinking */
|
|
transition: background-color var(--transition-speed) var(--transition-func),
|
|
border-color var(--transition-speed) var(--transition-func);
|
|
}
|
|
|
|
.chat-input {
|
|
flex-grow: 1;
|
|
padding: 10px 16px; /* Input padding */
|
|
border-radius: var(--border-radius-large);
|
|
border: 1px solid var(--border-color);
|
|
font-size: 1rem; /* 16px */
|
|
font-family: var(--font-main);
|
|
resize: none;
|
|
overflow-y: auto;
|
|
min-height: 42px; /* Based on padding and line-height */
|
|
max-height: 150px; /* Allow more lines */
|
|
line-height: 1.4;
|
|
background-color: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
transition: border-color var(--transition-speed) var(--transition-func),
|
|
box-shadow var(--transition-speed) var(--transition-func),
|
|
background-color var(--transition-speed) var(--transition-func),
|
|
color var(--transition-speed) var(--transition-func);
|
|
}
|
|
.chat-input::placeholder { color: var(--text-placeholder); }
|
|
|
|
.chat-input:focus {
|
|
outline: none;
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15); /* Softer focus ring */
|
|
}
|
|
.dark-theme .chat-input:focus {
|
|
box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2);
|
|
}
|
|
|
|
.chat-send-button {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 50%;
|
|
width: 40px;
|
|
height: 40px;
|
|
font-size: 1.3rem; /* Slightly larger icon */
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
transition: background-color var(--transition-speed) var(--transition-func),
|
|
opacity var(--transition-speed) var(--transition-func);
|
|
padding: 0;
|
|
line-height: 1;
|
|
}
|
|
|
|
.chat-send-button:hover:not(:disabled),
|
|
.chat-send-button:focus:not(:disabled) {
|
|
background-color: var(--primary-hover);
|
|
outline: none;
|
|
}
|
|
.chat-send-button:disabled {
|
|
background-color: var(--border-color);
|
|
color: var(--text-secondary);
|
|
cursor: not-allowed;
|
|
opacity: 0.7;
|
|
}
|
|
.dark-theme .chat-send-button:disabled {
|
|
background-color: var(--bg-tertiary);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* --- Alert / Modal Styles (Refined Theming) --- */
|
|
.custom-alert, .custom-alert-confirm {
|
|
display: none;
|
|
position: fixed;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border-radius: var(--border-radius-medium);
|
|
padding: 20px 24px;
|
|
max-width: 420px;
|
|
width: 90%; /* Responsive width */
|
|
z-index: 9999;
|
|
box-shadow: var(--shadow-md);
|
|
font-family: var(--font-main);
|
|
font-size: 1rem;
|
|
animation: slideInFade 0.3s ease-out forwards;
|
|
background-color: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
transition: background-color var(--transition-speed) var(--transition-func),
|
|
border-color var(--transition-speed) var(--transition-func),
|
|
color var(--transition-speed) var(--transition-func);
|
|
}
|
|
.custom-alert { top: 20px; }
|
|
.custom-alert-confirm { top: 25%; }
|
|
|
|
/* Specific Alert Types */
|
|
.custom-alert.success {
|
|
background-color: #d1e7dd; color: #0f5132; border-color: #badbcc;
|
|
}
|
|
.dark-theme .custom-alert.success {
|
|
background-color: #142e25; color: #75b798; border-color: #1f4032;
|
|
}
|
|
.custom-alert.error {
|
|
background-color: #f8d7da; color: #842029; border-color: #f5c2c7;
|
|
}
|
|
.dark-theme .custom-alert.error {
|
|
background-color: #2c181a; color: #ea868f; border-color: #582d31;
|
|
}
|
|
|
|
.alert-content { display: flex; flex-direction: column; align-items: center; text-align: center; }
|
|
#alert-message, #alert-message-confirm { margin-bottom: 16px; line-height: 1.4; }
|
|
|
|
.custom-alert .close-btn,
|
|
.custom-alert-confirm button {
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: var(--border-radius-medium);
|
|
cursor: pointer;
|
|
font-size: 0.95rem;
|
|
font-family: var(--font-main);
|
|
font-weight: 500;
|
|
transition: background-color var(--transition-speed) var(--transition-func),
|
|
opacity var(--transition-speed) var(--transition-func);
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* Alert Buttons Theming */
|
|
.custom-alert .close-btn { background-color: var(--primary-color); color: var(--primary-text-on); }
|
|
.custom-alert .close-btn:hover { background-color: var(--primary-hover); }
|
|
.custom-alert.success .close-btn { background-color: #0f5132; color: #fff; }
|
|
.dark-theme .custom-alert.success .close-btn { background-color: #28a745; color: #fff;}
|
|
.custom-alert.error .close-btn { background-color: #842029; color: #fff; }
|
|
.dark-theme .custom-alert.error .close-btn { background-color: #dc3545; color: #fff;}
|
|
|
|
/* Confirmation Modal Buttons */
|
|
.custom-alert-confirm #confirm-alert-confirm { background-color: var(--accent-color); color: var(--primary-text-on); margin-right: 8px; }
|
|
.custom-alert-confirm #confirm-alert-confirm:hover { background-color: var(--accent-hover); }
|
|
.custom-alert-confirm #close-alert-confirm { background-color: var(--error-color); color: var(--primary-text-on); margin-left: 8px; }
|
|
.custom-alert-confirm #close-alert-confirm:hover { background-color: var(--error-hover); }
|
|
|
|
@keyframes slideInFade {
|
|
from { opacity: 0; transform: translate(-50%, -20px); }
|
|
to { opacity: 1; transform: translate(-50%, 0); }
|
|
}
|
|
|
|
/* --- Responsive Design --- */
|
|
@media (max-width: 992px) {
|
|
.sidebar { width: 220px; } /* Narrower sidebar */
|
|
.header { padding: 0 16px; }
|
|
#progress-main-div, .chat-box, .chat-input-container { padding-left: 16px; padding-right: 16px; }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.sidebar {
|
|
/* Example: Hide sidebar completely on mobile */
|
|
/* Add JS to toggle this, perhaps with a burger button in header */
|
|
display: none;
|
|
}
|
|
/* If sidebar is hidden, main container takes full width */
|
|
/* .main-container { width: 100%; } */
|
|
|
|
.header-user-info { display: none; }
|
|
.header-logo { font-size: 1.2rem; }
|
|
.chat-message { max-width: 85%; }
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
body { padding-top: 56px; font-size: 15px; } /* Adjust for smaller header */
|
|
.header { height: 56px; padding: 0 12px; }
|
|
.header-logo { /* Optionally hide text, show icon? */ }
|
|
.header-buttons { gap: 8px; }
|
|
.header-buttons .header-btn:not(.theme-toggle) { padding: 6px 10px; font-size: 0.85rem; }
|
|
.header-btn.theme-toggle { width: 32px; height: 32px; font-size: 1.1rem; }
|
|
|
|
.main-container { height: calc(100vh - 56px); }
|
|
|
|
#progress-main-div { padding: 6px 12px; }
|
|
#progress-container { height: 6px; }
|
|
#usage-text { font-size: 0.7rem; }
|
|
|
|
.chat-box { padding: 12px; gap: 12px; }
|
|
.chat-message { font-size: 0.9rem; padding: 10px 14px; }
|
|
|
|
.chat-input-container { padding: 10px 12px; gap: 8px; }
|
|
.chat-input { padding: 8px 14px; min-height: 38px; font-size: 0.95rem; }
|
|
.chat-send-button { width: 36px; height: 36px; font-size: 1.2rem; }
|
|
|
|
.custom-alert, .custom-alert-confirm { padding: 16px; }
|
|
#alert-message, #alert-message-confirm { font-size: 0.95rem; }
|
|
.custom-alert .close-btn, .custom-alert-confirm button { padding: 8px 16px; font-size: 0.9rem; }
|
|
}
|
|
|
|
/* --- Original Form Styles (Themed) --- */
|
|
/* Apply theme variables if forms are on the same page */
|
|
.container { /* For login/register page context */
|
|
text-align: center;
|
|
max-width: 500px;
|
|
padding: 20px;
|
|
margin: 50px auto;
|
|
}
|
|
.form-wrapper { display: flex; justify-content: space-around; gap: 20px; }
|
|
.form {
|
|
background: var(--bg-primary);
|
|
padding: 24px; /* More padding */
|
|
width: 100%; /* Let wrapper control spacing */
|
|
border-radius: var(--border-radius-medium);
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--border-color);
|
|
transition: background-color var(--transition-speed) var(--transition-func),
|
|
border-color var(--transition-speed) var(--transition-func);
|
|
}
|
|
.form h1, .form h2 {
|
|
color: var(--text-primary);
|
|
transition: color var(--transition-speed) var(--transition-func);
|
|
margin-bottom: 16px;
|
|
}
|
|
.form input, .form button { /* Target form inputs/buttons */
|
|
width: 100%; /* Full width within form */
|
|
padding: 12px 14px;
|
|
margin-bottom: 16px; /* Spacing */
|
|
border-radius: var(--border-radius-medium);
|
|
border: 1px solid var(--border-color);
|
|
font-size: 1rem;
|
|
font-family: var(--font-main);
|
|
background-color: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
transition: border-color var(--transition-speed) var(--transition-func),
|
|
box-shadow var(--transition-speed) var(--transition-func),
|
|
background-color var(--transition-speed) var(--transition-func),
|
|
color var(--transition-speed) var(--transition-func);
|
|
}
|
|
.form input:last-of-type { margin-bottom: 20px; } /* More space before button */
|
|
.form input:focus {
|
|
outline: none;
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
|
|
}
|
|
.dark-theme .form input:focus { box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2); }
|
|
|
|
.form button {
|
|
background-color: var(--primary-color);
|
|
color: var(--primary-text-on);
|
|
border: none;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
}
|
|
.form button:hover { background-color: var(--primary-hover); }
|
|
|
|
/* Responsive for forms */
|
|
@media (max-width: 600px) {
|
|
.form-wrapper { flex-direction: column; align-items: center; }
|
|
.form { width: 90%; }
|
|
}
|
|
|
|
/* Loading Spinner */
|
|
.loading-spinner {
|
|
border: 4px solid var(--bg-tertiary); /* Light grey */
|
|
border-top: 4px solid var(--primary-color); /* Blue */
|
|
border-radius: 50%;
|
|
width: 24px;
|
|
height: 24px;
|
|
animation: spin 1s linear infinite;
|
|
margin: 0 8px; /* Adjust spacing */
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
} |