Sidebars - animaciones

This commit is contained in:
2025-07-18 12:21:26 -06:00
parent 1900091b99
commit 37dcfffd7b
69 changed files with 1282 additions and 710 deletions

View File

@@ -62,6 +62,27 @@
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
.btn-animated:hover::before { left: 100%; }
.alert { border: none; border-radius: 12px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); }
.btn-indigo { background-color: #6610f2; color: white; }
.btn-indigo:hover { background-color: #520dc2; color: white; }
.text-indigo { color: #520dc2; }
.btn-orange { background-color: orangeRed; color: white; }
.btn-orange:hover { background-color: #ff3600; color: white; }
.text-orange { color: orangeRed; }
.btn-teal { background-color: #4dd4ac ; color: white; }
.btn-teal:hover { background-color: #20c997; color: black; }
.text-teal { color: #4dd4ac; }
.btn-lime { background-color: #84cc16; color: white; }
.text-lime { color: #84cc16; }
.btn-lime:hover { background-color: #65a30d; color: black; }
.btn-cyan { background-color: #06b6d4; color: white; }
.text-cyan { color: #06b6d4; }
.btn-cyan:hover { background-color: #0891b2; color: white; }
.btn-violet { background-color: #8b5cf6; color: white; }
.text-violet { color: #8b5cf6; }
.btn-violet:hover { background-color: #7c3aed; color: white; }
.btn-lila { background-color: #c4b5fd; /* violeta claro */ color: white; border: none; }
.btn-lila:hover { background-color: #a78bfa; /* tono ligeramente más fuerte */ color: white; }
.text-lila { color: #c4b5fd; }
</style>
</head>
<body>
@@ -74,14 +95,14 @@
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.1s;">
<div class="card shadow-sm p-3 card-hover position-relative h-100">
<div class="card-body p-0 d-flex flex-column">
<h5 class="text-primary mb-3">
<h5 class="text-teal mb-3">
<i class="fas fa-bell me-2"></i>
Notificaciones
</h5>
<p class="text-muted small flex-grow-1 mb-4">
Gestiona y configura las notificaciones del sistema para mantenerte informado.
</p>
<button class="btn btn-primary btn-sm mt-auto w-100 btn-animated"
<button class="btn btn-teal btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/preferencias/notificaciones')">
<i class="fas fa-cog me-2"></i>
Configurar Notificaciones
@@ -94,14 +115,14 @@
<div class="col-md-4 animate__animated animate__fadeInUp" style="animation-delay: 0.2s;">
<div class="card shadow-sm p-3 card-hover position-relative h-100">
<div class="card-body p-0 d-flex flex-column">
<h5 class="text-success mb-3">
<h5 class="text-lime mb-3">
<i class="fas fa-list me-2"></i>
Catálogos
</h5>
<p class="text-muted small flex-grow-1 mb-4">
Personaliza la visualización de tus catálogos y organiza tu contenido.
</p>
<button class="btn btn-success btn-sm mt-auto w-100 btn-animated"
<button class="btn btn-lime btn-sm mt-auto w-100 btn-animated"
onclick="navigateWithAnimation(this, '/IMPORTADORES/preferencias/catalogos')">
<i class="fas fa-palette me-2"></i>
Personalizar Catálogos