style: añadir media queries para responsividad y corregir errores de sintaxis
This commit is contained in:
@@ -262,62 +262,134 @@ body {
|
||||
|
||||
.drag-item:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.drag-item:hover {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
.drag-item:hover {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.drag-item.dragging {
|
||||
opacity: 0.5;
|
||||
background: #f1f5f9;
|
||||
}
|
||||
.drag-item.dragging {
|
||||
opacity: 0.5;
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
margin-right: 1rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
.drag-handle {
|
||||
margin-right: 1rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
/* Alerts */
|
||||
.alert {
|
||||
/* Alerts */
|
||||
.alert {
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
border: 1px solid #bbf7d0;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #fecaca;
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* Media Queries */
|
||||
@media (max-width: 768px) {
|
||||
.navbar {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
border: 1px solid #bbf7d0;
|
||||
.nav-menu {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #fecaca;
|
||||
.nav-menu div {
|
||||
border-left: none !important;
|
||||
border-top: 1px solid var(--border);
|
||||
padding-top: 1rem;
|
||||
padding-left: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
.text-center {
|
||||
text-align: center;
|
||||
.container {
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 0.5rem;
|
||||
.card-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
.card-header .btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
.auth-card {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 0.75rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
/* Modal responsiveness */
|
||||
.modal-content {
|
||||
margin: 1rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.card {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.6rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user