egutierrez
3cd267ee6e
feat: Implement LlamadorAPI component for API interaction with dynamic request handling feat: Create MetodoSelect component for selecting HTTP methods with visual feedback feat: Add VisualizacionesRandom component to display various charts using ECharts feat: Develop custom 404 Error page with holographic shader effect feat: Create HoloShader component for dynamic background effects on 404 page style: Add CSS styles for Appshell layout and navigation feat: Build Appshell component to manage application layout and navigation feat: Add ColorSchemeToggle component for switching between light and dark themes feat: Create Plantilla component as a template for future pages style: Define styles for Welcome component feat: Implement Welcome component with introductory text and links feat: Develop HomePage component to serve as the main entry point of the application feat: Create Biblioteca component for managing notes and libraries with rich text editor feat: Add Editor_Test component for testing rich text editor functionality style: Define styles for the rich text editor in Biblioteca
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);
|
|
}
|
|
}
|
|
} |