poprhythm
840a8edbf1
This commit updates the Calendar component to include a new method for generating tooltips for both events and meetings, enhancing user interaction by providing contextual information. Additionally, CSS styles are introduced for calendar event items, improving their appearance and hover effects. These changes contribute to a more informative and visually appealing calendar experience, aligning with the ongoing efforts to refine the user interface.
297 lines
6.3 KiB
CSS
297 lines
6.3 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);
|
|
margin: 2px 0;
|
|
min-height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.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);
|
|
} |