base.css•3.77 kB
/* base.css - Fundamental styles and layout */
/* CSS Custom Properties */
/* Base Colors */
:root {
--primary-color: linear-gradient(90deg, rgba(255, 181, 71, 1), rgba(61, 90, 128, 1) );
--secondary-color: #ffb547;
--accent-color: #ef4444;
--background-light: #f8fafc;
--background-dark: #181b24;
--text-light: #1e293b;
--border-light: #e2e8f0;
--border-dark: #44486e;
--header-bg: #222e3a;
/* Component Colors */
--primary-hover-color: #aaaaaa;
--secondary-hover-color: #aaaaaa;
--success-color: #10b981;
--success-bg-color: #4caf50;
--modal-header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--modal-border-color: #e5e7eb;
--code-bg-light: #f3f4f6;
--code-bg-dark: #f8fafc;
--text-muted: #6b7280;
--text-dark: #374151;
--fab-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
--copy-btn-bg: #e0e0e0;
--bot-name-color: #171f5f;
--accent-hover-color: #d95a3d;
--command-menu-bg: #486286;
--command-menu-border: 2px solid #000000;
--command-menu-header-bg: rgba(61, 90, 128, 0.1);
--command-item-hover-bg: rgba(61, 90, 128, 0.15);
--tooltip-bg: rgba(0, 0, 0, 0.8);
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 1.5rem;
--spacing-lg: 2rem;
--spacing-xl: 2.5rem;
--border-radius: 0.75rem;
--border-radius-sm: 0.5rem;
--border-radius-lg: 1rem;
--shadow-light: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--shadow-medium: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-heavy: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
/* Z-Index Scale */
--z-background: -1;
--z-default: 0;
--z-dropdown: 100;
--z-tooltip: 200;
--z-modal: 300;
--z-notification: 400;
--transition-fast: 0.2s;
--transition-medium: 0.3s;
}
/* Base styles */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
background: var(--background-light) url('images-bg.png') no-repeat center center fixed;
background-size: cover;
color: var(--text-light);
margin: 0;
padding: 0;
line-height: 1.5;
overflow-x: hidden;
}
/* Header */
header {
background: var(--header-bg);
color: var(--background-light);
padding: 1.2rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: var(--shadow-light);
}
header h1 {
margin: 0;
font-weight: 700;
font-size: 1.45rem;
letter-spacing: 0.03em;
}
/* Main layout */
main {
max-width: 63rem;
margin: var(--spacing-xl) auto;
background: rgba(175, 175, 175, 0.6);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-medium);
padding: var(--spacing-lg) var(--spacing-lg) 1.2rem var(--spacing-lg);
}
/* Chat container */
#chat-log {
border: none;
border-radius: 0;
padding: var(--spacing-sm);
background: transparent;
backdrop-filter: none;
min-height: 20rem;
max-height: 28rem;
margin-bottom: var(--spacing-md);
overflow-y: auto;
box-shadow: none;
margin-left: 0;
margin-right: -0.625rem;
scrollbar-width: thin;
scrollbar-color: rgba(61, 90, 128, 0.3) transparent;
}
#chat-log::-webkit-scrollbar {
width: 6px;
height: 2px;
background: transparent;
}
#chat-log::-webkit-scrollbar-thumb {
background: rgba(61, 90, 128, 0.3);
border-radius: 2px;
}
#chat-log::-webkit-scrollbar-thumb:hover {
background: rgba(61, 90, 128, 0.5);
}
#chat-log div {
margin: 0.7rem 0;
line-height: 1.5;
}
#chat-log strong {
color: #000000;
}
body.dark-mode #chat-log strong {
color: #000000;
}
/* Form layout */
#chat-form {
display: flex;
gap: 0.5rem;
align-items: flex-start;
position: relative;
margin-right: 1.25rem;
}