Files
chapter-organizer/WebApp/wwwroot/app.css
T
poprhythm cb362d6754 Add micro-interactions and transitions for page and table elements
Wrap page content in a new div for animation effects and implement fade-in transitions for table rows.
2025-12-27 10:35:40 -05:00

90 lines
1.9 KiB
CSS

@media print {
/* body .container {
max-width: 1200px;
}*/
div.mud-main-content > div {
font-size: 11px;
margin: 30pt;
color: #000;
background-color: #fff;
}
.no-print {
display: none !important;
}
.nobrk {
break-inside: avoid;
}
.pagebreak {
page-break-after: always;
}
}
.ranked-event-column > div:only-child{
height:100%;
}
.ranked-event-column > div > div:nth-child(1) > .mud-card-content { background-color: #dd7e6b; }
.ranked-event-column > div > div:nth-child(2) > .mud-card-content { background-color: #ea9999; }
.ranked-event-column > div > div:nth-child(3) > .mud-card-content { background-color: #f9cb9c; }
.ranked-event-column > div > div:nth-child(4) > .mud-card-content { background-color: #ffe599; }
.ranked-event-column > div > div:nth-child(5) > .mud-card-content { background-color: #fff2cc; }
.ranked-event-column > div > div:nth-child(6) > .mud-card-content { background-color: #fffaea; }
.event-rank-1 { background-color: #dd7e6b; }
.event-rank-2 { background-color: #ea9999; }
.event-rank-3 { background-color: #f9cb9c; }
.event-rank-4 { background-color: #ffe599; }
.event-rank-5 { background-color: #fff2cc; }
.event-rank-6 { background-color: #fffaea; }
.pre-wrap-text {
white-space: pre-wrap;
}
.page-header {
margin-bottom: 1.5rem;
}
.page-header-actions {
display: flex;
gap: 0.5rem;
align-items: center;
}
.form-actions {
display: flex;
gap: 0.5rem;
align-items: center;
margin-top: 1.5rem;
margin-bottom: 1rem;
}
.icon-button-hover-error:hover {
color: var(--mud-palette-error) !important;
}
/* Micro-interactions: Table row transitions */
.mud-table-row {
transition: background-color 0.2s ease;
}
/* Micro-interactions: Page transitions */
.page-enter {
animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}