poprhythm
46836fde2e
This commit updates the Calendar component by changing the default start time for meetings to 9:00 AM and the end time to 5:01 PM, ensuring better alignment with typical work hours. Additionally, the styling of calendar event items is refined by removing fixed width and height properties, allowing for more flexible rendering. These changes enhance the usability and visual presentation of the calendar feature, contributing to an improved user experience.
307 lines
6.5 KiB
CSS
307 lines
6.5 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 {
|
|
justify-content: flex-end;
|
|
margin-top: 0.5rem;
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* Hide button text on small screens by setting font-size to 0 */
|
|
.page-header-actions .mud-button {
|
|
min-width: auto;
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
font-size: 0;
|
|
}
|
|
|
|
/* Restore icon size - MudBlazor uses material-icons font */
|
|
.page-header-actions .mud-button .mud-icon-root {
|
|
font-size: 1.5rem !important;
|
|
display: inline-flex !important;
|
|
}
|
|
|
|
.page-header-actions .mud-button .mud-icon-root .mud-icon,
|
|
.page-header-actions .mud-button .mud-icon-root .material-icons {
|
|
font-size: 1.5rem !important;
|
|
width: 1.5rem !important;
|
|
height: 1.5rem !important;
|
|
line-height: 1.5rem !important;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
/* Markdown content styling */
|
|
.markdown-content {
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.markdown-content h1,
|
|
.markdown-content h2,
|
|
.markdown-content h3,
|
|
.markdown-content h4,
|
|
.markdown-content h5,
|
|
.markdown-content h6 {
|
|
margin-top: 1.5em;
|
|
margin-bottom: 0.5em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.markdown-content h1 {
|
|
font-size: 2em;
|
|
border-bottom: 1px solid var(--mud-palette-divider);
|
|
padding-bottom: 0.3em;
|
|
}
|
|
|
|
.markdown-content h2 {
|
|
font-size: 1.5em;
|
|
border-bottom: 1px solid var(--mud-palette-divider);
|
|
padding-bottom: 0.3em;
|
|
}
|
|
|
|
.markdown-content p {
|
|
margin: 1em 0;
|
|
}
|
|
|
|
.markdown-content ul,
|
|
.markdown-content ol {
|
|
margin: 1em 0;
|
|
padding-left: 2em;
|
|
}
|
|
|
|
.markdown-content li {
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
.markdown-content a {
|
|
color: var(--mud-palette-primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.markdown-content a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.markdown-content code {
|
|
background-color: var(--mud-palette-background-grey);
|
|
padding: 0.2em 0.4em;
|
|
border-radius: 3px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.markdown-content pre {
|
|
background-color: var(--mud-palette-background-grey);
|
|
padding: 1em;
|
|
border-radius: 4px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.markdown-content pre code {
|
|
background-color: transparent;
|
|
padding: 0;
|
|
}
|
|
|
|
.markdown-content blockquote {
|
|
border-left: 4px solid var(--mud-palette-primary);
|
|
padding-left: 1em;
|
|
margin: 1em 0;
|
|
color: var(--mud-palette-text-secondary);
|
|
}
|
|
|
|
.markdown-content table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
margin: 1em 0;
|
|
}
|
|
|
|
.markdown-content table th,
|
|
.markdown-content table td {
|
|
border: 1px solid var(--mud-palette-divider);
|
|
padding: 0.5em;
|
|
text-align: left;
|
|
}
|
|
|
|
.markdown-content table th {
|
|
background-color: var(--mud-palette-background-grey);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.markdown-content img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/* Note color classes - pastel background colors */
|
|
.note-color-0 {
|
|
background-color: #e3f2fd;
|
|
}
|
|
|
|
.note-color-1 {
|
|
background-color: #fff9e6;
|
|
}
|
|
|
|
.note-color-2 {
|
|
background-color: #f3e5f5;
|
|
}
|
|
|
|
/* Calendar event item styling */
|
|
.calendar-event-item {
|
|
background-color: var(--mud-palette-primary);
|
|
color: var(--mud-palette-primary-text);
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 0.875rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s ease, box-shadow 0.2s ease;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
display: block !important;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Ensure tooltip wrapper doesn't constrain width or height and adds spacing */
|
|
.event-calendar .mud-tooltip-root {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
padding: 2px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.calendar-event-item:hover {
|
|
background-color: var(--mud-palette-primary-darken);
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
|
|
}
|
|
|
|
.calendar-event-item:active {
|
|
background-color: var(--mud-palette-primary-darken);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
} |