pianello-api/resources/css/components/_full-calendar.css

219 lines
6.9 KiB
CSS
Raw Normal View History

.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;
}
}
}