Rodrigo Rodriguez (Pragmatismo)
7b322d952b
Rewrites chat.css to use centralized CSS variables from app.css instead of maintaining its own theme definitions. Moves all theme variables (colors, spacing, shadows, transitions) to app.css as the single source of truth. Improves chat UI consistency, adds better connection status indicators, and enhances responsive design.
641 lines
15 KiB
CSS
641 lines
15 KiB
CSS
/* General Bots Desktop - Unified Theme System */
|
|
/* This file defines the core theme variables used across ALL modules */
|
|
|
|
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
|
|
|
|
/* ============================================ */
|
|
/* DEFAULT THEME (Light Mode Base) */
|
|
/* ============================================ */
|
|
:root {
|
|
/* Core Colors */
|
|
--primary-bg: #ffffff;
|
|
--primary-fg: #0f172a;
|
|
--secondary-bg: #f8fafc;
|
|
--secondary-fg: #475569;
|
|
|
|
/* Glass Morphism */
|
|
--glass-bg: rgba(255, 255, 255, 0.7);
|
|
--glass-border: rgba(226, 232, 240, 0.8);
|
|
--glass-shadow: rgba(0, 0, 0, 0.05);
|
|
|
|
/* Text Colors */
|
|
--text-primary: #0f172a;
|
|
--text-secondary: #475569;
|
|
--text-tertiary: #94a3b8;
|
|
--text-muted: #cbd5e1;
|
|
|
|
/* Accent Colors */
|
|
--accent-color: #3b82f6;
|
|
--accent-hover: #2563eb;
|
|
--accent-light: rgba(59, 130, 246, 0.1);
|
|
--accent-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
|
|
|
|
/* Border Colors */
|
|
--border-color: #e2e8f0;
|
|
--border-light: #f1f5f9;
|
|
--border-dark: #cbd5e1;
|
|
|
|
/* Background States */
|
|
--bg-hover: rgba(59, 130, 246, 0.08);
|
|
--bg-active: rgba(59, 130, 246, 0.15);
|
|
--bg-disabled: #f1f5f9;
|
|
|
|
/* Message Bubbles */
|
|
--user-message-bg: #3b82f6;
|
|
--user-message-fg: #ffffff;
|
|
--bot-message-bg: #f1f5f9;
|
|
--bot-message-fg: #0f172a;
|
|
|
|
/* Sidebar */
|
|
--sidebar-bg: rgba(248, 250, 252, 0.95);
|
|
--sidebar-border: #e2e8f0;
|
|
--sidebar-item-hover: rgba(59, 130, 246, 0.1);
|
|
--sidebar-item-active: #3b82f6;
|
|
|
|
/* Status Colors */
|
|
--success-color: #10b981;
|
|
--warning-color: #f59e0b;
|
|
--error-color: #ef4444;
|
|
--info-color: #3b82f6;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
--shadow-md:
|
|
0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
--shadow-lg:
|
|
0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
--shadow-xl:
|
|
0 20px 25px -5px rgba(0, 0, 0, 0.1),
|
|
0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
|
|
/* Spacing */
|
|
--space-xs: 4px;
|
|
--space-sm: 8px;
|
|
--space-md: 16px;
|
|
--space-lg: 24px;
|
|
--space-xl: 32px;
|
|
--space-2xl: 48px;
|
|
|
|
/* Border Radius */
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-xl: 16px;
|
|
--radius-2xl: 24px;
|
|
--radius-full: 9999px;
|
|
|
|
/* Transitions */
|
|
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
/* Header */
|
|
--header-bg: rgba(255, 255, 255, 0.8);
|
|
--header-border: rgba(226, 232, 240, 0.8);
|
|
--header-height: 64px;
|
|
|
|
/* Input Fields */
|
|
--input-bg: #ffffff;
|
|
--input-border: #e2e8f0;
|
|
--input-focus-border: #3b82f6;
|
|
--input-placeholder: #94a3b8;
|
|
|
|
/* Scrollbar */
|
|
--scrollbar-track: #f1f5f9;
|
|
--scrollbar-thumb: #cbd5e1;
|
|
--scrollbar-thumb-hover: #94a3b8;
|
|
|
|
/* Z-Index Layers */
|
|
--z-dropdown: 1000;
|
|
--z-sticky: 1020;
|
|
--z-fixed: 1030;
|
|
--z-modal-backdrop: 1040;
|
|
--z-modal: 1050;
|
|
--z-popover: 1060;
|
|
--z-tooltip: 1070;
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* DARK MODE */
|
|
/* ============================================ */
|
|
[data-theme="dark"],
|
|
.dark-mode {
|
|
/* Core Colors */
|
|
--primary-bg: #0f172a;
|
|
--primary-fg: #f8fafc;
|
|
--secondary-bg: #1e293b;
|
|
--secondary-fg: #cbd5e1;
|
|
|
|
/* Glass Morphism */
|
|
--glass-bg: rgba(30, 41, 59, 0.7);
|
|
--glass-border: rgba(51, 65, 85, 0.8);
|
|
--glass-shadow: rgba(0, 0, 0, 0.3);
|
|
|
|
/* Text Colors */
|
|
--text-primary: #f8fafc;
|
|
--text-secondary: #cbd5e1;
|
|
--text-tertiary: #64748b;
|
|
--text-muted: #475569;
|
|
|
|
/* Accent Colors */
|
|
--accent-color: #60a5fa;
|
|
--accent-hover: #3b82f6;
|
|
--accent-light: rgba(96, 165, 250, 0.15);
|
|
--accent-gradient: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
|
|
|
|
/* Border Colors */
|
|
--border-color: #334155;
|
|
--border-light: #1e293b;
|
|
--border-dark: #475569;
|
|
|
|
/* Background States */
|
|
--bg-hover: rgba(96, 165, 250, 0.1);
|
|
--bg-active: rgba(96, 165, 250, 0.2);
|
|
--bg-disabled: #1e293b;
|
|
|
|
/* Message Bubbles */
|
|
--user-message-bg: #3b82f6;
|
|
--user-message-fg: #ffffff;
|
|
--bot-message-bg: #1e293b;
|
|
--bot-message-fg: #f8fafc;
|
|
|
|
/* Sidebar */
|
|
--sidebar-bg: rgba(30, 41, 59, 0.95);
|
|
--sidebar-border: #334155;
|
|
--sidebar-item-hover: rgba(96, 165, 250, 0.15);
|
|
--sidebar-item-active: #3b82f6;
|
|
|
|
/* Status Colors */
|
|
--success-color: #34d399;
|
|
--warning-color: #fbbf24;
|
|
--error-color: #f87171;
|
|
--info-color: #60a5fa;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
--shadow-md:
|
|
0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
|
|
--shadow-lg:
|
|
0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
|
|
--shadow-xl:
|
|
0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
|
|
|
|
/* Header */
|
|
--header-bg: rgba(30, 41, 59, 0.8);
|
|
--header-border: rgba(51, 65, 85, 0.8);
|
|
|
|
/* Input Fields */
|
|
--input-bg: #1e293b;
|
|
--input-border: #334155;
|
|
--input-focus-border: #60a5fa;
|
|
--input-placeholder: #64748b;
|
|
|
|
/* Scrollbar */
|
|
--scrollbar-track: #1e293b;
|
|
--scrollbar-thumb: #475569;
|
|
--scrollbar-thumb-hover: #64748b;
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* GLOBAL RESETS */
|
|
/* ============================================ */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-size: 16px;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
font-family:
|
|
"Inter",
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
"Segoe UI",
|
|
Roboto,
|
|
Oxygen,
|
|
Ubuntu,
|
|
sans-serif;
|
|
background: var(--primary-bg);
|
|
color: var(--primary-fg);
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
transition:
|
|
background var(--transition-smooth),
|
|
color var(--transition-smooth);
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* LAYOUT STRUCTURE */
|
|
/* ============================================ */
|
|
#main-content {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.section {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
display: none;
|
|
}
|
|
|
|
.section.active {
|
|
display: flex;
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* FLOATING HEADER */
|
|
/* ============================================ */
|
|
.float-header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: var(--header-height);
|
|
background: var(--header-bg);
|
|
backdrop-filter: blur(20px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
border-bottom: 1px solid var(--header-border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 var(--space-lg);
|
|
z-index: var(--z-sticky);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.logo-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
cursor: pointer;
|
|
padding: var(--space-sm);
|
|
border-radius: var(--radius-md);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.logo-wrapper:hover {
|
|
background: var(--bg-hover);
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
background: url("https://pragmatismo.com.br/icons/general-bots.svg")
|
|
center/contain no-repeat;
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
background: var(--accent-gradient);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* ICON BUTTONS (Apps, Theme, User) */
|
|
/* ============================================ */
|
|
.icon-button {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: var(--radius-full);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
border: 1px solid var(--border-color);
|
|
background: var(--glass-bg);
|
|
color: var(--text-primary);
|
|
transition: all var(--transition-fast);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.icon-button:hover {
|
|
background: var(--bg-hover);
|
|
border-color: var(--accent-color);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.icon-button:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.icon-button svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* THEME DROPDOWN */
|
|
/* ============================================ */
|
|
.theme-dropdown {
|
|
padding: 8px 16px;
|
|
background: var(--glass-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-lg);
|
|
color: var(--text-primary);
|
|
font-family: inherit;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
backdrop-filter: blur(10px);
|
|
outline: none;
|
|
}
|
|
|
|
.theme-dropdown:hover {
|
|
border-color: var(--accent-color);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.theme-dropdown:focus {
|
|
border-color: var(--accent-color);
|
|
box-shadow: 0 0 0 3px var(--accent-light);
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* APPS DROPDOWN MENU */
|
|
/* ============================================ */
|
|
.apps-dropdown {
|
|
position: absolute;
|
|
top: calc(100% + 8px);
|
|
right: 60px;
|
|
width: 280px;
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(20px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: var(--radius-xl);
|
|
box-shadow: var(--shadow-xl);
|
|
padding: var(--space-md);
|
|
opacity: 0;
|
|
transform: translateY(-10px) scale(0.95);
|
|
pointer-events: none;
|
|
transition: all var(--transition-smooth);
|
|
z-index: var(--z-dropdown);
|
|
}
|
|
|
|
.apps-dropdown.show {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
pointer-events: all;
|
|
}
|
|
|
|
.apps-dropdown-title {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--text-tertiary);
|
|
margin-bottom: var(--space-md);
|
|
padding-left: var(--space-sm);
|
|
}
|
|
|
|
.app-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.app-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-md);
|
|
border-radius: var(--radius-lg);
|
|
text-decoration: none;
|
|
color: var(--text-primary);
|
|
transition: all var(--transition-fast);
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.app-item:hover {
|
|
background: var(--bg-hover);
|
|
border-color: var(--border-color);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.app-item.active {
|
|
background: var(--accent-light);
|
|
border-color: var(--accent-color);
|
|
}
|
|
|
|
.app-icon {
|
|
font-size: 28px;
|
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
|
|
}
|
|
|
|
.app-item span {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* USER AVATAR */
|
|
/* ============================================ */
|
|
.user-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: var(--radius-full);
|
|
background: var(--accent-gradient);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.user-avatar:hover {
|
|
transform: scale(1.1);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* LOADING OVERLAY */
|
|
/* ============================================ */
|
|
.loading-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: var(--primary-bg);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: var(--z-modal);
|
|
transition:
|
|
opacity var(--transition-smooth),
|
|
visibility var(--transition-smooth);
|
|
}
|
|
|
|
.loading-overlay.hidden {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 48px;
|
|
height: 48px;
|
|
border: 4px solid var(--border-color);
|
|
border-top-color: var(--accent-color);
|
|
border-radius: var(--radius-full);
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* SCROLLBAR STYLING */
|
|
/* ============================================ */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--scrollbar-track);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--scrollbar-thumb);
|
|
border-radius: var(--radius-full);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--scrollbar-thumb-hover);
|
|
}
|
|
|
|
/* Firefox */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* UTILITY CLASSES */
|
|
/* ============================================ */
|
|
.fade-in {
|
|
animation: fadeIn var(--transition-smooth) ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.slide-in {
|
|
animation: slideIn var(--transition-smooth) ease-out;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.glass-panel {
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(20px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* RESPONSIVE DESIGN */
|
|
/* ============================================ */
|
|
@media (max-width: 768px) {
|
|
.float-header {
|
|
padding: 0 var(--space-md);
|
|
}
|
|
|
|
.logo-text {
|
|
display: none;
|
|
}
|
|
|
|
.theme-dropdown {
|
|
padding: 8px 12px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.apps-dropdown {
|
|
right: var(--space-md);
|
|
width: calc(100vw - 32px);
|
|
max-width: 280px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.float-header {
|
|
height: 56px;
|
|
padding: 0 var(--space-sm);
|
|
}
|
|
|
|
.icon-button {
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 36px;
|
|
height: 36px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
/* ============================================ */
|
|
/* PRINT STYLES */
|
|
/* ============================================ */
|
|
@media print {
|
|
.float-header,
|
|
.loading-overlay,
|
|
.apps-dropdown {
|
|
display: none !important;
|
|
}
|
|
}
|