Files
GoMFT/static/css/vendor/fullcalendar.css
T
StarFleetCPTN 37d507ade6 feat: Implement calendar view for scheduled jobs
- Added a new calendar view to display scheduled jobs for the next two months.
- Introduced components for generating calendar events from job data.
- Integrated FullCalendar for enhanced calendar functionality.
- Updated routing to include a new endpoint for the calendar view.
- Enhanced layout to include a link to the calendar in the navigation.
- Added necessary CSS for FullCalendar styling and functionality.
- Included tooltips for event details and filtering options for job visibility.
2025-04-13 08:49:00 -07:00

255 lines
3.9 KiB
CSS

/* FullCalendar Basic Styles */
.fc {
display: flex;
flex-direction: column;
font-size: 1em;
max-width: 100%;
}
.fc-view-harness {
flex-grow: 1;
position: relative;
}
.fc-scrollgrid {
border-collapse: collapse;
width: 100%;
}
.fc-scrollgrid, .fc-scrollgrid table {
table-layout: fixed;
}
.fc-scrollgrid, .fc-scrollgrid table {
border-style: solid;
border-color: #ddd;
border-width: 1px;
}
.fc-theme-standard td, .fc-theme-standard th {
border: 1px solid #ddd;
}
.fc-header-toolbar {
padding: 1em;
display: flex;
justify-content: space-between;
align-items: center;
}
.fc-toolbar-title {
font-size: 1.5em;
font-weight: bold;
}
.fc-button-group {
display: inline-flex;
}
.fc-button {
background-color: #f3f4f6;
border: 1px solid #d1d5db;
color: #374151;
padding: 0.5em 0.75em;
cursor: pointer;
font-size: 0.9em;
margin: 0;
border-radius: 0.25em;
}
.fc-button:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.fc-button:not(:first-child):not(:last-child) {
border-radius: 0;
border-left: none;
}
.fc-button:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: none;
}
.fc-button:hover {
background-color: #e5e7eb;
z-index: 1;
}
.fc-button-primary {
background-color: #3b82f6;
border-color: #2563eb;
color: #ffffff;
}
.fc-button-primary:hover {
background-color: #2563eb;
}
.fc-button-active {
background-color: #1d4ed8;
border-color: #1e40af;
color: #ffffff;
z-index: 2;
}
.fc-col-header-cell {
padding: 0.5em;
background-color: #f9fafb;
font-weight: bold;
}
.fc-col-header-cell-cushion {
display: block;
padding: 0.25em 0;
text-decoration: none;
color: #374151;
}
.fc-scrollgrid-sync-inner {
text-align: center;
}
.fc-daygrid-day-top {
padding: 0.5em;
text-align: right;
}
.fc-daygrid-day-number {
font-size: 0.9em;
color: #374151;
text-decoration: none;
font-weight: 500;
}
.fc-daygrid-day-events {
min-height: 2em;
position: relative;
padding: 0 0.5em;
}
.fc-daygrid-event {
margin-bottom: 1px;
font-size: 0.85em;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fc-h-event {
display: block;
border: 1px solid #3b82f6;
background-color: #3b82f6;
color: #fff;
margin-top: 1px;
margin-bottom: 1px;
padding: 2px 4px;
border-radius: 3px;
}
.fc-h-event .fc-event-main {
color: #fff;
}
.fc-day-today {
background-color: rgba(59, 130, 246, 0.1);
}
.fc-theme-standard .fc-list {
border: 1px solid #ddd;
}
.fc-list-day {
background-color: #f9fafb;
}
.fc-list-day-cushion {
padding: 0.75em 1em;
}
.fc-list-event {
cursor: pointer;
}
.fc-list-event:hover td {
background-color: #f3f4f6;
}
.fc-list-event-time {
white-space: nowrap;
width: 1px;
text-align: right;
}
.fc-list-event-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Dark mode */
.dark .fc {
color: #e5e7eb;
}
.dark .fc-scrollgrid, .dark .fc-scrollgrid table {
border-color: #4b5563;
}
.dark .fc-theme-standard td, .dark .fc-theme-standard th {
border-color: #4b5563;
}
.dark .fc-button {
background-color: #374151;
border-color: #4b5563;
color: #e5e7eb;
}
.dark .fc-button:hover {
background-color: #4b5563;
}
.dark .fc-button-primary {
background-color: #3b82f6;
border-color: #2563eb;
color: #ffffff;
}
.dark .fc-button-primary:hover {
background-color: #2563eb;
}
.dark .fc-button-active {
background-color: #1d4ed8;
border-color: #1e40af;
color: #ffffff;
}
.dark .fc-col-header-cell {
background-color: #1f2937;
}
.dark .fc-col-header-cell-cushion {
color: #e5e7eb;
}
.dark .fc-day-today {
background-color: rgba(59, 130, 246, 0.15) !important;
}
.dark .fc-daygrid-day-number {
color: #e5e7eb;
}
.dark .fc-list-day {
background-color: #1f2937;
}
.dark .fc-list-event:hover td {
background-color: #374151;
}