lenhanphung
362 lines
7.5 KiB
Stylus
362 lines
7.5 KiB
Stylus
/* Custom main calendar view */
|
||
.fc-theme-standard td,
|
||
.fc-theme-standard th
|
||
border 1px solid #B5B7C033
|
||
|
||
th.fc-col-header-cell.fc-day
|
||
border-left 0
|
||
|
||
a.fc-timegrid-axis-cushion
|
||
color #243b55
|
||
text-align center
|
||
font-family Roboto
|
||
font-size 12.507px
|
||
font-style normal
|
||
font-weight 400
|
||
line-height 18.76px
|
||
letter-spacing 0.391px
|
||
|
||
/* Slot label visibility transitions */
|
||
.fc-timegrid-slot-label
|
||
transition opacity 0.3s ease-in-out
|
||
|
||
.fc-daygrid-day-top small
|
||
color #8c9caf
|
||
font-size 14px
|
||
font-style normal
|
||
font-weight 500
|
||
line-height 20px
|
||
letter-spacing 0.25px
|
||
font-family "Inter", sans-serif
|
||
|
||
.fc-daygrid-day-top .fc-daygrid-day-number,
|
||
span.fc-daygrid-day-number
|
||
color #243b55
|
||
margin 0 6px 0 0
|
||
font-family Roboto
|
||
font-size 28px
|
||
font-style normal
|
||
font-weight 400
|
||
line-height 36px
|
||
position relative
|
||
width 48px
|
||
line-height 39px
|
||
|
||
.fc-daygrid-day-frame .fc-daygrid-day-top .fc-daygrid-day-number
|
||
font-family Inter
|
||
font-size 12px
|
||
font-weight 500
|
||
line-height 16px
|
||
width 100%
|
||
text-align center
|
||
padding 0
|
||
|
||
.fc-daygrid-day-frame span.fc-daygrid-day-number:after
|
||
width 25px
|
||
height 25px
|
||
top -6px
|
||
left -6px
|
||
|
||
.fc-daygrid-day-top .fc-daygrid-day-number:after,
|
||
span.fc-daygrid-day-number:after
|
||
content ""
|
||
z-index -1
|
||
border-radius 50%
|
||
width 45px
|
||
height 45px
|
||
position absolute
|
||
top 1px
|
||
left 1px
|
||
transition background-color 0.3s ease
|
||
|
||
span.fc-daygrid-day-number.current-date
|
||
color #fff
|
||
|
||
span.fc-daygrid-day-number.current-date:after
|
||
background-color #f67e35
|
||
|
||
td.fc-timegrid-slot.fc-timegrid-slot-label.fc-scrollgrid-shrink,
|
||
td.fc-timegrid-slot.fc-timegrid-slot-label.fc-timegrid-slot-minor
|
||
border 0
|
||
|
||
th.fc-timegrid-axis.fc-scrollgrid-shrink
|
||
border 0
|
||
border-right 1px solid #B5B7C033
|
||
|
||
.fc .fc-timegrid-axis-cushion
|
||
min-width 80px
|
||
max-width 80px
|
||
padding 0
|
||
text-align left
|
||
font-family Roboto
|
||
font-size 12.507px
|
||
font-style normal
|
||
font-weight 400
|
||
line-height 18.76px
|
||
padding 0 0 0 10px
|
||
|
||
.fc .fc-timegrid-divider
|
||
display none
|
||
height 0
|
||
|
||
.fc-timegrid-slot-label-cushion
|
||
color #aea9b1
|
||
font-family Roboto
|
||
font-size 14px
|
||
font-style normal
|
||
font-weight 400
|
||
line-height 20px
|
||
letter-spacing 0.25px
|
||
|
||
th.fc-col-header-cell.fc-day
|
||
border-right 0
|
||
border-bottom 0
|
||
|
||
.fc .fc-scrollgrid
|
||
border 0
|
||
|
||
.fc .fc-timegrid-slot-label
|
||
justify-content flex-end
|
||
|
||
.fc .fc-timegrid-slot-label .fc-timegrid-slot-label-frame
|
||
position relative
|
||
transform translate(-15px, -12px)
|
||
|
||
/* .fc tbody tr:first-of-type .fc-timegrid-slot-label .fc-timegrid-slot-label-frame
|
||
display none */
|
||
|
||
.fc .fc-timegrid-slot-label .fc-timegrid-slot-label-frame::after
|
||
content ""
|
||
z-index -1
|
||
background-color #B5B7C033
|
||
width 10px
|
||
height 1px
|
||
position absolute
|
||
top 9.5px
|
||
right -15px
|
||
|
||
.fc .fc-timegrid-col.fc-day-today,
|
||
.fc .fc-daygrid-day.fc-day-today
|
||
background-color #fff
|
||
|
||
.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events
|
||
min-height 36px
|
||
|
||
.fc .fc-daygrid-body-natural .fc-daygrid-day-events
|
||
margin-bottom 0
|
||
|
||
.fc .fc-timegrid-now-indicator-line
|
||
z-index 5
|
||
border 0 solid #f67e35
|
||
border-top-width 2px
|
||
position absolute
|
||
left 0
|
||
right 0
|
||
|
||
.fc .fc-timegrid-now-indicator-line::after
|
||
content ""
|
||
z-index 5
|
||
background-color #f67e35
|
||
border-radius 50%
|
||
width 10px
|
||
height 10px
|
||
position absolute
|
||
top -6px
|
||
left -5px
|
||
|
||
.fc .fc-timegrid-now-indicator-arrow
|
||
display block !important
|
||
width auto
|
||
height auto
|
||
position relative
|
||
border 0
|
||
|
||
.fc .fc-timegrid-now-indicator-arrow::before,
|
||
.now-time-label
|
||
content attr(data-time)
|
||
color #f67e35
|
||
white-space nowrap
|
||
font-family Roboto, sans-serif
|
||
font-weight 600
|
||
position absolute
|
||
top -2px
|
||
left 25px
|
||
font-size 14px
|
||
letter-spacing 0.25px
|
||
|
||
.timegrid-slot-label-hidden
|
||
opacity 0.2
|
||
|
||
.fc-day-today .fc-timegrid-now-indicator-container
|
||
overflow unset
|
||
|
||
.fc .fc-timegrid-slot
|
||
height auto
|
||
min-height 20px !important
|
||
|
||
.fc .fc-timegrid-slot-label
|
||
display flex
|
||
align-items flex-start
|
||
padding-top 2px
|
||
height 100%
|
||
|
||
tr:has(> td.fc-timegrid-divider.fc-cell-shaded)
|
||
display none
|
||
|
||
.fc .fc-scrollgrid-section td
|
||
border-bottom 0
|
||
|
||
.fc .fc-scrollgrid-section td .fc-daygrid-day-frame
|
||
border-bottom 1px solid #B5B7C033
|
||
|
||
.fc-dayGridMonth-view .fc-scrollgrid-section td .fc-daygrid-day-frame
|
||
border-bottom none
|
||
|
||
th.fc-col-header-cell.fc-day
|
||
cursor pointer
|
||
|
||
th.fc-col-header-cell.fc-day:hover .fc-daygrid-day-number:not(.current-date)::after
|
||
background-color #b8c1cc56
|
||
|
||
/* Hover effects for month view using CSS */
|
||
.fc-daygrid-day:hover
|
||
background-color #b8c1cc1a !important
|
||
transition background-color 0.3s ease
|
||
|
||
/* Hover effects for week and day views using JavaScript */
|
||
.hoverable-day-cell
|
||
transition background-color 0.3s ease
|
||
|
||
.hour-highlight
|
||
transition background-color 0.3s ease
|
||
background-color #b8c1cc1a !important
|
||
position absolute
|
||
left 0
|
||
right 0
|
||
pointer-events none
|
||
z-index 1
|
||
|
||
.fc-timegrid-slot-label
|
||
background-color #fff !important
|
||
|
||
thead .fc-scroller,
|
||
tbody > tr.fc-scrollgrid-section:first-of-type .fc-scroller
|
||
overflow hidden !important
|
||
|
||
.navigation-controls
|
||
margin-right 40px
|
||
|
||
.fc .fc-timegrid-slot-minor
|
||
border-top-style: none
|
||
|
||
/* FullCalendar "more" popover restyle */
|
||
|
||
.fc-more-popover
|
||
z-index 700 !important
|
||
border-radius 8px
|
||
background #fff
|
||
overflow hidden
|
||
font-family Inter, sans-serif
|
||
width 244px
|
||
box-shadow 0 4px 16px rgba(0,0,0,0.1)
|
||
|
||
.fc-popover-header
|
||
background #FCFCFC
|
||
display flex
|
||
justify-content space-between
|
||
align-items center
|
||
width 244px
|
||
height 40px
|
||
padding 12px
|
||
border-bottom 1px solid #eee
|
||
|
||
.fc-popover-title
|
||
font-weight 500
|
||
font-size 14px
|
||
color #243B55
|
||
line-height 20px
|
||
letter-spacing 0.1px
|
||
|
||
.fc-popover-close
|
||
color #605D62
|
||
cursor pointer
|
||
|
||
.fc-popover-body
|
||
max-height 208px
|
||
overflow auto
|
||
padding 0 !important
|
||
background #fff
|
||
|
||
.MuiCard-root
|
||
box-shadow none !important
|
||
border none !important
|
||
border-radius 8px
|
||
background-color transparent !important
|
||
margin 2px 6px
|
||
transition background 0.15s ease
|
||
|
||
|
||
&:hover
|
||
background #f7f7f8
|
||
|
||
.MuiCardHeader-root
|
||
padding 4px 8px
|
||
.MuiTypography-root
|
||
white-space nowrap
|
||
overflow hidden
|
||
text-overflow ellipsis
|
||
font-family: Inter !important
|
||
font-weight: 400 !important
|
||
font-style: Regular !important
|
||
font-size: 14px !important
|
||
line-height: 20px !important
|
||
letter-spacing: 0.25px !important
|
||
vertical-align: middle !important
|
||
color #1C1B1F !important
|
||
.compactStartTime
|
||
display none
|
||
|
||
.MuiCardContent-root
|
||
padding 0 8px 4px 8px
|
||
font-size 12px
|
||
color #6D7885
|
||
line-height 16px
|
||
|
||
/* Hide FullCalendar’s extra margin block */
|
||
.fc-more-popover-misc
|
||
height 0 !important
|
||
margin 0 !important
|
||
padding 0 !important
|
||
|
||
// Custom event chips
|
||
.fc-event
|
||
background-color transparent
|
||
border none
|
||
width 95%
|
||
height 100%
|
||
align-content left
|
||
.fc-event-main
|
||
display flex
|
||
flex-direction row
|
||
align-items center
|
||
|
||
.fc-timegrid-event-harness-inset .fc-timegrid-event
|
||
box-shadow none
|
||
|
||
/* Hide 00:00 time slot label */
|
||
.fc-timegrid-slot-label[data-time="00:00:00"] .fc-timegrid-slot-label-cushion,
|
||
.fc-timegrid-slot-label[data-time="00:00:00"] .fc-scrollgrid-shrink-cushion,
|
||
.fc-timegrid-slot-label[data-time="00:00:00"] .fc-timegrid-slot-label-frame::after
|
||
opacity 0
|
||
|
||
.visually-hidden
|
||
border 0
|
||
clip rect(0 0 0 0)
|
||
height 1px
|
||
margin -1px
|
||
overflow hidden
|
||
padding 0
|
||
position absolute
|
||
width 1px
|
||
whiteSpace nowrap
|