125 lines
2.1 KiB
CSS
125 lines
2.1 KiB
CSS
/* Custom styles for CMC Sales */
|
|
|
|
/* Loading spinner */
|
|
.htmx-indicator {
|
|
display: none;
|
|
}
|
|
|
|
.htmx-request .htmx-indicator {
|
|
display: inline;
|
|
}
|
|
|
|
.htmx-request.htmx-indicator {
|
|
display: inline;
|
|
}
|
|
|
|
/* Smooth transitions */
|
|
.htmx-swapping {
|
|
opacity: 0;
|
|
transition: opacity 200ms ease-out;
|
|
}
|
|
|
|
.htmx-settling {
|
|
opacity: 1;
|
|
transition: opacity 200ms ease-in;
|
|
}
|
|
|
|
/* Table hover effects */
|
|
.table.is-hoverable tbody tr:hover {
|
|
background-color: #f5f5f5;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Form improvements */
|
|
.field:not(:last-child) {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
/* Notification animations */
|
|
.notification {
|
|
animation: slideIn 300ms ease-out;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
transform: translateY(-20px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Breadcrumb improvements */
|
|
.breadcrumb {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
/* Card hover effects */
|
|
.card:hover {
|
|
box-shadow: 0 8px 16px rgba(10,10,10,.1);
|
|
transition: box-shadow 200ms ease;
|
|
}
|
|
|
|
/* Button loading state */
|
|
.button.is-loading::after {
|
|
border-color: transparent transparent #fff #fff !important;
|
|
}
|
|
|
|
/* Responsive improvements */
|
|
@media screen and (max-width: 768px) {
|
|
.level-left,
|
|
.level-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.level-right {
|
|
margin-top: 1rem;
|
|
}
|
|
}
|
|
|
|
/* Footer stick to bottom */
|
|
body {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.section {
|
|
flex: 1;
|
|
}
|
|
|
|
/* Search box improvements */
|
|
.control.has-icons-left .input:focus ~ .icon {
|
|
color: #3273dc;
|
|
}
|
|
|
|
/* Table action buttons */
|
|
.table td .buttons {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Error states */
|
|
.input.is-danger:focus {
|
|
border-color: #ff3860;
|
|
box-shadow: 0 0 0 0.125em rgba(255,56,96,.25);
|
|
}
|
|
|
|
/* Simple CSS loader */
|
|
.loader {
|
|
border: 2px solid #f3f3f3;
|
|
border-top: 2px solid #3273dc;
|
|
border-radius: 50%;
|
|
width: 16px;
|
|
height: 16px;
|
|
animation: spin 1s linear infinite;
|
|
display: inline-block;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
} |