Files
router-lists-ui/frontend/src/App.css
T

77 lines
1.5 KiB
CSS

/* Custom styles for S3 Lists Manager */
/* Most styles are now provided by @tabler/core */
/* Custom avatar background */
.avatar {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e9ecef"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
}
/* Custom animations */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeIn 0.3s ease-out;
}
/* Custom focus states */
.btn:focus,
.form-control:focus,
.nav-link:focus {
outline: 2px solid var(--tblr-primary);
outline-offset: 2px;
}
/* Loading states */
.btn:disabled {
transform: none !important;
box-shadow: none !important;
}
/* Spinning animation for loading icons */
.spin {
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Custom responsive adjustments */
@media (max-width: 992px) {
.page-wrapper {
margin-left: 0;
}
}
/* Custom dark mode support */
@media (prefers-color-scheme: dark) {
.card {
background-color: var(--tblr-dark);
border-color: var(--tblr-border-color);
}
.navbar {
background-color: var(--tblr-dark);
border-color: var(--tblr-border-color);
}
.navbar-vertical {
background-color: var(--tblr-dark);
border-color: var(--tblr-border-color);
}
}