Files
chapter-organizer/WebApp/wwwroot/app.css
T

377 lines
8.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;
}
.state-schedule-table {
width: 100%;
}
.state-schedule-table th,
.state-schedule-table td,
.state-schedule-table table th,
.state-schedule-table table td {
vertical-align: top !important;
}
.combined-sub-event {
padding-left: 1.5rem !important;
}
@media print {
.state-schedule-handout {
margin-left: -30pt !important;
margin-right: -12pt !important;
padding-left: 0 !important;
padding-right: 0 !important;
width: calc(100% + 42pt) !important;
max-width: none !important;
}
.state-schedule-handout .mud-paper,
.state-schedule-handout .mud-table-container,
.state-schedule-handout .mud-table {
box-shadow: none !important;
}
.state-schedule-table,
.state-schedule-table table {
width: 100%;
border-collapse: collapse;
}
.state-schedule-table th,
.state-schedule-table td,
.state-schedule-table table th,
.state-schedule-table table td {
vertical-align: top;
padding: 4px 8px;
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-bottom: none !important;
}
.state-schedule-table thead th,
.state-schedule-table table thead th {
border-bottom: 2px solid #000 !important;
}
.state-schedule-table tbody td,
.state-schedule-table table tbody td {
border-bottom: 1px solid #000 !important;
}
.state-schedule-table tbody tr:last-child td,
.state-schedule-table table tbody tr:last-child td {
border-bottom: none !important;
}
.state-schedule-table .combined-sub-event,
.state-schedule-table table .combined-sub-event {
padding-left: 1.5rem !important;
}
}
.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);
}