egutierrez
aef8791151
- Added Appshell component with responsive navbar and main content area - Integrated ColorSchemeToggle for light/dark mode switching - Created Welcome component with styled title and introductory text - Developed ChatPage for LLM interaction with WebSocket support - Implemented Biblioteca for managing notes with rich text editor - Added LoginPage for user authentication with error handling - Introduced MessageList and MessageBubble components for chat messages - Styled components with CSS modules for consistent design
103 lines
2.7 KiB
CSS
103 lines
2.7 KiB
CSS
.navbar {
|
|
height: 100vh; /* ← Ocupa todo el alto de la ventana */
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
|
|
width: 300px;
|
|
border-right: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
|
|
position: sticky; /* ← Opcional, si quieres que se quede "pegado" */
|
|
top: 0; /* ← Ancla arriba */
|
|
}
|
|
|
|
|
|
.title {
|
|
font-family:
|
|
Greycliff CF,
|
|
var(--mantine-font-family);
|
|
margin-bottom: var(--mantine-spacing-sm);
|
|
background-color: var(--mantine-color-body);
|
|
padding: var(--mantine-spacing-xs);
|
|
padding-top: 15px;
|
|
height: 50px;
|
|
border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
|
|
}
|
|
|
|
|
|
|
|
.wrapper {
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
|
|
/* Esta es la barra izquierda pequeña donde los iconos */
|
|
.aside {
|
|
flex: 0 0 52px;
|
|
background-color: var(--mantine-color-body);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
border-right: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
|
|
}
|
|
|
|
.main {
|
|
flex: 1;
|
|
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
|
|
}
|
|
|
|
.topSection {
|
|
padding-top: 12px; /* o la cantidad que desees */
|
|
}
|
|
|
|
/* Estos son los iconos */
|
|
.mainLink {
|
|
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-bottom: 4px;
|
|
border-radius: var(--mantine-radius-md);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
|
|
|
|
&:hover {
|
|
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
|
|
}
|
|
|
|
&[data-active] {
|
|
&,
|
|
&:hover {
|
|
background-color: var(--mantine-color-brand-7);
|
|
color: var(--mantine-color-brand-2);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.link {
|
|
display: block;
|
|
text-decoration: none;
|
|
border-top-right-radius: var(--mantine-radius-md);
|
|
border-bottom-right-radius: var(--mantine-radius-md);
|
|
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
|
|
padding: 0 var(--mantine-spacing-md);
|
|
font-size: var(--mantine-font-size-sm);
|
|
margin-right: var(--mantine-spacing-md);
|
|
font-weight: 420;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
|
|
&:hover {
|
|
background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
|
|
color: light-dark(var(--mantine-color-dark), var(--mantine-color-light));
|
|
}
|
|
|
|
&[data-active] {
|
|
&,
|
|
&:hover {
|
|
background-color: var(--mantine-color-brand-7);
|
|
color: var(--mantine-color-brand-2);
|
|
}
|
|
}
|
|
} |