poprhythm
87db67f979
Updated the MudPaper component styling in multiple files to use a consistent padding class of "pa-3 pa-md-6" instead of "pa-6". This change enhances the visual consistency of the UI across the Calendar, Events, Students, and Teams components, improving the overall user experience.
131 lines
2.7 KiB
CSS
131 lines
2.7 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;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.page-header-actions {
|
|
width: 100%;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.page-header > div > div:first-of-type {
|
|
flex-direction: column;
|
|
align-items: flex-start !important;
|
|
}
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.form-actions {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.form-actions > * {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
/* Toolbar title responsive styling */
|
|
.appbar-title {
|
|
max-width: calc(100vw - 150px);
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.appbar-title {
|
|
font-size: 0.875rem;
|
|
max-width: calc(100vw - 120px);
|
|
}
|
|
|
|
/* Reduce base font size on mobile */
|
|
body {
|
|
font-size: 0.875rem;
|
|
}
|
|
} |