egutierrez
27f71a05f3
- Introduced a new page for API consultation (`Consulta_API`) with a form to send requests. - Added routing for the new page and a 404 error page. - Created a `MetodoSelect` component for selecting HTTP methods. - Implemented a `MiBoton` component for a customizable button. - Updated the `HomePage` layout to include a sidebar (`DoubleNavbar`) and main content area. - Enhanced the `Welcome` component with a new greeting and description. - Added a holographic shader background to the 404 error page. - Updated dependencies in `yarn.lock` for new components and features. - Styled the sidebar and main content for better user experience.
114 lines
3.1 KiB
CSS
114 lines
3.1 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 */
|
|
}
|
|
|
|
|
|
|
|
|
|
.collapsed {
|
|
width: 70px; /* Ancho reducido cuando colapsa */
|
|
}
|
|
|
|
.wrapper {
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
|
|
.collapseButton {
|
|
margin-top: auto; /* Hace que el botón se empuje hacia abajo */
|
|
margin-bottom: 16px; /* ← Agrega separación del borde inferior */
|
|
|
|
}
|
|
|
|
.aside {
|
|
flex: 0 0 60px;
|
|
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));
|
|
}
|
|
|
|
.mainLink {
|
|
width: 44px;
|
|
height: 44px;
|
|
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-blue-light);
|
|
color: var(--mantine-color-blue-light-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.title {
|
|
font-family:
|
|
Greycliff CF,
|
|
var(--mantine-font-family);
|
|
margin-bottom: var(--mantine-spacing-xl);
|
|
background-color: var(--mantine-color-body);
|
|
padding: var(--mantine-spacing-md);
|
|
padding-top: 18px;
|
|
height: 60px;
|
|
border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
|
|
}
|
|
|
|
.logo {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
height: 60px;
|
|
padding-top: var(--mantine-spacing-md);
|
|
border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
|
|
margin-bottom: var(--mantine-spacing-xl);
|
|
}
|
|
|
|
.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: 500;
|
|
height: 44px;
|
|
line-height: 44px;
|
|
|
|
&: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 {
|
|
border-left-color: var(--mantine-color-blue-filled);
|
|
background-color: var(--mantine-color-blue-filled);
|
|
color: var(--mantine-color-white);
|
|
}
|
|
}
|
|
} |