.full-calendar { --fc-border-color: theme("colors.slate.200"); .fc-toolbar { @media (max-width: calc(theme("screens.lg") - 1px)) { flex-direction: column; } .fc-toolbar-chunk { &:nth-child(1) { order: 3; } &:nth-child(2) { order: 1; } &:nth-child(3) { order: 2; @media (max-width: calc(theme("screens.lg") - 1px)) { margin-top: theme("spacing.3"); margin-bottom: theme("spacing.3"); } .fc-button-group { @media (max-width: calc(theme("screens.sm") - 1px)) { display: block; } button { width: theme("spacing.20"); @media (max-width: calc(theme("screens.sm") - 1px)) { width: 100%; border-radius: theme("borderRadius.md"); margin-bottom: theme("spacing.2"); } } } } } .fc-toolbar-title { font-size: theme("fontSize.lg"); font-weight: theme("fontWeight.medium"); } } .fc-toolbar-chunk .fc-button-primary { &:first-child { border-top-left-radius: theme("borderRadius.md"); border-bottom-left-radius: theme("borderRadius.md"); } &:last-child { border-top-right-radius: theme("borderRadius.md"); border-bottom-right-radius: theme("borderRadius.md"); } } .fc-theme-standard { .fc-scrollgrid, th, td, .fc-list { border-color: theme("colors.slate.200" / 60%); } } table { border-radius: theme("borderRadius.md"); tr th .fc-scrollgrid-sync-inner { padding-top: theme("spacing.3"); padding-bottom: theme("spacing.3"); } } .fc-daygrid-event-harness { margin-left: theme("spacing.5"); margin-right: theme("spacing.5"); } .fc-h-event { background-color: theme("colors.primary"); border-color: theme("colors.primary"); border-radius: theme("borderRadius.md"); } .fc-event-title-container { padding: theme("spacing.1") theme("spacing.2"); font-size: theme("fontSize.xs"); } .fc-daygrid-event { font-size: theme("fontSize.xs"); } .fc-daygrid-event-dot { border-color: theme("colors.primary"); margin-right: theme("spacing.2"); } .fc-daygrid-dot-event .fc-event-title { font-weight: theme("fontWeight.medium"); } .fc-col-header-cell-cushion { font-weight: theme("fontWeight.medium"); } &.fc .fc-view-harness { @media (max-width: calc(theme("screens.sm") - 1px)) { min-height: 400px !important; } } &.fc .fc-daygrid-day-frame { @media (max-width: calc(theme("screens.sm") - 1px)) { min-height: 60px !important; } } .fc-daygrid-more-link { font-size: theme("fontSize.sm"); @media (max-width: calc(theme("screens.md") - 1px)) { color: theme("colors.slate.500"); font-size: 10px; } @media (max-width: calc(theme("screens.sm") - 1px)) { padding-left: 0; display: block; margin-top: calc(theme("spacing.3") * -1); leading: 10px; } } .fc-daygrid-day-bottom { padding-top: theme("spacing.1"); } .fc-day-other { background-color: theme("colors.slate.100" / 50%); } .fc-button-primary { font-weight: theme("fontWeight.normal") !important; display: inline-block !important; border: 1px solid theme("colors.slate.200" / 60%) !important; color: theme("colors.slate.500") !important; background-color: transparent !important; text-transform: capitalize !important; padding: 0.4em 0.65em !important; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 200ms; box-shadow: theme("boxShadow.sm"); align-items: center; justify-content: center; border-radius: theme("borderRadius.md"); cursor: pointer; &:focus { box-shadow: theme("ringWidth.4"); --tw-ring-color: theme("colors.primary"); --tw-text-opacity: 0.2; } &:hover:not(:disabled) { --tw-background-opacity: 0.9; --tw-border-opacity: 0.9; } &:not(button) { text-align: center; } &:disabled { opacity: 0.7; cursor: not-allowed; } .fc-icon { font-size: 1.2em !important; } &:focus { box-shadow: none !important; } } .fc-button-primary:not(:disabled):active, .fc-button-primary:not(:disabled).fc-button-active { color: white !important; background-color: theme("colors.primary") !important; border-color: theme("colors.primary") !important; } .fc-list-day-cushion { background-color: theme("colors.slate.100" / 50%) !important; padding: 0.75rem 1.25rem !important; } .fc-list-event td { padding: theme("spacing.3") theme("spacing.5"); } .fc-list-event-dot { border-color: theme("colors.primary") !important; } .fc-event-time { padding-left: theme("spacing.[0.5]"); padding-right: theme("spacing.[0.5]"); font-size: 0.75rem !important; } .fc-daygrid-more-link { padding-left: theme("spacing.2"); } } .dark { .full-calendar { --fc-border-color: theme("colors.darkmode.400"); .fc-button-primary { background-color: theme("colors.darkmode.400") !important; border-color: theme("colors.darkmode.400") !important; } .fc-list-day-cushion { background-color: theme("colors.darkmode.400") !important; } .fc-event:hover td { border-color: theme("colors.darkmode.400") !important; background-color: theme("colors.darkmode.400") !important; } .fc-theme-standard { .fc-scrollgrid, th, td, .fc-list { border-color: theme("colors.darkmode.400"); } } .fc-day-other { background-color: theme("colors.darkmode.700"); } .fc-button-primary:focus { --tw-ring-color: theme("colors.slate.700"); --tw-ring-opacity: 0.5; transition-property: none; } } }